황준성식 움직임 — 디자인 시스템 전체 문서

암과 동행하는 분들을 위한 움직임·호흡·해부학 교육 브랜드의 디자인 시스템 문서입니다.

---

1. 브랜드 정체성

• 브랜드: 황준성식 움직임 — 암과 동행하는 분들을 위한 움직임·호흡·해부학 교육
• 핵심 철학: "조금 더 편하게 숨쉬고, 조금 더 가볍게 움직이는 것"
• 세계관: "내 몸은 지구다" — 인체의 12가지 시스템을 자연과 사회에 빗대어 이해하는 관점
• 감정 키워드: 따뜻함, 안전함, 숨 쉬는 여백, 동행, 조용한 신뢰
• 피해야 할 인상: 의료적 차가움, 병원 느낌, 과장된 피트니스 에너지, 공포·긴박 소구, 화려하고 시끄러운 화면
• 로고: 없음 — 마크 자리에 브랜드명을 타이포로 표기 (Pretendard Bold 또는 Noto Serif KR)

2. 컬러 시스템

핵심 컬러

파생 컬러

사용 규칙

• 기본 조합: 크림 배경 + 웜 차콜 본문 + 코랄 포인트
• #FF5757 위 텍스트는 흰색 + 굵은 큰 글씨만 허용 (작은 텍스트 금지) — --text-on-coral: #FFFFFF
• 코랄 계열 작은 텍스트는 #D93A3A 사용
• 그라디언트 원칙적 금지 (허용 시 크림→화이트 수준만)
• 차가운 블루 그레이 금지 — 모든 뉴트럴은 웜 톤
• 포커스 링: --focus-ring: #FF5757 (보더만 변경, 글로우 금지)

3. 타이포그래피

• 기본 서체: Pretendard Variable / Pretendard (한글·영문·숫자 공통), fallback: -apple-system, sans-serif — --font-sans
• 세리프 악센트: Noto Serif KR — 철학적 인용구, 섹션 대제목에만 — --font-serif
• 폰트 소스 (CDN, 바이너리 미제공):
  • Pretendard Variable: jsDelivr dynamic subset (pretendard@v1.3.9)
  • Noto Serif KR: Google Fonts (400/600/700)

스케일

• 굵기 토큰: --fw-regular: 400, --fw-semibold: 600, --fw-bold: 700
• 행간: 본문 1.7 이상 (--lh-body: 1.7), 제목 --lh-heading: 1.35 — "숨 쉬는 여백"
• 자간: 제목 -0.02em (--ls-heading), 본문 -0.01em (--ls-body)
• 강조는 컬러보다 굵기(weight) 먼저; 컬러 강조는 정말 중요한 곳에만
• 링크: 기본 #D93A3A, 호버 시 #FF5757 + 밑줄

4. 형태와 공간

여백 (8pt 그리드)

--sp-1: 8px · --sp-2: 16px · --sp-3: 24px · --sp-4: 32px · --sp-5: 40px · --sp-6: 48px · --sp-8: 64px · --sp-10: 80px · --sp-12: 96px · --sp-15: 120px

• 섹션 사이 여백 과감하게 (80–120px). 빽빽한 레이아웃 금지 — 여백 자체가 브랜드 언어

라운드

• 날카로운 직각 금지

그림자·선

• 카드 섀도우: 0 4px 20px rgba(60,42,30,0.08) — --shadow-card
• 리프트(호버): 0 8px 28px rgba(60,42,30,0.10) — --shadow-lift
• 하드/진한 그림자 금지, 웜톤만
• 선: 1px solid #EDE3D2 — --border-thin. 두꺼운 보더 금지

5. 모션

• 호흡의 리듬처럼: ease-in-out, 400–600ms의 느긋한 전환
• 이징: cubic-bezier(0.45, 0, 0.55, 1) — --ease-breath
• 지속시간: --dur-calm: 500ms, --dur-quick: 400ms
• 등장 모션: 8–12px 미세한 fade + rise만
• 바운스, 스프링, 급격한 팝업 금지
• 호버: 코랄→#D93A3A 색 전환, 카드 그림자 살짝 강화. 프레스: 색 심화, 축소 효과 없음
• 투명·블러 효과 사용 안 함

6. 컴포넌트

React 컴포넌트로 구현되어 있으며, 네임스페이스 window.DesignSystem_9fd367로 사용합니다.

Forms (components/forms/)

