UI Text 효율적으로 관리하기 2편
우리를 string 지옥에서 구원해줄 Lokalise
UI Text 효율적으로 관리하기 1편에서 이어지는 글입니다.
들어가기에 앞서, 툴에 돈을 아끼지 않는 회사라면 Pro 플랜을 이용하길 강력 추천한다. Start 플랜보다 약 5배나 비싸지만 효율성과 유용성을 극대화해줄 핵심 기능인 Figma Plugin과 Screenshot workflows를 사용할 수 있고, 15개의 시트와 30,000개의 키도 제공해주므로 규모가 있는 서비스라면 큰 돈을 지불할 만한 가치가 있다. (하지만 아무리 생각해도 너무 비싸다..)
UI Text 추가/수정하기
UI Text를 추가하거나 수정하는 방법은 크게 3가지가 있다.
Figma 플러그인을 통해 추가하기
Lokalise 웹사이트에서 추가하기
문서(스프레드시트)를 업로드하여 추가하기
Figma 플러그인으로 추가하는 방법은 가장 쉽고 간단하지만 그만큼 돈이 많이 들기 때문에 Start나 Essential 플랜을 사용할 경우에 필요한 두 가지 방법을 설명하겠다.
1. Lokalise 웹사이트에서 추가하기
우측 상단에 보이는 [Add key]를 누르면 새로운 UI Text를 추가할 수 있다. Lokalise에서 1개의 key는 UI Text 1개를 가지고 있다.
아래와 같은 모달이 뜨면 내용을 입력하고 [Save]를 누른다.
Key가 추가된 것을 확인할 수 있다. 순서대로 Key와 플랫폼별 아이콘, 태그가 표시된다.
만약 UI Text를 수정하고 싶다면 해당 텍스트를 클릭하고 내용을 수정한 후 [체크] 버튼을 누르면 된다. 매우 간단하다.
2. 파일을 업로드하여 추가하기 (스프레드시트)
[Upload] 탭을 클릭한다.
.strings, .xml, .xls 등 다양한 파일을 업로드할 수 있다.
피그마 플러그인을 대체할 목적이므로 구글 스프레드시트를 생성하고 아래처럼 작성한다. 영문 등 다국어를 추가하고 싶다면 열을 B 옆에 컬럼을 추가하고 'en' 등 언어 코드를 작성하면 된다.
[파일] > [다운로드] > [Microsoft Excel(.xlsx)] 선택
다운로드된 .xlsx 파일을 위에서 설명한 Lokalise 웹사이트에 업로드한다.
파일을 업로드하면 아래와 같은 모달이 뜬다. 각 항목이 잘 들어가있는지 확인하고 [Apply]를 누른다.
더 추가하고 싶은 파일이 있으면 추가하고 [Import the files]를 누르면 끝이다.
String Format
iOS, Android, Web은 변수명이나 숫자에 대해 모두 다른 string format을 사용한다. 이 글을 처음 썼던 작년에는 각 플랫폼에 맞는 string format을 뽑아내는 방법을 몰랐는데 이제 알게 되었다. 아래 규칙으로 string format을 작성하면 하나의 key로 여러 플랫폼을 모두 대응할 수 있다.
String
[%s], [%s:name]
Integer
[%i], [%i:name]
Float
[%f], [%.2f:name]
하나의 key에 변수를 여러 개 넣어야 하는 경우
String: [%1$i], [%2$i], [%3$i]
Integer: [%1$s], [%2$s], [%3$s]
Float: [%f], [%.2f], [%1$.2f]
<예시>
Lokalise: p. [%i:page]
결과물
iOS: p. %li
Android: p. [%i]
Web: p. {page}
마치며
Lokalise를 사용하기 시작한 지 한 달이 안되어서 UI Text 관리 프로세스가 개선되었는지 아직은 체감하기 어렵지만 조만간 자리를 잡으면 개발자와 디자이너의 시간 단축을 크게 체감할 수 있을 것이라 기대한다. 그리고 아직 해결해야 할 두 가지 문제가 남아있다.
1. String Format
iOS, Android, Web은 각자 다른 string format을 사용한다. 이걸 통일할 수는 없고 각자에게 맞는 포맷으로 변환해주어야 한다. 예를 들면 '<' 문자를 웹에서는 그대로 사용할 수 있지만 안드로이드에서는 '<'라는 문자로 작성해야 한다. 이렇게 다른 string format을 Lokalise 안에서 플랫폼별로 UI Text를 구분해서 내보낼 수 있는 것 같긴 한데 이건 조금 더 확인을 해봐야 한다.
2. 비싼 가격
시장에 니즈가 있고, 꼭 필요한 여러 기능을 지원하기 때문에 좋은 솔루션이라는 생각은 들지만 필요한 기능을 사용하기 위해 지불해야 하는 비싼 가격이 많이 아쉽다. (얼른 경쟁자가 생겨서 가격이 떨어지면 좋겠다.) 현재로써는 우리의 소중한 시간(=비용)을 줄여준다는 점에서 금액이 비싸도 지불할 수 밖에 없는 것 같다. 다국어 관리에 많은 시간이 소요된다면 충분히 비용을 투자해볼만 하다. 만약 부담이 크다면 우리처럼 가장 저렴한 Start 플랜으로 스프레드시트를 활용하여 사용해보는 것을 추천한다.
Lokalise는 타다, 당근마켓, 데브시스터즈 등에서 사용 중인 것으로 알고 있다. 그외 유니콘, 대기업들은 구글 스프레드시트로 UI Text를 작성하고 각 플랫폼에서 Export하여 사용할 수 있는 도구를 직접 만들거나 문자열만 관리하는 Technical Writer라는 포지션이 있다고 들었다. 만약 UI Text 관리로 고통을 겪고 있다면 다양한 솔루션을 비교해보고 Lokalise를 꼭 사용해보면 좋겠다.
끝.
