이 게시물은 Figma 플러그인 ‘여기쏙 2.0’의 극한 성능 향상을 위해 아키텍처와 렌더링 파이프라인을 재설계한 과정을 다룹니다.

플러그인의 UI Thread(iframe)와 Main Thread(Sandbox) 분리 구조를 설명하고, 메시지 패싱의 한계를 해결하기 위해 Request ID 기반의

emitPromise

통신 계층(동시성 1:1 매칭, Promise 지원, 타임아웃)을 구축합니다.

대량 레이어 처리 성능을 위해 탐색을 Single Pass Mapping으로 바꾸고 정규식을 상수화하여 findOne 반복 호출 비용을 줄입니다.

이미지 로딩 병목은 Text First/Image Last 전략과 이미지 큐(4~6개 단위), URL 단위 Promise 캐싱으로 완화해 체감 성능을 개선합니다.

탭 간 데이터 동기화는 figma.clientStorage를 선택하고 emitPromise로 set/get 파이프라인을 만들어, 컴포넌트 언마운트 후에도 데이터를 유지합니다.