Genie Music (지니뮤직)

퍼플 AI DJ 카드와 취향 태그로 시작하는 개인화 음악 홈

한국미디어소비자차가운modern-minimal고딕comfortableroundsubtle라이트다크한글 지원출시 2010개정 2025

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

Brand DNA

브랜드 DNA

브랜드명: Genie Music (지니뮤직 — KT 그룹)
한 줄 정체성: 대화형 AI DJ와 개인화 홈으로 취향 발견을 돕는 KT 그룹 음악 플랫폼
공식 디자인 철학: "Talk & Play genie!" — 말하고, 추천받고, 바로 듣는 상호작용형 음악 경험
시그니처 요소 1개: 지니 퍼플(#3617CE)에서 바이올렛으로 흐르는 AI DJ 카드와 취향 태그. 밝은 홈과 어두운 테마 모두에서 동일한 퍼플 초점을 유지

Tone & Mood

톤 & 무드

핵심 키워드 3개: 개인화, 대화형, 생동감
무드 설명: 기본 라이트 홈은 흰색과 옅은 라벤더 표면 위에 취향 태그와 콘텐츠 카드를 편안하게 배열합니다. 다크 설정에서는 거의 검정에 가까운 퍼플 캔버스로 전환하되 AI DJ 그라데이션과 앨범 아트의 생동감은 그대로 유지합니다.
비주얼 스타일: 모던 미니멀
밀도(Density): Comfortable
모서리 성향: Round (12~16px)
평면성: Subtle — 얕은 경계와 제한적인 퍼플 글로우

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Genie Purple */
  --color-primary-50:  #F2EEFF;
  --color-primary-100: #DDD2FF;
  --color-primary-200: #B6A1FF;
  --color-primary-300: #8E70FF;
  --color-primary-400: #6E47F2;
  --color-primary-500: #3617CE;   /* Genie Purple */
  --color-primary-600: #2A11A8;
  --color-primary-700: #1F0C7F;
  --color-primary-800: #150857;
  --color-primary-900: #0A042E;

  /* Secondary - Violet (그라데이션 짝) */
  --color-secondary-500: #7C3AED;
  --color-secondary-300: #A78BFA;

  /* Neutral (Light-first) */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F8F7FC;     /* 페이지 기본 */
  --color-neutral-100:  #F1EFF8;     /* 구분 표면 */
  --color-neutral-200:  #E8E3F1;     /* 기본 경계 */
  --color-neutral-300:  #D3CCDF;
  --color-neutral-500:  #8B8498;
  --color-neutral-700:  #5B5568;
  --color-neutral-900:  #1B1823;     /* 본문 */
  --color-neutral-1000: #0D0B12;

  /* Semantic */
  --color-success-bg: #EAF8EF;
  --color-success-fg: #138A48;
  --color-warning-bg: #FFF5DC;
  --color-warning-fg: #A96600;
  --color-error-bg:   #FDECF1;
  --color-error-fg:   #C52F57;
  --color-info-bg:    #F0ECFF;
  --color-info-fg:    #5B32E6;

  /* Surface */
  --bg-base:     #F8F7FC;
  --bg-subtle:   #F1EFF8;
  --bg-elevated: #FFFFFF;
  --bg-overlay:  rgba(13,11,18,0.56);

  /* Text */
  --text-primary:    #1B1823;
  --text-secondary:  #5B5568;
  --text-tertiary:   #8B8498;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #B8B1C4;

  /* Border */
  --border-default: #E8E3F1;
  --border-subtle:  #F1EFF8;
  --border-strong:  #D3CCDF;
  --border-focus:   #5B32E6;
}

[data-theme="dark"] {
  --color-success-bg: #102D1D;
  --color-success-fg: #4ADE80;
  --color-warning-bg: #2A1F00;
  --color-warning-fg: #F6B94B;
  --color-error-bg: #2A0F1A;
  --color-error-fg: #FB7185;
  --color-info-bg: #1A1740;
  --color-info-fg: #B69CFF;
  --bg-base: #0B0815;
  --bg-subtle: #151125;
  --bg-elevated: #1C1730;
  --bg-overlay: rgba(5,4,16,0.82);
  --text-primary: #F7F4FF;
  --text-secondary: #C8C1D8;
  --text-tertiary: #A39AB5;
  --text-on-primary: #FFFFFF;
  --text-disabled: #686078;
  --border-default: #2B2440;
  --border-subtle: #211B34;
  --border-strong: #403653;
  --border-focus: #A78BFA;
}

Typography

타이포그래피

폰트 페어링:
- 한글: Pretendard (OFL)
- 영문: Pretendard Latin / Inter / SF Pro 폴백
위계:
- Display: 36px / 900 / 1.2 / -0.025em
- H1: 24px / 800 / 1.3 / -0.02em
- H2: 20px / 800 / 1.35 / -0.015em
- H3 (트랙명): 14px / 800 / 1.4 / -0.005em
- Body Large: 15px / 500 / 1.5 / -0.005em
- Body: 13px / 500 / 1.5 / 0
- Body Small: 11px / 600 / 1.45 / 0
- Caption: 10px / 600 / 1.4 / 0.02em

