# UPINTER AXIS — Design System v3.3 > 유피인터 통합 디자인 가이드 · AI 연동용 정본 (Markdown) > 시각 원본: `Reference/UPINTER_2026_Company_Profile.pdf` · 토큰 정본: `tokens/upinter.tokens.json` > 이 문서와 토큰 파일이 어긋나면 토큰 파일이 이깁니다. --- ## 0. 이 문서를 AI에게 주는 방법 이 문서는 LLM·에이전트가 유피인터 산출물(웹, 문서, 슬라이드, 솔루션 UI, 영업 자료)을 **생성하거나 검토할 때** 참조하는 규칙서입니다. - 시스템 프롬프트, 프로젝트 지식, 또는 저장소 루트의 `DESIGN.md`로 제공합니다. - 산출물을 생성한 뒤 반드시 **§12 출고 전 체크리스트**를 스스로 통과시킵니다. - 우선순위: **사용자의 명시적 지시 > 이 문서 > 일반 디자인 관행.** 이 문서와 충돌하는 일반 관행(둥근 카드, 그라디언트, 다색 팔레트)은 따르지 않습니다. - 확신이 없으면 **더 적게** 합니다 — 색을 빼고, 굵기로 해결하고, 요소를 줄입니다. --- ## 1. 브랜드 기반 ### 1.1 회사 - **UPINTER(유피인터)** — Global Execution Company. 한국 브랜드의 해외 진출을 **직접 실행**하는 회사. - 마케팅으로 수요를 만들고(콘텐츠·KOL·현지 채널), 세일즈로 거래에 연결하고(바이어·리테일·라이브 커머스), 데이터·AX로 다음 실행을 정확하게 만든다. - 시장: 중국 · 일본 · 대만 · 동남아. 파트너 브랜드 120+. 본사 대구, 지사 서울. - 태도: **전략을 제안하는 회사가 아니라 시장에서 직접 파는 회사.** 장식이 아니라 정확함, 인상이 아니라 근거. ### 1.2 다섯 원칙 (판단이 갈릴 때 이 순서로) 1. **색은 셋, 강조는 하나.** 흰색·검정·버밀리온. 버밀리온은 화면당 한 곳. 2. **볼드가 위계를 만든다.** 색으로 위계를 만들지 않는다. 굵기·크기가 먼저, 색은 마지막에 한 번. 3. **구조는 번호와 흐름으로.** 순서가 있으면 `01 → 02 → 03`, 병렬이면 패널. 화살표는 항상 왼쪽→오른쪽. 4. **숫자가 말한다.** 형용사 대신 수치. 큰 숫자는 버밀리온, 라벨은 작은 회색 대문자. 5. **읽히지 않으면 없는 것.** §5의 가독성 하한선은 미학보다 우선한다. ### 1.3 말하는 방식 (카피) - 짧은 단언 · 능동태 · 수치 우선 · 주어 분명. - 영문 대문자 슬로건 한 줄 + 한글 풀이 한 줄. 예: `MARKETING CREATES DEMAND.` / 마케팅은 수요를 만든다. - 판별법: **그 문장을 경쟁사 이름으로 바꿔도 성립하면 지운다.** - 금지: "혁신적인", "최적화된", "원스톱 토탈 솔루션", "시너지 창출", "니즈에 맞춘" 등 검증 불가 형용사와 피동태. ### 1.4 CI — 심볼과 워드마크 - 정식 CI = 지구본 심볼(여섯 화살표) + `UP INTER` 워드마크의 세로 조합. 단색만. 원본 `brand/UPINTER_CI.png`(2480×1636 · #231F20), 시스템 안에서는 잉크 `#121113`으로 통일. 가이드 헤더·슬라이드 상단의 "UPINTER + 밑줄"은 디지털 전용 약식 텍스트 마크이며 정식 CI를 대신하지 않는다. - 변형 네 가지 × 색 세 가지: 세로(기본) · 가로(높이 부족) · 심볼 단독(아이콘 · 프로필) · 워드마크 단독(심볼 자리 없을 때) × 잉크 · 흰색 · 버밀리온 → `brand/logo--.png`, `logo-symbol-*-512.png`. 가이드 01.4에서 타일을 클릭하면 PNG가 클립보드에 복사된다. 새 조합은 만들지 않는다. - 색: 잉크(흰 · 틴트 · 회색 바탕) · 흰색(검정 · 버밀리온 · 사진 위) · 버밀리온(흰 바탕, 그 페이지의 강조 한 곳일 때만 — §3.5). 그라디언트 · 듀오톤 · 외곽선 · 그림자 금지. - 여백: 워드마크 대문자 높이(x)만큼 사방(세로 조합은 심볼 폭의 1/6). 최소 크기: 세로 폭 32mm · 128px, 가로 50mm · 200px, 심볼 12mm · 48px, 워드마크 20mm · 80px. 32px 이하 파비콘용 단순화 마크는 미정. - 가로 조합 규칙: 심볼 높이 = 워드마크 높이 × 2.2 · 간격 = 워드마크 높이 × 0.6 · 세로 중앙 정렬(`brand/build-brand.mjs`). - 금지: 비율 변경 · 회전 · 간격 변경 · 워드마크 재조판 · 색 변경 · 효과 · 저해상 확대 · 대비 3:1 미만 배경 · 다른 로고 옆 밀착. --- ## 2. 금지 규칙 패널(둥근 틴트 면)은 허용한다. 금지하는 것은 생성형 도구의 기본값이다. | # | 금지 | 이유 | 대체 | |---|---|---|---| | 01 | 한쪽에 붙인 색 바(left accent border) | 생성형 도구의 최다 출력 형태 | 패널 안 36px 짧은 밑줄 또는 상단 번호 | | 02 | 그림자(box-shadow)로 만드는 고저 | 흰 바탕에서 탁하고 인쇄에서 사라짐 | 틴트 면 전환 또는 1px 테두리 | | 03 | 그라디언트 | 색이 늘고 문서에서 재현 불가 | 단색. 예외: 사진 위 가독성 스크림(불투명도만 변화) | | 04 | 버밀리온 외 유채색 | 팔레트에 없음 | 없음. 차트 4계열 이상에서만 확장(§9) | | 05 | 이모지 마커 · 컬러풀 클립아트 | 플랫폼마다 다르게 그려짐 | 얇은 원 안 라인 아이콘(§8) | | 06 | 본문 가운데 정렬 | 읽는 속도 저하 | 왼쪽 정렬. 패널 내부·스트립만 예외 | | 07 | 바운스 · 스프링 · 확대 호버 | 톤에 맞지 않음 | 200ms 감속, 색·불투명도만 변화 | | 08 | 회색 농도로만 위계 만들기 | 대비 하한 위반 | 굵기·크기·간격(§5.4) | | 09 | 작은 글자에 원색 버밀리온 `#F9431C` | 흰 바탕 3.59:1, AA 미달 | 13–17px는 `#DE2F00` | | 10 | 패널 안에 패널 | 위계가 평평해짐 | 패널 안은 텍스트와 괘선만 | 추가 금지: 인디고·퍼플·시안 계열, 글래스모피즘, 아이콘+제목+두 줄 카드 3단 나열, 100vh 히어로, 스크롤 트리거로 숨긴 콘텐츠, 3D 일러스트, 지구본 위 화살표, 제네릭 스톡 사진. --- ## 3. 컬러 ### 3.1 기본 세 값 (소개서 실측 · 변경 금지) ``` BRAND #F9431C 버밀리온 · oklch(65% 0.223 33) INK #121113 본문 · 제목 · 챕터 디바이더 바탕 PAPER #FFFFFF 콘텐츠 바탕 TINT #FFF7F4 패널 · 스트립 배경 GREY #F6F6F6 회색 패널 ``` ### 3.2 버밀리온 램프 | step | hex | 흰 바탕 대비 | 잉크 대비 | 용도 | |---|---|---|---|---| | 50 | #FFF2EF | 1.09 | 17.21 | 틴트 | | 100 | #FFE2DB | 1.22 | 15.38 | 틴트 | | 200 | #FFC9BC | 1.47 | 12.85 | 그래픽 | | 300 | #FFA28D | 1.94 | 9.69 | 다크 모드 그래픽 | | 400 | #FF7457 | 2.66 | 7.07 | 다크 모드 그래픽 · 차트 | | **500** | **#F9431C** | **3.59** | **5.24** | **브랜드 원색 — 큰 글자·면·밑줄·아이콘** | | **600** | **#DE2F00** | **4.65** | 4.05 | **작은 글자(13–17px) · 버튼 면** | | 700 | #B52100 | 6.60 | 2.85 | 버튼 호버 면 (라이트·다크 동일) | | 800 | #8D1600 | 9.34 | 2.01 | — | | 900 | #670D00 | 12.85 | 1.47 | — | ### 3.3 뉴트럴 (순중립) `#FFFFFF` 0 · `#FAFAFA` 50 · `#F6F6F6` 100 · `#EBEBEB` 200 · `#D9D9D9` 300 · `#BDBDBD` 400 · `#9E9E9E` 500 · `#6B6B6B` 650 · `#5F5F5F` 700 · `#3D3D3D` 800 · `#262626` 900 · `#121113` 950 ### 3.4 시맨틱 토큰 (라이트 / 다크) — 컴포넌트는 이것만 참조 | 토큰 | Light | Dark | 대비(L/D) | 역할 | |---|---|---|---|---| | `surface-canvas` | #FFFFFF | #121113 | — | 주 바탕 | | `surface-panel` | #F6F6F6 | #1E1D1F | — | 회색 패널 | | `surface-tint` | #FFF7F4 | #2A1A15 | — | 틴트 패널 | | `surface-inverse` | #121113 | #FFFFFF | — | 반전 밴드 · 챕터 디바이더 | | `surface-brand` | #F9431C | #F9431C | — | 브랜드 면 (큰 글자만 얹음) | | `surface-action` | #DE2F00 | #DE2F00 | — | 버튼 면 (흰 글자 4.65) | | `text-primary` | #121113 | #FFFFFF | 18.83 / 18.83 | 본문 · 제목 | | `text-secondary` | #5F5F5F | #BDBDBD | 6.39 / 10.02 | 보조 설명 | | `text-tertiary` | #6B6B6B | #9E9E9E | 5.33 / 7.03 | 메타 · 캡션 | | `text-accent` | #DE2F00 | #F9431C | 4.65 / 5.24 | **작은** 강조 · 아이브로우 · 링크 | | `text-brand` | #F9431C | #F9431C | 3.59 / 5.24 | **큰** 강조 (19px 볼드↑ 또는 24px↑) | | `text-on-brand` | #FFFFFF | #FFFFFF | — | 브랜드·액션 면 위 글자 | | `text-inverse` | #FFFFFF | #121113 | 18.83 / 18.83 | 반전 면(`surface-inverse`) 위 글자 | | `rule-hairline` | #EBEBEB | #2C2B2D | — | 기본 괘선 1px | | `rule-default` | #D9D9D9 | #3A393B | — | 패널 테두리 1px | | `rule-strong` | #121113 | #FFFFFF | — | 제목 아래 · 표 헤더 2px | | `rule-brand` | #F9431C | #F9431C | 3.59 / 5.24 | 밑줄 3px · 화살표 · 원 테두리 | | `action-hover` | #B52100 | #B52100 | 6.60 / 6.60 | 버튼 호버 면 (흰 글자) · 라이트·다크 동일 | | `focus-ring` | #DE2F00 | #F9431C | — | 키보드 포커스 2px | CSS 변수명: `--up-<토큰>` (예: `var(--up-text-accent)`). `dist/upinter.css` 참조. ### 3.5 핵심 규칙 - **원색 `#F9431C`는 크게만.** 19px 볼드 이상 또는 24px 이상 텍스트, 면, 밑줄, 아이콘, 화살표에 사용. 13–17px 텍스트에는 `#DE2F00`. - **버튼 = `#DE2F00` 면 + 흰 글자.** 라이트·다크 동일. 호버는 `#B52100`(흰 글자 6.60:1), 색만 바뀌고 크기·위치는 그대로. 브랜드 면 `#F9431C` 위에는 큰 흰 글자만. - **강조 예산: 화면당 버밀리온 한 곳.** 헤드라인 밑줄, 큰 숫자 하나, 버튼 하나, 버밀리온 채움 원형 아이콘(`filled`, §8.1) 중 하나만. 번호·화살표·짧은 밑줄·원 테두리 아이콘(`circle`)은 구조 요소라 예산에 세지 않음(단 화면당 8개 이하). - 버밀리온 면적(디바이더 제외) ≤ 화면의 6%. 전면 버밀리온은 문서당 한 번(챕터 디바이더). - 본문 안 강조는 색이 아니라 굵기 700. - **그레이스케일 테스트:** 채도 0으로 낮춰도 위계가 읽혀야 한다. ### 3.6 기능색 (상태 전용 · 브랜드 맥락 사용 금지 · 항상 텍스트 병기) | 상태 | Light text | Light tint | Light line | Dark text | Dark tint | Dark line | |---|---|---|---|---|---|---| | 완료 | #397D4B | #E9F8EB | #5CA46D | #4A995D | #112716 | #236E3A | | 대기 | #946600 | #FEF2DF | #C18A22 | #B57E00 | #2F1E00 | #825900 | | 중단 | #C14349 | #FFEFEF | #E86F73 | #D0666A | #391415 | #AB3841 | | 안내 | #2876A5 | #E9F6FF | #4D9CD1 | #3690C7 | #0B2435 | #046697 | CSS 변수: `--up--`. text는 같은 계열 틴트 위와 캔버스(흰/잉크) 위 모두 4.5:1 이상(v3.2에서 한 단계 조정), line은 캔버스 대비 3:1(필·테두리용). 상태 필은 13px 700 텍스트를 반드시 병기한다. ### 3.7 차트 - 3계열 이하: `#F9431C` + 회색(`#7A7A7A` / dark `#BDBDBD`)만. - 4계열 이상 확장(light): #F9431C · #7A7A7A · #A86556 · #008298 · #438353 · #836BAC - 4계열 이상 확장(dark): #FF866C · #BDBDBD · #E19989 · #58BED5 · #7FC08C · #B7A0E4 - 강도(sequential, light): #FFF0EC → #FFD2C8 → #FFB19F → #FF866C → #FC4925 → #CC2C03 - 강도(sequential, dark): #580D00 → #861500 → #B52100 → #E63100 → #FF6647 → #FFAC99 - CSS 변수: `--up-chart-1…6` · `--up-seq-1…6` (테마에 따라 자동 전환) - 단일 계열 차트는 최고값 하나만 버밀리온, 나머지 회색. --- ## 4. 타이포그래피 ### 4.1 서체 - **Pretendard Variable** — 한글·라틴 전부. 표제 700–800, 본문 400, 라벨 700. 스택: `'Pretendard Variable', 'Pretendard', 'Inter', 'Noto Sans KR', sans-serif` - **IBM Plex Mono** — 코드·토큰명·데이터 화면의 수치에만. 라벨에 남용 금지. - 웹 폰트 없는 환경(문서·PPT): Pretendard 설치본. 대체는 Inter(라틴) + Noto Sans KR(한글). - 내려받기(모두 무료 · SIL OFL): Pretendard https://github.com/orioncactus/pretendard/releases/latest (`Pretendard-1.3.9.zip` → `public/variable/PretendardVariable.ttf`, 웹은 https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css) · IBM Plex Mono https://fonts.google.com/specimen/IBM+Plex+Mono · Inter https://rsms.me/inter/ · Noto Sans KR https://fonts.google.com/noto/specimen/Noto+Sans+KR ### 4.2 스케일 (웹 기준) | 이름 | 크기 | 행간 | 자간 | 굵기 | |---|---|---|---|---| | display | 96px | 0.96 | −0.03em | 800 | | h1 | 64px | 1.02 | −0.025em | 800 | | h2 | 44px | 1.12 | −0.02em | 700 | | h3 | 32px | 1.22 | −0.015em | 700 | | h4 | 24px | 1.32 | −0.01em | 700 | | h5 | 19px | 1.42 | −0.005em | 700 | | lead | 20px | 1.65 | 0 | 400 | | body | 17px | 1.75 | 0 | 400 | | small | 15px | 1.68 | 0 | 400 | | micro | 13px | 1.50 | 0 | 400 — 절대 하한 | | eyebrow | 13px | 1.40 | +0.12em | 700 · 대문자 · `text-accent` | | kicker | 15px | 1.40 | +0.04em | 700 · 대문자 · 잉크 | 인접 단계 크기 비 ≥ 1.25 (속성 2개 이상 동시 변경 시 1.15 허용). ### 4.3 페이지 헤드 스택 (모든 콘텐츠 페이지의 시작) ``` [좌상단] 1. eyebrow 13px · 700 · 대문자 · +0.12em · #DE2F00 ← 페이지 주제 (영문) 2. kicker 15px · 700 · 대문자 · 잉크 ← 영문 슬로건 한 문장 3. desc 13–15px · 400 · 회색 · 60자까지 한 줄 ← 한글 한두 줄. 문단이 아니므로 §5.3 측정 규칙과 별개 4. headline 32–44px · 700 · 잉크 ← 핵심 구절 하나에만 버밀리온 밑줄 3px [우상단] 페이지 번호 26px · 800 [하단] 좌 www.up-inter.com · 우 문서명 · 13px 회색 ``` ### 4.4 한·영 혼용 - 한 문장 안 한글·라틴 같은 크기. 라틴을 키우지 않음. - 한글 본문 자간 0. 라틴 표제 −0.02~−0.03em. 대문자 라벨 +0.04~+0.12em. - 혼용 문단 행간 1.75(한글 기준). - 한글 이탤릭 금지. 강조는 700. - 한글 본문 400 이상. 표제 700, 디스플레이만 800. - 큰 숫자 800 + `font-variant-numeric: tabular-nums`. 단위 기호(+ % M K)는 같은 굵기로 붙임: `12M+` `2.4M+` `+187%`. - **`word-break: keep-all; overflow-wrap: break-word;`** — 한글 어절 중간 줄바꿈 금지. 표제 `text-wrap: balance`, 문단 `text-wrap: pretty`. - 밑줄(`.ul`)은 헤드라인당 **하나**, 결론이 되는 구절에만. --- ## 5. 가독성과 위계 (하한선 · 미학보다 우선) ### 5.1 최소 크기 | 매체 | 본문 최소 | 보조 최소 | 절대 하한 | |---|---|---|---| | 웹 (데스크톱·모바일 동일) | 17px | 15px | 13px | | 솔루션 UI | 15px | 13px | 13px | | 문서·제안서 A4 | 10.5pt | 9pt | 8pt (각주만) | | 슬라이드 16:9 발표용 | 20pt | 16pt | 14pt | | 슬라이드 화면 열람용 | 12pt | 10pt | 9pt | | 인쇄 콜래터럴 | 9.5pt | 8pt | 7pt (법정 고지만) | **하한을 깎아서 내용을 넣지 않는다.** 자리가 부족하면 내용을 줄이거나 페이지를 나눈다. ### 5.2 행간 한글 본문 1.70–1.80(기본 1.75) · 라틴 1.50–1.60 · 혼용 1.75 · 표제 19–32px 1.22–1.42 · 대형 표제 44px↑ 0.96–1.12 · 표·패널 내부 1.45–1.55. ### 5.3 한 줄 길이 한글 25–40자(최적 33) · 라틴 45–75자(최적 66) · CSS `max-width: 34em` (17px 기준 약 590–650px). 넓은 화면은 본문 폭을 고정하고 여백을 남긴다. 예외: 페이지 헤드의 설명 줄(§4.3 desc)은 문단이 아니라 한 문장이므로 60자까지 한 줄로 둔다. 캡을 40자로 걸면 여백이 남는데도 접힌다. ### 5.4 위계 - 한 화면 최대 **4단** (아이브로우 → 헤드라인 → 본문 → 메타). 5단이 필요하면 화면을 나눈다. - 인접 단계는 크기·굵기·색·간격 중 **최소 2가지**를 동시에 바꾼다. - 인접 단계 크기 비 ≥ **1.25배** (속성 2개↑ 변경 시 1.15배). ### 5.5 근접성 **그룹 사이 간격 ≥ 그룹 내부 간격 × 2.** 라벨↔값 4–8px · 항목 내 줄 8–12px · 항목↔항목 24–32px · 병렬 패널 16px · 별개 블록 48px · 절↔절 64–96px · 표제 위:아래 ≥ 2:1 (표제는 아래 본문에 붙는다). ### 5.6 정렬 왼쪽 정렬 기본. 가운데 정렬은 패널 내부·스트립·플로우 스텝·챕터 디바이더 우측 문장만. 같은 층위는 같은 기준선. 화살표는 →. 숫자는 우측 정렬. ### 5.7 구조 한 화면 한 메시지 · 목록 5±2 · 플로우 3–5단계 · 문단 3–4줄 · 첫 문장이 결론 · 수치는 문장 밖(스탯) · 단위는 라벨에. ### 5.8 모션 (읽기를 돕는 움직임) 움직임은 설명이지 장식이 아니다. 시선이 갈 곳 · 무엇이 어디서 왔는지 · 지금 무슨 일이 일어났는지 — 이 셋 중 하나를 말하지 않는 모션은 넣지 않는다. 글자는 움직이는 동안 읽히지 않는다. - **값은 둘.** 웹·UI 전환은 `--up-duration-micro` 120ms(호버 · 색 · 토글) 또는 `--up-duration-base` 200ms(등장 · 사라짐 · 크기 변화). 이징은 `--up-ease-out` 감속 하나, 등속은 진행 표시만. 튕김 · overshoot 금지(§2 #07). - **거리는 8px.** 등장 = 불투명도 0→1 + 8px 상승. 날아오기 · 회전 · 확대 없음. - **동시에 하나.** 한 화면에서 동시에 움직이는 것은 하나(강조 한 곳과 같은 규칙). 무한 반복은 로딩 표시만. - **시그니처 — 밑줄 긋기.** 헤드라인의 버밀리온 밑줄을 왼쪽→오른쪽으로 긋는다(웹 200ms · 슬라이드·영상 0.3초). 유일하게 허용되는 연출, 화면당 한 번. 로고 등장도 같은 밑줄. | 매체 | 등장 | 순서 | 유지 · 노출 | 금지 | |---|---|---|---|---| | 웹 | 불투명도 + 8px 상승 200ms, 뷰포트 진입 시 1회(재진입 재생 없음) | 병렬 패널·스탯 40ms 간격, ≤6개, 그 이상은 동시 | 첫 화면(히어로)은 로드 즉시, 등장 애니메이션 없음 | 패럴랙스 · 스크롤 연동 변형 · 카운트업 · 마퀴 · 타자 효과 | | 솔루션 UI | 진입 200ms · 퇴장 120ms · 높이 변화도 200ms 전환(내용이 갑자기 밀리면 읽던 줄을 잃는다) | 목록 순차 등장 없음, 데이터는 한 번에 | 로딩 표시는 300ms 뒤에만, 1초↑는 텍스트 병기 · 토스트 = 글자 수 ÷ 5 + 2초, 최소 4초, 호버 시 정지, 오류는 닫을 때까지 | 포커스 이동 지연 · 스켈레톤 반짝임 · 움직임만으로 알리는 상태 | | 슬라이드(발표용) | 나타내기 · 디졸브 0.3초, 와이프는 → 방향만 | 읽는 순서로 한 번에 한 단계, 페이지당 ≤5, 클릭에만 | 화면 열람용 PDF · 소개서는 빌드 없음 | 날아오기 · 회전 · 확대 · 큐브 · 플립 · 3D · 자동 재생 | | 영상 · 소셜 | 자막·타이틀 페이드 또는 → 와이프 0.3초, 글자는 제자리에서 등장 | 한 줄씩, 단어별 튀어오르기 없음 | 노출 ≥ 글자 수(공백 제외) ÷ 5 + 1초(최소 2초) · 글자가 떠 있는 동안 카메라 정지 또는 느리게 | 타자 효과 · 흔들림 · 글리치 · 외곽선 · 글로우 | 영상 자막: 크기 ≥ 프레임 짧은 변의 4%(1080 기준 44px), 타이틀 8%(88px) · Pretendard 700 흰 글자 · 바탕은 검정 또는 버밀리온 밴드(사진 위 맨 글자 · 외곽선 · 그림자 · 글로우 금지) · 한 줄 한글 12–18자, 2줄 이내 · 밑줄은 헤드라인 한 줄만 · 안전 영역은 짧은 변 5% 안쪽, 세로 영상은 하단 20% 비움. 허용 패턴 12종(가이드 05.8 라이브러리에 라이브 데모 — 데모는 이해를 돕기 위해 보이는 동안 반복 재생하지만 실제 산출물은 1회 · 이 밖의 움직임은 쓰지 않는다): | # | 패턴 | 규격 | 쓰는 곳 | |---|---|---|---| | 01 | 등장 | 불투명도 0→1 + 8px 상승 · 200ms 감속 · 뷰포트 진입 1회 | 웹 섹션 · UI 패널 | | 02 | 순차 | 01을 40ms 간격, ≤6개 · 수치는 처음부터 최종값(카운트업 금지) | 병렬 패널 · 스탯 | | 03 | 로고 등장 | 워드마크 200ms 등장 → 밑줄 → 방향 200ms(영상 0.3초) · 화면당 1회 | 영상 인트로 · 슬라이드 표지 · 웹 히어로 헤드라인 | | 04 | 플로우 | 단계 40ms 간격 등장 → 연결선 → 방향 200ms | 번호 플로우 · 프로세스 도표 | | 05 | 차트 | 축·라벨 즉시 · 막대는 기준선에서 200ms 성장, 40ms 간격 · 강조 막대 마지막 | 막대 · 도넛(각도) | | 06 | 상태 | 색 120ms 전환 + 텍스트 교체 · 기능색 필 | UI 상태 필 · 버튼 | | 07 | 토스트 | 8px 상승 200ms → 노출 글자 수 ÷ 5 + 2초(≥4초, 호버 정지, 오류는 닫을 때까지) → 120ms | UI 알림 | | 08 | 펼침 | 높이 200ms 전환(`grid-template-rows` 0fr→1fr) · 아이콘 45° 회전 | 아코디언 · 상세 행 | | 09 | 로딩 | 300ms 뒤에만 정지 스켈레톤(반짝임 없음) → 내용 200ms · 1초↑ 텍스트 병기 | 데이터 화면 | | 10 | 탭 | 인디케이터 200ms 이동 · 라벨 색 120ms · 내용 200ms 크로스페이드 | 탭 · 세그먼트 | | 11 | 디졸브 | 0.3초 디졸브 또는 → 와이프 · 클릭에만 | 발표 슬라이드 전환 | | 12 | 자막 | 페이드 0.3초 → 노출 글자 수(공백 제외) ÷ 5 + 1초(≥2초) → 0.3초 · 검정 밴드 · 카메라 정지 | 영상 · 소셜 | 가이드 HTML 자체가 참조 구현이다: 각 장 헤드라인의 `.ul` 밑줄이 뷰포트 진입 시 1회 200ms에 그어진다(`.uld .hl .ul.in`). 접근성: `prefers-reduced-motion: reduce`에서 이동·순차 등장 제거, 즉시 표시(120ms 색 전환은 유지 가능, `dist/upinter.css`가 기본 처리) · 초당 3회↑ 점멸 금지(WCAG 2.3.1) · 5초↑ 자동 움직임에는 정지 버튼(2.2.2) · 상태는 텍스트·색·아이콘 중 2가지↑ 병기, 움직임만으로 알리지 않음 · 포커스 이동은 즉시(0ms). --- ## 6. 그리드 ### 6.1 간격 스케일 (`--up-space-N`) 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 · 160 px. 스케일 밖 값 사용 금지. ### 6.2 판면 | 매체 | 컬럼 | 거터 | 판면·여백 | |---|---|---|---| | 웹 데스크톱 | 12 | 32px | 최대 1200px · 좌우 72px | | 웹 모바일 | 4 | 16px | 유동 · 좌우 24px | | 슬라이드 16:9 | 12 | 24px | 1920×1080 · 상하 60 · 좌우 86px | | 문서 A4 | 12 | 5mm | 상 20 · 하 25 · 좌우 20mm | | 솔루션 UI | 12 | 16px | 사이드바 240px · 4px 단위 | | 문서 A4 가로 · 보고서 | 12 | 5mm | 상하 18 · 좌우 22mm | | 명함 90×50mm | — | — | 여백 6mm · 안전 3mm · 재단 여유 2mm | | 소셜 1:1 · 4:5 | 6 | 24px | 1080×1080 · 1080×1350 · 여백 72px · 하단 120px 로고·핸들 | | 세로 영상 9:16 | 4 | 24px | 1080×1920 · 안전 5% · 하단 20% 비움(§5.8) | | 배너 가로 | 12 | 24px | 좌 텍스트 5 : 우 사진 7 | | 이메일 | 1 | — | 폭 600px 고정 · 좌우 24px · 한 열 | 컬럼 수는 12의 약수만, 거터는 간격 스케일 값만. 새 매체는 이 표에 행을 더한다. ### 6.3 페이지 해부 (16:9) 좌상단 아이브로우·키커·설명 / 우상단 번호 / 본문 좌 5 : 우 7 (왼쪽 헤드라인·근거, 오른쪽 시각 요소) / 하단 URL·문서명. ### 6.4 형태 - 반경: 패널 16px · 작은 요소 8px · 필·원형 아이콘 999px · 괘선 목록·표·이미지 0. - 그림자 없음. 테두리는 1px `rule-hairline` 또는 `rule-default`. ### 6.5 반응형 (웹 · 솔루션 UI — 네 구간) | 구간 | 폭 | 컬럼 | 거터 | 좌우 여백 | 구획 접기 | |---|---|---|---|---|---| | 모바일 | <640px | 4 | 16px | 24px | 패널 1열 · 스탯 2열 · 플로우 세로(↓) · 5:7은 헤드 먼저 세로 · 표 가로 스크롤 · 타임라인 2열 | | 태블릿 | 640–1023px | 8 | 24px | 32px | 패널 3열 유지(안 되면 1열, 2+1 금지) · 5:7 유지 | | 데스크톱 | 1024–1199px | 12 | 32px | 48px | 전부 펼침 · 본문 34em 고정 | | 와이드 | ≥1200px | 12 | 32px | 자동 | 컨테이너 1200px 고정 · 사진만 풀 블리드 | 접는 순서는 오른쪽 열 → 아래(시각 요소는 헤드라인 다음, 읽는 순서 유지). 접지 않는 것: 본문 17px · 하한 13px · 강조 한 곳 · 간격 비율(그룹 사이 ≥ 내부 × 2). ### 6.6 스팬 (12컬럼 허용 분할) 5:7(본문 기본 · 웹 섹션 · 배너) · 4·4·4(패널 3 · 옵션 3) · 3·3·3·3(팀 4 · 스탯 4) · 6·6(비교 2단 · 전후 사진 · 포함/미포함) · 8·4(본문 8 + 사이드 4: 스탯 · 인용 · 콜아웃) · 12(표 · 풀 사진 · 스트립 · 디바이더 · 간트 · 스윔레인). 비대칭은 5:7 · 7:5뿐. 금지: 4:8 · 3:9 · 비대칭 3분할(5:5:2) · 한 페이지에 분할 두 종류. ### 6.7 세로 리듬 8px 기준선(라벨–값 4px만 예외) · 페이지 상단 96(웹 절) · 60(슬라이드) · 64(모바일) · 절 사이 64–96, 챕터 밴드 앞뒤 128 · 블록 사이 48, 병렬 구획 16 · 표제 위:아래 ≥ 2:1 · 하단 여백 ≥ 상단의 절반 · 슬라이드 본문 y 1.55in(224px)–6.62in, 스트립 0.95in. --- ## 7. 구획 체계 (카드 대신 — 핵심 6 + 확장 6, 결합 규칙, 페이지 레시피) ### 7.1 틴트 패널 — 병렬 항목 2–3개 ``` [면] #FFF7F4 틴트 또는 #F6F6F6 회색 · 번갈아 배치 · 반경 16px · 테두리·그림자 없음 [내부] 상하 32 · 좌우 24 · 요소 간 12px · 가운데 정렬 [순서] 번호(32px 800 #F9431C) → 제목(19px 700 대문자) → 밑줄(36×3px #F9431C) → 태그(13px 700 대문자 회색 · 아래 1px 괘선) → 설명(15px 회색) [금지] 패널 안 패널 · 한쪽 색 바 · 아이콘 남용 ``` ### 7.2 번호 플로우 — 순서 있는 과정 3–5단계 ``` 원 64px · 테두리 1.5px #F9431C · 채움 없음 · 안에 라인 아이콘 26px #F9431C (둥근 종단) 기본 5단계 아이콘(§8.1 라이브러리): diagnose → prioritize → pilot → scale → operate · 순환 화살표는 loop 위: 번호 13px 800 #F9431C · 아래: 제목 15px 700 대문자 잉크 · 설명 13px 회색 화살표 20px · 2px 획 · #F9431C · 항상 → 순환은 원형 배치(4개 이하) ``` ### 7.3 스탯 블록 — 한 줄에 2–4개 ``` 숫자 34–44px · 800 · #F9431C · 단위 기호 0.55배로 붙임 (12M+ · KRW 2.3B+ · 76%) 라벨 13px · 700 · 대문자 · 회색 · +0.08em 설명 13px 회색 넷 이상이면 마지막은 잉크(#121113) ``` ### 7.4 스트립 — 페이지 하단 결론 한 줄 ``` 테두리형: 1px #F9431C · 반경 8px · 흰 바탕 틴트형: #FFF7F4 면 · 테두리 없음 내용: 영문 대문자 슬로건(첫 구절만 #F9431C 700) + 한글 풀이 15px 회색 페이지에 한 번 ``` ### 7.5 괘선 목록 — 텍스트 나열 ``` 행: 제목 19px 700 + 설명 15px 회색 (좌) · 대문자 라벨 13px 700 #DE2F00 (우) 구분: 1px rule-hairline만 · 배경·테두리·그림자 없음 ``` ### 7.6 챕터 디바이더 — 장 사이 전면 페이지 ``` 바탕 #121113 (문서당 한 번 #F9431C) 좌상단 로고(밑줄 2px #F9431C) · 우상단 번호 좌: "0N—" 40px 800 + 영문 단어 100–124px 800 −0.035em 흰색 (Marketing / Sales / Data / AX / What's Next) 우하단: 한글 두 줄 19px 우측 정렬 · 핵심 구절만 700 사진 없음 ``` ### 7.7 비교 2단 — 전·후, A·B ``` [면] 왼쪽 #F6F6F6 · 오른쪽(우리 쪽) #FFF7F4 · 같은 높이 · 반경 16px [행] 번호 + 한 줄 · 3–4행 · 1px 괘선 · 오른쪽 번호만 #F9431C [금지] 왼쪽 빨간 X · 오른쪽 초록 체크 (기능색은 상태 전용 §3.6) ``` ### 7.8 타임라인 — 마일스톤 3–6개 ``` 선 1px 회색 → · 균등 간격 (시간 비례는 간트) · 점: 지난 잉크 채움 · 현재 버밀리온 링+점 · 다음 회색 링 · 현재 하나만 버밀리온 날짜 13px 700 #DE2F00 위 · 제목 15px 700 · 설명 13px 회색 · 가운데 정렬 7개↑ 또는 긴 설명은 세로형 (왼쪽 선 · 오른쪽 글) — 문서 · 웹 모바일 기본 ``` ### 7.9 인용 ``` 따옴표 활자 “ 하나 · 96px 800 #D9D9D9 (이미지 · 아이콘 아님) · 본문 24–32px 700 두세 줄 · 밑줄 한 곳이 페이지의 강조 출처: 2px 잉크 짧은 선 + 이름 700 · 직함 · 회사 · 날짜 · 페이지에 하나 [금지] 이탤릭 · 따옴표 두 쌍 · 사진 위 인용 ``` ### 7.10 콜아웃 — 조건 · 예외 · 주석 ``` 1px 테두리 · 반경 8px · 왼쪽 정렬 · 라벨 13px 700 대문자 + 한두 문장 버밀리온 테두리 + 버밀리온 라벨은 페이지에 하나 (강조 예산) · 나머지 회색 · 스트립과 달리 결론이 아니라 조건, 페이지 어디에나 [금지] 배경 채움 · 아이콘 · 왼쪽 색 바 ``` ### 7.11 표 블록 ``` 아이브로우 제목 → 표(§9.1) → 단위 · 기간 · 출처 13px 회색 한 줄 (세 요소가 한 블록) 슬라이드 7열 · 8행까지 · 넘으면 나누고 헤더 반복 · 합계 행 상단 1.5px 잉크 + 700 · 총액 하나만 버밀리온 ``` ### 7.12 이미지 캡션 ``` 사진 · 스크린샷 + 캡션 행 (왼쪽 대문자 13px 700 회색: 누가 · 어디 · 언제 / 오른쪽 설명 13–15px 회색) · 사진 아래 12px 반경 0 (패널 안 8px) · 여러 장 8–12px 그리드 · 스크린샷은 기기 프레임 없이 [금지] 밴드 없는 사진 위 글자 · 그림자 · 테두리 · 필터 ``` ### 7.13 결합 규칙 - 한 페이지 구획 종류 ≤ 3(헤드 스택 제외). 넷이면 페이지를 나눈다. - 같은 층위 = 같은 구획 · 같은 폭. - 순서 = 논리: 헤드 스택 → 결론 헤드라인 → 근거 구획 → 스트립. - 병렬 구획 사이 16px · 별개 블록 48px · 스트립 위 32px · 구획 안 구획 없음(표 블록의 표만 예외). - 강조는 페이지에 하나(밑줄 · 큰 숫자 · 버밀리온 라벨 · 채움 아이콘 · 틴트 열 중 하나). 번호 · 화살표 · 원 테두리 · 현재 점은 구조 요소. - 폭은 §6.6 분할만, 한 페이지에 한 종류. ### 7.14 페이지 레시피 12종 (템플릿 장 번호 = §10.1) | 유형 | 쓰는 곳 | 구획 조합 | 템플릿 | |---|---|---|---| | 표지 | 문서 시작 | 로고 밑줄 · 디스플레이 · 결론 두 줄 · 검정/버밀리온 바탕 | 1–3 | | 목차 · 간지 | 장 시작 | 디바이더 + 챕터 인덱스 · 헤드라인 + 괘선 목록 + 페이지 참조 | 4–10 | | 개요 | 한 주제 소개 | 헤드 스택 → 헤드라인 + 본문 5 : 시각 요소 7 | 11 | | 병렬 설명 | 서비스 · 옵션 · 팀 | 틴트 패널 3 · 비교표 3단 · 팀 4 | 12 · 25 · 24 | | 프로세스 | 방법론 · 역할 | 번호 플로우 + 스트립 · 단계 셰브론 · 스윔레인 · 순환 구조 | 13 · 37 · 45 · 31 | | 케이스 | 실적 · 증거 | 사진 그리드 + 스탯 · 사진 2단 비교 · 인용 · 풀 사진 + 캡션 | 14 · 28 · 23 · 20 | | 데이터 | 근거 · 성과 | 표 블록 · 막대 · 선 · 누적 · 도넛 · 워터폴 · 슬로프 · 히트맵 · KPI | 16 · 17 · 40 · 41 · 39 · 42 · 43 · 47 · 38 | | 비교 · 선택 | 의사결정 | 비교 2단 · 2×2 매트릭스 · 비교표 3단 · 벤 · 퍼널 | 18 · 34 · 25 · 44 · 33 | | 일정 | 계획 · 로드맵 | 타임라인 · 간트 · 셰브론 | 19 · 32 · 37 | | 구조 | 조직 · 생태계 · 계층 | 피라미드 · 허브&스포크 · 조직 트리 | 35 · 36 · 46 | | 조건 · 범위 | 제안 조건 | 포함/미포함 체크 · FAQ · 견적 표 블록 · 콜아웃 | 26 · 27 · 29 | | 마무리 | 결론 · 다음 행동 | 한 문장 · 핵심 요약 · 다음 단계 + 연락 · 마지막 장(지도) | 21 · 22 · 30 · 48 | 레시피에 없는 조합은 가장 가까운 줄을 고르고 구획을 새로 그리지 않는다. 세 번 이상 반복 검증된 새 조합만 §7에 추가(§11). --- ## 8. 아이콘과 이미지 ### 8.1 아이콘 24×24 그리드 · 획 1.5px 고정 · 둥근 종단(round cap · join) · 채움 없음 · `currentColor` · 크기 16/20/24/32. 기본 형식: **64px 얇은 원(1.5px #F9431C) 안 26px 라인 아이콘.** 단독 사용 시 잉크·회색, 버밀리온 단독 아이콘은 화면당 하나. 금지: 채움 · 듀오톤 · 3D · 이모지 · 컬러풀 클립아트. - **라이브러리 `icons/`** — 142종 · 5묶음 · 8변형. 이름은 영문 소문자-하이픈. - 파일: `svg/.svg`(currentColor) · `png/<변형>/.png`(512px 투명) · 웹 스프라이트 `upinter-icons.svg`(``) · 매니페스트 `icons.json`(이름 · 묶음 · 한글 · `kw` 검색어). - 변형: 라인 `ink · vermilion · white` · 원형 `circle · circle-white`(64 원 테두리 1.5 안 26 아이콘, §7.2) · 채움 원형 `filled · filled-ink · filled-tint`(면 위 흰 라인 — 아이콘 자체는 채우지 않음. `filled`는 강조 예산(§3.5)에 세어 화면당 하나, 나열에는 `circle` 또는 `filled-tint`). - 실행 프로세스: diagnose · prioritize · pilot · scale · operate · loop · schedule · milestone · timeline · adjust · roadmap · history · stopwatch · layers · kanban · presentation - 마케팅: campaign · content · live · kol · reach · engagement · chat · share · review · hashtag · camera · image · film · mic · gift · ticket · trophy · thumbs-up · bookmark · newspaper · smartphone · cursor · award · layout · quote - 세일즈 · 물류: buyer · store · bag · cart · tag · global · location · export · delivery · inventory · payment · contract · ship · plane · warehouse · factory · building · return · coins · wallet · receipt · barcode · qr-code · percent · translate · headphones · stamp · map - 데이터 · AX: bar-chart · line-chart · pie-chart · database · ai · automation · dashboard · filter · table · cloud · code · insight · trend-down · activity · bot · sparkles · server · shield · key · terminal · report · network - 인터페이스: user · bell · mail · phone · arrow-right · arrow-up-right · chevron-down · check · close · plus · download · copy · edit · trash · menu · settings · info · alert · help · x-circle · lock · unlock · link · external-link · home · file · folder · upload · print · more · chevron-up · chevron-right · chevron-left · arrow-left · arrow-up · arrow-down · minus · paperclip · eye-off · grid · list · save · log-out · sun · moon · zoom-in · clipboard · user-plus · monitor · id-card · toggle - 찾기: 갤러리(HTML §08.1 · `icons/index.html`)에서 변형을 고르고 이름·한글·키워드로 검색해 클릭 복사 · PNG 저장. 없는 아이콘은 같은 규격으로 `src/icons.mjs`에 `kw`와 함께 추가하고 `node build.mjs`. ### 8.2 사진 피사체는 **현장**(매장·팝업·라이브·이벤트·창고). 스크린샷은 실제 UI 그대로, 기기 프레임 없이. 2–5장 그리드, 간격 8–12px, 반경 0(패널 안 8px). 캡션 13px 회색 대문자(`BOHEMSEO × NUBIAN`). 보정 최소, 필터 없음. 금지: 제네릭 스톡 · 악수 · 지구본 화살표 · 3D 렌더. --- ## 9. 데이터 ### 9.1 표 세로 괘선 없음 · 헤더 13px 700 대문자 회색 + 하단 2px 잉크 · 행 하단 1px 얇은 괘선 · 얼룩말 배경 없음 · 수치 우측 정렬 tabular-nums · 단위는 열 제목에 · 넘치면 컨테이너 가로 스크롤. ### 9.2 차트 막대 반경 0 · 가로 격자만 · 축 0에서 시작 · 값은 막대 끝에 직접 표기 · 범례 대신 직접 라벨 · 3계열 이하 버밀리온+회색 · 단일 계열은 최고값만 버밀리온. ### 9.3 수치 표기 축약 `12M+` `2.4M+` `23K+` `KRW 312M+` · 표 안에서만 천 단위 쉼표 `82,400` · 증감 `+187%` `−6.2%`(U+2212) · 기간 `2025.01 – 2026.03` · 비교 수치는 같은 줄·같은 크기·같은 소수점. ### 9.4 차트 고르기 (질문 → 차트, 템플릿 장 번호 = §10.1) | 독자의 질문 | 차트 | 규칙 | 템플릿 | |---|---|---|---| | 어느 항목이 큰가 | 가로 막대 | 큰 순서 정렬 · 최고값만 버밀리온 · 값은 막대 끝 | 17 | | 시간에 따라 어떻게 변했나 | 선 | 계열 ≤2 · 핵심 버밀리온 2px, 비교 회색 1.25px · 값은 끝점 · 격자 가로만 | 40 | | 전체에서 얼마나 차지하나 | 도넛 | 조각 ≤4 · 최대 조각만 버밀리온 · 값은 조각 옆 · 파이 금지 | 39 | | 구성이 어떻게 변했나 | 누적 막대 | 조각 ≤3 · 핵심 조각 버밀리온 · 합계는 막대 위 | 41 | | 증감은 어디서 왔나 | 워터폴 | 시작·끝 잉크 · 증가 버밀리온 · 감소 회색 · 점선 연결 | 42 | | 두 시점 사이 무엇이 올랐나 | 슬로프 | 같은 단위끼리만 · 최대 증가만 버밀리온 · 감소 점선 | 43 | | 어디에 먼저 투자하나 | 2×2 매트릭스 · 히트맵 | 착수 칸 틴트 / 단색 6단 + 최댓값 한 칸 버밀리온 | 34 · 47 | | 단계마다 얼마나 남나 | 퍼널 | 폭 로그 비례 · 전환율은 단계 사이 · 마지막 단계 버밀리온 | 33 | | 목표 대비 어디까지 왔나 | KPI 타일 + 진행 막대 | 타일 ≤4 · 핵심 하나만 버밀리온 · 증감은 기호 | 38 | | 기간 · 순서는 | 간트 · 타임라인 · 셰브론 | 현재만 버밀리온 · 지난 잉크 · 다음 회색 | 32 · 19 · 37 | 금지: 파이(도넛으로) · 3D · 이중 축 · 레이더 · 누적 면적 · 게이지 · 범례만으로 구분되는 차트 · 0에서 시작하지 않는 막대. 계열 4↑는 §9.2 확장 팔레트, 6↑는 표로. 움직임: 웹은 막대 200ms 성장(§5.8 패턴 05), 솔루션 UI는 불투명도 등장만(§10.3). ### 9.5 표 유형 넷 수치표(§9.1 · 합계 행 상단 1.5px 잉크 + 700) · 비교표(열 = 선택지 ≤3, 추천 열만 틴트, ○ · — 기호, 색 금지 · 25장) · 상태표(마지막 열 기능색 필 + 텍스트, §3.6) · 견적표(항목 · 내용 · 수량 · 단가 · 금액, 총액 하나만 버밀리온 15px, 조건은 표 아래 13px · 29장). 공통: 세로 괘선 · 얼룩말 없음 · 슬라이드 7열 · 8행, 넘치면 나누고 헤더 반복 · 웹 · UI는 가로 스크롤 컨테이너. --- ## 10. 적용 ### 10.1 슬라이드·소개서·제안서 (정본 매체) - 16:9 1920×1080 · 상하 60 · 좌우 86px. §6.3 골격. - 챕터: 검정 디바이더 + `0N—` + 영문 단어. 문서당 버밀리온 디바이더 한 번. - 페이지당: 헤드라인 1 · 패널 ≤3 · 스탯 ≤4 · 스트립 1. - 표지: 검정 · UPINTER 96px 800 · 아래 한 줄 400 · 로고 밑줄 · 우상단 01. - 마지막 장: 회사 정보 + 점 지도, 사무실은 버밀리온 핀, 시장(중국 · 일본 · 대만 · 동남아)은 흰 링. 지도는 실제 국경 데이터를 메르카토르로 투영한 점 격자(`templates/build-map.mjs`). - 본문 크기: 화면 열람 12pt · 발표 20pt↑ · 인쇄 10.5pt. - 빌드·전환: 발표용 파일에만. 나타내기·디졸브 0.3초, 읽는 순서로 한 단계씩, 페이지당 ≤5, 클릭에만. 화면 열람용 PDF는 정적(§5.8). - 헤드 설명(desc)은 60자까지 한 줄. 넘으면 두 줄까지, 세 줄이 되면 문장을 줄인다. - 템플릿 `templates/UPINTER-Slide-Templates.pptx` — 48장: 표지 3 · 간지 6 · 유형별 22(목차 · 헤드+본문 5:7 · 틴트 패널 3 · 번호 플로우+스트립 · 케이스 · 괘선 목록 · 표 · 막대 차트 · 비교 2단 · 타임라인 · 풀 사진 · 한 문장 · 핵심 요약 · 인용 · 팀 · 비교표 3단 · 제안 범위(포함/미포함) · FAQ · 사진 2단 비교 · 견적 · 다음 단계+연락 · 마지막 장) · 시각화 17(순환 구조(Closed loop) · 일정/WBS 간트 · 퍼널 · 2×2 매트릭스 · 피라미드 · 허브&스포크 · 단계 셰브론 로드맵 · KPI 대시보드 · 비율 도넛 · 선 차트 · 누적 막대 · 워터폴 · 슬로프 · 벤 · 스윔레인 · 조직 트리 · 히트맵 — 모두 도형, 값에 맞춰 폭 · 각도 · 위치만 고친다. 미리보기 `templates/preview/`, 유형별 추가 8장(23–30)과 시각화 17장(31–47)). 레이아웃 7종(표지 3 · 간지 2 · 본문 헤드 스택 · 마지막 장). 새 페이지는 §7.14 레시피에서 유형을 고르고 같은 유형을 복제해 내용만 바꾼다. 서체 Pretendard, 아이콘은 `icons/png/circle`, 상단 로고는 `brand/logo-horizontal-white.png`. 표지 우하단 결론 두 줄 · 간지 챕터 인덱스 · 목차 페이지 참조 · 타임라인 현재 단계(버밀리온 이중 원, 지난 단계 잉크). Google Slides용 `UPINTER-Slide-Templates-GoogleSlides.pptx`는 Noto Sans KR · 일반 밑줄로 만들어졌고 Drive에 올려 Slides로 연다. - 시각화 규칙(차트 선택은 §9.4): 순환 구조는 시계 방향 · 시작 구간만 버밀리온. 간트는 완료 `#7A7A7A` · 진행 버밀리온 · 예정 `#D9D9D9` · 마일스톤 잉크 마름모 · 현재는 세로 점선. 퍼널은 마지막 단계만 버밀리온 · 폭은 로그 비례 · 전환율은 단계 사이. 매트릭스는 착수 칸만 틴트. 피라미드는 꼭대기만 버밀리온. 허브&스포크는 허브만 잉크 면. 셰브론은 현재 버밀리온 · 지난 잉크 · 다음 회색. KPI 타일은 4개까지 · 핵심 하나만 버밀리온 · 증감은 기호. 도넛은 조각 4개까지 · 최대 조각만 버밀리온 · 값은 조각 옆. 선 차트는 계열 둘 · 핵심 버밀리온 2px. 누적 막대는 조각 셋 · 핵심 조각 버밀리온. 워터폴은 시작·끝 잉크 · 증가 버밀리온 · 감소 회색. 슬로프는 최대 증가만 버밀리온 · 감소 점선. 벤은 선만, 교집합 점 하나 버밀리온. 스윔레인은 우리 레인만 틴트 · 화살표 → ↓. 조직 트리는 최상위만 잉크 면 · 첫 유닛 틴트. 히트맵은 단색 6단 + 최댓값 한 칸 버밀리온. 유형별 추가 8장: 인용(밑줄 하나) · 팀(리드만 버밀리온 링) · 비교표(추천 열 틴트) · 범위(체크 잉크 · 미포함 회색) · FAQ(Q 버밀리온은 구조) · 사진 2단 비교(후 수치 하나 버밀리온) · 견적(총액만 버밀리온) · 다음 단계(번호 구조 · 연락 패널 회색). ### 10.2 웹사이트 - 라이트 기본. 챕터 디바이더 구조를 섹션 밴드로. - 히어로 = 표지 구조(검정, 로고 밑줄, 브랜드 라인, 주 버튼 1). **100vh 금지.** - 섹션 헤드 = §4.3 스택. 서비스는 틴트 패널 3, 케이스는 사진 그리드 + 스탯, 파트너는 로고 격자. - 버튼: 주 `#DE2F00` 필 + 흰 글자 + 반경 pill, 보조 1.5px 잉크 테두리. 화면당 주 버튼 1. 현재 메뉴는 버밀리온 밑줄 2px. - 모션: 불투명도 + 8px 상승, 200ms 감속, 뷰포트 진입 시 1회. 첫 화면은 즉시. 확대·바운스·패럴랙스·카운트업 없음(§5.8). ### 10.3 솔루션 UI (UPro) UPro 는 화면 하나가 아니라 여러 업무 앱이 사는 작은 **운영체제**다. 규칙은 세 층 — **셸**(전사 공통, 앱이 바꾸지 못한다) · **화면 골격 여섯**(앱이 화면마다 하나 고른다) · **밀도 모드 둘**(표준 · 쉬움, 사람이 계정에서 고른다). 층을 섞지 않는다: 앱은 셸을 다시 그리지 않고, 골격은 셸의 자리를 옮기지 않고, 쉬운 모드는 기능을 빼지 않는다. **공통 값.** - 라이트·다크 모두 정본. 4px 단위. 행 높이 표 40 · 리스트 48 · 툴바 56. 사이드바 240px. - 본문 15px/1.55(쉬운 모드 18px/1.7). 표 내 보조 메타만 13px. 라벨 13px 700. 입력 15px, 높이 42px, 반경 8px. - 회색 패널 `#F6F6F6` 반경 12px. 틴트는 알림·강조 패널에만. - 사이드바 240px: 그룹 라벨은 캡션처럼 13px 500 대문자 회색(+0.12em), 라벨 위 1px 괘선, 그룹 사이 24px. 항목은 라벨보다 10px 들여 15px 500 잉크, 행 36px, 항목 사이 2px. 현재 항목 700 + 회색 패널 배경(한쪽 색 바 금지). 라벨이 항목보다 굵으면 목록의 한 줄로 읽힌다 — 라벨은 항목보다 작고·가볍고·옅게, 항목은 들여쓰기(§5.4 · §5.5). - 대시보드: 핵심 수치 **하나만** 버밀리온, 나머지 잉크. 차트도 최고값 하나만. - 상태: 기능색 필 + 텍스트. 색만으로 알리지 않음. - 포커스: 2px `focus-ring` 아웃라인. 오류: 무엇이 잘못됐고 어떻게 고치는지 한 문장. - 화면당 채워진 버튼 1, 나머지 테두리형(쉬운 모드 예외는 아래). - 모션: 진입 200ms · 퇴장 120ms · 높이 변화는 전환으로 · 로딩 표시는 300ms 뒤 · 토스트 ≥ 4초(§5.8). **셸 (OS).** 앱이 열 개가 되어도 새로 배우는 것은 앱 하나의 일뿐이어야 한다. 위치·이동·알림·권한·저장은 셸이 정하고 앱은 따른다. 새 앱은 사이드바 항목이 아니라 홈의 타일 하나로 늘어난다. - **전역 바** 56px 고정: 좌 UPro 워드마크(=홈) + 현재 앱 이름, 가운데 전역 검색, 우 알림 · 도움말 · 계정. 앱은 이 줄에 버튼을 추가하지 않는다(앱 액션은 앱 툴바 56px). - **홈 = 앱 서랍**: 타일 6 – 12개. 이름은 한 단어, 아래 한 줄은 "지금 할 일". 숫자 배지는 여기서만. - **앱의 크기**: 앱 하나 = 한 가지 일. 사이드바 항목이 12개를 넘으면 앱을 쪼갠다. - **창**: 겹치지 않는다. 겹침 대신 분할(본문 + 인스펙터 320px)이나 시트. 팝업 위 팝업 금지. - **이동**: `⌘K` 전역 검색 하나로 앱 · 화면 · 자료 · 명령을 찾는다. 결과는 유형 라벨 + 최대 5줄, 첫 줄이 기본 선택. - **자리**: 앱이 바뀌어도 사이드바 240 · 주 버튼 우상단 · 인스펙터 오른쪽 · 상태 필 규칙은 그대로. 같은 것이 같은 자리에 있는 것이 연속성이다(§5.8). - **알림**: 종 하나 + 숫자 배지(9+). 앱별 건수는 홈 타일에만. 소리 · 자동 팝업 없음. - **권한**: 없는 메뉴도 자리에 두고 잠금 + "권한 요청". 숨기면 사람은 화면이 고장 났다고 생각한다. - **저장**: 자동 저장이 기본, 상태는 툴바에 "저장됨 · 방금". 나가기 경고는 저장 못 한 것이 있을 때만. - **이어서 하기**: 앱은 마지막 화면을 기억하고 홈에 최근 5개를 둔다. - **계정 설정**: 테마 · 밀도 모드 · 언어 · 알림은 한 곳에서, 모든 앱에 즉시. **화면 골격 여섯.** 새 화면은 여섯 중 하나를 고른다. 고를 게 없으면 대개 화면이 두 가지 일을 하려는 것이다 — 그때는 화면을 나눈다. | 골격 | 언제 | 필수 | 하지 않을 것 | |---|---|---|---| | 요약 · 대시보드 | 오늘 무엇부터 할지 정할 때 | 스탯 ≤4 + 차트 1 + 할 일 목록 | 스탯 8 · 차트 4 · 여기서 편집 | | 목록 · 표 | 많은 것 중에서 찾을 때 | 필터 칩 + 표(≤6열) + 상태 필 | 가로 스크롤 · 세로 괘선 · 행마다 버튼 셋 | | 마스터–디테일 | 목록을 보며 하나씩 처리할 때 | 왼쪽 목록 + 오른쪽 인스펙터 320px, 선택은 URL 에 | 새 창 · 모달로 상세 열기 | | 보드 | 단계를 옮기는 일(승인 · 진행) | 열 ≤4 + 열마다 건수 + 카드 3줄 | 열 6 · 끌기만으로 되는 이동(메뉴 병행 필수) | | 마법사 | 드물게 하는 등록 · 신청 | 단계 3 – 5 + 되돌아가기 + 자동 저장 | 한 화면 20칸 · 되돌아가면 사라지는 입력 | | 상세 · 기록 | 하나의 대상을 깊이 볼 때 | 요약 헤더 + 속성 + 활동 기록(시간 순) | 탭 6개 · 기록 없이 현재 값만 | **부속 상태 셋.** 골격마다 빈 화면 · 잠긴 화면 · 실패를 함께 그린다. 구조는 셋 다 같다 — 무슨 일인지 한 줄, 왜 그런지 한 줄, 다음에 누를 것 하나 + 24px 라인 아이콘 하나. - 빈 화면: "없음"이 아니라 **여기에 무엇이 모이는지**와 첫 걸음(만드는 데 걸리는 시간까지). - 잠긴 화면: 메뉴를 숨기지 않고 누구에게 요청하는지 이름을 적는다. - 실패: 무엇이 · 언제부터 · 무엇을 하면 되는지. 테두리만 기능색, 화면을 붉게 칠하지 않는다(§3.6). **쉬운 모드 (초등학교 저학년 기준).** 현장 스태프 · 파트너 · 처음 쓰는 사람, 일 년에 몇 번만 하는 작업용. 기능을 빼는 모드가 아니라 **한 번에 하나씩 묻는 모드**다. 기준은 하나 — 초등학교 2 – 3학년이 소리 내어 읽고 그대로 따라 할 수 있는가. 계정 설정에서 켜면 모든 앱이 같은 규격으로 바뀐다. - **말**: 초등 2 – 3학년 어휘. 한 문장 40자 이내, 한 문장에 한 가지. 외래어 · 약어 · 한자어는 아래 표대로. "~하지 마세요" 대신 할 일을 적는다. - **한 화면**: 질문 하나(입력 ≤3칸) 또는 선택 하나(≤3개). 표 대신 카드, 드롭다운 대신 큰 타일. - **크기**: 본문 18px/1.7, 제목 26px 800, 최소 15px. 버튼 56px · 18px 700, 누를 곳 44×44 이상, 간격 ≥12px. - **버튼**: 한 화면에 둘까지(「다음」 · 「뒤로」). 다음 할 일을 동사로("사진 보내기", 확인·저장 아님). - **강조**: 표준은 화면당 하나지만 쉬운 모드는 둘까지 — 「고른 것」과 「다음」. §3.5 의 문서화된 예외(§11.4 에 기록). - **진행**: "3단계 중 2단계"를 글자로. 지나온 단계는 체크, 남은 단계도 이름을 보여 준다. 자동으로 넘어가지 않는다. - **되돌리기**: 확인창보다 되돌리기(지우기 · 보내기 뒤 8초). 정말 사라지는 것만 확인창을 띄우고 무엇이 사라지는지 이름을 적는다. - **잘못했을 때**: 세 문장(무엇이 · 어디가 · 어떻게). 잘못된 칸으로 화면을 옮기고 쓴 것은 지우지 않는다. - **도움**: 화면 첫 줄에 "이 화면에서 하는 일" 한 문장. 설명이 툴팁에만 있으면 없는 것과 같다. - **금지**: 시간 제한 · 자동 넘김 · 스와이프로만 되는 동작 · 모달 위 모달 · 가로 스크롤 표 · 아이콘만 있는 버튼 · 영문 라벨. - **남는 것**: 표준 모드에서 하던 일은 쉬운 모드에서도 단계를 나눠 전부 할 수 있어야 한다. 못 하면 그건 쉬운 모드가 아니라 반쪽 화면이다. | 업무 말 | 쉬운 모드 | 업무 말 | 쉬운 모드 | |---|---|---|---| | 대시보드 | 한눈에 보기 | 임시 저장됨 | 저장해 뒀어요 | | 캠페인 | 홍보 활동 | 유효성 오류 | 잘못 쓴 곳이 있어요 | | 콘텐츠 인제스트 | 자료 받기 | 동기화 실패 | 자료를 못 받았어요 | | 승인 대기 | 확인이 필요해요 | 권한 없음 | 아직 볼 수 없어요 | | 반려 | 다시 해 주세요 | 필터 | 골라 보기 | | GMV · KPI | 판매 금액 · 목표 숫자 | 인사이트 | 알게 된 점 | 표에 없는 말도 같은 방식으로 — 사람이 소리 내어 말하는 낱말인가, 초등 저학년이 아는 낱말인가. 표준 모드의 용어는 바꾸지 않는다(두 모드의 용어집은 한 파일에서 함께 관리). | 값 | 표준 | 쉬움 | |---|---|---| | 본문 | 15px · 1.55 | 18px · 1.7 | | 화면 제목 | 17px 700 | 26px 800 | | 행 높이 | 표 40 · 리스트 48 | 리스트 64 · 표 없음 | | 버튼 | 42px · 15px | 56px · 18px | | 한 화면 | 주 작업 1 + 보조 | 질문 1 | | 입력 칸 | ≤6 | ≤3 | | 선택 | 드롭다운 · 칩 | 큰 타일 ≤3 | | 되돌리기 | 확인창 | 되돌리기 8초 | | 도움말 | 도움말 링크 | 화면 첫 줄 한 문장 | | 낱말 | 업무 용어 | 초등 2 – 3학년 | 바뀌지 않는 것: 세 색과 강조 규칙, 기능색, 4px 단위, 포커스 2px, 모션 값(§5.8). 쉬운 모드는 크기와 말과 단계만 바꾼다. **좁아질 때 (셸이 접히는 순서).** 구간은 §6.5 와 같다. 접는 순서는 인스펙터 → 사이드바 → 본문의 열이고, 글자 크기는 어느 구간에서도 줄이지 않는다(§5.1). | 폭 | 사이드바 | 인스펙터 | 본문 | |---|---|---|---| | ≥1280 | 240px 펼침 | 320px 고정 | 목록 · 표 그대로 | | 1024 – 1279 | 240px 펼침 | 오른쪽 시트(선택 시) | 표 6열 → 4열, 나머지는 인스펙터에 | | 768 – 1023 | 서랍(전역 바 버튼) | 전체 화면 상세 | 보드는 열 2개 + 가로 스와이프 | | <768 | 하단 탭 4 + 더 보기 | 전체 화면 상세 | 표 → 카드, 마법사는 한 단계 한 화면 | **모션 어휘 (UPro).** §5.8 의 솔루션 UI 행을 화면 단위로 편 것이다. 움직임은 네 질문 중 하나에 답할 때만 넣는다 — 어디서 왔나(연속성) · 무엇이 바뀌었나(변화의 자리) · 내가 한 게 먹혔나(피드백) · 기다려야 하나(진행). 답하지 않으면 넣지 않는다. 글자는 움직이는 동안 읽히지 않으므로 200ms 를 넘기지 않고, 한 화면에서 동시에 움직이는 것은 한 묶음이다. | 움직임 | 규격 | 어디에 | |---|---|---| | 등장 | 불투명도 0→1 + 8px 상승, `base` 200ms 감속. 집의 움직임 하나(§10.2 와 같다) | 다이얼로그 · 팝오버 · 셀렉트 · 팔레트 · 토스트 · 새 카드 | | 퇴장 | 불투명도 1→0 만, `exit` 120ms. 상승의 역이 아니라 사라짐 | 등장한 것 전부 | | 옆에서 오기 | 같은 규칙을 한 축만 바꾼 것 — 불투명도 + 16px, 논리 방향(start · end, RTL 은 반대) | 시트 · 인스펙터 | | 변화 틴트 | 바뀐 자리에 틴트(`surface-tint`)가 한 번 들었다가 자기 바탕으로 돌아간다. 머무름 1.2초 | 상태 필 교체 · 건수 증가 · 새 댓글 · 헬스 변화 | | 피드백 | 색 · 불투명도만 `micro` 120ms. 눌림 · 저장됨 · 실패함은 형태 + 텍스트가 말한다 | 버튼 · 스위치 · 탭 · 체크박스 | | 진행 | 불투명도 순환 1.2초 주기 — 유일한 무한 반복. 300ms 전에는 띄우지 않고 3초 넘으면 진행 텍스트 병기 | 스켈레톤 · 버튼 안 점 셋. 회전 스피너 없음 | | 접기 · 펼치기 | 높이 · 폭 전환의 유일한 허용 — 자리가 먼저 열리고(200ms) 내용은 그 뒤에 나타난다. 닫힘은 내용이 먼저 사라진다 | GNB · 아코디언 · 속성 그룹 | - **금지**: 확대 · 바운스 · 회전 · 탄성 · 카운트업(숫자는 읽혀야 한다) · 무한 반복(진행 표시 제외) · 스켈레톤 반짝임 · 막대가 자라는 차트(불투명도 등장만) · 라우트 전환 연출(헤더 즉시 · 인스펙터는 늘 같은 자리가 연속성이다). - **데이터는 한 번에**: 목록 행 · 표 · 카드 그리드에 순차 등장 없음. 순차 등장은 병렬 설명 블록(번호 플로우 · 틴트 패널)에만, 24ms 간격 ≤5개 · 총 ≤120ms. - **경고는 한 번**: 키 만료 · 인제스트 끊김은 틴트 한 번 + 텍스트 + assertive 라이브 리전이지, 깜빡임의 반복이 아니다. - **움직이는 속성**: 위치 · 크기는 transform, 나타남은 opacity, 변화 자리는 배경색 — 그 밖의 속성 전환(width · height · top · margin …) 0. 접기 · 펼치기만 grid 트랙으로. - **토큰만**: 시간(`--up-duration-micro · base · exit · stagger · hold`) · 감속(`--up-ease-out`, 등속 `--up-ease-linear` 는 진행 표시만) · 거리(`--up-motion-rise · slide`) · 문턱(`--up-timing-*`)은 토큰이고 코드에 ms · cubic-bezier · px 이동 거리를 적지 않는다. - **축소 모션**: `prefers-reduced-motion` 에서 이동 · 순차 등장 · 틴트 · 스켈레톤 펄스 전부 ≤1ms, 지연 0, 무한 반복 0. 정보는 모션 없이도 전부 남는다 — 상태는 형태 + 텍스트. ### 10.4 영업 자료 - 명함 90×50mm: 앞면 검정 + UPINTER + 로고 밑줄, 뒷면 흰 바탕 연락처(라벨 M/E/W `#DE2F00`). - 이메일 서명: 텍스트 전용, 이미지 로고 금지. 이름 800 · 직함 400 · 연락처 13px 회색 · 32px 버밀리온 짧은 선. 실제 서명은 가이드 §10.5 생성기로 만든다 — HTML 표 + 인라인 스타일(이메일 HTML은 토큰을 쓸 수 없어 hex 직접 지정, §11의 문서화된 예외), Gmail 설정 › 서명에 붙여넣기. 명함 사진을 올리면 브라우저 안에서 먼저 명함 영역을 찾아(밝기 이진화 → 연결 성분 → 볼록 껍질 → 최소 면적 사각형 → 꼭짓점 정밀화 → 호모그래피로 원근 보정, 세로 명함은 가로로 회전, 명함이 사진을 거의 채우면 그대로) 잘라낸 뒤 OCR(Tesseract.js kor+eng · 좌우 열 분리 · 두 분할 모드 · 세로 명함이거나 신뢰도가 낮으면 180° 재시도)로 이름 · 영문 이름 · 직함 · 전화 · 이메일 · 주소를 읽어 채우고, 전화번호는 숫자만 넣어도 국내 규칙으로 하이픈을 붙인다. 주소는 "Head Office: …"처럼 라벨을 붙이면 라벨이 M · T · E와 같은 방식으로 표시된다. - 소셜 1:1·4:5: 검정 또는 버밀리온 바탕 + 흰 대문자 한 줄(12자 이내) + 한글 두 줄 + 하단 로고. - 소셜 영상 자막: 짧은 변 4%↑(1080 기준 44px) Pretendard 700 흰 글자 + 검정/버밀리온 밴드 · 한 줄 12–18자, 2줄 이내 · 노출 ≥ 글자 수 ÷ 5 + 1초 · 페이드 또는 → 와이프 0.3초(§5.8). - 배너: 좌 텍스트 5 : 우 사진 7. 헤드라인 밑줄 하나. 가운데 정렬 금지. - 인쇄 하한 9.5pt를 깎지 않는다. --- ## 11. 운영 **고정(변경 불가):** 세 색과 틴트 · Pretendard · 페이지 골격 · 강조 한 곳 · 가독성 하한 · 금지 목록 · 작은 글자의 `#DE2F00`. **가변:** 밀도 · 패널 수(2–3) · 사진:텍스트 비중 · 라이트/다크 · 챕터 순서·이름 · 스탯 수(2–4). | 프리셋 | 본문 | 행간 | 단위 | 패널 반경 | 강조 | 테마 | |---|---|---|---|---|---|---| | DECK | 12pt 화면 / 20pt 발표 | 1.6 | 8px | 16px | 페이지당 1 | 라이트(디바이더 검정) | | WEB | 17px | 1.75 | 8px | 16px | 섹션당 1 | 라이트 | | CONSOLE | 15px | 1.55 | 4px | 12px | 화면당 1 | 사용자 설정 | 규칙: 시맨틱 토큰만 사용(`#F9431C` 직접 참조 금지) · 새 색 추가 금지 · 예외는 문서화(쉬운 모드의 버밀리온 둘 §10.3 · 메일 서명의 hex 직접 사용 §10.4 처럼 이유와 함께 해당 절에 적는다 — 적히지 않은 예외는 예외가 아니라 오류다) · 토큰 변경은 semver · 소개서가 바뀌면 이 문서도 바뀐다. --- ## 12. 출고 전 체크리스트 (10항 전부 통과) 1. **SIZE** — 가장 작은 글자가 §5.1 하한선 이상인가? 2. **DEPTH** — 한 화면의 위계가 4단 이하인가? 3. **RATIO** — 인접 위계 크기 차가 1.25배(속성 2개↑ 변경 시 1.15배) 이상인가? 4. **PROXIMITY** — 그룹 사이 간격이 그룹 내부의 2배 이상인가? 5. **BINDING** — 표제가 자기 위보다 아래 본문에 더 가까운가? 6. **MEASURE** — 한 줄이 한글 40자 / 라틴 75자를 넘지 않는가? 7. **CONTRAST** — 13–17px 버밀리온이 `#DE2F00`인가? 본문 대비 4.5:1 이상인가? 8. **GRAYSCALE** — 채도 0에서도 위계가 읽히는가? 9. **ACCENT** — 버밀리온 강조가 화면당 한 곳인가? 10. **MESSAGE** — 3초 안에 이 화면을 한 문장으로 말할 수 있는가? --- ## 13. 빠른 참조 ### 13.1 HTML · CSS 시작점 ```html ``` ```css @import url("dist/upinter.css"); body { font-family: 'Pretendard Variable', Pretendard, Inter, 'Noto Sans KR', sans-serif; font-size: 17px; line-height: 1.75; word-break: keep-all; overflow-wrap: break-word; color: var(--up-text-primary); background: var(--up-surface-canvas); } h1,h2,h3 { font-weight: 700; text-wrap: balance; } p { max-width: 34em; text-wrap: pretty; } .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--up-text-accent); } .kicker { font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .ul { background: linear-gradient(var(--up-rule-brand),var(--up-rule-brand)) no-repeat 0 100%/100% 3px; padding-bottom: 2px; } .panel { background: var(--up-surface-tint); border-radius: 16px; padding: 32px 24px; text-align: center; } .btn { background: var(--up-surface-action); color: #fff; border-radius: 999px; padding: 10px 20px; font-weight: 700; border: 0; } .stat .v { font-size: 44px; font-weight: 800; color: var(--up-text-brand); } .stat .k { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--up-text-secondary); } .pill { font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--up-success-tint); color: var(--up-success-text); } /* 상태 필 · 텍스트 병기 · warning/danger/info 동일 */ .reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--up-duration-base) var(--up-ease-out), transform var(--up-duration-base) var(--up-ease-out); } /* 뷰포트 진입 시 .in 1회 부여 · 히어로에는 쓰지 않음 (§5.8) */ .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { transition: none; transform: none; opacity: 1; } } ``` ### 13.2 한 문장으로 **색을 더하고 싶어지면 굵기가 부족한 것이고, 카드를 그리고 싶어지면 번호가 없는 것이며, 글자를 줄이고 싶어지면 내용이 많은 것이다.** ## 14. 변경 이력 - **v3.3** (2026.09.05) — 04 LAYOUT 보강: §6.2 매체 판면 7종 추가(A4 가로 · 명함 · 소셜 · 세로 영상 · 배너 · 이메일), §6.5 반응형 네 구간, §6.6 스팬 허용 분할, §6.7 세로 리듬. §7 구획 체계를 핵심 6 + 확장 6(비교 2단 · 타임라인 · 인용 · 콜아웃 · 표 블록 · 이미지 캡션)으로, §7.13 결합 규칙, §7.14 페이지 레시피 12종. §9.4 차트 고르기 표, §9.5 표 유형 넷. 슬라이드 템플릿 32 → 48장(유형별 +8: 인용 · 팀 · 비교표 3단 · 제안 범위 · FAQ · 사진 2단 비교 · 견적 · 다음 단계, 시각화 +8: 선 · 누적 막대 · 워터폴 · 슬로프 · 벤 · 스윔레인 · 조직 트리 · 히트맵), 미리보기 25장. §10.5 명함 인식을 두 단계(명함 영역 감지 · 원근 보정 → 글자 인식)로. 가이드 색인에 06 · 07 · 09 서브 메뉴. §10.3 솔루션 UI 를 세 층으로 재구성 — 셸(OS) 11항 + 홈 · 앱 서랍, 화면 골격 여섯 표(요약 · 목록 · 마스터–디테일 · 보드 · 마법사 · 상세), 부속 상태 셋(빈 화면 · 잠김 · 실패), 쉬운 모드(초등 저학년 기준 — 규격 10항 · 말 바꾸기 표 · 표준·쉬움 값 표 · 버밀리온 둘의 문서화된 예외), 좁아질 때 셸이 접히는 순서. 가이드 10.3 예시 3 → 8종(홈 · 대시보드 · 목록 · 마스터–디테일 · 보드 · 마법사 · 부속 상태 · 쉬운 모드)(2026.09.07). 토큰 값 변경 없음. - **v3.2** (2026.09) — 토큰 값 변경: 다크 `action-hover` #B52100(흰 글자 6.60:1), 기능색 글자색 8값 조정(같은 계열 틴트 위 AA 4.5:1). 슬라이드 템플릿 32장(`templates/`, PowerPoint · Google Slides용 — 시각화 9장은 2026.09.04 추가) · CI 변형 자산(`brand/`)과 §1.4 CI 규격 추가. 가이드 색인에 CI(01.4) · 적용 항목(10.1–10.5) 서브 메뉴, §10.5 Gmail 메일 서명 생성기(명함 사진 OCR 자동 입력 · 전화번호 자동 하이픈 · 주소 2줄) 추가. §4.1 서체 내려받기 링크(가이드 04.1) 추가. §12 부록에 .md 다운로드 버튼 추가. §5.8 모션 — 읽기를 돕는 움직임(웹 · 솔루션 UI · 발표 슬라이드 · 영상 자막의 등장 · 순서 · 노출 · 금지 규격, 시그니처 밑줄 긋기, reduced-motion) 추가, 가이드 05.8에 좋은 예 · 나쁜 예 데모와 허용 패턴 12종 라이브러리(등장 · 순차 · 로고 등장 · 플로우 · 차트 · 상태 · 토스트 · 펼침 · 로딩 · 탭 · 디졸브 · 자막, 라이브 데모), 가이드 헤드라인 밑줄 긋기 적용, 출고 전 점검은 05.9로(2026.09.05). - **v3.1** (2026.09) — §10 적용 예시 12종, AI 연동용 md 정본, 아이콘 라이브러리 142종 · 8변형 · 검색, HTML doctype·charset, 헤드 설명 60자 한 줄, UPro 사이드바 위계. - **v3.0** (2026.09) — 2026 Company Profile을 시각 원본으로 전면 재정렬. 버밀리온 #F9431C · 잉크 #121113 · 틴트 #FFF7F4 · 작은 글자 #DE2F00. --- UPINTER AXIS v3.3 · 2026.09 · W3C DTCG 2025.10 · WCAG 2.1 AA