강남 한식집 예약
확인9월 16일 화요일 저녁 7시, 네 분, 룸으로 세 곳을 확인했습니다.
v2 · 2026-09-12
말이 아니라
말이 아니라
치수로 합의합니다
색, 글자, 간격, 움직임을 숫자로 정해 두었습니다. 디자이너와 개발자가 같은 값을 보고 만들면 화면이 저절로 맞습니다.
이번 주
12건
착신 연결됨
070-1234-5678
Foundation
기초
여기서 정한 값이 모든 화면의 바닥입니다. 컴포넌트는 이 값만 참조하고 직접 색이나 크기를 쓰지 않습니다.
색
중립색에 아주 옅은 푸른기를 섞었습니다. 순회색은 화면에서 탁하게 읽힙니다. 강조색과 색상각을 맞춰 두어 나란히 놓아도 따로 놀지 않습니다.
강조
--accent-*
중립
--neutral-*
보조
알림과 상태에만 씁니다. 강조색이 계속 주인공이어야 합니다.
역할 토큰을 쓰고 원시 색을 직접 쓰지 않습니다. 다크 모드가 자동으로 따라옵니다.
바탕 --canvas · --canvas-alt · --canvas-sunken
면 --surface · --surface-alt
글자 --ink · --ink-body · --ink-muted · --ink-subtle
강조 --accent · --accent-soft · --accent-text
틴트 --tint (반투명. 단색 회색보다 어떤 배경에도 잘 얹힙니다)
선 --line · --line-strong
글자
크기가 커질수록 자간을 조이고 행간을 좁힙니다. 자간은 크기의 −2%로 일정하게 계산합니다. 본문은 행간 1.6으로 넉넉히 둡니다.
클래스 하나가 크기·행간·자간·굵기를 함께 옮깁니다. 따로 지정하지 않습니다.
<h2 class="t-display-sm">제목</h2>
<p class="t-body-md ink-muted">설명</p>
간격과 치수
컨트롤은 크기를 고르면 높이·반경·글자·좌우 여백이 함께 따라옵니다. 버튼과 입력을 나란히 놓아도 모서리가 어긋나지 않습니다.
간격 계단
컨트롤 치수
| 크기 | 높이 | 반경 | 글자 | 모양 |
|---|
면과 그림자
테두리와 그림자를 동시에 주지 않습니다. 배경이 다르면 테두리가 필요 없습니다. 그림자에는 파란기를 섞어 검정 그림자 특유의 탁함을 피합니다.
Components
컴포넌트
전부 실제로 동작합니다. 눌러보고 키보드로도 다뤄보세요.
입력
평소에는 테두리 없이 옅은 면으로 두고, 포커스했을 때만 강조 테두리와 링이 생깁니다. 글자는 16px입니다. 그보다 작으면 iOS가 포커스할 때 화면을 확대합니다.
명함에 새겨질 이름입니다
11자리를 모두 입력해 주세요
분류
목록까지 디자인 시스템이 그립니다. 좁은 화면에서는 하단 시트가 됩니다.
카드와 배지
배지에 점을 찍지 않습니다. 면과 글자만으로 충분히 구분됩니다. 모든 것을 카드로 감싸지 않습니다. 특징 목록은 아이콘과 글자만으로 둡니다.
접수됨
확인 필요
완료
대기
지연
자동 처리
새 기능
초안
큰 알약 배지
연결됨
확인 중
떠 있는 카드
올리면 살짝 뜹니다. 누를 수 있는 카드에만 씁니다.
1,284이번 달 처리
98.2%기한 내 완료
승인 없이는 나가지 않습니다
외부로 나가는 모든 동작은 서버가 먼저 막습니다.
30초 안에 끝납니다
이동 중에도 한 화면에서 결정할 수 있습니다.
쓸수록 기억합니다
담당이 바뀌어도 선호와 규칙이 이어집니다.
오버레이
같은 컴포넌트가 폭에 따라 모습을 바꿉니다. 좁은 화면에서는 아래에서 올라오는 시트, 768px 이상에서는 가운데 창입니다. 창을 좁혀 보면 바뀝니다.
Escape로 닫히고, 포커스가 안에 갇힙니다.
Modules
모듈
섹션 단위로 바로 가져다 쓰는 덩어리입니다. 페이지는 이것들을 쌓아 만듭니다.
노란 면
panel--sun
민트 면
panel--mint
라일락 면
panel--lilac
갤러리
사진 카드는 눌러서 펼칩니다. 벤토 격자는 칸 크기를 달리해 리듬을 만듭니다. 전부 같은 크기면 지루합니다.
큰 칸
span-4 · row-2
주인공 칸입니다. 하나만 둡니다.
span-2
기본 칸
강조 칸
연한 강조면
span-3
가로로 넓은 칸
span-3
짝을 이룹니다
가로 스냅 띠
좁은 화면에서 다음 카드가 살짝 보여 더 있다는 걸 알립니다.
시리즈
비서실이 일하는 법
요청 하나가 카드가 되어 끝나기까지.
기록
기억이 쌓이는 구조
담당이 바뀌어도 이어지는 이유.
원칙
승인이 먼저입니다
서버가 강제하는 방식.
사람
팟이 함께 맡습니다
두세 명이 한 조로 움직이는 이유.
인용
진료 끝나고 확인하면 이미 세 곳 알아보고 한 곳으로 좁혀놨습니다. 저는 승인만 누릅니다.
개원의 · 40대
경조사를 놓치지 않게 된 게 가장 큽니다. 부고 문자를 넘기면 알아서 정리해 옵니다.
중소기업 대표 · 50대
영수증을 사진만 찍어두면 월말에 세무사에게 갈 자료가 묶여 나옵니다.
1인 법률사무소 · 30대
App
앱 컴포넌트
손가락과 한 손 조작을 전제로 한 조각들. 웹과 토큰은 공유하되 치수가 다릅니다. 앱 화면의 대부분은 목록이라 거기에 가장 공을 들였습니다.
목록
앞·가운데·뒤 세 자리로 나뉩니다. 구분선은 앞 요소 폭만큼 들여씁니다.
승인이 먼저입니다외부로 나가는 모든 동작은 서버가 먼저 막습니다.
기한이 2시간 남았습니다.
예약이 확정되었습니다.
앱 입력
키패드가 화면 절반을 차지하는 걸 전제로 합니다. 금액은 큰 숫자 한 줄, 인증번호는 칸이 나뉜 것처럼 보이지만 입력은 하나입니다.
보낼 금액
원
잔액 3,480,000원
문자로 보낸 6자리를 입력해 주세요
04:32 남음
화환 단수
3
온보딩
6/8
+4
담당 팟 7명
앱 화면의 결론은 항상 하단 고정 바에 둔다.
<div class="actionbar">
<button class="btn btn--secondary btn--lg">나중에</button>
<button class="btn btn--primary btn--lg">승인</button>
</div>
달력 · 키패드 · 차트
날짜는 달력으로 고르고, 금액은 키패드로 넣고, 추이는 차트로 봅니다. 차트는 라이브러리 없이 SVG 로 그립니다.
선택: 2026-09-16
보낼 금액
원
주간 처리량이번 주
추이
온보딩 · 첨부 · 당겨서 새로고침
영수증을 끌어다 놓으세요
또는 눌러서 고르기 · 사진·PDF
영수증_0912.jpg
아이콘
24px 격자, 선 1.7px. 색은 글자색을 따릅니다. 누르면 이름을 복사합니다.
<svg class="ico"><use href="assets/icons.svg#ico-phone"/></svg>
크기: ico--sm 16 · ico 20 · ico--lg 24 · ico--xl 32
Motion
모션
등장과 퇴장에 다른 곡선을 씁니다. 같은 곡선으로 양쪽을 처리하면 닫힐 때 굼떠 보입니다.
등장은 ease-out, 퇴장은 ease-in. 이동은 ease-inout.
--d-1 120ms 호버·색 변화
--d-2 180ms 기본 전환
--d-3 240ms 메뉴·툴팁
--d-4 320ms 탭 밑줄·아코디언
--d-5 420ms 시트·서랍
--d-6 640ms 스크롤 리빌
--d-7 900ms 큰 화면 전환
스크롤 리빌
화면에 들어오면 켜집니다. 자바스크립트가 막히거나 모션을 줄이는 설정이면 즉시 보이는 상태가 됩니다. 내용이 사라지는 일은 없습니다.
<section data-reveal="lg"> … </section>
<ul data-reveal data-reveal-group> 자식이 70ms 간격으로 차례로 </ul>
sm 12px · 기본 20px · lg 40px · xl 64px · scale 살짝 확대
Effects
연출
배경은 움직이되 알아채기 전에 지나가야 합니다. 스크롤 효과는 내용을 밀어내지 않고 읽는 속도에 맞춰 붙습니다. 전부 모션 축소 설정을 따릅니다.
배경
덩어리 셋이 26·32·38초 주기로 각각 떠다닌다. 주기를 서로 나누어떨어지지 않게 두면
패턴이 반복되는 게 보이지 않는다. bg-grain 을 겹치면 그라데이션의 띠가 사라진다.
스크롤
글자 한 덩어리씩 켜기 — .lit
요청 하나가 카드가 되고, 카드는 승인을 기다리고, 승인하면 끝납니다.
이 문단이 화면을 지나는 동안 단어가 차례로 진해집니다
0건
이번 달 처리
0%
기한 내 완료
0초
평균 결정 시간
<span class="count" data-count="98.2" data-count-decimals="1" data-count-suffix="%">0%</span>
화면에 들어온 순간 한 번만 센다. 다시 올라가도 되감지 않는다.
data-scrub="tiltin"
1
말로 남깁니다
번호로 전화해 지시를 남기면 통화가 끝나는 즉시 카드로 정리됩니다. 길게 설명하지 않아도 됩니다.
2
카드가 도착합니다
무엇을 어떻게 할지, 무엇이 확인되지 않았는지가 세 줄로 요약됩니다.
3
승인만 하면 끝입니다
나갈 내용을 있는 그대로 미리 봅니다. 승인 전에는 아무것도 나가지 않습니다.
통화 중
00:42
확인 필요 1
강남 한식집 예약
확인
9/16 화 19:00 · 4명 · 룸
세 곳 확인, 한 곳이 조건에 맞습니다
이렇게 진행할게요
봉피양 방배점 · 9/16 19:00 · 4명 · 룸
예약금 없음 · 당일 취소 위약금 없음
수정
승인
세로 스크롤이 가로 이동을 민다 — .hscroll
맡길 수 있는 일
일정 조율
상대에게 직접 연락해 가능한 시간을 좁힙니다.
예약
여러 곳에 동시에 전화해 한 곳으로 확정합니다.
출장
항공·숙소·이동을 세 가지 안으로 정리합니다.
경조사
관계를 보고 화환과 조의를 제안합니다.
자료 정리
영수증을 찍어두면 월말에 묶어 보냅니다.
스크롤하면 겹쳐 쌓인다 — .stackcards
승인 없이는 나가지 않습니다
서버가 막습니다. 우회 경로는 존재하지 않습니다.
쓸수록 기억합니다
담당이 바뀌어도 선호와 규칙이 이어집니다.
30초 안에 끝납니다
이동 중에도 한 화면에서 결정할 수 있습니다.
일정 조율 · 예약 · 출장 · 경조사 · 자료 정리 · 대신 전화 · 브리핑 ·
일정 조율 · 예약 · 출장 · 경조사 · 자료 정리 · 대신 전화 · 브리핑 ·
Mobile
모바일이 기준입니다
데스크톱이 먼저가 아닙니다. 좁은 화면에서 맞춘 다음 넓은 화면에서 여유를 씁니다.
적중 영역 44px
보이는 크기와 누르는 영역은 다릅니다. 작아 보이는 버튼도 적중 영역은 44px를 지킵니다.
가로 스크롤 0
어떤 폭에서도 좌우로 밀리지 않습니다. 표와 코드와 띠만 자기 영역 안에서 넘칩니다.
확대를 막지 않습니다
user-scalable=no 를 쓰지 않습니다. 저시력 사용자를 막는 설정입니다.
안전 영역을 비워 둡니다
하단 고정 요소는 홈 인디케이터 높이를 패딩으로 흡수합니다.
화면 아래에서부터 쌓이는 순서
env(safe-area-inset-bottom) 홈 인디케이터
└ 탭바 --tabbar-h 58px
└ 입력 바 --dock-h 64px
└ 토스트 위로 16px 띄우고 등장
화면마다 없는 요소는 변수를 0으로 덮으면 나머지가 알아서 내려옵니다.
비서실
홈
이력
기억
비서실
이 페이지를 좁혀 보면 같은 규칙이 그대로 적용됩니다