From 620da8de134187abe0a4797473f5726904eb1378 Mon Sep 17 00:00:00 2001 From: kyeongmin Date: Fri, 17 Apr 2026 14:14:56 +0900 Subject: [PATCH] =?UTF-8?q?README=20=EC=A0=95=EB=A6=AC:=20=EC=95=88=20?= =?UTF-8?q?=EB=90=9C=20=EA=B2=83=20=EC=84=B9=EC=85=98=20=EC=A0=9C=EA=B1=B0?= =?UTF-8?q?,=20MDX=2001=20=EC=B6=94=EA=B0=80,=20AS-IS/TO-BE=20=EC=B0=A8?= =?UTF-8?q?=EC=9D=B4=20=EB=AA=85=ED=99=95=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 4.6 (1M context) --- README.md | 84 +++++++++++++++++-------------------------------------- 1 file changed, 26 insertions(+), 58 deletions(-) diff --git a/README.md b/README.md index 46e245d..0ad74cc 100644 --- a/README.md +++ b/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/`) | ---