README 정리: 안 된 것 섹션 제거, MDX 01 추가, AS-IS/TO-BE 차이 명확화

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-17 14:14:56 +09:00
parent b60a089e6c
commit 620da8de13

View File

@@ -62,73 +62,41 @@ MDX 입력 → 정규화 → 꼭지 추출(AI) → zone 구분 → BEPs 매칭
## 어떻게 개선하려 하는가
블록을 **구조 부품화**하고, 스타일을 **토큰으로 분리**하며, 파이프라인을 **direct-fit / recipe 2경로**로 정리합니다.
핵심은 3가지입니다.
### AS-IS (현재)
1. **블록을 구조 부품화** — 완성 HTML이 아니라, 구조만 담고 스타일은 토큰으로 분리
2. **스타일을 토큰으로 통일** — 블록마다 제각각인 폰트/색/여백을 공통 기준으로
3. **2경로 파이프라인** — 매칭되면 바로 쓰고(direct-fit), 안 되면 재구성(recipe)
### AS-IS → TO-BE
```
1. MDX 입력 → 정규화
2. 꼭지 추출 (AI, 항상 실행)
3. zone 구분
4. BEPs 매칭 → 매칭이면 삽입, 미매칭이면 고정 렌더 (1회)
5. 조립
6. 검증 (overflow만)
7. 출력
AS-IS:
AI가 먼저 꼭지 추출하고
→ 매칭 블록이 있으면 삽입, 없으면 코드가 1회 고정 렌더
→ 빈 공간이 있어도 그냥 둠
→ 블록마다 font-size, color가 직접 박혀있어서 섞이면 위계 안 맞음
TO-BE:
중목차 기준으로 zone을 먼저 나누고
→ TF-IDF로 BEPs 매칭 시도
→ 매칭되면 블록 삽입 + 크기 조절 (direct-fit)
→ 안 되면 AI가 꼭지 정리 + 유사 디자인으로 redesign + 반복 조정 (recipe)
→ 빈 공간/overflow를 자동 재분배
→ 모든 블록이 토큰 기반이라 스타일 통일
```
### TO-BE (목표)
```
1. MDX 입력 → 정규화
2. zone 구분
3. BEPs 매칭 검토
3-1. 매칭 시 (direct-fit)
- 블록 선택 + zone 크기에 맞게 재구성
3-2. 미매칭 시 (recipe/composition)
- 꼭지 정리 (AI, 이때만)
- 유사 디자인 선택 + redesign
- 입력 → 조정 반복 (빈 공간/overflow 자동 조절)
4. 검증 (overflow + 시각 품질)
5. 출력
```
### 핵심 차이
| 항목 | AS-IS | TO-BE |
|------|-------|-------|
| AI 개입 | 항상 | 미매칭 시에만 |
| 미매칭 처리 | 고정 렌더 1회 | redesign + 반복 조정 |
| 빈 공간 | 방치 | 자동 재분배 |
| 스타일 관리 | 블록마다 직접값 | 토큰 기반 통일 |
| 블록 역할 | 완성 HTML | 구조 부품 (스타일 분리) |
| 검증 | overflow만 | 시각 품질까지 |
---
## 지금 어디까지 되었고, 어디가 안 되었는가
## 현재 상태
### 된 것
| 항목 | 상태 |
| 대상 | 상태 |
|------|------|
| MDX 03 파이프라인 | ✅ 정상 동작 (prerequisites-3col + process-product-2col) |
| MDX 02 파이프라인 | △ 구조 동작, 시각 품질 보정 중 |
| 토큰 정의 | ✅ typography(35변수), spacing(28변수), colors(41변수) |
| slide-base CSS 분리 | ✅ 인라인 style 제거, 토큰 참조로 전환 |
| 블록 작성 규칙 문서 | ✅ BLOCK-RULES.md |
| Figma 블록 추출 | 진행 중 (figma_to_html_agent/blocks/) |
| 개선 설계 문서 | ✅ IMPROVEMENT-PLAN.md |
### 안 된 것
| 항목 | 상태 |
|------|------|
| 기존 블록 토큰 전환 | 미착수 (legacy 블록에 직접값 잔존) |
| 폴더 구조 정리 | 미착수 (structures/recipes/legacy 분리) |
| TF-IDF 기반 매칭 | 미구현 |
| fit 루프 (빈 공간 재분배) | 미구현 |
| 시각 품질 검증 | 약함 (overflow만) |
| theme 변형 (light/dark/formal) | 미착수 |
| MDX 03 (3개 목표 + 비교표) | ✅ 정상 동작 |
| MDX 02 (목표 + 프로세스 + 상세표) | △ 구조 동작, 시각 품질 보정 중 |
| MDX 01 (Type A, sidebar 구조) | 미착수 |
| 토큰 기반 CSS 체계 | ✅ 정의 완료, slide-base 적용 완료 |
| Figma 블록 추출 | 진행 중 (`figma_to_html_agent/blocks/`) |
---