diff --git a/docs/architecture/IMPROVEMENT-PLAN.md b/docs/architecture/IMPROVEMENT-PLAN.md new file mode 100644 index 0000000..5b7d5df --- /dev/null +++ b/docs/architecture/IMPROVEMENT-PLAN.md @@ -0,0 +1,157 @@ +# C.E.L. Slide Pipeline — 개선 설계 + +## 목표 + +**MDX 콘텐츠를 넣으면, 중목차/소목차 기준으로 BEPs 디자인과 매칭하여 슬라이드를 자동 생성한다.** + +현재는 블록마다 스타일이 제각각이고, 매칭/조립/크기 조정이 불완전하여 수작업 보정이 필요한 상태. 이를 토큰 기반 통일 + 블록 구조 부품화 + 파이프라인 2경로화로 개선한다. + +--- + +## 개선 방향 + +| 현재 문제 | 개선 방향 | +|-----------|-----------| +| 블록마다 폰트/색/여백이 직접 박혀있어 통일 안 됨 | 토큰으로 공통 기준 확정, 블록은 변수 참조 | +| slide-base에 구조+스타일이 섞여있음 | 프레임(HTML)과 스타일(CSS) 분리 | +| 블록이 완성 HTML이라 재사용/조합이 어려움 | 블록 = 구조 부품, 스타일은 테마로 분리 | +| 블록 매칭이 파일명/tag 중심 | 속성 테이블(catalog) 기반 매칭 | +| 크기 조정이 1회 렌더로 끝남 | 입력→조정 반복 (빈 공간/overflow 자동 재분배) | +| 검증이 overflow만 | 시각 품질까지 검증 (정렬, 위계, 가독성) | + +--- + +## 핵심 축 3개 + +### 1. 표현 기준 통일 + +typography, spacing, colors, layout을 토큰으로 확정하여 모든 블록이 이 공통 기준을 따르게 한다. + +### 2. 블록의 역할 재정의 + +블록 = 완성 HTML이 아니라 **구조 부품**. 구조 스타일(flex, grid)은 블록에, 직접값(font-size, color)은 토큰으로 분리한다. + +### 3. 파이프라인 2경로화 + +- **direct-fit:** BEPs 매칭 → 블록 삽입 + 크기 조절 +- **recipe/composition:** 미매칭 → 꼭지 정리 → redesign + 반복 조정 + +--- + +## 실행 원칙 + +**direct-fit 기준:** +direct-fit은 구조, 슬롯, 시각 위계가 기존 블록과 거의 1:1로 대응될 때만 허용한다. + +**recipe-path 목적:** +recipe/composition 경로는 미매칭 콘텐츠를 새로운 구조로 재정리하되, 기존 visual language를 최대한 상속한다. + +**fit 루프 우선순위:** +fit 조정은 줄바꿈 → 간격 조정 → preview 축약 → 폰트 1단계 축소 순으로 수행한다. + +--- + +## 진행 계획 + +### 1단계: 토큰 기준 확정 + +**목표:** 모든 블록이 따라야 할 공통 기준표 확정 + +| 토큰 | 내용 | +|------|------| +| typography | 대목차/중목차/소목차/본문/캡션/footer 크기·굵기·줄간격 | +| spacing | padding/gap/indent/margin | +| colors 1층 | 공통 테마색 (title, body, border, card-bg, accent) | +| colors 2층 | 블록 의미색 (compare-left/right, role-a/b, pill-left/right) | +| layout | slide-base 위치값 (body-top, body-height, footer-bottom) | + +### 2단계: slide-base CSS 분리 + +**목표:** slide-base를 프레임 전용으로 얇게 + +- HTML에서 `