디자인 시스템
서비스를 추가할 때 바뀌는 값은 여기 다 적혀 있습니다
사내에 디자이너가 없어도 화면을 늘려갈 수 있어야 한다는 것이 이 문서의 목적입니다. 규칙을 말로만 적어 두지 않고 실물로 렌더해 두었습니다. 아래 컴포넌트는 설명 그림이 아니라 실제로 동작하는 것들입니다.
확장 규칙
새 서비스를 추가하면 무엇이 바뀌고 무엇이 그대로인가
메인 화면의 서비스 스위처와 같은 값을 읽습니다. 두 화면이 다른 말을 하면 규칙이 아니기 때문입니다.
서비스 스위처 (상단 헤더와 같은 컴포넌트)
지금 화면은 이사
<html data-service="moving">바뀐 것 — 3가지
- 액센트 토큰--color-accent 계열 3개1묶음
- 히어로 카피eyebrow · headline · sub · CTA4줄
- 폼 필드서비스마다 다른 입력 3개3개
#0E6B55액센트는 이 한 값만 갈립니다
그대로인 것 — 4가지
- 레이아웃 그리드12컬럼 · 컨테이너 폭 · 섹션 간격
- 컴포넌트버튼 · 인풋 · 카드 · 표 · 탭 · 배지
- 타이포 스케일본문 15/16 · 제목 20~44 · 숫자 전용 서체
- 간격·라운드·그림자4px 스케일 · radius 2단계 · shadow 2단계
새 생활 서비스를 붙일 때 손대는 파일은 lib/services.ts 하나입니다. 화면 체계를 다시 짜지 않습니다.
서비스별 액센트 — 갈아 끼우는 값의 전부
색
중립축에 액센트 hue 를 섞었습니다
순회색을 쓰지 않습니다. 이사업계에서 흔한 코랄·블루도 쓰지 않았습니다 — 그 색을 쓰는 순간 세 번째 사이트가 되기 때문입니다.
- bg#FAFBFA지면. 순백을 쓰지 않습니다
- surface#FFFFFF카드는 지면 위로 띄웁니다
- surface-sunk#F2F5F3표 헤더·비활성 영역
- ink-900#16211D제목
- ink-700#2E3B36본문
- ink-500#5B6A64보조 문구
- ink-400#8A968Fmuted · 본문에 쓰지 않습니다
- line#E2E7E3기본 보더
- line-strong#C9D2CC컨트롤 보더
- success#1F7A4D취급 · 확인
- warn#A66A00가산 · 주의
- danger#B3261E오류
Tailwind 기본 팔레트는 --color-*: initial 로 지워 두었습니다. bg-slate-… 같은 호출이 코드에 들어오면 유틸리티가 만들어지지 않아 화면에서 바로 드러납니다.
타이포
한글은 Pretendard, 숫자는 Space Grotesk
금액이 주인공인 화면이라 숫자 서체를 따로 씁니다. 자릿수가 흔들리지 않게 tabular-nums 를 고정했습니다.
display
32 / 44 · bold
예상 금액부터
h1
28 / 34 · bold
입력할 때마다 금액이 움직입니다
h2
24 / 30 · bold
조건에 맞는 업체 3곳
h3
17 · bold
이 금액이 나온 항목
body
15 / 16 · 1.8 · 최대 68자
합계만 보여 주지 않습니다. 어떤 조건에서 얼마가 붙었는지 줄마다 적혀 있습니다.
small
13 · 보조
짐 양과 특수 물품은 방문·영상 견적에서 확정됩니다
num
Space Grotesk · tabular-nums
1,020,000 ~ 1,420,000
밀도와 깊이
한 화면 안에서 밀도를 두 가지로 씁니다
히어로와 서비스 안내는 넉넉하게, 견적 요약 패널과 업체 비교표는 촘촘하게. 같은 밀도로 통일하면 비교표가 읽히지 않습니다.
간격
- 섹션 간 여백데스크톱 72px · 모바일 48px
- 본문 measure최대 68자
- 표 row 높이40px · 셀 패딩 10~12px
- 터치 타겟최소 44 × 44px
라운드 · 그림자
두 단계씩만 씁니다. 그 밖의 깊이는 보더와 배경 대비로 만듭니다.
컨트롤
카드
모션
180ms ease-out, transform 과 opacity 만 씁니다. 진입은 opacity 0→1 + translateY 6px→0, 결과 카드 목록은 32ms 씩 늦춰 들어옵니다. 서비스 전환은 180ms crossfade 입니다 — 논지는 「전환이 멋있다」가 아니라 「바뀐 게 적다」이기 때문입니다. 시스템 설정이 「동작 줄이기」이면 예외 없이 전부 정지합니다.
컴포넌트
실제로 동작하는 것들입니다
shadcn/ui 를 도입하고 위 토큰으로 다시 입혔습니다. 아이콘은 lucide-react 를 strokeWidth 1.75 로 통일했습니다. 이모지를 아이콘으로 쓰지 않습니다.
버튼 — 위계 3단
1차만 채우고, 2차는 아웃라인, 3차는 텍스트. 액센트를 모든 버튼에 칠하지 않습니다.
입력 컨트롤
shadcn/ui 를 도입하되 기본 스타일 위에 우리 토큰과 밀도를 다시 입혔습니다. 컨트롤 높이는 전부 44px 이상입니다.
동 단위까지만
오늘+2일 ~ 오늘+90일
선택 카드 · 체크 행
선택지가 셋 이하이고 설명이 필요하면 select 보다 카드가 낫습니다.
탭 · 배지 · 진행 표시 · 다이얼로그
상태
로딩 · 빈 상태 · 에러를 화면에서 확인할 수 있습니다
세 가지 다 실제로 도달 가능한 경로를 만들어 두었습니다. 문서에만 적어 두면 본 개발에서 빠집니다.
지켜야 하는 것
화면마다 반복해서 확인하는 항목
날짜를 하드코딩하지 않습니다
달력 범위는 열어 본 날 기준으로 계산됩니다 — 지금은 2026-09-24 ~ 2026-12-21
본문 대비 4.5:1 이상
액센트 위 흰 글자까지 계산해서 맞췄습니다
포커스 링을 지우지 않습니다
디자인에 맞게 다시 그렸습니다. 키보드로 전체 흐름이 돕니다
터치 타겟 44 × 44px
모바일이 이 도메인의 주 트래픽입니다
라이트 고정
다크 모드 토큰 세트를 만들지 않았습니다
동작 줄이기 존중
prefers-reduced-motion 에서 애니메이션이 전부 멈춥니다