무신사 글로벌 다국어 시스템 구축 과정

이번 글에서는 무신사 글로벌 Frontend 팀의 다국어 시스템 구축 과정과 그 과정에서 겪은 문제점 및 해결 방법을 다룹니다. 다국어 지원을 위한 i18next와 Lokalise를 연동하며 최신 기술 스택을 활용하여 효율성을 높인 사례를 공유할 것입니다. 또한, 향후 계획을 통해 더욱 발전할 무신사의 번역 시스템에 대해 알아보겠습니다.

무신사 글로벌 다국어 시스템 구축의 기술 스택

무신사는 글로벌 이커머스 플랫폼으로서 다양한 언어를 지원해야 하는 상황에 직면해 있습니다. 이와 관련하여 프론트엔드 개발 팀은 i18next라는 JavaScript 라이브러리를 선택했습니다. i18next는 React와의 통합을 지원하며, 번역 파일을 기능이나 애플리케이션별로 네임스페이스로 나눌 수 있는 유연성을 제공합니다. 이러한 다양한 장점 덕분에 무신사는 초기 단계에서 모든 번역을 단일 파일에 통합해 사용하던 것을 개선하여, 각 앱별로 번역 파일을 동적으로 로드하는 방법으로 전환하게 되었습니다. 동적 import를 통해 애플리케이션 별로 필요한 번역만 로드하고, 그 결과 사용하지 않는 번역 리소스를 최소화하여 번들 크기를 줄일 수 있었습니다. 또한, 프론트엔드 팀은 불필요한 한국어 번역 파일을 제거하여 글로벌 시장에 더 적합한 서비스를 제공할 수 있었습니다. 이 과정에서 무신사는 기술 스택을 지속적으로 개선하고 리팩토링하여 최적의 성능을 이끌어내는 데 집중했습니다. 이렇게 구축된 다국어 시스템은 향후 달라질 수 있는 다양한 요구사항에 유연하게 대응할 수 있습니다.

Lokalise와의 효율적인 연동 과정

다국어 지원 시스템의 성공적인 구축에는 번역 관리 도구가 필수적입니다. 무신사는 Lokalise라는 번역 관리 시스템(TMS)을 선택하여 팀 간의 원활한 협업을 이끌어냈습니다. Lokalise는 API와 CLI를 통해 간편하게 번역 파일을 관리할 수 있도록 돕고, 실시간으로 번역 변경 사항을 확인할 수 있는 기능을 제공합니다. 이를 통해 무신사 팀은 번역 작업이 이루어질 때마다 Slack 알림을 통해 변화를 즉각적으로 공유하고 있어 신속한 피드백이 가능합니다. 또한, GitHub와 연동되어 PR(Pull Request) 자동 생성 워크플로우를 통해 중앙 리포지토리에 번역 업데이트를 손쉽게 반영할 수 있게 되었습니다. 이러한 연동 방식은 무신사가 글로벌 무신사 프론트엔드 레포지토리를 유지하는 데 큰 도움이 되었으며, 작업의 일관성을 높이고 관리의 복잡성을 줄였습니다. 특히, 다양한 언어를 동시에 지원해야 하는 이커머스 플랫폼의 특성상, Lokalise와의 연동은 그 중요성이 더욱 강조됩니다. 이는 번역의 효율성을 크게 향상시키며 다양한 언어에 관한 변경을 신속하게 처리할 수 있는 기초를 마련해 줍니다.

무신사의 실질적인 i18n 시스템 진화 과정

무신사의 다국어 시스템은 초기 단계에서 모든 번역기를 단일 파일로 로드하는 방식에서 시작되었습니다. 하지만, 이로 인해 발생한 번들 크기 비효율이 문제로 지적되면서 여러 단계에 걸쳐 리팩토링이 이루어졌습니다. i18next의 동적 import를 통해 필요한 번역만 로드하는 방식으로 개선하고, 이후 한국어 번역을 제거함으로써 불필요한 리소스를 줄였습니다. 이러한 과정에서 무신사는 코드의 가독성을 높이고 성능을 개선하기 위한 다양한 노력을 아끼지 않았습니다. 현재의 시스템에서는 static import와 VITE_LANG 환경 변수를 통해 빌드 시점에 다국어 번역 리소스를 결정하는 방식으로 발전하였습니다. 이 방식을 통해 불필요한 번역 파일을 제거하고, Tree-shaking 최적화를 달성할 수 있었습니다. 이러한 진화 과정의 핵심은 개발자들이 실시간으로 요구하는 변화를 반영하면서, 최적의 사용자 경험을 제공하는 것입니다. 무신사는 다국어 지원을 위한 i18n 시스템을 더욱 견고하게 만들며 사용자들에게 한층 향상된 서비스를 제공하고 있습니다.

