덱
화면에 띄워 보여 주는 16:9 표면입니다. 1920 × 1080 고정 캔버스에 v1 이 실측한 크기를 그대로 쓰고, 재질만 카톤으로 바꿨습니다.
슬라이드 바닥은 단색이고, 장면은 헤어라인 행 · 파인 면 · 초점 카드 하나로 위계를 냅니다. 1920 캔버스는 제품 화면보다 크게 읽혀 두께도 2배(4,6)입니다. 슬라이드는 화면 테마를 따르지 않고 data-tone 으로 라이트 · 다크를 고릅니다. 반응형으로 만들지 않습니다. 노트북과 프로젝터에서 줄바꿈이 같아야 발표자가 자기 슬라이드를 압니다.
- 쓰는 경우
- 분기 리뷰 · 제안 · 발표 자료. 렌더러(uyoostudio)가 템플릿으로 마크업을 만들고 뷰어가 넘긴다.
- 쓰지 않는 경우
- 모든 블록을 카드로 · 카드 안에 카드 · 슬라이드 전체를 primary 로 칠하기 · 01 · 02 번호 킥커 · 제목마다 강조어 색칠 · 그라데이션 · 블롭 배경을 쓰지 않습니다. 다크 슬라이드는 장 표지 · 마무리처럼 넘김의 마디에만 둡니다.
import
/* 렌더러(단일 HTML · PDF)는 Tailwind 없이 두 파일을 그대로 인라인한다 */
node_modules/@uyoolabs/ui/src/css/carton-tokens.css
node_modules/@uyoolabs/ui/src/css/carton/brand.css
// 앱 화면에 슬라이드를 띄울 때는 @import "@uyoolabs/ui/css" 안에 들어 있다
// 서체: @uyoolabs/ui/fonts/app(Noto Sans · Display · Mono) · 일본어 덱은 fonts/app-ja
// 장면 아이콘: import { DECK_ICONS } from "@uyoolabs/ui/deck-icons"구성 요소
키트의 아홉 장입니다. v1 장면 열여섯은 픽스처 brand-deck 에 모두 있습니다.
마크업
스테이지는 region(슬라이드 모음), 슬라이드는 group(APG Carousel 의 수동 회전)
<div className="uyoo-deck-stage" data-static={printing || undefined}
style={{ "--uyoo-deck-scale": scale }}
role="region" aria-roledescription="슬라이드 모음" aria-label="한결 3분기 제품 리뷰">
<section className="uyoo-slide" data-tone="light" data-current
role="group" aria-roledescription="슬라이드" aria-label="05 / 09 · 회의를 25분으로 줄이자 …">
<div className="uyoo-slide-rail">
<span className="uyoo-slide-run">사용 현황</span>
<img className="uyoo-slide-mark" data-for="light" src={mark.light} alt="" />
<img className="uyoo-slide-mark" data-for="dark" src={mark.dark} alt="" />
</div>
<div className="uyoo-slide-body">
<p className="uyoo-slide-kicker">운영 노트 12호 · 9월 결제팀 회의 61건</p>
<h2 className="uyoo-slide-head">회의를 25분으로 줄이자 안건이 짧아졌습니다</h2>
<div className="uyoo-slide-scene" data-cols="1">
<div className="uyoo-slide-reg" data-fill="fill" data-tempo="ui">
<ul className="uyoo-deck-rows">
<li data-reveal="step" data-on style={{ "--uyoo-deck-i": 0 }}>…</li>
<li data-reveal="step" data-focus style={{ "--uyoo-deck-i": 1 }}>…</li> {/* 초점 행 = 그 장의 카드 */}
</ul>
</div>
</div>
<div className="uyoo-slide-note"><span><b>…</b> · …</span><span className="uyoo-slide-src">출처 · …</span></div>
</div>
<div className="uyoo-slide-foot"><span><b>HG-Q3-REVIEW</b> · …</span><span>1.2판 · 2026-10-22 · 05 / 09</span></div>
</section>
</div>부분과 클래스
CSS 표면이라 props 대신 클래스와 상태 속성을 적습니다.
| 부분 | 클래스 | 변형 · 규칙 |
|---|---|---|
| 틀 | uyoo-deck-stage · uyoo-slide · -rail · -run · -mark · -body · -foot | data-tone="light|dark" · data-layout="cover|section" · data-current · mark[data-for] |
| 머리 · 캡션 | uyoo-slide-kicker · -head · -lede · -label · -sub · -note · -src | 제목은 언제나 두 줄 자리. 대문자 · 넓은 자간은 영어만 |
| 장면 틀 | uyoo-slide-scene · uyoo-slide-reg | data-cols="1|2" · data-balance="even" · data-fill="start|center|between|fill" |
| 표지 · 장 표지 | uyoo-slide-cover · -chapter · -title · -by · uyoo-deck-art | 제목 88 · 장 표지 76 |
| 초점 면 | uyoo-deck-card · uyoo-deck-stack(-row) · rows > li[data-focus] · cell[data-focus] · slab[data-state=added] | 슬라이드당 하나. 두께 4,6 · 지붕 32 |
| 목록 · 지표 · 인용 | uyoo-deck-rows(-row-title · -desc · -meta) · -figs · -fig[data-focus] · -fig-value · -fig-label · -aside(-title) · -quote(-text · -who) · -quotes(-rest) | 지표는 앞면 · 옆면 타일 + 4px 이음새 |
| 표 · 코드 · 터미널 | uyoo-deck-table · -status · -code(-bar) · -term(-bar · -line) | [data-tone="ok|warn|bad"] · [data-tok="comment|mark"] |
| 순서 | uyoo-deck-opener(-n · -t) · -timeline(-when · -what · -timeline-note) · -steps · -proof(-item · -box · -title) | li[data-state="done"] · li[aria-current="step"] · data-layout="spine" |
| 차트 | uyoo-deck-bars · -bar(-label · -track · -fill · -value) · -funnel(-stage · -label · -track · -fill · -value · -drop) · -range(…) · -journey(…) | 폭이 값. 이탈은 주의색 |
| 그 밖 | uyoo-deck-compare(-side · -text) · -paths · -path[data-state=was|now] · -matrix · -quad · -cell · -axis[data-axis] · -layers · -slab(-dim) · -icons · -icon-cell · -logos(-wall · -cell · -cap) · -chips(-set · -cap) · -chip · -name(-title · -sub) · -shot | 같은 규칙(파인 면 · 헤어라인 · 초점 하나) |
| 등장 | [data-reveal="step|rise|line"] · [data-on] · [data-static] · [data-tempo="ui|narrative"] · --uyoo-deck-i | 인쇄 · 줄인 모션에서는 모두 편 채로 |
키보드(뷰어)
넘길 때 aria-live="polite" 로 '4 / 9 · 제목' 을 알립니다. 차트 장은 캡션 줄에 핵심 수치를 글로 적습니다.
| 키 | 동작 |
|---|---|
| → · Space · PageDown | 다음. 공개 단계가 남았으면 단계부터 편다 |
| ← · PageUp | 이전 |
| Home · End | 처음 · 끝 슬라이드 |
| F | 전체 화면 |
| Esc | 전체 화면 · 뷰어에서 나간다 |
v1 deck.css 의 짧은 클래스(.stage · .slide · .scene · 장면 30종)와 등장 클래스(.step · .rise · .is-on · body.static)가 어디로 갔는지는 docs/migration/v2-brand.md 의 덱 표에 있습니다.