2025-03-23
4 min read다국어 지원 개발은 일반적으로 단일 언어로 제품을 먼저 개발 및 안정화한 후, 해당 로직에 다른 언어를 추가하는 방식으로 진행됩니다. 프로젝트 규모 및 개발 방식에 따라 다국어 관리를 위해 전용 소프트웨어를 활용하거나 엑셀 시트와 같은 스프레드시트를 사용할 수 있습니다.
다국어 개발 프로세스
다국어 작업은 주로 기획자 또는 디자이너와 번역(감수) 담당자 간의 문서 교환을 통해 이루어집니다.
- 번역가는 기존 기획 문서를 기반으로 1차 다국어 스트링 문서를 개발합니다.
- 기획자는 전달받은 다국어 스트링을 기획 문서에 반영하고, 언어 길이에 따른 UI 인터랙션 변경 필요성을 확인합니다.
- 다국어가 반영된 기획 문서를 번역가에게 전달하면, 번역가는 다국어-화면 맵핑 문서를 통해 화면의 문맥 적합성을 검토합니다. 언어 수정이 필요한 경우 다국어 스트링 문서 업데이트를 요청합니다.
- 최종 스트링 문서가 완료되면 개발팀에 전달되어 제품에 적용됩니다. GUI 팀은 다국어 기획 과정에서 확인된 추가적인 리소스를 개발하여 배포합니다. (GUI 문서와 다국어 문서 업데이트 방식도 동일합니다.)
[!note]
고려 사항
- 영어, 중국어 지원 시 기존 인터랙션을 유지합니다.
- 문자열 길이 변화에 따른 인터랙션 영향을 최소화합니다.
- 언어별 텍스트 길이 차이로 인해 스크롤이 발생하는 경우, 이를 명확하게 강조 표시합니다.
- 다국어 언어 테이블 문서의 접근, 편집 등 관리 방안을 고려합니다.
- 기존 개발 자원의 폴더 구조 및 파일명을 유지하고, 언어 정보만 변경하여 전달합니다.
- GUI Assets의 파일명은 Phase1과 동일하게 유지하여 개발 과정의 일관성을 확보합니다.
화면 정의 (Rosetta st.)
번역팀과 개발팀의 다국어 문맥 이해를 돕기 위해, 한 화면에 3개 언어의 흐름을 정의하여 언어별 글자 수 길이와 크기 차이를 쉽게 파악하고 발생 가능한 UI 변경을 예측할 수 있도록 했습니다. 또한, 인터랙션 수정 없이 언어 변경이 가능하도록 구현했습니다.
Figma Variables
Figma variable을 사용하면 모드에 따라 String을 적용할 수 있습니다. Figma Pro 사용자는 최대 3개의 Variables Mode를 사용할 수 있습니다. 3개의 모드를 한국어, 영어, 중국어로 정의해 모드 변경 시 맵핑된 String으로 업데이트되게 했습니다.
Mode에는 상속 개념이 있습니다. 특정 영역을 Mode로 정의한 후, 해당 Mode 위에 아이템을 배치하면 Mode를 상속받아 String을 자동으로 업데이트할 수 있습니다.
Font style
Text style은 H1부터 H4, 그리고 Body 스타일로 정의되었으며, 이는 추후 Glyphs Find&Replace 기능을 활용한 폰트 관리의 기준으로 사용되었습니다.
Figma Plugin Variables2Sheets
앞서 "다국어 지원 개발 프로세스와 고려 사항"에서 살펴본 바와 같이 번역된 스트링 테이블 문서와 이를 제품에 적용하는 과정은 비교적 단순한 업무이지만, 많은 작업 시간이 필요합니다. 또한 언어를 잘못 맵핑하는 오류가 발생하기 쉬워 품질 저하로 이어지기도 쉽습니다.
Figma는 Variables 또는 Design Tokens은 일종에 데이터 베이스 형태입니다. 따라서 데이터 베이스를 Exprot, Import하면 수동으로 언어를 업데이트하며 발생하는 시간과 오류를 제거할 수 있습니다. 하지만 Figma는 Variables 내보내기 기능을 공식적으로 제공하지 않습니다.
또한, 기존 Figma 커뮤니티에 있는 플러그인들은 JSON 포맷으로 Export, Import하는 기능만을 제공하고 있었습니다. JSON포맷으로 저장된 파일은 복잡한 코드 구조로 열람을 어렵게 되어 있어 다른 용도로 사용하기에는 어려움이 있었습니다.
이에 Varaible을 엑셀 또는 구글 시트와 같은 스프레드 시트 형태로 Export, Import할 수 있는 플러그인 Variables2Sheet를 개발해 피그마 커뮤니티에 공유했습니다.
Copy Menu
- Variables2Sheets을 실행합니다.
- Copy탭 아래에 Copy Figma Variables 버튼을 클립합니다. 추출이 끝났습니다. 예이~😀 Figma variables는 클립보드에 저장되어 있습니다.
- 엑셀, 또는 구글 시트와 같은 스프레드 시트 프로그램에서 붙여넣기(Ctrl+V 또는 Command+V)하면 열람할 수 있습니다.
Paste Menu
- 스프레드 시트 프로그램에서 편집을 완료 후 데이터를 선택하고 클립보드에 복사합니다. (Ctrl+C, Command+C)
- Variables2Sheets의 Paste 탭을 선택합니다.
- Data에 붙여넣기(Ctrl+V, Command+V)를 합니다.
- Import 버튼을 클릭합니다.
Export한 Figma variable 데이터를 엑셀 파일과 같은 스프레드 시트형태의 파일로 저장해 고객사에 전달합니다. 고객사에서 업데이트 후 전달 받은 스트링 문서를 붙여 넣으면 클릭 한번으로 문서에 스트링 업데이트를 완료할 수 있습니다. 👍 또한, Figma Variables는 CSV 및 JSON 파일 형식으로 내보내거나 가져올 수도 있습니다.
마치며
Variable2Sheets 플러그인을 로컬 환경에서 사용할 때는 기능 구현에 집중했습니다. 하지만 퍼블리싱을 통해 여러 사용자가 활용할 수 있도록 만들려니 UI 개선이 필수적이었습니다. UI 고도화 작업은 예상보다 많은 노력이 필요했으며, 로직 개발에 소요된 시간의 2~3배에 달했습니다. 당초 크리스마스 연휴 기간 내 릴리즈를 목표했으나, 여러 차례 연기되어 2025년 1월 8일에 최종적으로 릴리즈할 수 있었습니다.
