← Selected work

01 · KT · 2025.02 – Present

MYKT 차세대 웹

통신사 B2C 메인 앱을 앱 단위로 분리 가능한 모노레포로 재설계하고, 공유 플랫폼·홈 도메인·배포 파이프라인까지 end-to-end로 구축했습니다.

Role
FE 설계 · 공통 기반 · 홈 · CI/CD
Focus
멀티앱 · SDUI · GitOps
Stack
Nx · Next.js · React
Type
Enterprise B2C WebView

문제

기존 웹은 단일 앱에 기능이 밀집되어 있었습니다. 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