이 게시물은 Figma 플러그인 ‘여기쏙’ 2.0의 UI를 실제 데이터(프록시 서버 연동) 기반으로 구성하기 위해 UX 점검부터 기술 스택/화면 구조/데이터 패칭 방식까지 설계한 과정을 다룹니다.

개발 전 UX 점검

• ‘최근 사용’ 워딩의 모호함, 제휴점 리스트 갱신 방식이 화면에 불필요하게 보일 수 있는 문제를 발견해 워딩/노출 플로우를 조정했습니다.

가벼운 기술 스펙 선택

• 플러그인 제약(로딩/번들/유지보수)을 고려해 Preact, Signals, 필요한 부분만 React Query, goober, create-figma-plugin 템플릿 조합으로 구성했습니다.

미니 라우팅과 Always-Mount 전략

• Region(국내/해외)×PageType(PLP/SRP/PDP/ILP)로 페이지 ID를 만들고, URL 라우팅 없이 상태 기반 전환을 구현했으며 모든 페이지를 항상 마운트해 탭 이동 시 상태(캐시/필터/스크롤 등)를 유지하도록 했습니다.

필터 중심 UI와 API 호출 최적화

• 필터 상태를 단일 상태에서 파생되게 설계하고, 지역/옵션은 React Query로 캐싱(staleTime/gcTime Infinity), 검색은 ‘적용’ 버튼으로만 refetch하며 캐시 재사용 후 UI→Main으로 데이터를 전달해 Figma 문서를 업데이트합니다.