Snapchat
쨍한 형광 옐로 + 흰 유령 로고 + 풀스크린 카메라 우선 인터페이스
Brand DNA
브랜드 DNA
- 브랜드명: Snapchat (Snap Inc.)
- 한 줄 정체성: 카메라에서 시작해 가까운 친구와 순간을 주고받는 비주얼 메신저
- 공식 디자인 철학: "The fastest way to share a moment" — 카메라 우선, 친구 중심, 즉시 사라지는 대화
- 시그니처 요소 1개: 형광 옐로(#FFFC00) + 흰색 유령(Ghostface Chillah) 로고 + 풀스크린 카메라 + 동그란 흰 옐로 테두리 셔터 버튼. 다른 SNS와 달리 앱을 켜면 피드가 아닌 카메라가 먼저 뜬다
Tone & Mood
톤 & 무드
- 핵심 키워드 3개: 즉흥, 유희, 친밀
- 무드 설명: 라이트 UI는 선명한 흰 캔버스와 검정 텍스트 위에 Snapchat Yellow를 강하게 사용한다. 카메라 화면에서는 검정 오버레이와 흰 컨트롤로 전환하며, Bitmoji·렌즈·스티커가 즉흥적인 캐릭터를 더한다. 공식 앱 설정에서 시스템 라이트와 시스템 다크를 모두 지원한다.
- 비주얼 스타일: 모던 미니멀
- 밀도(Density): Comfortable — 풀스크린 위 큰 액션
- 모서리 성향: Pill (풀필 9999px 버튼/태그)
- 평면성: Flat + glass overlay (반투명 backdrop blur)
Color System
컬러 시스템 (CSS 변수)
:root {
/* Primary - Snapchat Yellow */
--color-primary-50: #FFFFE5;
--color-primary-100: #FFFFB8;
--color-primary-200: #FFFE8A;
--color-primary-300: #FFFD5C;
--color-primary-400: #FFFD2E;
--color-primary-500: #FFFC00; /* Snapchat Yellow */
--color-primary-600: #E5E300;
--color-primary-700: #B8B600;
--color-primary-800: #8A8800;
--color-primary-900: #5C5B00;
/* Story colors (스토리 링 그라데이션) */
--color-story-1: #FF4081;
--color-story-2: #9C27B0;
--color-story-3: #FFFC00;
--color-story-grad: linear-gradient(135deg, #FFFC00, #FF4081, #9C27B0);
/* Neutral */
--color-neutral-0: #FFFFFF;
--color-neutral-50: #F7F7F7;
--color-neutral-100: #F0F0F0;
--color-neutral-200: #DDDDDD;
--color-neutral-300: #BBBBBB;
--color-neutral-500: #888888;
--color-neutral-700: #555555;
--color-neutral-800: #303030;
--color-neutral-900: #1A1A1A;
--color-neutral-1000: #000000;
/* Semantic — 라이트 컬러 액센트 */
--color-success-bg: #DCFCE7;
--color-success-fg: #16A34A;
--color-warning-bg: #FEF3C7;
--color-warning-fg: #B45309;
--color-error-bg: #FECACA;
--color-error-fg: #DC2626;
--color-info-bg: #DBEAFE;
--color-info-fg: #2563EB;
/* Chat colors per friend (스냅챗 시그니처: 친구마다 컬러 코드) */
--color-chat-incoming: #5B6FFF;
--color-chat-outgoing: #FF4081;
--color-chat-snap-opened: transparent;
--color-chat-snap-new: #FF4081;
/* Surface */
--bg-base: #FFFFFF;
--bg-subtle: #F7F7F7;
--bg-elevated: #FFFFFF;
--bg-overlay: rgba(0,0,0,0.50);
--bg-camera: #000000; /* 카메라 풀스크린 */
/* Text */
--text-primary: #000000;
--text-secondary: #555555;
--text-tertiary: #888888;
--text-on-yellow: #000000;
--text-on-primary: #000000;
--text-on-dark: #FFFFFF;
--text-disabled: #BBBBBB;
/* Border */
--border-default: #EAEAEA;
--border-subtle: #F0F0F0;
--border-strong: #DDDDDD;
--border-focus: #FFFC00;
}
[data-theme="dark"] {
--color-neutral-0: #000000;
--color-neutral-50: #111111;
--color-neutral-100: #1C1C1E;
--color-neutral-200: #2C2C2E;
--color-neutral-300: #3A3A3C;
--color-neutral-500: #7C7C80;
--color-neutral-700: #C7C7CC;
--color-neutral-800: #E5E5EA;
--color-neutral-900: #F2F2F7;
--color-neutral-1000: #FFFFFF;
--color-success-bg: #123A24;
--color-success-fg: #53D986;
--color-warning-bg: #452E0A;
--color-warning-fg: #FFB44A;
--color-error-bg: #49191F;
--color-error-fg: #FF6675;
--color-info-bg: #132B4C;
--color-info-fg: #65A5FF;
--bg-base: #000000;
--bg-subtle: #111111;
--bg-elevated: #1C1C1E;
--bg-overlay: rgba(0,0,0,0.72);
--bg-camera: #000000;
--text-primary: #FFFFFF;
--text-secondary: #BBBBBB;
--text-tertiary: #8E8E93;
--text-on-yellow: #000000;
--text-on-primary:#000000;
--text-on-dark: #FFFFFF;
--text-disabled: #5E5E63;
--border-default: #303033;
--border-subtle: #242426;
--border-strong: #48484A;
--border-focus: #FFFC00;
}Typography
타이포그래피
- 폰트 페어링:
- 영문: Avenir Next (자체 사용) / Helvetica Neue / Inter
- 한글: Pretendard / Apple SD Gothic Neo
- 스냅 캡션: 사용자 입력 위 라운드 산세리프 with stroke
- 위계:
- Display: 32px / 900 / 1.1
- H1: 24px / 800 / 1.2
- H2: 20px / 800 / 1.3
- H3: 17px / 700 / 1.35
- Body Large: 17px / 500 / 1.4
- Body: 15px / 500 / 1.4
- Body Small: 13px / 600 / 1.3
- Caption: 11px / 700 / 1.2
Spacing
스페이싱
- Base unit: 4px
- 토큰: ``
css --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 18px; --space-xl: 24px; --space-2xl: 36px; --space-3xl: 56px;`` - Container: 모바일 풀폭 100% (카메라 풀스크린)
Border Radius
Border Radius
--radius-none: 0;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-full: 9999px; /* 시그니처 셔터 / 칩 */Shadow / Elevation
Shadow / Elevation
--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px rgba(0,0,0,0.18);
--shadow-lg: 0 12px 32px rgba(0,0,0,0.32);
--shadow-yellow: 0 8px 24px rgba(255,252,0,0.40);
--shadow-text: 0 2px 6px rgba(0,0,0,0.50); /* 카메라 위 텍스트 */Iconography
Iconography
- 스타일: Filled (Bitmoji + 둥근 글리프)
- Stroke 굵기: 2~2.5px (외곽선이 있을 경우)
- 모서리 처리: Round (매우 둥글게)
- 추천 라이브러리: 자체 / Bitmoji
Component Guide
컴포넌트 가이드
Button
.btn { font: 800 14px/1 'Avenir Next', Inter, sans-serif; border-radius: 9999px; padding: 12px 22px; border: 0; cursor: pointer; }
.btn-primary { background: var(--color-primary-500); color: var(--text-on-yellow); box-shadow: var(--shadow-yellow); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-dark { background: #000; color: #fff; }
.btn-glass { background: rgba(255,255,255,0.18); backdrop-filter: blur(10px); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.btn-shutter { width: 78px; height: 78px; border-radius: 9999px; border: 6px solid var(--color-primary-500); background: transparent; padding: 0; }
.btn-shutter.recording { border-color: #FF4081; background: rgba(255,64,129,0.2); }Input (Chat)
.field { background: var(--bg-subtle); border: 0; border-radius: 9999px; padding: 11px 18px; font: 500 15px/1.3 inherit; color: var(--text-primary); outline: 0; }
.field:focus { box-shadow: 0 0 0 2px var(--color-primary-500); }
.caption-input { background: rgba(0,0,0,0.50); backdrop-filter: blur(8px); color: #fff; padding: 8px 16px; border-radius: 9999px; font: 800 16px/1.3 inherit; text-shadow: var(--shadow-text); }Card (Story / Chat row)
.story { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 72px; }
.story .ring { width: 64px; height: 64px; border-radius: 9999px; padding: 3px; background: var(--color-story-grad); }
.story .ring img { width: 100%; height: 100%; border-radius: 9999px; background: #fff; }
.story.viewed .ring { background: var(--border-strong); }
.story .name { font: 700 11px/1.2 inherit; color: var(--text-primary); max-width: 64px; text-align: center; }
.chat-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.chat-row .bitmoji { width: 48px; height: 48px; border-radius: 9999px; background: var(--color-primary-500); }
.chat-row .snap-icon { width: 18px; height: 18px; border-radius: 4px; background: var(--color-chat-snap-new); }
.chat-row .snap-icon.opened { background: transparent; border: 2px solid var(--color-chat-snap-new); }Badge / Tag
.streak { color: #FF6B00; font: 800 13px/1 inherit; } /* 🔥 N day streak */
.badge-new { background: var(--color-primary-500); color: #000; border-radius: 9999px; padding: 2px 8px; font: 800 11px/1.3 inherit; }
.tag-lens { background: rgba(0,0,0,0.45); backdrop-filter: blur(10px); color: #fff; border-radius: 9999px; padding: 5px 12px; font: 700 12px/1 inherit; }Navigation (Bottom Tab)
.tabbar { background: #000; display: grid; grid-template-columns: 1fr 1fr 78px 1fr 1fr; align-items: center; padding: 10px 14px 18px; gap: 8px; }
.tabbar .tab { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; font: 700 10px/1 inherit; }
.tabbar .tab.active { color: var(--color-primary-500); }
.tabbar .shutter { justify-self: center; }Motion
Motion
--duration-fast: 120ms;
--duration-base: 220ms;
--duration-slow: 380ms;
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* 스티커 등장 */Anti-patterns
Anti-patterns
1. 옐로를 #FFD700 같은 톤다운 색으로 대체 금지 — 형광 #FFFC00 고수 2. 카메라 외 다른 화면을 홈으로 만들기 금지 — 첫 화면은 항상 카메라 3. 카메라 위 텍스트에 텍스트 그림자 없이 두기 금지 — 가독성 위해 stroke 또는 backdrop blur 필수 4. 동그란 셔터 버튼을 사각형으로 바꾸기 금지 — 78~84px 흰 옐로 테두리 원형 5. Bitmoji 없이 추상 아이콘으로 친구 아바타 표현 금지 — 캐릭터 톤 정체성