Front-end Internationalization

tim-wright-272031

프론트엔드 국제화는 생각보다 번거롭다. 고민해야할 부분도 없진 않은데, 하나씩 차근 차근 살펴보자.

1. URL

일단 language와 locale이 다르다는 것을 알아야한다. 하지만 어지간한 대기업이 아니면 각 loccale 별로 다른 language를 맵핑하기보다는 locale과 language를 동일하게 생각해서 접근하는 경우가 많다. 이 포스팅에서는 language과 locale을 크게 구분하지 않고 최대한 locale로 용어를 통일해서 사용하겠다.

– 1. locale을 url에 넣을 것인가?

대부분의 경우에 넣는 것이 깔끔하다. 다만, 구글과 같이 google.com 으로 접속시 브라우저 / 로그인 아이디의 세팅값에 따라 적당한 locale을 가진 다른 도메인 google.co.kr 으로 redirect 해주는 경우도 있다. 추천하는 세팅은 apple.com과 같이 기본적으로 영어 또는 한국어를 세팅해주고 나머지 locale을 apple.com/kr 처럼 쓰는 것. (mozilla는 도메인 바로 뒤에 en-US와 같이 language-locale 이 따라붙는다)

url parameter로 olaf.kr/some-path?locale=en 과 같이 파라미터로 넣는 것도 생각해볼 수 있겠다. 하지만 url param은 특정 페이지에서 쓰이는 변수로 더 적당한 것 같으며, 전역적 / 지속적으로 적용되는 locale을 url param으로 쓰는 것은 부적절하다 느꼈다.

– 2. locale을 어떤 순위로 적용할 것인가?

여러가지 경우가 있다. 처음 방문자냐, 아니면 브라우저에 저장(cookie, localeStorage)된 locale이 있냐. url에 locale이 포함되어있냐 등. 내가 선호하는 순위는 url에 있는 locale, 브라우저에 저장된 locale, 브라우저에서 derived된 locale, 그리고 그냥 default locale. 브라우저의 설정에 따라 locale을 결정하는 건 browser-locale 을 사용하자.

2. Modular?

Front-end에서 번역 텍스트를 관리하는 두 가지 방법이 있다. 각 Component 별로 따로 messages.js 와 같은 파일에서 유지하거나, 아니면 모든 번역 텍스트를 단일 파일에서 관리하는 것. 나는 후자를 선호하는데 이유는 다음과 같다.

  • 번역 텍스트는 각 컴포넌트 간에 교집합이 생각보다 크다.
    • 확인 / 취소부터 시작해서 주로 쓰이는 서비스 관련 용어들은 겹칠 수 밖에 없다. 예를 들어, 송금 서비스에서 Transfer, Send 와 같은 단어는 여러 모듈 내에서 광범위하게 쓰인다.
  • 개별 파일로 있는 경우 번역자에게 맡기기가 정말 귀찮다.
    • 각 모듈 별로 messages 파일을 보내기도 껄끄럽거니와, js 파일을 수정하는 것도 비개발자에게는 숨이 막혀온다
  • 굳이 개별 파일로 만들어 로컬에서 관리하는 것이 비효율적인 이유는, 어차피 번역 텍스트는 Front-end 뿐만 아니라 Back-end 에서도 많이 쓰이기 때문이다.
    • 로컬에서 관리하기 보다는 공유하는 것이 좋다.
    • 여러가지 텍스트를 여러가지 언어로 번역하다 보니 엑셀과 같이 테이블 형식의 구조를 띄다보니 google spreadsheet로 관리하는 것도 나쁘지 않았다.

3. Google Spreadsheet

위 이유로 구글 스프레드시트로 결정했다. 번역자들도 쓰기 어렵지 않고, API가 잘 제공되어 크롤러(라고 부르기도 부끄러운 간단한 스크립트)를 만들어 Front-end와 Back-end가 알아서 번역파일을 받아가는 것이다. 적당히 API를 이용해서 Object에 번역 정보를 긁어 모은 뒤에, fs.writeFileSync('./src/messages/index.js', `/* eslint-disable */\nexport default ${JSON.stringify(result, null, 2)}`);와 같이 파일쓰기 하는 방식이다.

Screen Shot 2017-10-22 at 7.30.17 AM.png
번역 구조는 사용하는 라이브러리에 따라 달라질 수 있다.

이 스크립트를 npm package에 추가하여 build할 때 마다 갱신해주는 방식으로 항상 최신 파일로 유지할 수 있을 것이다.

One thought on “Front-end Internationalization”

Leave a Reply