Add README.md — 프로젝트 개요, 아키텍처, 설치 방법
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
146
README.md
Normal file
146
README.md
Normal file
@@ -0,0 +1,146 @@
|
||||
# Kei Design Agent
|
||||
|
||||
콘텐츠를 시각적으로 구조화된 슬라이드 HTML로 변환하는 독립 에이전트.
|
||||
|
||||
## 개요
|
||||
|
||||
텍스트 콘텐츠를 입력하면, AI가 내용을 분석하여 적합한 레이아웃을 결정하고, 핵심 내용을 추출하여 깔끔한 1페이지(또는 다중 페이지) 슬라이드를 생성합니다.
|
||||
|
||||
## 아키텍처
|
||||
|
||||
```
|
||||
텍스트 입력
|
||||
↓
|
||||
[1] Kei 실장 (Opus) — 콘텐츠 유형 분류 + 블록 배치 방향
|
||||
↓
|
||||
[2] 디자인 팀장 (Sonnet) — 레이아웃 컨셉 (블록 배치 + 페이지 수)
|
||||
↓
|
||||
[3] 텍스트 편집자 (Sonnet) — 슬롯 텍스트 정리 (핵심 유지, 도메인 지식 보존)
|
||||
↓
|
||||
[4] CSS Grid 렌더러 — HTML 조립
|
||||
↓
|
||||
미리보기 + HTML 다운로드
|
||||
```
|
||||
|
||||
### 역할 분리
|
||||
|
||||
| 역할 | 담당 | 하는 일 | 안 하는 일 |
|
||||
|------|------|---------|-----------|
|
||||
| Kei 실장 | Opus | 콘텐츠 분석, 유형 분류, 배치 방향 | 디자인, 텍스트 편집 |
|
||||
| 디자인 팀장 | Sonnet | 레이아웃 컨셉, 페이지 수, 블록 선택 | 텍스트 정리 |
|
||||
| 텍스트 편집자 | Sonnet | 슬롯별 텍스트 정리, 핵심 유지 | 레이아웃 결정 |
|
||||
| 실무자 | CSS Grid | HTML/CSS 조립 | AI 판단 |
|
||||
|
||||
## 블록 템플릿 (7종)
|
||||
|
||||
| 블록 | 용도 | 시각 |
|
||||
|------|------|------|
|
||||
| `comparison` | 2단 병렬 비교 (A vs B) | 좌/우 분할, 색상 구분 |
|
||||
| `card-grid` | 카드 2~4열 배열 | 상단 컬러 라인 + 제목 + 설명 |
|
||||
| `relationship` | 벤 다이어그램 | 외부 원 + 내부 원 3개 |
|
||||
| `process` | 단계 흐름 | 번호 원 + 연결선 |
|
||||
| `quote-block` | 강조 인용 | 좌측 컬러 라인 + 배경 |
|
||||
| `conclusion-bar` | 결론 한 줄 | 다크 배경 + 흰색 텍스트 |
|
||||
| `comparison-table` | 다항목 비교 | 테이블 헤더 + 교대 행 |
|
||||
|
||||
## 기술 스택
|
||||
|
||||
| 역할 | 도구 |
|
||||
|------|------|
|
||||
| 웹 서버 | FastAPI + uvicorn |
|
||||
| AI | Anthropic Claude API (Opus + Sonnet) |
|
||||
| 템플릿 | Jinja2 |
|
||||
| 레이아웃 | CSS Grid (16:9 고정, 1280x720px) |
|
||||
| 폰트 | Pretendard Variable (한국어 최적화) |
|
||||
| SSE 스트리밍 | sse-starlette |
|
||||
|
||||
## 설치 및 실행
|
||||
|
||||
### 사전 요구사항
|
||||
|
||||
- Python 3.10+
|
||||
- Anthropic API Key
|
||||
|
||||
### 설치
|
||||
|
||||
```bash
|
||||
cd design_agent
|
||||
python -m venv .venv
|
||||
.venv/Scripts/activate # Windows
|
||||
pip install -e .
|
||||
```
|
||||
|
||||
### 환경 변수
|
||||
|
||||
`.env` 파일 생성:
|
||||
|
||||
```env
|
||||
ANTHROPIC_API_KEY=sk-ant-...
|
||||
KEI_API_URL=http://localhost:8000
|
||||
LOG_LEVEL=DEBUG
|
||||
```
|
||||
|
||||
### 실행
|
||||
|
||||
```bash
|
||||
# Design Agent 서버
|
||||
uvicorn src.main:app --reload --host 127.0.0.1 --port 8001
|
||||
```
|
||||
|
||||
접속: http://localhost:8001
|
||||
|
||||
### Kei API 연동 (선택)
|
||||
|
||||
Kei persona 서버가 `localhost:8000`에 떠있으면 자동 연동됩니다.
|
||||
없어도 Anthropic API 직접 호출로 동작합니다.
|
||||
|
||||
## 디자인 원칙
|
||||
|
||||
- **여백 > 장식** — 그라데이션, 애니메이션, 그림자 금지
|
||||
- **색상 3개** — primary(#1e293b), accent(#2563eb), danger(#dc2626)
|
||||
- **정보 계층** — 위→아래 (문제 제기 → 분석 → 결론)
|
||||
- **1페이지 4~5파트** — 초과 시 자동 다중 페이지
|
||||
- **한국어 최적화** — `word-break: keep-all`, `line-height: 1.7`
|
||||
|
||||
## 프로젝트 구조
|
||||
|
||||
```
|
||||
design_agent/
|
||||
├── CLAUDE.md # 프로젝트 규칙
|
||||
├── PLAN.md # 태스크 계획
|
||||
├── PROGRESS.md # 진행 상황
|
||||
├── pyproject.toml
|
||||
├── src/
|
||||
│ ├── main.py # FastAPI 서버
|
||||
│ ├── config.py # 설정
|
||||
│ ├── pipeline.py # 4단계 파이프라인
|
||||
│ ├── kei_client.py # Opus 분류 (Kei API 또는 직접)
|
||||
│ ├── design_director.py # 디자인 팀장 (레이아웃 컨셉)
|
||||
│ ├── content_editor.py # 텍스트 편집자 (슬롯 채우기)
|
||||
│ └── renderer.py # HTML 렌더러
|
||||
├── templates/
|
||||
│ ├── slide-base.html # 슬라이드 베이스
|
||||
│ └── blocks/ # 블록 템플릿 7종
|
||||
├── static/
|
||||
│ ├── index.html # 프론트엔드
|
||||
│ ├── tokens.css # 디자인 토큰
|
||||
│ └── base.css # 기본 스타일
|
||||
├── docs/
|
||||
│ └── RESEARCH.md # 기술 조사
|
||||
└── tests/
|
||||
```
|
||||
|
||||
## Kei Persona와의 관계
|
||||
|
||||
```
|
||||
Kei Persona (본체) — localhost:5173/8000
|
||||
├ 대화/생성/피드백/실행 모드
|
||||
└ 독립적으로 동작
|
||||
|
||||
Design Agent (이 프로젝트) — localhost:8001
|
||||
├ 슬라이드 생성 전용
|
||||
├ Kei API 호출 가능 (선택)
|
||||
└ 독립적으로 동작
|
||||
```
|
||||
|
||||
두 프로젝트는 완전히 독립. 코드 공유 없음. API 연동만.
|
||||
Reference in New Issue
Block a user