README 정리: 안 된 것 섹션 제거, MDX 01 추가, AS-IS/TO-BE 차이 명확화
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
84
README.md
84
README.md
@@ -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/`) |
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user