프론트엔드 아키텍처

---

1) 층위 개념 맵

• 프론트엔드 아키텍처(앱 구조/의존 규칙)
  • 레이어드 아키텍처, 클린 아키텍처, FSD(Feature‑Sliced Design)
• UI 아키텍처 패턴(화면 로직 조직)
  • MVVM, MVP, MVI 등. 상위 아키텍처와 조합 가능
• 컴포넌트 디자인 패턴(컴포넌트 구조화)
  • 컨테이너–프리젠테이션, 아토믹 디자인 등. UI 패턴 내부에서 적용

요점: 층위별로 관리 범위가 다르다. 상위 아키텍처 위에 UI 패턴을 얹고, 그 안을 컴포넌트 패턴으로 구체화한다.

┌───────────────────────────────────────┐
  프론트엔드 아키텍처 (앱 구조/의존 규칙)        
   • 레이어드 아키텍처  • 클린 아키텍처  • FSD  
└───────────────────────────────────────┘
                      ▲ 조합
                      │
┌───────────────────────────────────────┐
  UI 아키텍처 패턴 (화면 로직 조직)            
   • MVVM  • MVP  • MVI                  
└───────────────────────────────────────┘
                      ▲ 구체화
                      │
┌───────────────────────────────────────┐
  컴포넌트 디자인 패턴 (컴포넌트 구조화)       
   • 컨테이너–프리젠테이션  • 아토믹 디자인    
└───────────────────────────────────────┘

---

2) 핵심 용어(간단 정의)

• MVVM: View와 ViewModel 분리로 UI 결합도 하향
• 레이어드: Presentation · Business(Service) · Data 수평 분리
• 클린: DIP 기반. 코어(엔티티·유스케이스)를 기술로부터 분리
• FSD: 기능 단위 수직 분할 + 슬라이스 의존 규칙
• 컨테이너–프리젠테이션: 데이터 연동과 렌더링 역할 분리
• 아토믹 디자인: 원자→분자→유기체→템플릿→페이지 계층

---

4) 비교 표

항목	레이어드	클린	FSD
목적	수평 계층 분리	DIP로 기술 독립성	기능 단위 모듈화
의존 규칙	상위 → 바로 아래	항상 코어 안쪽으로	상위 규칙 + 슬라이스 제약
UI와의 관계	Presentation 내부에 MVVM 등 적용	Interface Adapters에서 MVP/MVVM	각 Feature 내부에서 MVVM 등 선택

---

5) 선택 가이드

• 소규모·단순: 레이어드 + MVVM
• 기술 교체·장기 유지보수: 클린 + MVVM(또는 MVP)
• 대규모·다기능·병렬 개발: FSD + 슬라이스 내부에 MVVM 등 패턴 선택

---

아키텍처는 상호 배타적 선택지가 아니라 ‘조합 가능한 관점’이다. 수평 규칙(레이어드) + 경계·의존 역전(클린) + 기능 응집·public API(FSD)로 함께 운용할 수 있다.