핵심 요약
여기어때의 Figma 플러그인 UI 개발에서 경량화된 기술 스택과 UX 중심의 아키텍처 재구성을 통해 반응성 및 유지보수성을 개선했습니다.
구현 방법
- 프레임워크/도구: Preact, @preact/signals, @tanstack/react-query, goober, create-figma-plugin
- 레이아웃/라우팅: 상단 지역 탭, 하단 페이지 타입 탭으로 구성된 미니 라우팅, Always-Mount 방식으로 페이지 상태를 유지
- IPC 구조: UI 프로세스와 Main 프로세스 간 postMessage 기반 통신으로 데이터 전달
주요 결과
- 필터 기반 API 요청 최적화 및 React Query 캐시 활용으로 API 호출 최소화
- 프록시 서버 연동 가능성 탐색 및 UX 흐름 개선으로 작업 효율성 향상
