UI Text 효율적으로 관리하기 1편
우리를 string 지옥에서 구원해줄 Lokalise
프로덕트를 디자인하고 개발하다 보면 비효율적인 프로세스로 병목이 생기는 경우가 있다. 그중 하나가 바로 UI Text를 추가하거나 수정해야 할 때다. 다국어를 서비스할 때 특히 더 병목이 커지고, 한국어와 영어만 지원해도 병목이 생긴다. 이 문제를 효율적으로 풀기 위해 다양한 솔루션을 찾아봤고, 가장 적절하다고 판단한 솔루션을 도입하여 파일럿을 진행하고 있다. UI Text 관리로 어려움을 겪고 있는 분들에게 이 글이 참고가 되길 바란다.
*현재 회사에서는 다양한 직군(PM, 디자이너, 마케터, 개발자, QA)이 직관적으로 이해하고 사용할 수 있도록 'string'이 아닌 'UI Text'라는 용어로 부르고 있다.
문제
현재 회사는 구글 스프레드시트를 사용하여 UI Text를 관리하고 있다. 스프레드시트도 어느 정도 자동화가 되기 때문에 못 쓸 정도는 아니지만 여전히 여러 작업자를 거쳐야 한다는 점이 불편하다. 구글 스프레드시트를 통한 UI Text 작업 프로세스는 다음과 같다.
추가 프로세스
디자인 → 한글 작성 → 댓글로 영문 요청 → 영문 작성 → 최종 문구 컨펌 → 개발자 전달 → 개발자 문구 직접 작성 → 디자인 QA → 상용 배포
수정 프로세스
디자인 → 한글 수정 → 댓글로 영문 요청 → 영문 수정 → 최종 문구 컨펌 → 지라 티켓 생성 → 개발자 할당 → 개발자 문구 수정 → 디자인 QA → 상용 배포
이렇게 글만 봐도 단계가 많고 복잡하다. 무엇보다 UI Text 하나 수정하는 데 디자이너, 영문 담당자, 개발자 3명이 투입되어야 한다. 이를 해결하기 위해 어떤 기능이 필요할지 고민해봤다.
다국어를 관리할 수 있어야 한다. (번역 포함)
피그마 플러그인을 통해 디자인의 UI Text를 쉽게 업로드(또는 동기화)할 수 있어야 한다.
깃헙과 연동하여 추가/수정한 UI Text를 실제 서비스에 간단하게 반영할 수 있어야 한다.
히스토리 관리가 가능해야 한다.
최소 3개 이상의 서비스를 관리할 수 있어야 하므로 프로젝트 개수 제한이 4개 이상이어야 한다.
서비스마다 1,000개 내외의 key를 갖고 있기 때문에 3,000개 이상의 key를 지원해야 한다.
위 기능들을 직접 개발하는 것도 생각해봤으나 시간과 인력이 부족해 시중에 나와있는 솔루션을 찾아보기로 했다.
솔루션 비교
UI Text, String, i18n 등의 키워드로 검색하며 찾았다. 처음에 찾은 strings는 UI가 심플하고 깃헙 연동이 되는 것을 보며 개발자와 환호를 질렀는데 다국어를 지원하지 않아 포기하게 되었다. 그 후 Phrase, Fontitude , Lokalise 등 다양한 솔루션을 찾을 수 있었다. 한 가지 아쉬운 점은 아직 국내에는 이런 솔루션이 없고 모두 외국 기업 제품이라는 것이다. (국내에선 니즈가 크지 않은 걸까?)
생각보다 우리가 원하는 기능을 모두 지원하는 솔루션이 많지 않았고, 더 많은 문자열 수(Key)를 지원하는 Lokalise를 선택하게 되었다. 다만, 연간 가격이 만만치 않고 전체 서비스에 도입하기에는 위험 부담이 있으므로 2주간의 Free Trial 후 4개월 동안 파일럿을 진행하기로 결정했고, 지금도 진행하고 있다. (가장 저렴한 Start 플랜의 한 달 가격은 140달러다.)
Lokalise 세팅
1. 회원가입
먼저 Lokalise에서 회원가입을 한다. 개발자는 가입하지 않아도 되고 UI Text를 작성할 디자이너나 번역 담당자만 가입하면 된다.
2주 동안 모든 기능을 무료로 사용해볼 수 있다. 2주 후 모든 기능을 사용하려면 가격이 매우 비싸진다..2. 프로젝트 생성
회원가입을 완료하면 이미지처럼 튜토리얼이 진행되는데 시간이 없다면 스킵해도 좋다. 모달 뒤로 Sample Project가 만들어져 있는데 한 번 살펴보고 삭제해도 무관하다.
좌측 상단의 [New project]를 눌러 새 프로젝트를 만들어 보자.
프로젝트 이름을 입력하고 Base language를 선택한다. 한국어가 기본 언어라면 'Korean (ko)'를 선택하자. Target languages는 지원(번역)할 다국어를 의미한다. 다양한 언어를 추가할 수 있는데 일단 일반적으로 많이 사용할 'English (en)'를 선택하고 우측 하단의 [Proceed]를 누른다. 'Migrate'는 Phrase 등 다른 솔루션에서 정보를 가져오고 싶은 경우 사용하면 된다.
3. 깃헙 연동
프로젝트가 만들어졌다. 이제 깃헙과 피그마를 연동할 차례다. 가운데 있는 [Explore our apps]를 누르자.
아참. 개발자의 도움이 필요하니 개발자를 데려오자. 여러 플랫폼에 서비스하는 경우 iOS, Android, Web 각각의 repository에 연결해야 하니 모두 데려오도록 하자. 10분이면 된다.
Lokalise가 지원하는 다양한 앱이 보인다. 슬랙 등 원하는 앱을 연동해도 좋지만 트라이얼이 끝난 후를 고려하여 요금제별로 지원하는 플러그인을 잘 확인하자. 우선 깃헙(GitHub)을 누르면 모달이 표시된다.
[Install]을 누르고 [Connect]를 눌러 계속 진행하자.
자, 이제 옆에 계신 개발자에게 Personal access token을 요청하자. 이곳을 클릭하면 각자의 personal access token을 확인할 수 있다.
personal access token과 이후 .json, .string 형태의 파일을 repository로 pull 하는 과정은 이곳을 보면 어렵지 않게 진행할 수 있다.
4. 피그마 연동 (Pro 플랜)
기존 디자인의 모든 UI Text를 가져올 때 가장 편한 방법은 피그마 플러그인을 사용하는 것이다. 그러나 Lokalise 결제 후 간과한 것이 하나 있는데 바로 Figma 플러그인 연동은 더 비싼 요금제인 Pro 플랜에서만 지원한다는 것이다. (월간 가격이 무려 690달러..) 이걸 놓치는 바람에 조금 불편하지만 별도의 스프레드시트로 관리하고 있다. 이 방법에 대해선 다음에 자세히 설명하겠다. 일단 이곳을 눌러 Lokalise 플러그인을 설치하자.
Lokalise 플러그인을 설치하면 계정을 연결하라고 뜬다. 버튼을 눌러 Lokalise 계정과 연결하자.
Lokalise 플러그인의 모습이 바뀌었을 것이다. 새로운 프로젝트를 생성할 수도 있지만 앞서 만들어둔 프로젝트를 선택하자. 피그마 디자인의 언어와 플랫폼을 선택하고 key 이름의 패턴을 설정한 후 [Finish setup]을 누르자.
업로드할 디자인의 프레임을 선택하면 이렇게 자동으로 Text가 표시된다. 유의할 점은 해당 텍스트의 레이어 이름을 key 형태로 작성해줘야 한다는 것이다. (e.g. artboard_group_type_name)
업로드할 텍스트와 key를 모두 작성했다면 [Push selected]를 누르자.
업로드 방식에 대해 상세한 설정을 할 수 있다. 잘 읽어본 후 [Proceed]를 누르면 업로드가 진행되고 완료 모달이 표시된다. Lokalise 웹사이트에 들어가 보면 UI Text가 정상적으로 업로드된 것을 확인할 수 있다.
5. 깃헙으로 커밋하기
이제 개발자에게 커밋할 일만 남았다. 어렵지 않다. 좌측 상단의 [Download] 탭을 누르자. 처음엔 이름 때문에 많이 헤맸는데 커밋은 이곳에서 할 수 있다.
먼저 Format을 선택하자. 각 플랫폼에 맞는 Format을 선택할 수 있다.
그 아래에 File structure가 있는데 깃헙 연동할 때 지정한 string 파일의 경로를 동일하게 작성하면 된다.
Triggers에서 [GitHub]에 체크하고 Filter repositories와 Commnit message를 작성한다.
제일 아래에 있는 버튼 중 [Build only]를 클릭한다.
해당 깃헙에 들어가면 이렇게 Pull requests가 들어온 것을 확인할 수 있다. 만약 아무것도 들어오지 않았다면 연동이 잘못되었을 수 있으니 연동 상태를 다시 확인해보자.
Merge하면 끝이다. 처음엔 Lokalise의 UX가 불편하게 느껴졌는데 적응하니 쓸만하지만, 누구나 쉽게 사용하려면 사용성을 개선할 필요가 있어 보인다.
이번 편은 여기서 마치고 다음 편에서는 스프레드시트를 사용하여 UI Text를 업로드하는 방법, String Format 등에 대해서 다뤄보겠다.
끝.
