Flutter 앱 번역 퀄리티 2000x 올리기

Heehong Moon
bgpworks
Published in
4 min readJun 22, 2019

이번에 창업한 회사에서는 처음부터 글로벌 서비스를 만들고 있다. 지금까지 출시한 서비스 모두 2개 이상의 언어를 지원하고 있고, 꽤 많은 시간과 노력이 든다는걸 알게 되었고 새로운 방식의 번역 과정이 도입되어야 한다는걸 알게 되었다.

Photo by Kyle Glenn on Unsplash

앱 번역 시작

한글로 된 버전 1.0이 완성될때쯤 영어나 다른 외국어로 번역을 시작한다. 같이 일하는 사람 중에 영어나 특정 언어의 네이티브 스피커가 있다면 그나마 낫겠지만, 우리의 경우에는 외부 번역가에게 번역을 맡겨야 했다.

외부에 있는 번역가에게 우리가 개발한 앱의 String파일을 엑셀 파일로 변환해서 준다. 또는 String 파일을 웹에 업로드해서 번역가가 쉽게 번역할수 있게 도와주는 서비스가 꽤 있다. 그런데 이런 방식에는 가장 큰 문제가 있다. 번역하려는 문장 또는 단어의 Context 가 없기 때문에 아무리 영어를 잘해도 어색한 번역이 나온다는 문제이다.

의미 전달은 되지만 어색한 번역

만약 같은 팀 내부에서 번역을 진행하게 되면, 실제로 앱에 번역 문장을 올려서 테스트 하고 어색한 표현을 계속 바꿔나가면 된다. 매번 빌드를 새로 해야 하기 때문에 꽤 많은 시간과 노력이 들어간다.

스크린샷 기반으로 번역하기

만약 번역가에게 엑셀파일로 번역을 맡기는게 아니라, 파워포인트로 앱에서 보이는 모든 스크린샷을 찍어서 보내주고 스크린샷 위에 번역을 해준다면 결과는 얼마나 다를까? 분명한건 적어도 어색한 번역은 나오지 않는다.

물론 번역 퀄리티는 높아지겠지만 이런 작업을 하는데 개발자의 시간이 꽤 많이 든다. 왜냐면 스크린샷을 찍어서 PC로 옮겨서 정리해야 하고, 일일이 스크린샷에 보이는 글자에 해당하는 Key를 찾아서 매핑해줘야 한다.

번역 툴 만들기

번역의 퀄리티를 높이면서 개발자/번역가의 시간을 줄일수 있는 새로운 툴을 만들었다.

  • 앱화면 스크린샷을 찍으면 자동으로 Key를 매핑한 영역을 기록
  • 번역가가 스크린샷을 보면서 바로 번역할수 있는 페이지 제공
  • 포멧스트링(%s, %d) 검사
  • 번역가가 한 번역을 QR코드로 바로 실제 앱에 올려보기(UI 깨지는 경우 확인)
  • 앱 업데이트시 새로 추가된 Key만 스크린샷 찍음
  • 모바일(iOS, Android, Flutter), Web 모두 지원

Step 1. 스크린샷 찍기

앱을 Debug 모드에서 실행하면 현재 프로젝트의 전체 Key가 보이게 되고, 핸드폰 화면에 번역 대상이 되는 Key가 등장하면 스크린샷 버튼이 활성화 된다. 스크린샷 버튼을 누르면 현재 화면 캡쳐가 업로드 된다. 이때 단순히 스크린샷 이미지만 업로드 되는게 아니라 스크린샷에 포함된 Key에 대한 정보도 같이 업로드 된다.

Step2. 번역하기

스크린샷 등록이 완료되면 번역가에게 보내는 링크가 생성된다. 스크린샷에 번역해야 하는 Key의 영역이 보이고 화면을 보면서 번역을 하면 된다.

Step3. 번역 결과 다운로드

번역을 완성하면 번역 결과를 다운로드 할 수 있고, 프로젝트 폴더에 다운받으면 모든 과정이 끝난다 🎉

한국인이 글로벌 서비스를 만드려면 최소 2개 이상의 언어로 번역을 해야 하는데, 많은 노력과 시간이 수반된다. 최대한 개발자와 번역가의 시간을 줄이면서 더 높은 수준의 결과물을 얻기 위해서 번역툴을 만들었다. 이 번역툴을 이용하면 개발자는 한국어로 개발해서 스크린샷만 찍으면 되고, 번역가는 개발자에게 받은 페이지에서 화면을 보면서 아직 미번역된 Key만 채워주면 된다.

아직은 내부 툴로만 사용하고 있지만 더 안정화 하고, 외부에서 사용해도 될 정도의 퀄리티가 되면 오픈할 예정이다.

--

--