Figma 플러그인, UX와 성능을 모두 잡다!

Preact, Signals, React Query를 활용하여 Figma 플러그인 UI 성능을 최적화함

Always-Mount 방식과 미니 라우터 설계를 통해 UX 개선을 달성함

React Query 캐싱과 프록시 서버 캐싱을 통해 API 호출 횟수 감소 및 성능 향상을 이룸

Preact, Signals, React Query: 가벼운 UI의 비결

Figma 플러그인 환경은 번들 사이즈와 로딩 속도가 매우 중요하다. 따라서 Preact를 선택하여 번들 크기를 줄이고, Signals를 통해 상태 관리를 단순화했다. React Query를 활용하여 API 요청을 캐싱하고, 불필요한 API 호출을 줄여 UI 응답 속도를 향상시켰다.

Always-Mount 방식의 장점

일반적인 웹 서비스와 달리, Figma 플러그인은 페이지 전환 시 언마운트가 발생하면 UX가 저하된다. Always-Mount 방식을 통해 페이지 상태를 유지하고, React Query 캐시를 활용하여 필터 값과 스크롤 위치를 보존했다. 결과적으로 탭 이동 시 즉각적인 화면 전환이 가능해져 UX 만족도를 높였다.

API 호출 최소화를 위한 전략

API 호출 횟수를 줄이기 위해 React Query 캐싱을 적극적으로 활용했다. 필터 적용 버튼을 통해 API 호출을 제어하고, 동일 조건 검색 시 캐시를 재사용하여 API 호출 횟수 감소를 달성했다. 또한, 프록시 서버 캐싱을 통해 전체적인 트래픽을 줄이고, 서버 성능을 개선할 여지를 확보했다.