• Button — Primary(코랄 배경 + 흰 SemiBold 텍스트, 라운드 14px, 호버 #D93A3A, 한 화면에 1개 원칙) / Secondary(투명 배경 + 1px 차콜 보더) / Ghost(#D93A3A 텍스트만). Props: variant, size(sm|md|lg), disabled
• Input — Surface Alt 배경, 1px 보더, 포커스 시 보더만 코랄 (글로우 금지). Props: label, caption, invalid
• Textarea — Input과 동일 규칙, 행간 1.7. Props: label, caption
• Select — Input과 동일 필드 스타일, 라인 셰브론(1.75px stroke). Props: label, options
• Checkbox — 라운드 7px, 체크 시 코랄 채움 + 흰 체크. Props: label
• Radio — 선택 시 코랄 도트, 400ms 전환. Props: name, label
• Switch — 켜짐 시 코랄 트랙, 400ms ease-in-out (스프링 금지). Props: label

Display (components/display/)

• Card — Surface 흰색, 라운드 20px, 웜 섀도우, 내부 패딩 24–32px(기본 32). Props: padding, lift(호버 시 그림자 강화)
• Badge — pill, Primary Soft 배경 + Primary Deep 텍스트. Props: tone(coral|earth|neutral)
• Divider — 1px #EDE3D2 구분선. Props: vertical

Feedback (components/feedback/)

• Dialog — 웜 차콜 딤(35%), 흰 카드 라운드 24px. Props: open, title, actions, onClose
• Toast — 흰 카드 + 상태 도트 (success=세이지, error=코랄 딥). Props: tone(neutral|success|error)
• Tooltip — 웜 차콜 배경 + 크림 텍스트, 4px fade+rise 등장. Props: text

Navigation (components/navigation/)

• Tabs — 선택 시 굵기 강조 + 하단 2px 코랄 인디케이터. Props: tabs, value, defaultValue, onChange

사용 예시

<Button variant="primary">함께 시작해 보아요</Button>
<Input label="이름" placeholder="이름을 알려주세요" caption="닉네임도 괜찮아요" />
<Badge tone="earth">완료</Badge>
<Card lift><h3>호흡 기초</h3><p>조금 더 편하게 숨쉬는 법을 함께 배워요.</p></Card>
<Tabs tabs={['호흡','움직임','해부학']} onChange={setTab} />

7. 아이콘

• 라인 아이콘, 1.5–2px stroke, 둥근 캡·둥근 조인트. 색: #2E2722 또는 #D93A3A
• 브랜드 자체 아이콘 세트 없음 → Lucide (CDN) 사용, stroke-width="1.75" 권장 (대체품 — 자체 아이콘 확보 시 교체)
• 이모지·유니코드 문자 아이콘·아이콘 폰트 사용 안 함
• 의료 클리셰 금지: 청진기, 병원 십자가, 알약, 리본 심볼

8. 일러스트·이미지

• 일러스트: 파스텔 톤, 부드러운 곡선, 해부학 일러스트와 톤 연결
• 사진: 자연광, 따뜻한 색온도, 과한 필터 금지
• 배경: 항상 크림 단색. 이미지 풀블리드 지양, 패턴·텍스처 금지

9. 보이스 & 카피

• 존댓말, 위로와 동행의 언어. 자주 쓰는 어휘: "함께", "동행", "천천히", "숨", "가볍게"
• 청유형 우선: "해보세요" → "함께 해보아요", "천천히 시작해 보아요"
• 이모지 사용 안 함. 숫자·통계 과시 안 함. 문장은 짧고 호흡이 느긋하게
• 절대 금지: 효능·치료·개선 암시("낫는다", "치료 효과", "회복된다"), 공포·긴박 소구("지금 안 하면", "놓치면 안 되는"), 명령형
• 예시 카피:
  • "오늘도 함께, 한 호흡씩."
  • "내 몸은 지구예요. 천천히 돌아보아요."
  • "무리하지 않아도 괜찮아요."

10. 절대 금지 목록

• 순검정 #000000, 차가운 블루 그레이
• 순백 페이지 배경 (배경은 항상 #FCF7ED)
• 코랄 #FF5757의 대면적 사용
• 네온 컬러, 강한 그라디언트, 유리 morphism
• 의료기관처럼 보이는 비주얼, 효능 암시 문구
• 빽빽한 정보 밀도 — 항상 여백 우선
• 바운스·스프링 애니메이션, 하드 섀도우, 두꺼운 보더

11. 프로젝트 구조

styles.css              ← 글로벌 CSS 진입점 (@import만)
tokens/
  fonts.css             ← 웹폰트 CDN @import
  colors.css            ← 컬러 토큰 (base + semantic)
  typography.css        ← 타이포 토큰 + body/heading/link 기본 스타일
  spacing.css           ← 여백·라운드·그림자·모션 토큰
components/
  forms/                ← Button, Input, Textarea, Select, Checkbox, Radio, Switch
  display/              ← Card, Badge, Divider
  feedback/             ← Dialog, Toast, Tooltip
  navigation/           ← Tabs
guidelines/             ← 파운데이션 스펙 카드 (Design System 탭)
readme.md               ← 디자인 가이드 + 매니페스트
SKILL.md                ← 에이전트용 스킬 매니페스트

• UI kit 없음 — 실제 제품 화면 소스가 제공되지 않아 생성하지 않음 (발명 금지 원칙)
• Textarea/Select/Checkbox/Radio/Switch/Tabs/Dialog/Toast/Tooltip은 가이드라인에 명시되지 않은 표준 프리미티브를 브랜드 규칙에 맞게 저작한 것 (Intentional additions)