무신사는 글로벌 프론트엔드 다국어 시스템 구축의 과정을 통해 많은 교훈을 얻었습니다. 간단하게 시작하여 점진적으로 문제를 해결해나가는 접근 방식이 중요하며, 또한 동적 import보다는 정적 import를 통한 성능 개선이 더욱 시급함을 깨달았습니다. 이제 무신사는 이 경험을 바탕으로 미래에도 더 많은 국가와 언어 지원을 계획하고 있습니다. 향후 계획에는 TypeScript 타입 안전성 강화, 복수형 처리의 개선, S3 기반 동적 로딩 시스템 도입 등이 포함되어 있습니다. 이는 무신사가 목표하는 서비스의 고도화에 더욱 가까워지는 길임을 자각하며, 지속적인 기술적 발전을 이뤄 나갈 것입니다.

이 블로그의 인기 게시물

매크로 코딩으로 시니어 성장의 벽 넘기

궁극적으로 시니어 개발자로서의 성장을 위한 ‘벽’은 매크로 코딩을 통해 극복할 수 있습니다. 이 글에서는 마이크로 코딩을 넘어서 매크로 코딩으로의 관점을 확장하는 것이 왜 중요한지를 살펴보며, 어떻게 시니어 엔지니어로서의 성장에 도움이 되는지 이야기하고자 합니다. 이를 통해 독자들이 매크로 코딩의 중요성을 이해하고 적용하도록 유도하는 것이 목표입니다. 1. 매크로 관점으로 나아가기 시니어 개발자로 성장하기 위해선 매크로 관점을 가지고 문제를 바라보는 것이 매우 중요합니다. 많은 엔지니어들이 자신이 작성한 코드의 품질이나 로직에만 집중하며 성장을 고민합니다. 하지만 매크로 관점에서는 코드가 전체 시스템과 비즈니스에 미치는 영향을 이해하고 고려하는 것이 필수적입니다. 예를 들어, 우리가 개발하는 기능이 특정 비즈니스 KPI에 어떤 기여를 하는지를 생각해볼 필요가 있습니다. 이는 단순히 제대로 작동하는 기능을 만드는 것을 넘어서, 기능이 비즈니스 목표에 부합하는지, 혹은 더 나은 대안은 없는지를 스스로 질문하게 만듭니다. 매크로 관점은 개발자에게 비즈니스 문제를 기술적으로 해결할 수 있는 기회를 제공합니다. 단순히 코드의 세부 사항에만 집중하는 것이 아니라, 팀원이나 이해관계자와의 소통 능력을 향상시키고, 그들의 필요를 이해하여 해결책을 제시하는 능력을 키워주는 것입니다. 결국 이러한 매크로 관점은 시니어 엔지니어로서의 가치를 높이게 되고, 연봉 협상에서도 직접적인 영향을 미치게 됩니다. 매크로 관점의 사고를 통해 조직 내에서의 역할과 영향력을 확대하며, 더 높은 성과를 창출하는 데 기여할 수 있습니다. 이처럼 매크로 관점으로 나아가는 것은 한 단계 더 성장하는 데 필수적입니다. 2. 문제 해결의 흐름을 이해하라 또 다른 중요한 요소는 문제 해결의 흐름을 이해하는 것입니다. 전통적인 방식에 얽매여 ‘어떻게’ 문제를 해결할지를 생각하기보다는 ‘왜’ 이 문제를 해결해야 하는지를 먼저 검토하는 접근이 필요합니다. 매크로 코딩에서는 비즈니스 문제를 해...
자세한 내용 보기

무신사머니 결제 시스템 연동의 안정성 및 혁신

