NaverPay (네이버페이)
초록 바탕의 블랙 Npay 로고와 결제·포인트를 잇는 간편금융 UI
Brand DNA
브랜드 DNA
- 브랜드명: NaverPay (네이버페이)
- 한 줄 정체성: 결제·포인트부터 자산과 금융까지 네이버 생태계 안에서 연결하는 간편금융 플랫폼
- 공식 디자인 철학: "금융을 넓히는 기술, 네이버페이"
- 시그니처 요소 1개: Naver Green 바탕에 블랙으로 적용하는 굵은
Npay워드마크
Tone & Mood
톤 & 무드
- 핵심 키워드 3개: 친근함, 간편 결제, 적립
- 무드 설명: 선명한 Naver Green을 넓게 쓰고 블랙 워드마크와 밝은 카드형 표면을 결합한다. 잔액, 결제, 적립 혜택이 짧은 탐색 안에 읽히는 생활금융 톤이다.
- 비주얼 스타일: 모던 미니멀
- 밀도(Density): Comfortable
- 모서리 성향: Round (12~18px)
- 평면성: Subtle
Color System
컬러 시스템 (CSS 변수)
:root {
/* Primary - Naver Green (NaverPay 공유) */
--color-primary-50: #E0F8EC;
--color-primary-100: #B2EFD0;
--color-primary-200: #6BE3A4;
--color-primary-300: #2ED884;
--color-primary-400: #08CE69;
--color-primary-500: #03C75A; /* Naver Green */
--color-primary-600: #02A848;
--color-primary-700: #018236;
--color-primary-800: #015D26;
--color-primary-900: #003917;
/* Secondary */
--color-secondary-500: #222222;
/* Point gold */
--color-point: #FFB800; /* 적립 포인트 별 */
/* Neutral */
--color-neutral-0: #FFFFFF;
--color-neutral-50: #FAFAFA;
--color-neutral-100: #F5F5F5;
--color-neutral-200: #F0F0F0;
--color-neutral-300: #E5E5E5;
--color-neutral-500: #C7C7C7;
--color-neutral-700: #888888;
--color-neutral-800: #555555;
--color-neutral-900: #222222;
--color-neutral-1000: #000000;
/* Semantic */
--color-success-bg: #E0F8EC;
--color-success-fg: #03C75A;
--color-warning-bg: #FFF4D6;
--color-warning-fg: #FFB800;
--color-error-bg: #FFE5E5;
--color-error-fg: #FF3838;
--color-info-bg: #E0F4FE;
--color-info-fg: #1EBCD2;
/* Surface */
--bg-base: #FFFFFF;
--bg-subtle: #F5F5F5;
--bg-elevated: #FFFFFF;
--bg-overlay: rgba(34,34,34,0.50);
/* Text */
--text-primary: #222222;
--text-secondary: #555555;
--text-tertiary: #888888;
--text-on-primary: #FFFFFF;
--text-disabled: #C7C7C7;
/* Border */
--border-default: #F0F0F0;
--border-subtle: #FAFAFA;
--border-strong: #E5E5E5;
--border-focus: #03C75A;
}Typography
타이포그래피
- 폰트 페어링:
- 한글: Nanum Square Neo / Nanum Square / Pretendard (OFL 폴백)
- 영문: -apple-system / SF Pro
- 위계:
- Display: 48px / 800 / 1.1 / -0.025em
- H1: 28px / 800 / 1.2 / -0.02em
- H2: 20px / 700 / 1.27 / -0.015em
- H3: 16px / 700 / 1.3 / -0.01em
- Body Large: 15px / 500 / 1.5 / -0.005em
- Body: 14px / 500 / 1.5 / -0.005em
- Body Small: 13px / 500 / 1.43 / 0
- Caption: 11px / 700 / 1.27 / 0
Spacing
스페이싱
- Base unit: 4px
- 토큰: ``
css --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px;`` - Container: 거래 화면 max-width 480px (모바일 우선), 브랜드·서비스 소개 화면 max-width 1120px
Border Radius
Border Radius
--radius-none: 0;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 18px;
--radius-xl: 24px;
--radius-full: 9999px;Shadow / Elevation
Shadow / Elevation
--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 4px 12px rgba(0,0,0,0.08);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
--shadow-xl: 0 16px 32px rgba(3,199,90,0.30);Iconography
Iconography
- 스타일: Outline + Filled
- Stroke 굵기: 2px
- 모서리 처리: Round
- 추천 라이브러리: Phosphor / Lucide
Component Guide
컴포넌트 가이드
Button
.btn {
font: 800 16px/1 'Nanum Square Neo', Pretendard, -apple-system, sans-serif;
letter-spacing: -0.01em;
border-radius: var(--radius-md);
padding: 14px 18px;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
border: 0;
transition: background 100ms ease;
}
.btn-primary { background: var(--color-primary-500); color: #fff; }
.btn-primary:hover { background: var(--color-primary-600); }
.btn-secondary { background: var(--bg-subtle); color: var(--text-primary); }
.btn-ghost { background: transparent; color: var(--color-primary-500); }
.btn-danger { background: var(--color-error-fg); color: #fff; }Input
.input { background: var(--bg-subtle); border: 0; border-radius: var(--radius-md); padding: 14px 16px; font-size: 16px; font-family: inherit; }
.input:focus { outline: 2px solid var(--border-focus); outline-offset: -2px; }Card (Money card 시그니처)
.money-card {
background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-400) 100%);
color: #fff;
border-radius: 18px;
padding: 22px;
}
.money-card .label { font-size: 11px; font-weight: 700; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.04em; }
.money-card .amount { font-size: 30px; font-weight: 800; letter-spacing: -0.025em; margin-top: 8px; }
.money-card .point { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; margin-top: 6px; }
.money-card .point::before { content: "⭐"; }
.card { background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 14px; }
.card-elevated { box-shadow: var(--shadow-md); border-color: transparent; }
.card-outlined { box-shadow: none; }Badge
.tag { padding: 2px 10px; border-radius: 9999px; font-size: 11px; font-weight: 700; line-height: 18px; display: inline-flex; align-items: center; gap: 4px; }
.tag-solid { background: var(--color-primary-500); color: #fff; }
.tag-subtle { background: var(--color-primary-50); color: var(--color-primary-700); }
.tag-outline { border: 1px solid var(--border-default); color: var(--text-primary); }
.point-tag { background: #FFF4D6; color: #B89400; }
.point-tag::before { content: "⭐"; }Navigation
.topnav { padding: 12px 16px; display: flex; align-items: center; gap: 12px; background: var(--bg-base); border-bottom: 1px solid var(--border-default); }
.topnav .brand { font-weight: 900; color: var(--color-primary-500); font-size: 22px; letter-spacing: -0.025em; }
.topnav .brand .pay { color: var(--text-primary); font-size: 16px; font-weight: 800; }Motion
Motion
--duration-fast: 100ms;
--duration-base: 200ms;
--duration-slow: 350ms;
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);Anti-patterns
Anti-patterns
1. 핵심 결제 면의 Naver Green을 임의의 청록·형광색이나 다색 그라데이션으로 변경 금지 2. Green 배경의 기본 블랙 Npay 로고를 흰색으로 상시 대체 금지 — 가독성 예외에서만 화이트 허용 3. Npay 워드마크의 비율·자간·보호 여백을 임의로 변형하거나 장식 효과 추가 금지 4. 잔액과 결제 금액보다 프로모션 배너를 더 강하게 강조해 정보 위계를 흐리는 구성 금지 5. 적립 포인트 상태를 본문 정보와 같은 명도로 처리 금지 — Green 또는 별도 혜택 색으로 빠르게 구분