Figma 플러그인 성능, emitPromise와 렌더링 최적화로 잡았다!
by DD
7개월 전
조회수 44
Figma 플러그인의 UI/Main 스레드 간 비동기 통신 문제 해결을 위해 emitPromise 도입
렌더링 성능 향상을 위해 Regex 상수화 및 이미지 로딩 우선순위 분리
데이터 동기화를 위해 emitPromise 기반의 clientStorage 활용
emitPromise: 비동기 통신 문제 해결
기존 Figma 플러그인에서 emit/on 방식은 비동기 응답 매칭 문제를 야기했다. 따라서 Request ID 패턴을 적용한 emitPromise를 도입하여 동시성 문제를 해결했다. 구체적으로, 1:1 매칭을 통해 데이터 뒤섞임을 방지하고, 10초 타임아웃으로 안정성을 확보했다.
렌더링 성능 최적화: 속도 개선
기존 코드는 findOne을 반복 호출하여 O(N x M)의 비효율을 보였다. 따라서 Single Pass Mapping을 통해 노드 접근 속도 O(1)로 개선했다. Regex 상수화를 통해 성능을 향상시키고, Text First, Image Last 전략으로 체감 속도를 높였다.
데이터 동기화: 탭 간의 매끄러운 UX
Figma 플러그인에서 localStorage 대신 figma.clientStorage를 사용하여 데이터 영구 보존을 구현했다. emitPromise를 활용하여 UI/Main 스레드 간의 데이터 동기화 파이프라인을 구축했다. 결과적으로, 탭 전환 시 데이터 텔레포트와 같은 사용자 경험을 제공한다.
