Figma Translate Plugin: 디자인 현지화를 더 빠르게

디자인 내 번역이 팀에 중요한 이유

로컬라이제이션은 전통적으로 핸드오프가 많은 프로세스였습니다. 디자이너가 화면을 내보내거나 텍스트를 스프레드시트에 복사해 번역자에게 보내고, 며칠 후 번역 파일을 받아 각 문자열을 수동으로 다시 붙여넣습니다.

번역이 Figma 안에서 직접 이루어지면 이러한 문제의 상당수가 줄어듭니다. 번역자나 플러그인이 각 문자열 주변의 정확한 시각적 컨텍스트를 볼 수 있습니다.

컨텍스트 손실은 번역된 인터페이스가 부자연스럽게 느껴지는 가장 큰 이유 중 하나입니다.

레이아웃 드리프트는 외부 번역 워크플로의 또 다른 숨겨진 비용입니다. 독일어 문자열은 영어보다 약 30% 길어지는 경우가 많습니다.

Figma 번역 플러그인 설정하기

Figma Community에는 여러 번역 플러그인이 있습니다. Google Translate나 DeepL 같은 기계 번역 API를 사용하는 것도 있고, Crowdin, Lokalise, Phrase 같은 번역 관리 시스템에 연결되는 것도 있습니다.

플러그인을 설치하려면 Figma를 열고 Community 탭에서 검색합니다. 대부분의 번역 플러그인은 번역 서비스의 API 키가 필요합니다.

팀 전체의 일관성을 위해 Figma 조직에 플러그인을 추가하여 모든 디자이너가 동일한 번역 엔진과 용어집을 사용하도록 하세요.

• 번역 제공업체에 맞는 번역 플러그인을 Figma Community에서 검색합니다.
• 플러그인을 설치하고 설정 패널에서 API 키를 추가합니다.
• 기본 소스 언어를 설정합니다. 보통 영어입니다.
• Figma for Teams 또는 Enterprise를 사용하는 경우 공유 라이브러리에 게시합니다.
• 기계 번역하면 안 되는 제품 용어에 대한 공유 용어집을 만듭니다.

번역 워크플로 단계별 안내

Figma에서의 일반적인 번역 워크플로는 번역할 레이어 선택으로 시작됩니다. 개별 텍스트 레이어, 전체 프레임 또는 전체 페이지를 선택할 수 있습니다.

콘텐츠를 선택한 후 플러그인을 열고 대상 언어를 선택합니다. 원본 언어를 유지하려면 프레임을 복제하세요.

배치 작업은 플러그인이 진정으로 시간을 절약하는 부분입니다. 수십 개의 레이블이 있는 프레임을 1분 이내에 처리할 수 있습니다.

플러그인이 완료된 후 각 화면을 순서대로 확인합니다. 컨테이너를 벗어난 문자열과 잘못 번역된 용어를 찾습니다.

• 번역할 콘텐츠 양에 따라 레이어, 프레임 또는 전체 페이지를 선택합니다.
• 원본 언어 버전을 유지하려면 번역 전에 프레임을 복제합니다.
• 배치 모드를 사용해 선택 영역의 모든 텍스트 노드를 한 번에 번역합니다.
• 번역 후 모든 화면에서 오버플로, 잘림, 용어 오류를 확인합니다.
• Figma 댓글을 사용해 사람의 검토가 필요한 문자열에 표시합니다.

번역 후 레이아웃 관리

텍스트 확장은 번역 후 가장 흔한 레이아웃 문제입니다. 독일어, 프랑스어, 포르투갈어로 번역하면 문자열 길이가 20~40% 늘어나는 경우가 많습니다.

Figma 오토 레이아웃이 여기서 가장 좋은 도구입니다. hug-contents나 fill-container 오토 레이아웃을 사용하면 많은 확장 문제가 자동으로 해결됩니다.

아랍어, 히브리어 같은 RTL 언어는 텍스트 번역 이상의 작업이 필요합니다. 전체 레이아웃을 미러링해야 할 수 있습니다.

줄 높이와 폰트 폴백도 중요합니다. CJK 문자를 포함하지 않는 라틴 서체를 사용하면 Figma가 다른 메트릭을 가진 시스템 폰트로 폴백합니다.

• 버튼과 태그에 hug-contents 오토 레이아웃을 사용합니다.
• 텍스트 컨테이너를 fill-container 너비와 auto 높이로 설정합니다.
• 독일어와 일본어로 실제 번역 테스트를 일찍 수행합니다.
• RTL 언어에서는 레이아웃을 미러링하되 재생 버튼 같은 범용 아이콘은 원래 방향을 유지합니다.
• CJK 로케일로 전환해 폰트 폴백 동작을 확인합니다.

다국어 디자인 모범 사례

처음부터 여러 언어를 지원하는 디자인 시스템을 구축하는 것이 나중에 로컬라이제이션을 추가하는 것보다 훨씬 쉽습니다. 가장 중요한 원칙은 콘텐츠와 구조를 분리하는 것입니다.

컴포넌트 배리언트는 로케일별 차이를 처리하는 강력한 방법입니다.

문자열 외부화는 디자인에서도 잘 작동합니다. JSON으로 문자열을 저장하고 플러그인으로 Figma에 가져옵니다.

매 번역 패스 후에 실행할 QA 체크리스트를 만드세요. 잘림, 오버플로, 폰트 폴백, RTL 미러링, 날짜와 숫자 형식을 포함해야 합니다.

• 처음부터 가변 길이 텍스트를 고려해 컴포넌트를 설계합니다.
• 내비게이션, 카드, 리스트 아이템에 대한 LTR 및 RTL 배리언트를 만듭니다.
• UI 문자열을 JSON 또는 CSV로 외부에 저장하고 콘텐츠 플러그인으로 Figma에 동기화합니다.
• 매 번역 패스 후 로컬라이제이션 QA 체크리스트를 실행합니다.
• 디자인 시스템에 로케일별 스페이싱과 폰트 크기 오버라이드를 문서화합니다.

플러그인만으로 부족할 때

번역 플러그인은 속도면에서 뛰어나지만 한계가 있습니다. 기계 번역은 짧은 UI 문자열에는 잘 작동하지만 마케팅 카피와 법률 텍스트에서는 어려움을 겪습니다.

복잡한 로컬라이제이션 요구사항에는 Figma를 번역 관리 시스템과 통합하는 것을 고려하세요. Crowdin, Lokalise, Phrase는 전문 번역자에게 문자열을 보내는 Figma 플러그인을 제공합니다.

CMS 통합은 플러그인만으로 부족한 또 다른 시나리오입니다.

마지막으로, 전문 번역자를 고용해야 할 때를 아세요. 원어민은 기계가 처리하지 못하는 문화적 뉘앙스와 관용적 표현을 잡아냅니다.

• 버튼 레이블 같은 짧고 명확한 UI 문자열에 기계 번역을 사용합니다.
• 마케팅 카피와 법률 텍스트는 전문 인간 번역자에게 보냅니다.
• 3개 이상의 대상 언어가 있는 프로젝트에서 Figma를 번역 관리 시스템에 연결합니다.
• CMS를 콘텐츠의 유일한 진실 소스로 유지합니다.
• 출시 전 모든 로케일에 대해 원어민 검토 패스 예산을 책정합니다.