Kyeongmin/C.E.L_Slide_test2

Files

kyeongmin c42e65fc7e Initial commit: Kei Design Agent

콘텐츠를 시각적으로 구조화된 슬라이드 HTML로 변환하는 독립 에이전트.

아키텍처 (4단계 파이프라인):
  1. Kei 실장 (Opus) — 콘텐츠 유형 분류 + 블록 배치
  2. 디자인 팀장 (Sonnet) — 레이아웃 컨셉 (블록 배치 + 페이지 수)
  3. 텍스트 편집자 (Sonnet) — 슬롯 텍스트 정리 (핵심 유지)
  4. CSS Grid 렌더러 — HTML 조립

블록 템플릿 7종:
  comparison, card-grid, relationship, process,
  quote-block, conclusion-bar, comparison-table

기술 스택:
  FastAPI + Anthropic API + Jinja2 + CSS Grid
  Pretendard Variable 한국어 폰트

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-03-24 17:25:47 +09:00

13 KiB

Raw Blame History

Design Agent — 콘텐츠 시각 구조화 슬라이드 생성기

프로젝트 목적

텍스트 콘텐츠를 1페이지 가로 슬라이드로 시각 구조화하는 독립 에이전트. 콘텐츠의 의미를 분석하여 적합한 레이아웃 블록을 선택하고, 핵심만 추출하여 깔끔한 HTML/CSS로 렌더링한다.

핵심 원칙: 전체 페이지를 하나의 고정 템플릿으로 찍어내는 것이 아니라, 콘텐츠를 분석 → 각 덩어리별로 적합한 레이아웃 블록 선택 → 조합하여 배치.

아키텍처

Kei (실장) — Kei Persona API 호출
    "이 콘텐츠는 비교+정의+관계도 구조다. 이렇게 배치해라."
    ↓
디자인 팀장 (Sonnet)
    "비교는 2단, 정의는 카드 3열, 관계도는 벤. 핵심만 남기고 나머지 버려."
    ↓
실행자 (CSS Grid 렌더러)
    "팀장이 정한 대로 CSS Grid로 조립."

역할 분리

역할	담당	하는 일	하지 않는 일
Kei (실장)	Opus via Kei API	콘텐츠 의미 분석, 유형 분류, 배치 방향 결정	디자인, CSS 작성
디자인 팀장	Sonnet	블록 타입 선택, 콘텐츠 선별(70% 버림), 슬롯 채우기, 세부 기준 수립	콘텐츠 의미 판단
실행자	CSS Grid 렌더러	확정적 HTML/CSS 생성, 디자인 토큰 적용	판단, 선택

핵심 프로세스

사용자 콘텐츠 입력 (텍스트 붙여넣기 또는 파일 업로드)
    ↓
[1단계] Kei 실장(Opus) — 콘텐츠 유형 분류
    → "이건 비교(A vs B) + 정의(3개 용어) + 관계도(상위/하위)"
    → 적합한 블록 조합 결정
    ↓
[2단계] 디자인 팀장(Sonnet) — 레이아웃 컨셉만
    → "이 파트는 카드로, 이건 비교로, 2페이지 필요"
    → 블록 배치 + 페이지 수 + 슬롯 목록 (텍스트는 채우지 않음)
    ↓
[3단계] 텍스트 편집자(Sonnet, Kei 역할) — 슬롯 텍스트 정리
    → 도메인 전문가로서 원본 핵심을 유지하며 각 슬롯 분량에 맞게 편집
    → 과도한 요약 금지, 출처 보존, 개조식 작성
    ↓
[4단계] 실행자(CSS Grid) — 확정적 HTML 생성
    → 블록 타입에 맞는 CSS 템플릿 적용
    → 디자인 토큰 (색상, 여백, 폰트 크기) 적용
    → 다중 페이지 시 page-break 처리
    ↓
미리보기 → 사용자 확인 → HTML 다운로드

핵심 원칙: 디자인 팀장은 레이아웃만 결정하고 콘텐츠를 건드리지 않는다. 텍스트 정리는 도메인 지식이 있는 Kei 역할(텍스트 편집자)이 한다.


---

## 콘텐츠 유형 분류 기준

Opus가 콘텐츠를 분석하여 아래 유형으로 분류한다.
**이 분류는 하드코딩이 아니라, Opus가 매번 사고하여 판단한다.**

| 텍스트 패턴 | 유형 | 적합한 블록 |
|------------|------|-----------|
| "A vs B", 장단점, 차이점 | 비교 | 2단 병렬 / 비교 테이블 |
| "1단계 → 2단계 → 3단계" | 프로세스 | 플로우차트 / 단계 카드 |
| "X는 Y를 포함한다", 상위-하위 | 구성/관계 | 벤 다이어그램 / 트리 |
| 수치, KPI, 통계 | 핵심 지표 | 큰 숫자 + 보조 텍스트 |
| 용어 정의, 개념 설명 | 정의 | 카드 3열 / 아이콘 카드 |
| 기능/특성 나열 | 목록 | 아이콘 리스트 / 카드 그리드 |
| 연도별 사건, 로드맵 | 시간 순서 | 타임라인 (가로/세로) |
| 핵심 메시지, 결론 | 강조 | 결론 바 / 인용 블록 |
| 문제 상황, 경고 | 문제 제기 | 경고 박스 / 강조 인용 |

