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

Docs & Slides

토큰 · 규격

웹 컬러는 문서엔 너무 어둡거나 채도가 높을 수 있습니다. 아래는 웹 토큰에서 파생해 인쇄·PDF 가독성과 화면 표시 모두 안정적으로 보이도록 보정한 문서 전용 토큰과 규격입니다.

컬러 토큰

배경 · 표면 · 텍스트 · 액센트 · 보더 · 상태 6군. 액센트는 핵심 수치와 섹션 정체성에만, 상태색은 실제 상태에만 사용합니다.

배경 · Background
#FFFFFF
기본 문서 · 슬라이드 배경
--doc-bg-default
#F7F7F7
섹션 구분 · 옅은 면
--doc-bg-soft
#0A0A0A
표지 · 섹션 디바이더(반전)
--doc-bg-dark
#FFFFFF
인쇄 종이 면(PDF)
--doc-bg-paper
표면 · Surface
#FFFFFF
카드 · 블록 면
--doc-surface-card
#FFFFFF
그림자로 떠있는 면(shadow 0 8px 30px rgba(20,20,20,.08))
--doc-surface-elevated
#FAFAFA
표 헤더 · 줄무늬 면
--doc-surface-table
#F2F2F2
비활성 · 보조 면
--doc-surface-muted
텍스트 · Text
#1A1A1A
제목 · 본문 기본
--doc-text-primary
#4A4A4A
보조 설명(인쇄 대비 강화)
--doc-text-secondary
#6B6B6B
캡션 · 각주
--doc-text-muted
#FFFFFF
다크 면 위 텍스트
--doc-text-inverse
액센트 · Accent
#6B3FF6
핵심 수치 · 섹션 정체성
--doc-accent-primary
#EEE9FE
하이라이트 배경(틴트)
--doc-accent-soft
#6B3FF6
강조 라인 · 언더라인
--doc-accent-line
#D4FF00
다크 표지 전용 포인트(절제)
--doc-accent-highlight
보더 · Border
#E5E5E5
기본 구분선
--doc-border-default
#EFEFEF
약한 구분선
--doc-border-soft
#1A1A1A
표 헤더 · 강한 구분
--doc-border-strong
상태 · Status (인쇄 안전)
#1F9D55
완료 · 긍정 · 달성
--doc-status-success
#C77700
주의 · 지연 · 검토 필요
--doc-status-warning
#D4351C
위험 · 실패 · 마감 임박
--doc-status-danger
#6B6B6B
대기 · 정보 없음
--doc-status-neutral

타이포그래피

NanumSquare 기반 웹 타입을 문서 가독성에 맞게 조정. 한 페이지에 3개 이상 크기를 쓰지 않고, 웨이트로 위계를 만듭니다. (A4 본문 ≈ 10.5pt 환산)

Display
40px / 1.1 / ExtraBold
슬라이드 표지 · 대형 타이틀
Page Title
28px / 1.2 / Bold
문서 페이지 제목
Section Title
20px / 1.3 / Bold
섹션 제목
Subheading
16px / 1.4 / Bold
소제목 · 키 메시지
Body
14px / 1.6 / Regular
본문(문서). 슬라이드는 16–18px
Caption
11px / 1.4 / Regular
캡션 · 출처 · 각주
KPI Number
48px / 1.0 / ExtraBold · tnum
핵심 지표 숫자
Label
11px / 1.3 / Bold · 0.08em · UP
라벨 · 카테고리 태그

권장 위계: 문서/슬라이드 제목 → 섹션 제목 → 키 메시지 → 본문 → 캡션/각주 → 법적 고지.

스페이싱

웹과 동일한 4px 베이스. 문서·슬라이드는 고정 레이아웃으로 내보내므로 웹보다 엄격하게 적용합니다. 새 섹션 앞은 크게, 관련 항목 사이는 작게.

2xs
4px
xs
8px
sm
12px
md
16px
lg
24px
xl
32px
2xl
48px
3xl
64px

페이지 · 슬라이드 규격

문서와 슬라이드는 고정 캔버스에서 작업합니다. 중요한 콘텐츠는 세이프 영역 안에 두고 가장자리에 붙이지 않습니다.

세로(Portrait)
A4 문서
210 × 297 mm

여백 상하 20mm · 좌우 18mm · 본문 1–2단

가로(Landscape)
16:9 슬라이드
1280 × 720 px

세이프 영역 외곽 64px · 대형 1920×1080은 96px

세로(Story)
9:16 세로
1080 × 1920 px

소셜 · 모바일 카드. 세이프 영역 외곽 80px

차트 컬러 팔레트

차트는 카테고리 순서대로 아래 시퀀스를 사용합니다. 가장 중요한 데이터 1개만 액센트(01)로 강조하고 나머지는 무채색 계열로 눕힙니다. 상태(증감·달성)는 상태색을 별도 사용.

01 · Accent
#6B3FF6
02 · Ink
#0A0A0A
03 · Light
#8B6BF9
04 · Pale
#C9B8FC
05 · Muted
#9A9A9A
06 · Deep
#4F2BD9
증감 · 달성 주의 · 지연 위험 · 하락

다국어 (KO · EN · JA)

문서는 3개 언어로 생성될 수 있습니다. 폰트 폴백과 숫자·날짜 포맷을 통일해 어떤 언어에서도 동일하게 렌더되도록 합니다.

FontNanumSquare → Pretendard → Inter (KO · EN). JA는 시스템 일본어 폰트로 폴백. 다국어 혼용 시 깨짐 없이 렌더되어야 함.
Numbertabular-nums · 천단위 구분 · 차트와 표의 수치는 우측 정렬.
DateYYYY-MM-DD (ISO) 기본. 표지·캡션의 기간 표기 동일 포맷 유지.

접근성 · 대비

화면과 인쇄(회색조 포함) 모두에서 읽혀야 합니다.

지킬 것
  • · 본문 대비 ≥ 4.5:1 (WCAG AA), 큰 글자 ≥ 3:1
  • · 상태는 색 + 텍스트/아이콘 병행(색맹 대응)
  • · 회색조 인쇄에서도 위계가 유지되도록 명도 차이 확보
  • · 캡션·각주는 PDF 내보낸 뒤에도 읽히는 크기
피할 것
  • · 채도 높은 배경 위 장문 본문
  • · 한 페이지에 액센트색 남용(핵심 1개만)
  • · 이모지 사용 — 무조건 icon() SVG
  • · 색만으로 의미 구분(빨강=위험 등 텍스트 없이)