문제
기존 웹은 단일 앱에 기능이 밀집되어 있었습니다. AI 챗과 메인 서비스의 릴리스 주기·트래픽 특성이 다른데도 함께 배포되었고, 도메인이 늘수록 경계가 흐려졌습니다. Android/iOS WebView 하이브리드와 엔터프라이즈 배포를 동시에 만족해야 했습니다.
솔루션
코드는 모노레포에서 공유하고, 배포·장애 단위는 앱으로 나눴습니다. 메인 앱과 에이전트(AI 챗) 앱을 Ingress path로 분리하고, 공통 libs와 BFF로 플랫폼을 고정했습니다.
- util → data-access → ui → feature 4계층을 린트/CI로 강제
- 공통 fetcher/BFF로 인증·장애 등 횡단 관심사 중앙화
- 네이티브 브릿지를 Promise API로 추상화하고 로컬 mock 지원
- 홈을 CMS 기반 Server-Driven UI·카드 단위 장애 격리로 재설계
- Nx affected → Docker → K8s/ArgoCD GitOps·승격 게이트까지 설계
결정의 포인트
- 홈 전체가 무너지지 않도록 카드 단위 스트리밍·에러 경계로 부분 실패 UX
- UI 순수성을 위해 앱 전용 로직은 Context 주입으로 분리
- 운영 배포는 스테이징 검증 경로를 파이프라인에서 강제
성과
- 메인·에이전트 독립 배포로 릴리스·장애 격리
- CMS 주도 카드 시스템으로 노출·순서를 코드 배포 없이 제어
- 공통 플랫폼과 GitOps로 팀 확장과 운영 자동화 기반 확보
- 수동 배포 제거·빌드 시간 약 40% 단축으로 릴리스 리드타임 축소
- Datadog RUM·APM으로 장애 대응·릴리스 피드백 루프 확보
- 리포지토리 핵심 기여자로 약 2,550 커밋 기여
Nx 멀티앱으로 경계를 나누고, 공유 플랫폼·홈 SDUI·CI/CD·GitOps까지 한 흐름으로 구축해 확장 가능하고 회복탄력적인 B2C 웹을 만들었습니다.
Stack
Nx
Next.js 16
React 19
TypeScript
Tailwind
TanStack Query
KDS
GitHub Actions
Kubernetes
ArgoCD
Datadog