본문 바로가기
PORTFOLIO
대표 프로젝트로

FRONTEND ARCHITECTURE · DEEP MEDI

웹 어드민 2.0 아키텍처 설계

도메인 의존성을 정적으로 검증하고 버전·번역 키 관리를 자동화한 어드민 리뉴얼

기간
2026.01 — 2026.05
역할
프론트엔드 구조 설계·구현 및 개발 환경 구축
  • Next.js 16
  • React 19
  • TypeScript
  • FSD
  • Turborepo

CONTEXT

배경과 과제

웹 어드민 2.0을 리뉴얼하며 도메인별 기능과 공용 코드의 경계를 정리했습니다. 앱과 공용 패키지를 분리하고, 의존성 규칙 검증부터 다국어·버전 관리까지 반복되는 개발 작업을 자동화했습니다.

COMPONENTS

구현 구성

  1. app · 앱 구성
  2. features · 사용자 기능
  3. entities · 도메인
  4. shared · 공용 코드

IMPLEMENTATION

설계와 구현

01

도메인 경계를 코드로 검증

FSD의 app / features / entities / shared 4계층으로 코드를 구성하고 도메인 단위로 모듈화했습니다. Steiger와 eslint-boundaries로 의존성 규칙을 빌드 시점에 정적으로 검증하도록 했습니다.

02

공용 패키지와 배포 구조 정리

Turborepo 모노레포에서 앱과 공용 패키지를 분리하고 빌드 캐싱을 구성했습니다. Static Export와 CDN 배포를 적용해 정적 파일로 서비스할 수 있는 구조를 마련했습니다.

03

번역·검증·릴리스 자동화

ko / en / ja / zh 4개 로케일의 번역 키를 자동 스캔하고, release-please의 dev / main 2채널로 버전과 체인지로그를 관리했습니다. Lefthook과 Conventional Commits로 린트·타입·커밋 규칙 검증도 자동화했습니다.

OUTCOME

성과

  • 도메인 의존성 규칙을 정적 검증으로 강제하는 개발 구조를 구축했습니다.
  • 버전·체인지로그의 수동 관리 작업을 자동화하고, 4개 언어의 번역 키 스캔 파이프라인을 구성했습니다.
  • Static Export 기반으로 별도 웹 서버 없이 CDN에서 서비스할 수 있는 배포 구조를 마련했습니다.