```html 29CM Purchase & Post Purchase 팀이 무신사머니 결제 시스템 연동을 통해 고객의 결제 경험을 혁신적으로 개선할 예정입니다. 무신사머니는 선불결제 방식으로, 이를 통해 결제 전환율을 높이고 고객 유치를 극대화할 수 있습니다. 본 글에서는 무신사머니 결제 시스템의 안정성과 혁신에 대해 자세히 살펴보겠습니다. 안정성을 기반으로 한 무신사머니 결제 시스템 무신사머니 결제 시스템의 구조는 여러 요소를 고려하여 설계되었습니다. 고객이 주문서를 작성할 때 필요한 정보는 여러 데이터 소스에서 수집되며, 이를 통해 무신사머니의 가입 여부, 잔액, 첫 결제 여부 등의 정보를 제공합니다. 이러한 정보를 통해 고객은 무신사머니를 hassle-free하게 사용할 수 있게 되며, 우리는 장애 발생 시에도 안정적인 결제 경험을 보장하기 위해 점진적 기능 저하(Graceful Degradation) 를 채택했습니다. 이 체계적인 접근을 통해 결제 과정에서 필수 정보가 누락되더라도 주문 처리가 가능하도록 기능을 최적화했습니다. 또한 비즈니스 연속성을 높이기 위해 필수 정보와 선택 정보를 구분하여, 필수 정보가 누락될 경우 무신사머니 결제수단 자체를 비활성화하고, 선택 정보는 최대한 지원하는 형태로 시스템을 운영합니다. 결과적으로 필요한 데이터가 완비되지 않더라도 고객의 결제가 안정적으로 진행되고, 사용자 경험이 향상되는 효과를 얻었습니다. 이런 안정성 확보는 문제 해결을 용이하게 만들어 줍니다. 예를 들어, 필요한 정보가 조회되지 않을 경우에도 적절한 폴백 전략을 통해 사용자가 헷갈리는 일이 없도록 다양한 UI 정책을 마련했습니다. 이러한 안정성이 결제 시스템의 성공에 있어 핵심 요소로 작용하고 있으며, 고객의 신뢰를 얻는 데 큰 주효하고 있습니다. 혁신적 개선으로 고객 경험 향상 무신사머니 결제 시스템의 도입은 단순히 결제 수단을 늘리는 데 그치지 않습니다. 우리는 고객을 유치하고 리텐션을 높이기 위한 전략적 기능을 통합하...
자세한 내용 보기

AI와 사람의 협업을 위한 VLMOps 어드민 구축기

AI 기술이 급속도로 발전하면서 다양한 산업 분야에 자동화가 도입되고 있습니다. 특히 무신사에서는 AI를 활용해 상품 데이터를 효율적으로 분류하고 속성을 추출하여 서비스 품질을 높이고자 노력하고 있습니다. 이 글에서는 Human-in-the-loop 방식으로 기능을 향상시키기 위해 구축한 VLMOps 어드민에 대해 자세히 소개합니다. AI와 사람의 협업으로 강화된 모델 관리 무신사의 VLMOps 어드민은 AI와 사람의 협업을 한층 더 강화하기 위한 필수 시스템으로 자리매김하고 있습니다. 이 어드민은 모델 및 프롬프트 관리 과정을 웹 UI 형태로 제공하여, 데이터 오퍼레이션팀이 엔지니어와의 특별한 커뮤니케이션 없이도 최적의 실험을 진행할 수 있도록 합니다. 이렇게 축적된 의료 데이터를 통해 AI 추론의 결과를 개선하는 과정이 자동화되어 업무 효율성과 데이터 품질이 현저히 향상되었습니다. 특히, VLMOps 어드민은 OpenAI와 Google 등 외부 API와도 원활하게 연동되어 다양한 실험이 가능하다는 장점이 있습니다. 이를 통해 데이터 오퍼레이션팀은 엔지니어의 도움 없이도 원하는 프롬프트와 모델을 자유롭게 선택하여 실험할 수 있습니다. 결과적으로, 반복적인 요청과 대기 시간 없이 빠르게 모델 실험을 수행하고, 데이터 품질을 지속적으로 개선할 수 있는 환경이 조성되었습니다. 이러한 변화는 무신사가 AI 기반의 데이터 자동화와 품질 관리에 대한 새로운 접근 방식을 도입하도록 만들어 주었으며, 결과적으로 더 나은 고객 경험을 제공하기 위한 중요한 발판이 되고 있습니다. 신속하게 이루어지는 모델 추론과 검증 VLMOps 어드민은 모델 추론 과정에서도 AI와 사람의 협업을 극대화할 수 있는 기능을 표현합니다. 자동 생성되는 초안 라벨을 통해 데이터 오퍼레이션팀은 더욱 신속하게 결과를 분석하고 검증할 수 있습니다. 이렇게 생성된 추론 결과는 여러 번의 클릭만으로 즉시 처리되며, 다양한 조합의 모델과 프롬프트를 비교할 수 있는 체계가 마련되어 있습니다. 이러한 ...
자세한 내용 보기