Yanolja (야놀자)

퍼플-핑크 그라데이션 헤더와 NOL 워드마크로 여가 탐색을 여는 모바일 UI

한국소비자라이프스타일따뜻한modern-minimalhumanism고딕compactroundsubtle라이트한글 지원출시 2005개정 2025

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

브랜드명: Yanolja (야놀자), 소비자 서비스 브랜드 NOL
한 줄 정체성: 숙소에서 항공·교통·레저·공연까지 한 화면에서 탐색하고 예약하는 한국형 통합 여가 플랫폼
공식 디자인 철학 (브랜드가 명시한 표어/가치): “여행의 모든 것, 한 번에 쉽게”를 중심으로 탐색의 수고는 줄이고 놀이의 기대감은 높인다.
시그니처 요소 1개: Yanolja Pink(#FF3478)와 퍼플이 연결되는 그라데이션 헤더 안의 굵은 NOL 워드마크

Tone & Mood

톤 & 무드

핵심 키워드 3개: 즐거운, 활기찬, 직관적
무드 설명: 흰색 콘텐츠 캔버스 위에서 퍼플-핑크 그라데이션이 첫 인상을 만들고, 카테고리별 파스텔 아이콘과 혜택 카드가 빠른 탐색을 돕는다. 여행의 설렘을 표현하되 가격·할인·평점 정보는 단정하고 촘촘하게 정리한다.
비주얼 스타일: 모던 미니멀 + 휴머니즘
밀도(Density): Compact — 모바일 홈에서 다양한 여가 카테고리와 혜택을 짧은 스크롤 안에 비교해야 한다.
모서리 성향: Round (12~16px) — 검색창과 프로모션 카드에 친근한 큰 곡률을 사용한다.
평면성: Subtle — 대부분 색면과 얇은 경계로 구분하고, 검색창·핵심 프로모션에만 낮은 그림자를 쓴다.

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary — Yanolja Pink */
  --color-primary-50:  #FFF0F5;
  --color-primary-100: #FFD9E7;
  --color-primary-200: #FFB2CB;
  --color-primary-300: #FF7EA8;
  --color-primary-400: #FF528A;
  --color-primary-500: #FF3478; /* 핵심 CTA와 선택 상태 */
  --color-primary-600: #E62467;
  --color-primary-700: #BF1853;
  --color-primary-800: #94113F;
  --color-primary-900: #660A2B;

  /* Secondary — NOL Purple */
  --color-secondary-50:  #F3EFFF;
  --color-secondary-100: #E5DBFF;
  --color-secondary-200: #CDBBFF;
  --color-secondary-300: #AE91F4;
  --color-secondary-400: #8A68DC;
  --color-secondary-500: #6B46C1; /* 그라데이션 시작점과 보조 CTA */
  --color-secondary-600: #5936AA;
  --color-secondary-700: #47278B;
  --color-secondary-800: #351C69;
  --color-secondary-900: #241247;

  /* Neutral */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #FAFAFC;
  --color-neutral-100:  #F5F5F8;
  --color-neutral-200:  #ECECF1;
  --color-neutral-300:  #DDDDE4;
  --color-neutral-500:  #B5B2BC;
  --color-neutral-700:  #77737E;
  --color-neutral-800:  #4E4A55;
  --color-neutral-900:  #242229;
  --color-neutral-1000: #17171B;

  /* Semantic */
  --color-success-bg: #EAF9F3;
  --color-success-fg: #11845E;
  --color-warning-bg: #FFF5DF;
  --color-warning-fg: #B56800;
  --color-error-bg:   #FFF0F1;
  --color-error-fg:   #E52D3F;
  --color-info-bg:    #E9F7FF;
  --color-info-fg:    #167DB8;

  /* Surface */
  --bg-base:     #FFFFFF; /* 페이지 기본 */
  --bg-subtle:   #F7F7FA; /* 섹션 구분 */
  --bg-elevated: #FFFFFF; /* 카드와 검색창 */
  --bg-overlay:  rgba(23,23,27,0.52);

  /* Text */
  --text-primary:    #17171B;
  --text-secondary:  #4E4A55;
  --text-tertiary:   #77737E;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #B5B2BC;

  /* Border */
  --border-default: #ECECF1;
  --border-subtle:  #F5F5F8;
  --border-strong:  #DDDDE4;
  --border-focus:   #FF3478;

  /* Brand gradient */
  --gradient-brand: linear-gradient(118deg, #6B46C1 0%, #A63CDB 48%, #FF3478 100%);
}

Typography

타이포그래피

폰트 페어링:
- 한글: Pretendard (SIL Open Font License)
- 영문: Pretendard / 시스템 산세리프 폴백
위계 (font-size / font-weight / line-height / letter-spacing):
- Display: 40px / 900 / 1.12 / -0.045em
- H1: 30px / 850 / 1.2 / -0.035em
- H2: 22px / 800 / 1.27 / -0.025em
- H3: 17px / 750 / 1.35 / -0.015em
- Body Large: 16px / 600 / 1.55 / -0.01em
- Body: 14px / 500 / 1.5 / -0.005em
- Body Small: 12px / 500 / 1.45 / 0
- Caption: 11px / 700 / 1.35 / 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 1200px, 데스크톱 좌우 24px, 모바일 좌우 16px

Border Radius

--radius-none: 0;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;  /* 상품·혜택 카드 기본 */
--radius-xl: 20px;  /* 대형 프로모션 */
--radius-full: 9999px;

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 2px 8px rgba(30,20,42,0.06);   /* 고정 내비게이션 */
--shadow-md: 0 6px 18px rgba(67,34,92,0.10); /* 검색창·프로모션 카드 */
--shadow-lg: 0 12px 32px rgba(38,20,52,0.14); /* 팝오버·바텀시트 */
--shadow-xl: 0 24px 56px rgba(38,20,52,0.20); /* 모달 */

Iconography

스타일: Outline 중심, 선택 상태에서 Filled 배경을 결합
Stroke 굵기: 1.8~2px
모서리 처리: Round
추천 라이브러리: Phosphor / Lucide를 기본으로, 여행 카테고리는 동일 굵기의 전용 픽토그램 사용

Component Guide

컴포넌트 가이드 (상태별 CSS)

Button

.btn {
  min-height: 44px; padding: 0 18px; border: 1px solid transparent;
  border-radius: var(--radius-full); font: 800 14px/1 Pretendard, sans-serif;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  cursor: pointer;
}
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-600); box-shadow: var(--shadow-md); }
.btn-primary:active { background: var(--color-primary-700); transform: scale(.98); }
.btn-secondary { background: var(--color-secondary-50); color: var(--color-secondary-700); }
.btn-secondary:hover { background: var(--color-secondary-100); }
.btn-secondary:active { background: var(--color-secondary-200); transform: scale(.98); }
.btn-ghost { background: transparent; color: var(--text-primary); }
.btn-ghost:hover { background: var(--bg-subtle); }
.btn-ghost:active { background: var(--color-neutral-200); transform: scale(.98); }
.btn-danger { background: var(--color-error-fg); color: #FFFFFF; }
.btn-danger:hover { background: #C92334; box-shadow: var(--shadow-md); }
.btn-danger:active { background: #A91C2B; transform: scale(.98); }
.btn:disabled { background: var(--color-neutral-200); color: var(--text-disabled); box-shadow: none; cursor: not-allowed; }
.btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: nol-spin .7s linear infinite; color: #FFFFFF; }
@keyframes nol-spin { to { transform: rotate(360deg); } }

Input

.input {
  width: 100%; min-height: 48px; box-sizing: border-box; padding: 0 16px;
  background: var(--bg-subtle); color: var(--text-primary); border: 1px solid transparent;
  border-radius: var(--radius-full); font: 600 14px/1.4 Pretendard, sans-serif;
}
.input:hover { background: var(--color-neutral-100); }
.input:focus { outline: none; background: var(--bg-base); border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--color-primary-100); }
.input[aria-invalid="true"] { border-color: var(--color-error-fg); box-shadow: 0 0 0 3px var(--color-error-bg); }
.input:disabled { background: var(--color-neutral-100); color: var(--text-disabled); cursor: not-allowed; }

Card

.card { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg); }
.card-elevated { border-color: transparent; box-shadow: var(--shadow-md); }
.card-outlined { box-shadow: none; }
.card-highlight { background: linear-gradient(145deg, var(--color-secondary-50), var(--color-primary-50)); border-color: transparent; }
.card:hover { border-color: var(--color-primary-200); transform: translateY(-2px); transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); }