Spacing

스페이싱

Base unit: 4px
토큰:

:root {
  --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 (모바일), 좌우 패딩 12px

Border Radius

:root {
  --radius-none: 0;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;     /* 추천 카드 시그니처 */
  --radius-xl: 20px;
  --radius-full: 9999px;
}

Shadow / Elevation

:root {
  --shadow-none: none;
  --shadow-sm: 0 1px 3px rgba(29,20,54,0.08);     /* 리스트·미니 플레이어 */
  --shadow-md: 0 8px 24px rgba(54,23,206,0.12);   /* 추천 카드 hover */
  --shadow-lg: 0 18px 48px rgba(29,20,54,0.18);   /* 모달 */
  --shadow-glow: 0 14px 36px rgba(91,50,230,0.24);/* AI DJ 히어로 */
}

[data-theme="dark"] {
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.30);
  --shadow-md: 0 10px 28px rgba(0,0,0,0.38);
  --shadow-lg: 0 20px 52px rgba(0,0,0,0.52);
  --shadow-glow: 0 14px 38px rgba(124,58,237,0.32);
}

Iconography

스타일: Outline + 가는 Stroke
Stroke 굵기: 1.5px
모서리 처리: Round
추천 라이브러리: Phosphor / Lucide

Component Guide

컴포넌트 가이드

Button

.btn {
  min-height: 42px; padding: 0 16px; border: 1px solid transparent;
  border-radius: var(--radius-full); font: 750 13px/1 Pretendard, sans-serif;
  letter-spacing: -0.01em; display: inline-flex; align-items: center;
  justify-content: center; gap: 7px; cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out),
              background var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.42); border-top-color: #fff;
  border-radius: 50%;
}
.btn-primary {
  background: linear-gradient(135deg, var(--color-secondary-500), var(--color-primary-500));
  color: var(--text-on-primary); box-shadow: var(--shadow-glow);
}
.btn-primary:hover { box-shadow: 0 12px 30px rgba(91,50,230,.30); }
.btn-secondary {
  background: var(--bg-elevated); color: var(--text-primary);
  border-color: var(--border-default); box-shadow: var(--shadow-sm);
}
.btn-ghost { background: transparent; color: var(--color-primary-500); }
.btn-danger { background: var(--color-error-fg); color: #FFFFFF; }
.btn-play {
  width: 44px; min-height: 44px; padding: 0; border-radius: var(--radius-full);
  background: var(--color-primary-500); color: #FFFFFF;
}

Input

.search-input {
  width: 100%; background: var(--bg-elevated); border: 1px solid var(--border-default);
  color: var(--text-primary); border-radius: var(--radius-full);
  padding: 11px 16px; font: 500 14px/1.4 inherit;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.search-input::placeholder { color: var(--text-tertiary); }
.search-input:focus {
  outline: 0; border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(91,50,230,0.16);
}
.search-input.is-error { border-color: var(--color-error-fg); }
.search-input:disabled { background: var(--bg-subtle); color: var(--text-disabled); }

Card

.content-card {
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.content-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.content-card.is-featured { border-color: rgba(91,50,230,.32); }
.content-card.is-outlined { background: transparent; box-shadow: none; }
.track-card {
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: 10px; display: grid;
  grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center;
}
.hero-card {
  background: linear-gradient(135deg, #25104E 0%, var(--color-primary-500) 58%, #8C61FF 100%);
  border-radius: var(--radius-xl); padding: var(--space-xl); color: #FFFFFF;
  position: relative; overflow: hidden; box-shadow: var(--shadow-glow);
}

Badge / Tag

.tag {
  padding: 6px 11px; border-radius: var(--radius-full);
  font: 700 11px/1 inherit; display: inline-flex; align-items: center;
}
.tag-solid { background: var(--color-primary-500); color: #FFFFFF; }
.tag-subtle { background: var(--color-primary-50); color: var(--color-primary-700); }
.tag-outline { background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border-default); }

Navigation (TabBar)

.tabbar {
  background: var(--bg-elevated); border-top: 1px solid var(--border-default);
  display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 0;
}
.tabbar .item {
  padding: 6px; text-align: center; font: 650 11px/1.3 inherit;
  color: var(--text-tertiary);
}
.tabbar .item.active { color: var(--color-primary-500); font-weight: 800; }

Motion

:root {
  --duration-fast: 120ms;
  --duration-base: 240ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-purple-fade: cubic-bezier(0.4, 0, 0.2, 1);
}

Anti-patterns

1. 형광 그린·시안 등 멜론·스포티파이 톤 색상 강조 금지 — 퍼플 단일 유지 2. 다크 위 본문 텍스트에 채도 높은 보라 사용 금지 — 본문은 #F5F5FA 부근 3. 그라데이션 위에 그라데이션 본문 텍스트 중첩 금지 — 가독성 손실 4. 차트 번호 폰트를 가는 weight로 사용 금지 — 800~900 굵게 5. 보라 글로우(--shadow-glow)를 한 화면에 두 곳 이상 사용 금지

Genie Music (지니뮤직)

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

컴포넌트 가이드

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처