개요 · 매핑 토큰 · 규격 페이지 · 슬라이드 문서 컴포넌트 작성 · 데이터 규칙 캔버스 · 인쇄 익스포트 · 생성 생성기 · 렌더러

Docs & Slides

개요 · 매핑

새 비주얼을 만드는 게 아닙니다. 이미 있는 웹 디자인 언어를 그대로 재사용해 문서·슬라이드에 맞게 변환합니다. 결과물은 웹사이트와 시각적으로 이어지되, 읽기·보고·발표·내보내기에 최적화됩니다.

핵심 원칙

웹 시스템은 인터랙션 중심, 문서·슬라이드 시스템은 커뮤니케이션 중심입니다. 같은 토큰을 쓰되 목적이 다릅니다.

Website
인터랙션 중심
  • · 내비게이션 · 인터랙션 · 호버 상태
  • · 반응형 UI · 제품 경험 · 유저 플로우
Docs & Slides
커뮤니케이션 중심
  • · 정보 위계 · 가독성 · 핵심 요약
  • · 데이터 시각화 · 제안·리포트 구조
  • · 익스포트 일관성 · 인쇄/PDF 안정성

매번 수작업 디자인 없이도 문서와 슬라이드가 프리미엄하고, 구조적이고, 일관되게 보이도록 만드는 것이 시스템의 목표입니다.

웹 → 문서 매핑

웹 UI 요소를 문서·슬라이드 요소로 매핑해 재사용합니다. 웹 레이아웃을 그대로 복사하지 않고, 각 요소를 정적 읽기·내보내기에 맞게 단순화합니다.

웹 요소
문서 · 슬라이드 등가물
웹 배경
문서 · 슬라이드 배경
웹 카드
리포트 블록 · 인사이트 카드 · KPI 카드
웹 버튼
CTA 라벨 · 섹션 태그 · 하이라이트 pill
대시보드 패널
차트 컨테이너 · KPI 패널 · 데이터 요약
웹 내비게이션
목차 · 섹션 마커 · 슬라이드 진행 라벨
히어로 섹션
표지 · 오프닝 슬라이드 · 핵심 요약
피처 그리드
제안 기능 섹션 · 서비스 분해
가격 섹션
가격표 · 패키지 비교
모달
콜아웃 박스 · 주의 노트
뱃지
상태 라벨 · 카테고리 · 지표 태그
폼 레이아웃
브리프 입력 · 내부 요청 양식
푸터
문서 푸터 · 법적 푸터 · 연락처 블록

적용 범위

아래 산출물 전부에 같은 시스템을 적용합니다.

사업 문서 클라이언트 제안서 캠페인 리포트 성과 리포트 내부 교육 자료 제품 문서 피치덱 프레젠테이션 PDF · DOCX · PPTX 익스포트

이 가이드 구성

문서·프레젠테이션 시스템은 다음 순서로 정의됩니다.

1
토큰 · 규격

컬러·타입·스페이싱 토큰 + 페이지·슬라이드 규격·차트 팔레트.

 2
페이지 · 슬라이드 레이아웃

표지·요약·데이터·캠페인 리포트 등 재사용 레이아웃 타입 + 미리보기.

 3
문서 컴포넌트

KPI·랭킹·성장·표·인사이트·추천 — 라이브 목업 + props.

 4
작성 · 데이터 규칙

제목·요약·KPI 카피 + 차트·표·상태 뱃지 규칙.

 5
캔버스 · 인쇄

A4·16:9·9:16 실물 캔버스, 세이프 영역, 인쇄·PDF 규칙.

 6
익스포트 · 생성

내보내기 포맷·파일명·AI 생성 스키마·QA 체크리스트.

 7
생성기 · 렌더러

입력 JSON → 실물 문서·슬라이드 렌더 + 인쇄·PDF.