SOS 디자인 시스템
아트 디렉션
프리미엄, 차분함, 시민 중심, 인간 중심. 편집 잡지와 비상 운영실이 만난 듯한 느낌 — 경각심을 주지 않으면서도 자신감 있는 톤.
권장 사항: 오버사이즈 편집 헤딩, 넓은 네거티브 공간, 의도적인 비대칭을 가진 강한 왼쪽 정렬 그리드, 간헐적인 전체 너비 섹션, 미묘한 시네마틱 조명(섹션당 최대 하나의 부드러운 방사형 그라데이션), 오버레이에만 제한된 유리 효과, 정확한 악센트로만 사용되는 비상 빨간색.
금지 사항: 네온 글로우, 채도 높은 빨간색 배경, 이모지 그래픽, 모든 곳의 일반 대시보드 카드, 무거운 드롭 섀도우가 있는 플로팅 카드, 지속적으로 회전하는 객체, 여러 개의 경쟁 그라데이션, 파티클 배경.
경험 법칙: 빨간색이 뷰포트의 약 5% 이상을 차지하면 너무 많은 것입니다.
색상 토큰
src/app/globals.css에서 Tailwind v4 @theme 아래에 한 번 정의합니다. 컴포넌트는 토큰 유틸리티(bg-ink, text-paper, text-accent)만 사용하며, 원시 hex 값을 절대 사용하지 않습니다.
| 토큰 | 값 | 용도 |
|---|---|---|
--color-ink | #101318 | 기본 어두운 배경 |
--color-ink-raised | #1B2027 | 어두운 표면, 폰 베젤, 어두운 배경의 카드 |
--color-ink-line | #2A313B | 어두운 배경의 가는 선/구분선 |
--color-paper | #F5F6F7 | 밝은 섹션 배경 |
--color-paper-line | #E1E4E8 | 밝은 배경의 가는 선 |
--color-accent | #D93642 | 악센트: CTA, 주요 표시, 상태 점 |
--color-accent-strong | #B8232F | 밝은 배경의 악센트 텍스트 (#F5F6F7에서 AA) |
--color-accent-soft | #F6E8EA | 밝은 배경의 틴트 배경, 뱃지 |
--color-text-dark | #171A20 | 밝은 배경의 본문 텍스트 |
--color-text-light | #F7F8FA | 어두운 배경의 본문 텍스트 |
--color-muted-dark | #9AA2AD | 어두운 배경의 흐린 텍스트 (#101318에서 ≥ 4.5:1) |
--color-muted-light | #5E6672 | 밝은 배경의 흐린 텍스트 (#F5F6F7에서 ≥ 4.5:1) |
대비 참고:
#858D98은 큰 텍스트에만 어두운 배경에서 통과됩니다. 본문에는--color-muted-dark를 사용하세요.#D93642버튼 위의 흰색 텍스트는 약 4.6:1입니다 — 16px 세미볼드 이상의 버튼 레이블에 적합합니다. 변경 후 항상 확인하세요.- 밝은 배경의 빨간색 텍스트는
--color-accent-strong을 사용해야 합니다. - 색상만으로 상태를 전달하지 마세요 — 레이블이나 아이콘과 함께 사용하세요.
상태 색상(추적 섹션 전용): 대기 중 = 호박색 #C98A1B + 시계 아이콘, 진행 중 = 악센트 빨간색 + 펄스 없는 점, 해결됨 = 녹색 #2F8F5B + 확인 아이콘. 항상 레이블이 표시됩니다.
타이포그래피
- 글꼴:
next/font/google을 통한 하나의 가변 산세리프(권장: Inter Tight 디스플레이용 + Inter 본문용, 또는 Geist 단독).display: "swap", 하위 집합latin, 최대 2개 패밀리. - 헤딩: 두께 600–700, 좁은 자간 (
-0.03em~-0.045em), 줄 높이 0.95–1.05. - 본문: 두께 400, 줄 높이 1.6, 최대 너비 약 65ch.
- 아이브로우: 12–13px, 대문자,
tracking-[0.18em], 두께 500, 흐린 색상, 종종 앞에 짧은 빨간색 규칙이 옵니다.
유동적 스케일 (@theme에 --text-*로 입력):
--text-display: clamp(3rem, 1.2rem + 7.5vw, 9rem); /* 히어로 h1 */
--text-h2: clamp(2.25rem, 1.2rem + 4.2vw, 5.5rem);
--text-h3: clamp(1.375rem, 1rem + 1.4vw, 2.25rem);
--text-lead: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
--text-body: 1rem; /* ≥ md에서는 1.0625rem */
--text-small: 0.875rem;
--text-eyebrow: 0.8125rem;
320px에서 히어로 헤드라인은 넘침 없이 맞아야 합니다 — 특히 "Every Second Matters."를 테스트하세요.
레이아웃 및 여백
- 컨테이너:
max-w-[1440px], 측면 패딩clamp(1.25rem, 4vw, 4rem). - ≥ lg에서 12열 그리드; 비대칭 스팬(예: 7/5, 5/7, offset-1).
- 섹션 수직 리듬: 위/아래
clamp(5rem, 10vw, 10rem). - 여백 스케일: 4px 베이스(Tailwind 기본값). 6, 8, 12, 16, 24, 32 단계를 선호합니다.
- 반경: 작은 컨트롤 6px, 카드 14px, 폰 프레임 외부 약 2.6rem.
표면 및 섹션 리듬
어두운 섹션과 밝은 섹션을 번갈아 사용하여 챕터를 만듭니다: 히어로(어두움) → 소개(밝음) → 작동 방식(어두움) → 카테고리(밝음) → 쇼케이스(어두움, 전체 너비) → 등록(밝음) → 추적(어두움) → 조정(밝음) → FAQ(밝음) → 최종 CTA(어두움, 시네마틱) → 푸터(어두움).
조명: 어두운 섹션당 최대 하나의 radial-gradient, 낮은 불투명도(≤ 0.18), 빨간색 또는 차가운 회색 계열. 정적 — 절대 애니메이션 없음.
유리 효과: bg-white/5 + backdrop-blur-md + 1px ink-line 테두리, 네비게이션과 작은 오버레이에만 사용. 큰 흐림 패널 없음(성능).
컴포넌트
- 기본 버튼: 악센트 배경, 밝은 텍스트, 최소 높이 48px, 수평 패딩 20–28px, 호버 시 2px 이동하는 미묘한 화살표 아이콘.
- 보조 버튼: 투명, 1px 테두리(어두운 배경에서는
ink-line, 밝은 배경에서는paper-line), 동일한 크기. - 저장/다운로드 버튼 없음 — 이 페이지에는 설치 CTA가 없습니다. CLAUDE.md "범위: 쇼케이스, 설치 유입 경로 아님" 참조.
- 아이브로우: 빨간색 24px 규칙 + 대문자 레이블.
- DraftBadge: 작은 호박색 테두리 알약 "초안 — 확인 대기 중"; 초안 콘텐츠가 있는 섹션에만 사용.
- 카테고리 타일: 아이콘(24px lucide, 스트로크 1.5) + 제목 + 한 줄 설명; 가는 테두리, 무거운 그림자 없음; 호버 = 테두리 색상 변경 + 2px 들림.
- 폰 프레임:
app-screenshot-showcase스킬 참조.
아이콘
lucide-react만 사용, 스트로크 1.5, 크기 20/24/32. 개념당 하나의 아이콘; 아이콘은 텍스트를 지원하며, 절대 대체하지 않습니다.
시각 작업 완료 전 체크리스트
- 토큰만 사용됨; 컴포넌트에 원시 hex 없음
- 빨간색 사용 제한됨; 색상으로만 상태 전달하지 않음
- 헤드라인 계층이 한눈에 읽힘; 뷰포트당 하나의 지배적인 요소
- 어두움/밝음 리듬 유지됨
- 새로운 색상 조합에 대한 대비 확인됨
- 320px에서도 줄어든 것처럼 보이지 않고 의도적으로 보임