요즘 채용 공고를 보면 가끔 우대사항에 다국어화 처리에 대한 요구가 보이는데요. 이번에는 피그마에서 더미 데이터 관리에 많이 쓰이는 플러그인 Google Sheets Sync를 활용해서 다국어화 처리를 간단하게 하는 방법을 정리하겠습니다. 플러그인에 대한 기본적인 정보는 아래의 링크를 확인해주세요.
Google Sheets Sync | Figma Community
Figma Community plugin - Sync content from Google Sheets directly into your Figma file. This is not an official plugin created by Google • It is simply created with ❤️ by David Williames If you want to support the continued development of this plugin
www.figma.com
Getting Started - Google Sheets Sync
STEP 3: Run this plugin, paste your shareable link, and click ‘Fetch & Sync’
docs.sheetssync.app
먼저 간단한 예제를 통해 플러그인으로 더미데이터를 관리해보겠습니다. 아래에 있는 컴포넌트의 다국어화 처리를 한다고 가정해봅시다.
일단 섹션의 타이틀과 문자들을 더미데이터로 관리해줍니다. 구글 시트로 더미 데이터를 작성하는 자세한 정보는 플러그인 소개 혹은 문서 페이지를 참고해주세요.
피그마에 있는 텍스트 레이어와 스프레드 시트의 데이터를 연결해주면 더미데이터를더미 데이터를 위한 관리는 일단 마무리됩니다. 하지만 이번 주제는 다국어화 처리이기 때문에 이 부분을 더 자세하게 설명드리겠습니다. 기존에는 다국어화 처리를 위해서는 프로젝트 파일을 전부 백업해두고 텍스트 레이어를 하나하나 수정하는 방식이었습니다. 그렇지만 위처럼 더미 데이터를 관리하는 방식으로 하였다면, 구글 시트에서 시트를 단순히 복사하고 복사된 시트를 번역하는 방법으로 간단하게 다국어화 처리가 가능합니다.
그렇다면 피그마 파일 내에서는 건드리는 내용은 거의 없게됩니다. 기존에는 텍스트 레이어를 하나하나 수정하였지만요. 하지만 eng 시트의 내용은 어떻게 적용을 할까요. 일단 플러그인을 통해 내용을 일치시키면 기본적으로 첫 번째에 있는 시트(kor)를 기준으로 내용이 적용이 되며, 다른 시트를 피그마 프레임에 적용을 하고 싶다면 프레임 이름 마지막에 "//eng"를 추가해주면 두 번째에 있는 "eng" 시트의 내용이 적용됩니다. 물론 이런 방법으로 세 번째, 네 번째 등등 시트가 있다면 이런 식으로 가능합니다.
물론 획기적으로 간편해 보이지만, 실무에서 사용한다고 하면 감안해야하는 문제도 있습니다.
- 더미 데이터를 관리할만한 여유가 있는지
- 다국어화가 정말 필요한지
- 팀 내에서 텍스트 레이어의 naming convention에 대한 합의
저는 지금까지 진행한 프로젝트에서는 다국어화에 대한 논의 정도만 하고 실제로 적용해본 사례는 없지만, 실제로 적용한다면 생각보다 굉장히 어려운 작업이라고 생각합니다. 위의 예제처럼 간단한 더미 데이터가 아니라 실제로는 굉장히 방대해질 거라고 생각됩니다. 그러니 이런 방식을 도입하는 건 애초에 다국어화를 본격적으로 지원하거나 혹은 더미 데이터 관리 쪽으로만 사용하다가 확장시키는 게 그나마 효율적이라고 생각합니다.
'UI & UX' 카테고리의 다른 글
| UI/UX 디자이너가 알아두면 도움되는 네 글자 (2) | 2022.09.13 |
|---|---|
| UI/UX 디자인 프로세스 (0) | 2022.08.30 |
| Figma - 인터랙티브 컴포넌트 (0) | 2021.11.02 |
| "UX디자이너" (0) | 2021.06.30 |
| 와이어프레임은 쓸모없다 (0) | 2020.12.20 |
