Figma 디자인의 Typography 텍스트를 4개 언어로 자동 변환하는 플러그인. UX팀 다국어 작업의 수작업 오류를 제거하기 위해 자발적으로 개발.
UX팀이 디자인 시스템의 텍스트를 4개 언어로 변환할 때 레이어를 하나씩 수작업으로 변경했습니다. 번역 누락, 오타, 보호해야 할 더미 텍스트까지 변환되는 문제가 빈발했습니다. 실무에서 직접 불편함을 발견하고 자발적으로 플러그인을 개발했습니다.
Figma Plugin API 기반 플러그인으로 Typography 스타일(`sys/typography/` 프리픽스) 텍스트만 안전하게 변환합니다. TID 기반 역방향 매칭으로 현재 언어를 몰라도 정확한 번역을 찾아 적용합니다.
디자인이 지금 어떤 언어로 되어 있는지 사전에 알 수 없습니다. 텍스트 내용으로 모든 언어 사전을 거꾸로 순회해 TID를 역추적하면, 현재 언어를 몰라도 정확한 번역을 찾아 적용할 수 있습니다.
전 언어를 순회하므로 매칭 비용이 늘고, 동일 텍스트가 여러 TID에 걸리는 모호성이 생깁니다. 복수 TID 경고 시스템으로 이 경우를 사용자가 직접 판단하게 했습니다.
로고·더미·서버 플레이스홀더까지 무차별 변환하면 디자인이 깨집니다. `sys/typography/` 프리픽스 + 3단계 필터로 변환 대상을 안전하게 좁혀, 건드리면 안 되는 텍스트를 원천 차단했습니다.
스타일 규칙을 따르지 않은 레거시 텍스트는 자동 변환 대상에서 제외됩니다(의도된 동작). 커버리지를 일부 희생하는 대신 오변환 위험을 없앴습니다.
Figma 플러그인 런타임은 ES6 모듈 import를 지원하지 않습니다. 번역 데이터와 로직 전체를 단일 번들로 묶어야 플러그인 환경에서 동작합니다.
1,585 TID × 4개 언어가 번들에 포함돼 ~491KB로 커집니다. 대신 런타임 네트워크 요청이 없어 오프라인·즉시 실행이라는 이점을 얻었습니다.
텍스트 내용으로 모든 언어를 순회하며 TID를 자동 탐색합니다. 현재 디자인이 어떤 언어로 되어있는지 알 필요 없이 올바른 번역을 찾아 적용합니다.
① 스킵 마커([SKIP]/[DUMMY]/[예시]) 감지, ② 서버 플레이스홀더({username}) 보호, ③ Typography 스타일(`sys/typography/`) 검증. 3겹 필터로 의도하지 않은 텍스트 변환을 방지합니다.
Zero Width Space(U+200B) 등 보이지 않는 Unicode 문자와 Non-breaking Space를 감지해 정규화합니다. 육안으로 동일해 보이지만 TID 매칭이 실패하는 문제를 해결합니다.
JSON 번역 파일에서 TypeScript 타입을 자동 생성하는 스크립트를 포함합니다. Figma Plugin 환경의 ES6 import 미지원 제약으로 Webpack으로 전체를 ~491KB 단일 번들로 패키징합니다.
동일한 텍스트가 여러 TID와 매칭될 때 경고를 표시합니다. 번역 데이터에 없는 텍스트도 별도 경고로 분류해 번역 품질을 보장합니다.