피그마에서 다양한 언어로 디자인하고 싶어요
구글 스프레드시트 플러그인으로 피그마에서 다국어 대응해보기
최근 프로덕트를 만들면서 글로벌 시장 진출을 위한 i18n 작업이 필요해지게 되었습니다.
i18n이란 internationalization의 줄임말로, 국제적으로 통용되는 SW를 설계하고 개발하는 과정을 일컫는데요, 자세한 내용은 티스토리에 냥장판님께서 소개해주신 좋은 글이 있어 이 부분을 참고해 보시면 좋을 거 같습니다! (https://miaow-miaow.tistory.com/32)
사실 더 엄밀한 의미로는 환경과 문화에 맞는 별도의 디자인을 준비한다거나, 개발적 측면에서 여러 환경에 맞게 미리 구조를 설계하는 등의 현지화를 위한 다양한 요소들이 있겠지만, 디자인 단계에서는 텍스트를 적합한 언어로 표시하는 것이 우선이겠지요? 이를 관리하기 위한 여정을 담아보겠습니다.
우선! 준비물은 다음과 같습니다.
1. 구글 스프레드시트 파일
https://docs.google.com/spreadsheets
2. 피그마 플러그인 (Google Sheets Sync)
https://www.figma.com/community/plugin/735770583268406934
https://docs.sheetssync.app/
(여기에선 사용법과 적용 용례들을 확인할 수 있습니다)
우선, 제일 핵심인 이 플러그인은 구글 스프레드시트와 피그마 파일을 연동시켜주는 역할을 합니다.
이 플러그인은 일반적으로 실제로 디자인이 적용되었을 때 어떤 모습으로 보여질 지 확인할 수 있도록, 있을법한 더미 데이터들을 입혀주는 도구로 사용되곤 하는데요, 저는 이번에 이 플러그인을 다국어 대응을 위한 플러그인으로 사용해 보았습니다.
다양한 상품 정보를 스프레드시트에 넣어두고, 플러그인으로 싱크하면 디자인에 쭉 입혀지는 모습3. 당연히 적용할 피그마 디자인 파일도 필요하겠죠?!
이렇게 준비가 완료되었다면... 자 이제 본격적으로 적용해 볼까요?
예시를 위해서 디자인하고 있는 저희 서비스의 로그인 화면을 가져와 볼게요.
로그인
Google로 로그인
Apple로 로그인
또는
이메일
이메일로 로그인
아직 회원이 아니신가요?
회원가입
이 페이지에서는 요런 텍스트들이 필요하군요! 이 친구들을 기준으로 세팅을 해보겠습니다.
우선, 스프레드시트를 만들어 볼까요?
우리가 필요한 값은 크게 두 가지가 있습니다.
1. 텍스트를 불러오는데 쓸 Key
이것은 해당하는 텍스트를 부르는 이름이라고 볼 수 있죠.
이 Key는 사실 정의하기 나름인데요, 저희 팀 내에서는 구분을 위해 이런 기준을 사용해 보았습니다.
- 해당 텍스트가 들어가는 페이지명
- 텍스트를 지칭하는 이름
- 해당 텍스트의 용도 (용도는 크게 title, description, label 정도로 구분했습니다)
이 정도의 정보가 Key에 들어가 있다면, 최소한 식별하는데 헷갈림은 없을 거라고 판단하게 되었죠.
2. 들어가게 될 텍스트
이 값은 대응하는 언어가 많아질수록 더 다양한 값이 들어가게 되겠죠?
예시에서는 간단하게 한국어, 영어, 일본어 요렇게 세가지 정도의 언어를 대응하는 모습을 보여드려 보겠습니다.
기본적으로 이 스프레드 시트는 가로, 즉 행을 기준으로 데이터를 순차적으로 집어넣어 주는데요, 일반적으로 페이지 관리를 위해서는 일반적으로 스크롤하는 세로 방식이 편하기 때문에, 세로 기준으로 바꿔주겠습니다.
어떻게 하면 될까요? 맨 좌측열의 기준이 되는 열(Key 부분)을 bold 처리 해주시면 되겠습니다.
이야기로만 설명해서는 감이 잘 안오실 수 있을거 같아요^^; 예시 파일을 보여드릴게요.
https://docs.google.com/spreadsheets/d/10-zr15C1LPkni1qulG6VCc5ReIty2WVBnAkEE5Akj5I/edit?usp=sharing
파일 내부 구조가 궁금하신 분들은 이 파일을 참조해 주세요.
이렇게 파일을 만들면 기본적인 세팅이 완료되는데요, 이 파일을 피그마와 이제 연동해보겠습니다. 필수적으로 이 파일의 공개범위를 전체 공개로 바꾸어주어야 싱크가 가능해지기 때문에 공개설정을 링크가 있는 모든 사용자로 변경해 주세요.
(보안 이슈가 걱정되시는 분들께서는 시트를 Sync하는 시점에만 이 공개 설정을 바꿔주셔도 된답니다)
이렇게 스프레드시트 정리를 마쳤다면, 이제 피그마로 넘어올게요.
본격적으로 연동해볼 차례겠지요? 디자인 파일로 이동해서 플러그인을 실행해 봅시다.
Google sheet sync를 검색해서 Run 버튼을 누르면..
이런 창이 등장하는 모습을 보실 수 있을 거에요. 여기에 아까 만들어둔 스프레드시트의 주소를 복사해서 넣고, Fetch 버튼을 눌러볼게요.
그러면 아까 작성해두었던 스프레드시트가 이런 모습의 창으로 보여질거에요.
스프레드시트와 피그마가 연동되는 방식은 레이어 이름을 기준으로 싱크가 이뤄집니다. 그렇기 때문에 저희는 각각의 텍스트 레이어 이름을 이 플러그인에서 해석할 수 있는 형태로 변경해줘야 해요.
그렇지만 디자이너들이 일일히 레이어 이름을 수정해가면서 만들기는 쉽지 않겠죠? 플러그인의 기능을 조금 더 이용해 보겠습니다.
바꾸고자 하는 텍스트 레이어를 포커스한 상태에서, 플러그인 안의 스프레드시트 셀을 클릭하면, 해당하는 이름으로 바로 변경이 된답니다!
레이어명이 모두 변경되어 적용된 모습레이어의 이름이 적용되는 규칙에 대해서 잠시 설명드리면,
#이라는 표시를 통해서 해당 레이어가 싱크될 것이라는 표시를 해주고,
맨 앞 기준열인 Key가 들어가게 됩니다.
.1은 기준열에서 첫번째 셀의 값을 가져온다는 의미입니다.
이렇게 구성한 상태에서 스프레드시트를 업데이트하고, 플러그인을 다시 실행시켜서 Sync를 눌러주시면, 텍스트가 변경되는 모습을 확인할 수 있습니다.
지금은 같은 한국어 텍스트로 들어가있기 때문에 큰 차이를 못느끼실 텐데요, 레이어 이름을 짓는 방식에서 눈치채신 분들도 있을텐데, .1이라는 레이어명을 모두 .2로 변경해주면..?!
짜잔! 이렇게 영어로 모두 자동으로 변환되는 모습을 보실 수 있습니다.
시트에서 1번열이 한국어, 2번열은 영어였었죠. 때문에 2번째 셀을 불러오라는 표시를 해줌으로써 영어로 적용되게 되는 것입니다.
적용이 끝나면..
이렇게 적용을 마치고 나면, 디자이너들은 디자인을 완료하고, Key와 텍스트를 스프레드시트에 정의합니다. 이를 통해서 한국어만 미리 정의해두고 디자이너들이 번역을 전부 마치지 않더라도, 팀 내에 조금 더 번역을 전문적으로 해주실 수 있는 분들께 요청드릴수도 있겠죠?
또한 이 스프레드시트를 기준으로 개발에도 동일하게 반영되도록 할 수 있습니다.
개발자분들과 함께 상의를 통해 스프레드시트의 값을 가져와서 쓸 수 있도록 설정하는 것이죠.
저희는 특정 스크립트를 돌리면, 자동으로 스프레드시트에서 변경사항이 있는 텍스트를 가져오고, 새로운 텍스트는 Key가 생성되어 사용할 수 있도록 개발이 되어있습니다.
때문에 텍스트를 변경할 때에도 이 스프레드시트를 수정하고, 업데이트를 요청드리면 변경된 텍스트를 바로 적용할 수 있게 되는 것이죠.
이 덕분에 디자인과 코드가 둘다 이 스프레드시트를 바라보게 되고, 이를 기준으로 업데이트 되기 때문에 효율적인 협업이 가능해집니다.
세세하게 설명을 드리려다 보니 글이 또 길어지고 말았네요. 야금야금 나눠서 쓰는데도 글 작성이 오래 걸리게 되는 건 이런 이유가 아닐까 싶습니다 ^^;
다국어를 대응하는 용도가 아니더라도 해당 플러그인으로 다양한 것들을 시도해 볼 수 있으니, Docs를 잘 참고해보셔도 좋을거 같습니다. 여러분이 이 플러그인을 적용하시는 또 다른 좋은 사례가 있다면 알려주세요!
