슬라이드 자동 생성 프로세스

전처리 · MDX 를 정규화하고, Figma 디자인을 HTML 화하여 DB 에 정리함.
1

MDX 분석 + 레이아웃 정리

MDX 의 대 / 중 / 소목차 와 콘텐츠 성격에 따라 4 가지 레이아웃 중 1 개를 정리

DX 시행 — 필수 요건 + 혁신 방안
상단 3 영역
하단 좌
하단 우
결론
2

Figma 매칭

디자인 프레임 (HTML) 중 적합한 디자인 매칭

매칭 · 해당 프레임에 텍스트 업데이트

미매칭 · 가장 유사한 프레임 참고, 재구성

매칭 — Frame 13 + Frame 29
Frame 13
Frame 13 — 필수 요건 (기술·사람·자연)
Frame 29
Frame 29 — Process / Product 혁신
미매칭 — 유사 프레임 변형
DX 시행 — 필수 요건 + 혁신 방안
유사 카드 차용
유사 비교 차용
결론
적합 프레임 없음 → 가장 유사한 프레임의 CSS / 구조만 차용 (자유 디자인 X)
3

재구성 — 공간 검토 + 팝업 정리

매칭된 프레임의 영역에 콘텐츠가 들어가도록 검토

03DX 시행을 위한 필수 요건 및 혁신 방안
기술
핵심 기술 + 도구
사람
전문 인력 + 교육
자연
데이터 + 인프라
Process 혁신
AS-IS2D 도면
TO-BE데이터 통합
Product 혁신
AS-IS3D 모델
TO-BE정보 연계
동시 추진
4

출력

완성된 슬라이드를 1 장으로 검증 후 HTML 출력

MDX 03 최종 슬라이드

실질 프로세스 구조도

INPUT
MDX 1 파일
대목차 1 개 = 슬라이드 1 장
↓
STAGE 1MDX 분석 + 레이아웃 정리
정규화
외부 컴포넌트 인라인
코드
→
트리 추출
대 / 중 / 소목차
코드 (regex)
→
콘텐츠 분석
관계 / 항목수 / 성격
코드 (V3 룰)
→
레이아웃 결정
Type A / B / B' / B''
코드 (룰 매칭)
↓
STAGE 2Figma 매칭
키워드 매칭
3 계층 (핵심·세트·연관)
코드 (V1)
→
의미 매칭
임베딩 유사도
ko-sroberta
→
구조 매칭
레이아웃·관계·항목수
코드 (V3)
→
종합 판정
매칭 / 미매칭
코드 (V4)
↓
매칭
콘텐츠 매핑
크기에 맞게 재구성
AI · Sonnet
미매칭
유사 프레임 변형
대안 시도 → 변형
AI · Sonnet
↓ 결과 통합 ↓
STAGE 3재구성 — 공간 검토 + 팝업 정리
크기 계산
컨테이너 px 배분
코드 (space_allocator)
→
영역별 검증
적정 / 넘침 / 공란 / 불균형
코드 (fit_verifier)
→
보정
팝업 분리 또는 STAGE 1 회귀
코드 + 회귀
↓
STAGE 4HTML 조립 + 검증 + 출력
HTML 조립
프레임 + 콘텐츠 + 팝업
Jinja2
→
실측 검증
넘침 차단
Selenium
→
시각 검증
품질 평가
AI · Opus Vision
→
슬라이드 1 장
final.html
처리 주체 코드 결정론적 Python 처리 AI Anthropic API (Sonnet / Opus) Jinja2 템플릿 렌더링 도구 외부 도구 (Selenium / 임베딩 모델)