여기쏙 — Figma plugin 제작기 : 3. 성능
프론트엔드
여기쏙 — Figma plugin 제작기 : 3. 성능
두줄요약
Figma 플러그인 2.0의 성능 개선을 위해 통신 계층과 렌더링 구조를 전면 재설계했습니다. 비동기 매칭, 탐색 비용, 이미지 로딩, 스토리지 동기화를 최적화해 체감 속도와 안정성을 높였습니다.
구조와 흐름
- Figma 플러그인 2.0의 성능 개선을 위해 1.0의 레거시 구조를 바닥부터 재설계한 과정
- UI Thread와 Main Thread가 분리된 샌드박스 환경에서 메시지 패싱과 클라이언트 스토리지가 핵심 제약으로 작용
- 통신 계층, 렌더링, 데이터 동기화까지 성능 병목을 단계적으로 해소
해결 방법
- emit/on의 한계를 보완한 emitPromise와 Request ID 패턴으로 비동기 응답 매칭 문제 해결
- findOne 반복 탐색을 줄이기 위해 Single Pass Mapping과 Regex 상수화 적용
- 텍스트 우선 렌더링, 이미지 큐, Promise 캐싱으로 체감 속도와 대량 데이터 처리 성능 개선
성능/운영 포인트
- 10초 타임아웃으로 메인 스레드 오류 시 무한 대기 방지
- 동일 URL 이미지를 Promise 캐싱해 중복 네트워크 요청 제거
- figma.clientStorage와 emitPromise를 연결해 탭 간 데이터 동기화와 영속성 확보