KakaoPay (카카오페이)
노란 카카오 옐로우와 검은 본문이 만나는 친근한 핀테크
Brand DNA
브랜드 DNA
- 브랜드명: KakaoPay (카카오페이)
- 한 줄 정체성: 카카오톡 친구 송금에서 시작해 결제·투자·보험까지 묶은 종합 핀테크
- 공식 디자인 철학: "쉽고, 빠르고, 친근하게" — 금융을 일상 대화처럼
- 시그니처 요소 1개: 새카만 본문(#191919) 위 한 점의 Kakao Yellow(#FEE500) 강조 + 16px 라운드 카드. 토스의 단일 Blue와 대비되는 "노란 친근함"
Tone & Mood
톤 & 무드
- 핵심 키워드 3개: 친근, 명랑, 신뢰
- 무드 설명: 카카오 본가의 노란 톤을 유지하되, 금융 신뢰감 확보를 위해 본문은 거의 검정(#191919)에 가까운 톤. 카드는 흰색·라운드 16px로 분리감을 주고, 강조는 노랑 + 일부 코랄/블루로 결제·송금을 구분.
- 비주얼 스타일: 모던 미니멀 + 약간의 휴머니즘 (캐릭터 라이언/어피치)
- 밀도(Density): Comfortable — 모바일 우선, 카드 사이 8~10px 여백
- 모서리 성향: Round (12~16px) — 카카오 패밀리 공통
- 평면성: Flat — 그림자 거의 없음, 미세한 elevation만
Color System
컬러 시스템 (CSS 변수)
:root {
/* Primary - Kakao Yellow */
--color-primary-50: #FFFEF0;
--color-primary-100: #FFFAC2;
--color-primary-200: #FFF285;
--color-primary-300: #FFEC47;
--color-primary-400: #FFE61F;
--color-primary-500: #FEE500; /* Kakao Yellow */
--color-primary-600: #E5CE00;
--color-primary-700: #B8A500;
--color-primary-800: #8A7C00;
--color-primary-900: #5C5300;
/* Secondary - 결제 강조 코랄 */
--color-secondary-500: #FF6F61;
/* Tertiary - 송금/금융 파랑 */
--color-tertiary-500: #3478F6;
/* Neutral - Kakao Gray */
--color-neutral-0: #FFFFFF;
--color-neutral-50: #F9FAFB;
--color-neutral-100: #F1F3F5; /* surface subtle */
--color-neutral-200: #E8EAED;
--color-neutral-300: #DEE2E6;
--color-neutral-500: #B8BDC4;
--color-neutral-700: #7E8593; /* text tertiary */
--color-neutral-800: #4A4F58; /* text secondary */
--color-neutral-900: #191919; /* text primary — 카카오 본가 본문 */
--color-neutral-1000: #000000;
/* Semantic */
--color-success-bg: #E8F8E8;
--color-success-fg: #1EA64A;
--color-warning-bg: #FFF6E0;
--color-warning-fg: #F2A50C;
--color-error-bg: #FFEDED;
--color-error-fg: #E53935;
--color-info-bg: #E8F0FE;
--color-info-fg: #3478F6;
/* Surface */
--bg-base: #F7F8FA; /* 페이지 회색 캔버스 */
--bg-subtle: #F1F3F5;
--bg-elevated: #FFFFFF; /* 카드 */
--bg-overlay: rgba(25,25,25,0.55);
/* Text */
--text-primary: #191919;
--text-secondary: #4A4F58;
--text-tertiary: #7E8593;
--text-on-primary: #191919; /* Yellow 위는 검정 */
--text-disabled: #B8BDC4;
/* Border */
--border-default: #E8EAED;
--border-subtle: #F1F3F5;
--border-strong: #DEE2E6;
--border-focus: #3478F6;
}
Typography
타이포그래피
- 폰트 페어링:
- 영문/한글: Kakao Sans (자체) — 폴백 Pretendard, -apple-system
- 본문은 한국어 가독성을 위해 weight 500+ 위주
- 위계:
- Display: 40px / 800 / 1.2 / -0.025em
- H1: 28px / 800 / 1.25 / -0.02em
- H2: 22px / 700 / 1.3 / -0.015em
- H3: 18px / 700 / 1.35 / -0.01em
- Body Large: 16px / 500 / 1.5 / -0.01em
- Body: 14px / 500 / 1.5 / -0.005em
- Body Small: 13px / 500 / 1.45 / 0
- Caption: 11px / 600 / 1.4 / 0
Spacing
스페이싱
- Base unit: 4px
- 토큰: ``
css --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 40px; --space-3xl: 64px;`` - Container: max-width 480px (모바일), 좌우 패딩 16px
Border Radius
Border Radius
--radius-none: 0;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px; /* 카드 시그니처 */
--radius-xl: 20px;
--radius-full: 9999px;Shadow / Elevation
Shadow / Elevation
--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.03);
--shadow-md: 0 2px 8px rgba(0,0,0,0.04); /* 카드 기본 */
--shadow-lg: 0 8px 20px rgba(0,0,0,0.08); /* 모달 */
--shadow-xl: 0 16px 32px rgba(254,229,0,0.30); /* CTA 노란 발광 */Iconography
Iconography
- 스타일: Filled + Outline 혼합 (카카오 패밀리는 둥근 Filled가 시그니처)
- Stroke 굵기: 2px
- 모서리 처리: Round
- 추천 라이브러리: Kakao Icons / Phosphor Fill
Component Guide
컴포넌트 가이드
Button
.btn { font: 700 15px/1 'Kakao Sans', Pretendard, sans-serif; letter-spacing: -0.01em;
border-radius: var(--radius-md); padding: 13px 18px; border: 0;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
transition: background 120ms ease, transform 80ms ease; }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); font-weight: 800; }
.btn-primary:hover { background: var(--color-primary-400); }
.btn-primary:disabled { background: var(--color-neutral-100); color: var(--text-disabled); }
.btn-secondary { background: var(--bg-subtle); color: var(--text-primary); }
.btn-ghost { background: transparent; color: var(--color-tertiary-500); }
.btn-danger { background: var(--color-error-fg); color: #fff; }Input
.input { background: var(--bg-elevated); border: 1px solid var(--border-default);
border-radius: var(--radius-md); padding: 12px 14px; font: 500 15px/1.4 inherit;
color: var(--text-primary); }
.input:focus { outline: 0; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(52,120,246,0.18); }
.input.error { border-color: var(--color-error-fg); }Card
.card { background: var(--bg-elevated); border-radius: var(--radius-lg);
padding: 16px; box-shadow: var(--shadow-md); }
.card-flat { box-shadow: none; border: 1px solid var(--border-default); }
.card-yellow { background: var(--color-primary-500); color: var(--text-on-primary); }Badge / Tag
.tag { padding: 3px 8px; border-radius: 9999px; font: 600 11px/1.4 inherit; }
.tag-solid { background: var(--color-primary-500); color: var(--text-on-primary); }
.tag-subtle { background: var(--color-primary-50); color: var(--color-primary-700); }
.tag-outline { border: 1px solid var(--border-default); color: var(--text-secondary); }Navigation (BottomNav)
.bottomnav { background: var(--bg-elevated); border-top: 1px solid var(--border-subtle);
display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 0; }
.bottomnav .item { padding: 6px; text-align: center; font: 600 11px/1.3 inherit; color: var(--text-tertiary); }
.bottomnav .item.active { color: var(--text-primary); }Motion
Motion
--duration-fast: 120ms;
--duration-base: 220ms;
--duration-slow: 360ms;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);Anti-patterns
Anti-patterns
1. 노랑(#FEE500) 위에 흰 텍스트 사용 금지 — 접근성 명도 미달, 반드시 검정 본문 2. 본문에 카카오 캐릭터(라이언/어피치 등) 과다 노출 금지 — 금융 신뢰감 저하 3. 한 화면에 노랑 CTA를 두 개 이상 두지 말 것 — Primary는 하나만 4. 카드 모서리를 sharp(0~4px)로 변경 금지 — 16px round가 패밀리 시그니처 5. 결제 액션에 빨강 단독 사용 금지 — 코랄(#FF6F61)로 부드럽게 처리