---

## 블록 타입 정의

각 블록은 독립적인 CSS 컴포넌트로, 슬롯(교체 가능한 위치)을 가진다.

### 1. 비교 블록 (comparison)
- 2단 병렬 레이아웃
- 슬롯: 좌측 제목/내용, 우측 제목/내용
- 용도: A vs B, 장단점, Before/After

### 2. 카드 그리드 (card-grid)
- 2~4열 카드 배열
- 슬롯: 카드별 아이콘/제목/설명/출처
- 용도: 용어 정의, 개념 설명, 기능 나열

### 3. 관계도 (relationship)
- 벤 다이어그램 또는 트리 구조
- 슬롯: 중심 요소, 하위 요소들, 관계 설명
- 용도: 상위-하위 관계, 포함 관계, 기술 융합

### 4. 프로세스 (process)
- 가로 또는 세로 단계 흐름
- 슬롯: 단계별 번호/제목/설명
- 용도: 절차, 워크플로우, 파이프라인

### 5. 타임라인 (timeline)
- 시간 축 기반 배치
- 슬롯: 날짜/제목/설명
- 용도: 연혁, 로드맵, 일정

### 6. 핵심 지표 (big-number)
- 큰 숫자 + 보조 텍스트
- 슬롯: 숫자, 단위, 설명
- 용도: KPI, 통계, 성과 수치

### 7. 강조 인용 (quote-block)
- 배경색 + 좌측 라인 + 인용 텍스트
- 슬롯: 인용 텍스트, 출처
- 용도: 문제 제기, 핵심 메시지, 정의

### 8. 결론 바 (conclusion-bar)
- 하단 전체 폭 강조 영역
- 슬롯: 핵심 한 줄
- 용도: 슬라이드 결론, 요약 메시지

### 9. 비교 테이블 (comparison-table)
- 테이블 형식의 다항목 비교
- 슬롯: 행/열 헤더, 셀 내용
- 용도: 다차원 비교, 기능 매트릭스

### 10. 이미지 참조 (image-ref)
- 이미지 썸네일 + 캡션
- 슬롯: 이미지 경로, 캡션 텍스트
- 용도: 근거 자료, 문서 참조, 사진

---

## 페이지 구성 원칙

### 레이아웃 배치 규칙
- CSS Grid 기반 (`grid-template-areas`)
- 가로 슬라이드 비율: 16:9 (1280×720 또는 1920×1080)
- 최대 블록 수: 1페이지에 4~6개
- 정보 계층: 위 → 아래 (문제 제기 → 분석 → 결론)
- 여백: 블록 간 최소 20px, 페이지 패딩 40px

### 블록 조합 예시

┌─────────────────────────────────────────────┐ │ [강조 인용] 문제 제기 │ ├──────────────────┬──────────────────────────┤ │ [비교] │ [카드 그리드] │ │ 2단 비교 │ 정의 3열 │ ├──────────────────┴──────────────────────────┤ │ [관계도] 벤 다이어그램 │ ├─────────────────────────────────────────────┤ │ [결론 바] 핵심 한 줄 │ └─────────────────────────────────────────────┘


---

## 디자인 원칙 (절대 규칙)

### DO (해야 하는 것)
- 여백을 충분히 확보한다 (여백 > 장식)
- 색상은 최대 3개 (메인 1개 + 포인트 1개 + 중성 1개)
- 폰트 크기 체계를 일관되게 유지 (제목/소제목/본문/캡션 4단계)
- 흑백 기조 + 포인트 컬러 최소 사용
- 정보 계층을 시각적으로 명확히 표현
- 한 슬라이드에 메시지는 1개

### DON'T (하지 않는 것)
- 그라데이션 배경 금지
- CSS 애니메이션/트랜지션 금지
- 호버 효과 금지
- 그림자(box-shadow) 최소화 (1개 레벨만)
- 원본 콘텐츠를 전부 넣으려 하지 않는다 (70% 버려라)
- 다크 테마 금지 (요청하지 않는 한)
- 둥근 모서리 과다 사용 금지 (border-radius 최대 8px)

---

## 디자인 토큰