Badge / Tag

.tag { min-height: 22px; padding: 0 8px; border-radius: var(--radius-full); display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; }
.tag-solid { background: var(--color-primary-500); color: #FFFFFF; }
.tag-subtle { background: var(--color-primary-50); color: var(--color-primary-600); }
.tag-outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-secondary); }
.tag-discount { background: var(--color-primary-50); color: var(--color-primary-600); }

Navigation

.topnav { min-height: 64px; padding: 0 var(--space-xl); background: var(--gradient-brand); color: #FFFFFF; display: flex; align-items: center; gap: var(--space-lg); }
.topnav .brand { font-size: 28px; font-weight: 950; line-height: 1; letter-spacing: -.08em; transform: skew(-7deg); }
.topnav .nav-item { color: rgba(255,255,255,.78); font-size: 13px; font-weight: 700; }
.topnav .nav-item:hover, .topnav .nav-item.is-active { color: #FFFFFF; }
.bottom-nav { min-height: 56px; background: var(--bg-base); border-top: 1px solid var(--border-default); display: grid; grid-template-columns: repeat(5,1fr); box-shadow: var(--shadow-sm); }
.bottom-nav .is-active { color: var(--color-primary-500); }

Motion

--duration-fast: 120ms;
--duration-base: 220ms;
--duration-slow: 360ms;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

Anti-patterns

1. 핑크를 본문 전체나 넓은 단색 배경에 반복 사용하지 않는다. 핑크는 CTA·선택·혜택 강조에 집중한다. 2. 서로 다른 선 굵기와 시각 언어의 여행 카테고리 아이콘을 한 그리드에 혼용하지 않는다. 3. 할인율·판매가·기준가의 위계를 같은 크기와 색으로 표시하지 않는다. 4. 사진 또는 강한 그라데이션 위에 작은 회색 본문을 직접 올리지 않는다. 5. 프로모션 카드마다 무관한 그라데이션을 사용하지 않는다. NOL 퍼플-핑크 축을 일관되게 유지한다.

Yanolja (야놀자)

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

컴포넌트 가이드 (상태별 CSS)

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처