아키텍처별 컴포넌트 분해와 AI 작업 위임

architecture-patterns-overview|아키텍처를 선택했으면, 그 다음은 "파일을 어떻게 나누고, AI에게 어떤 단위로 맡기는가"다. 아키텍처가 분해의 **"축"**을 결정한다.

분해 축 비교

Layered — 기술 역할별, 아래에서 위로

src/
├── model/       ← Domain
├── storage/     ← Infrastructure
├── service/     ← Application
└── ui/          ← Presentation

AI 작업 순서: model → storage → service → ui (순차적, 아래 층부터).

검증 핵심: 층 간 의존 방향이 위→아래인지. AI가 편의상 UI에서 직접 DB를 호출하는 코드를 만들 수 있다.

Clean Architecture — 인터페이스로 분리

src/
├── domain/entities/     ← 핵심 (의존성 없음)
├── domain/ports/        ← 인터페이스만 정의
├── application/         ← 유스케이스 (포트만 의존)
├── adapters/            ← 인터페이스 구현 (SQLite, Claude API...)
└── ui/

AI 작업: domain → application → adapters (어댑터끼리 병렬 가능).

검증 핵심: application이 ports의 인터페이스만 사용하는지. 직접 SQLite를 import하면 Clean이 무너진다.

MVVM — 화면별 독립 작업

src/
├── views/
│   ├── timetable/    (View + ViewModel)
│   ├── courseEditor/  (View + ViewModel)
│   └── chat/         (View + ViewModel)
├── models/
├── services/
└── stores/            ← 전역 상태

AI 작업: 공유 기반(models, services, stores) → 화면별 병렬 작업.

검증 핵심: ViewModel끼리 직접 참조하지 않는지. 공유 데이터는 반드시 Store를 통해서.

Event-Driven — 핸들러별 완전 독립

src/
├── events/eventBus.ts
├── handlers/
│   ├── courseHandler.ts
│   ├── conflictHandler.ts
│   ├── storageHandler.ts
│   ├── notificationHandler.ts
│   └── llmHandler.ts
└── models/

AI 작업: 이벤트 정의 → 모든 핸들러 병렬 가능.

검증 핵심: 핸들러가 다른 핸들러를 import하지 않는지. 이벤트 흐름이 순환하지 않는지.

Pipe & Filter — 필터별 완전 독립

src/
├── pipeline/pipeline.ts
├── pipeline/filters/
│   ├── htmlFetcher.ts      (URL → HTML)
│   ├── htmlParser.ts       (HTML → RawData)
│   ├── dataTransformer.ts  (RawData → Course[])
│   ├── conflictValidator.ts
│   └── dbWriter.ts
└── pipeline/types.ts       ← 각 단계의 입출력 타입

AI 작업: 입출력 타입 정의 → 모든 필터 병렬 가능 → 파이프라인 조립.

검증 핵심: 각 필터의 출력 타입이 다음 필터의 입력 타입과 일치하는지.

전체 비교

| 아키텍처 | 분해 축 | AI 작업 단위 | 병렬 가능성 | 검증 핵심 | |---|---|---|---|---| | Layered | 기술 역할 | 층 단위 | 낮음 (순차) | 층 간 의존 방향 | | Clean | 의존성 방향 | 도메인→유스케이스→어댑터 | 어댑터 병렬 | 인터페이스만 의존 | | MVVM | 화면 단위 | View-ViewModel 쌍 | 화면 병렬 | ViewModel 간 참조 없음 | | Event-Driven | 이벤트 | 핸들러 단위 | 높음 | 이벤트 순환 없음 | | Pipe & Filter | 처리 단계 | 필터 단위 | 높음 | 입출력 타입 일치 |

혼합 예시: Layered + MVVM

시간표 앱 (Tauri + Svelte + SQLite)의 현실적 조합:

전체 구조: Layered (model → service → ui)
UI 내부:   MVVM (화면별 View-ViewModel 쌍)

AI 위임 순서:

도메인 모델 → 2. DB 계층 → 3. 서비스 로직 → 4. 화면별 UI (병렬) → 5. LLM 연동

각 작업을 맡길 때 designing-component-internals|구성요소 내부 설계에서 정한 "방향"을 함께 제공한다.