pile·
프론트엔드·딜리셔스딜리셔스·

신상마켓 i18n 개발과정

문제신상마켓을 한·영·중·일 다국가 서비스로 확장하려는데, 기존 코드는 다국어를 전제로 짜여있지 않았다. 건물 이름을 한국어 문자열로 분류하는 식의 하드코딩이나, 언어별 텍스트 길이 차이로 UI가 깨지는 문제가 곳곳에 박혀 있었다.
접근Vue-i18n을 도입해 키-값 기반 번역, 복수형, 날짜·시간·통화 포맷, 동적 인터폴레이션을 표준화했다. 건물 매칭은 문자열에서 location ID로 바꿔 로직과 번역을 분리했고, 로고·이미지 같은 자산도 로케일별로 조건부 제공했다. API는 언어 헤더로 응답을 받아오고, 번역 워크플로우는 구글시트에서 Lokalise로 갈아타 스크린샷 컨텍스트·플랫폼별(web/iOS/Android) 필터·개발툴 연동까지 한 곳에서 관리하게 됐다.
결과다국어 코드와 텍스트가 분리되며 신상마켓이 4개 언어를 안정적으로 지원하게 됐고, Lokalise 기반 워크플로우로 번역 추가·수정이 개발 사이클에 자연스럽게 녹아들었다.
딜리셔스
딜리셔스 블로그
원문은 여기서 이어서 읽을 수 있어요
원문 읽기
읽음 (0)

이 글과 비슷한

  1. 프론트엔드·여기어때 (GC컴퍼니)여기어때 (GC컴퍼니)·

    항공 프론트엔드 구축기 (7/10): 창구를 하나만 두었습니다

    여기어때 항공 서비스 프론트엔드가 웹과 앱 웹뷰 두 환경에서 동일한 함수 호출로 동작하는 앱 브릿지 추상화 레이어를 설계한 과정을 다룬다. iOS·안드로이드 규약 차이와 "웹에 존재하지 않는 브릿지를 어떻게 호출하나"라는 문제를 단일 추상화 층으로 해결한 구현 사례다.

    요약 이어보기
    #react#typescript#webview+2