여기쏙 — Figma plugin 제작기 : 2. UI
프론트엔드
여기쏙 — Figma plugin 제작기 : 2. UI
두줄요약
Figma 플러그인 UI를 가볍고 단순한 구조로 설계한 과정을 소개했습니다. 필터 상태, 캐시, 메시지 통신을 중심으로 실데이터 연동과 UX 개선을 정리했습니다.
핵심 내용
- Figma 플러그인 여기쏙의 UI 구조와 실데이터 연동 과정 정리
- 플러그인 환경에 맞춘 경량 기술 조합 선택과 미니 라우팅, 항상 마운트 방식 설계
- 필터 상태 중심의 데이터 조회, React Query 캐시 활용, UI와 Main 프로세스 간 메시지 통신 구조 설명
적용해볼 점
- 작은 도구일수록 번들 크기와 로딩 속도 중심의 기술 선택 필요
- 화면 전환이 잦은 플러그인 UI에서는 상태 보존형 렌더링이 유리
- 실제 서비스 필터 구조와 API 데이터를 맞추면 디자인 적용과 유지보수 효율 향상