구독·계정 서비스 UI 아키텍처와 글로벌 UX

문제

솔루션의 첫 진입점인 계정 서비스에 구독제 전환과 계정 설정 기능이 더해지면서, 타입별 폴더 구조로는 확장이 어려웠습니다. 복잡한 구독 UI는 props drilling으로 기획 변경마다 넓은 범위의 수정이 필요했고, 11개 언어를 지원하는 글로벌 서비스 특성상 언어별 폰트·레이아웃 관리도 과제였습니다.

무엇을 했나

Feature 분리와 Compound Component 패턴화

구독·결제·멤버·워크스페이스 기능을 7개 독립 feature로 분리하고, Compound Component + Context 패턴을 5개 핵심 UI에 적용했습니다. UI 구성을 부모의 컴포넌트 조합만으로 바꿀 수 있게 되어 기획 변경 대응이 구조적으로 단순해졌습니다.

11개 언어 글로벌 UI 품질 관리

400개 이상의 번역 키와 CJK 언어별 폰트·레이아웃을 관리해 11개 언어에서 일관된 화면 경험을 제공했습니다. 번역가와 PM이 직접 수정할 수 있는 워크플로우를 만들어 개발자 병목을 제거했습니다.

MSW 기반 검증 환경

백엔드 API 개발 의존성에서 벗어나기 위해 MSW로 Mock API 환경을 구축하고 Jest와 연동해, 실제 결제 없이 주요 시나리오를 검증할 수 있게 했습니다.

초기 로딩 성능 개선

Lazy Loading, Code Splitting, Tree Shaking을 적용해 번들을 분석·최적화했습니다.

성과

• 기획 변경 대응 시간 50% 단축
• 초기 로딩 469ms → 202ms (57% 개선)
• 전체 번들 3MB → 1.6MB (47% 감소), 디자인 시스템 번들 3MB → 517KB (83% 감소)
• 11개 언어에서 일관된 화면 경험 제공