여기쏙 — Figma plugin 제작기 : 2. UI

개발 전 UX 점검 및 기술 스펙 설계

• Figma 플러그인 '여기쏙' 개발 전, 사용자 시나리오 기반 UX 점검을 통해 모호한 워딩 및 불필요한 정보 노출 등의 문제점을 발견하고 개선했습니다.
• 플러그인 환경의 성능 제약을 고려하여 리소스 최소화, 빠른 로딩, 낮은 유지보수 비용, 확장 가능성을 기준으로 가볍고 단순한 기술 스펙을 설계했습니다.
• Preact, Signals, goober 등 경량 라이브러리를 선택하고, React Query는 데이터 fetching 및 캐싱에만 활용하여 번들 크기와 로딩 속도를 최적화했습니다.

플러그인 UI 구조 및 동작 방식

• 지역 × 페이지 유형 기반의 미니 라우터를 구성하여 URL 라우팅 없이 상태만으로 화면을 전환하도록 설계했습니다.
• Always-Mount 방식을 채택하여 페이지 상태 유지, 빠른 화면 전환, 성능 부담 최소화로 플러그인 UX에 최적화했습니다.
• Figma 플러그인은 UI Process (화면)와 Main Process (Figma 문서 조작) 두 개의 프로세스로 동작하며, **IPC (postMessage)**를 통해 통신합니다.

필터 기반 UI 설계 및 API 연동

• 모든 탭은 필터 기반 UI로, 필터 상태를 한 곳에서 관리하여 API 요청 파라미터 및 최근 검색 저장 로직을 통합했습니다.
• React Query를 활용해 서버 데이터 기반 동적 필터를 구현하고, '적용' 버튼 기반 수동 트리거 및 캐시 재사용으로 API 호출을 최소화했습니다.
• API 호출 후 로 데이터를 전달하여 Figma 문서를 업데이트하는 구조를 따랐습니다.