```css
:root {
    /* 색상 */
    --color-primary: #1e293b;      /* 메인 (짙은 남색) */
    --color-accent: #2563eb;       /* 포인트 (파랑) */
    --color-neutral: #64748b;      /* 중성 (회색) */
    --color-bg: #ffffff;           /* 배경 */
    --color-bg-subtle: #f8fafc;    /* 보조 배경 */
    --color-border: #e2e8f0;       /* 테두리 */
    --color-danger: #dc2626;       /* 경고/문제 */

    /* 폰트 크기 */
    --font-title: 2rem;            /* 슬라이드 제목 */
    --font-subtitle: 1.25rem;      /* 섹션 제목 */
    --font-body: 0.95rem;          /* 본문 */
    --font-caption: 0.8rem;        /* 캡션/출처 */

    /* 여백 */
    --spacing-page: 40px;          /* 페이지 패딩 */
    --spacing-block: 20px;         /* 블록 간 간격 */
    --spacing-inner: 16px;         /* 블록 내부 패딩 */

    /* 기타 */
    --radius: 6px;                 /* 둥근 모서리 */
    --border-width: 1px;           /* 테두리 두께 */
    --accent-border: 3px;          /* 강조 테두리 */
}

교본 (레퍼런스) 관리

저장 위치

D:\ad-hoc\kei\design_agent\
├── CLAUDE.md                      ← 이 파일
├── templates/                     ← 블록별 HTML/CSS 교본
│   ├── comparison.html            ← 비교 블록 교본
│   ├── card-grid.html             ← 카드 그리드 교본
│   ├── relationship.html          ← 관계도 교본
│   ├── process.html               ← 프로세스 교본
│   ├── timeline.html              ← 타임라인 교본
│   ├── big-number.html            ← 핵심 지표 교본
│   ├── quote-block.html           ← 강조 인용 교본
│   ├── conclusion-bar.html        ← 결론 바 교본
│   ├── comparison-table.html      ← 비교 테이블 교본
│   └── image-ref.html             ← 이미지 참조 교본
├── samples/                       ← 완성 슬라이드 샘플 (레퍼런스 이미지 + HTML)
├── design-tokens.css              ← 공통 디자인 토큰
└── docs/                          ← 조사 자료, 기술 문서

교본 추가 방법

좋은 디자인 샘플을 찾는다 (CodePen, 직접 제작 등)
HTML/CSS 코드를 templates/ 폴더에 저장한다
슬롯 위치를 {{SLOT_NAME}} 형식으로 표시한다
CLAUDE.md의 블록 타입 정의에 참조를 추가한다

교본 품질 기준

디자인 원칙(DO/DON'T)을 준수하는가
슬롯이 명확하게 분리되어 있는가
디자인 토큰을 사용하는가 (하드코딩 색상 아닌 CSS 변수)
1페이지 안에 들어가는 크기인가

Kei API 연동

연동 방식

Design Agent는 Kei Persona 서버(localhost:8000)의 API를 호출하여 콘텐츠 분석을 요청한다
Kei 서버가 떠있어야 Design Agent가 동작한다
향후 글벗에 붙일 때도 같은 API 호출 방식

호출 포인트

단계	API	용도
1단계 콘텐츠 분류	Kei API (Opus)	콘텐츠 유형 판단 + 배치 방향
2단계 콘텐츠 선별	Kei API (Sonnet)	핵심 추출 + 슬롯 채우기
3단계 렌더링	로컬 (CSS Grid)	HTML 생성 (API 불필요)

독립 실행 가능

Kei API 없이도 2-3단계만으로 동작 가능 (사용자가 직접 유형 선택)
Kei API 연결 시 1단계 자동화

기술 스택 (예정)

역할	도구	비고
프론트엔드	React + Vite	Kei와 동일 스택
렌더링	CSS Grid + 디자인 토큰	순수 CSS, 프레임워크 없음
AI 콘텐츠 분석	Kei API (Opus + Sonnet)	localhost:8000
출력	HTML 다운로드	PDF 불필요

향후 연결 가능성

현재: 독립 개발 + 테스트
    ↓
검증 후 선택지:
    A) Kei 본체에 합치기 (대화 안에서 "슬라이드로 정리해줘")
    B) 글벗에 붙이기 (문서 자동화 → 시각화 단계)
    C) 둘 다

독립적으로 만들어두면 어디에 붙이든 API 호출만 하면 된다.

업계 근거

SlideSpeak: 16개 레이아웃 타입 + 슬롯 기반 매핑 (가장 실용적 아키텍처)
Beautiful.ai: 300개 템플릿 + 규칙 기반 자동 레이아웃 조정
Napkin AI: NLP로 텍스트 패턴 → 시각화 유형 자동 매핑
PPTAgent (EMNLP 2025): 레퍼런스 슬라이드 클러스터링 → 유형별 패턴 추출 → 편집 방식 생성
InfoDesignLM (ICDAR 2025): 텍스트만으로 인포그래픽 레이아웃 생성, GPT-4o 능가
Microsoft LIDA: 4단계 파이프라인 (요약 → 목표 → 시각화 → 스타일링)
Dr. Andrew Abela Chart Chooser: 콘텐츠 유형 → 시각화 유형 결정 트리

금지 사항

Kei Persona Agent 코드를 수정하지 않는다
디자인 판단을 하드코딩하지 않는다 (Opus/Sonnet이 사고한다)
전체 페이지를 하나의 고정 템플릿으로 만들지 않는다 (블록 조합 방식)
콘텐츠를 전부 넣으려 하지 않는다 (핵심만 추출)
그라데이션, 애니메이션, 다크 테마를 기본으로 사용하지 않는다
교본 없이 자유 디자인을 하지 않는다 (교본 참조 필수)

13 KiB Raw Blame History Unescape Escape