재사용 가능한 다크 네온 웹앱 디자인 가이드
어떤 신규 웹앱(AI 대시보드, 유틸리티, SaaS, 핀테크 등)에도 즉시 이식하여 최고 수준의 사이버펑크 다크 네온 글래스모피즘 UI를 완성할 수 있는 범용 킷입니다. 디자인 철학, 색상 체계, 8대 권장 폰트 심층 비교, Lucide 아이콘 표준, 6대 엠비언트 특수 FX, 모바일 Safe Area 표준, 다국어 3대 원칙이 모두 포함되어 있습니다.
1. 디자인 철학 및 비주얼 테마 (Design Philosophy & DNA)
Moodify 및 파생 웹앱은 사용자가 컨텐츠에 깊이 몰입할 수 있도록 사이버펑크 다크 네온 글래스모피즘(Cyberpunk Dark Neon Glassmorphism)을 기본 시각 언어로 채택합니다.
눈의 피로를 최소화하고 컨텐츠에 몰입할 수 있는 순도 높은 다크 톤(#080b12, #0b0d13)에 은은한 방사형 오로라 그라데이션을 레이어드하여 깊이감 있는 3차원 공간감을 형성합니다.
블러 효과(backdrop-blur-xl)와 60~75% 투명도의 다크 서피스(rgba(23, 27, 38, 0.7)), 은은한 미세 테두리(border-white/5~10)로 가볍고 깊이감 있는 시각적 계층을 구성합니다.
인터랙션, 재생 상태, 중요 경고 등에 절제된 네온 글로우(shadow-glow-primary, shadow-[0_0_25px_rgba(...)])를 사용하여 텍스트 없이도 0.1초 만에 상태를 직관적으로 전달합니다.
2. 색상 체계 및 테마 토큰 (Color System & Tokens)
일관된 브랜드 아이덴티티와 명확한 시각적 위계를 위한 공식 테마 토큰 및 데이터 배지 컬러 체계입니다.
2.1 메인 테마 색상 팔레트 (Theme Palette)
핵심 CTA 버튼, 활성 탭 하이라이트, 메인 재생 버튼
서브 태그, 상태 인디케이터, 프로그레스 바
2중 확인/삭제 모드, 하트 취소, 에러 경고
재생 중 인디케이터, 작업 완료 피드백
BPM 템포 배지, 주의 알림, VIP 골드 서포터
카드 컨테이너, 모달 창, 상단 헤더 배경
2.2 취향 맵 및 데이터 배지 컬러 체계 (6색 표준)
복잡한 메타데이터를 사용자가 0.1초 만에 구분할 수 있도록 표준화된 6색 배지 시스템입니다:
3. 타이포그래피 시스템 & 8대 권장 폰트 (Typography Standards)
정보 위계 형성 기준표 및 설정 화면에서 사용자가 폰트를 바꿀 수 있는 동적 시스템입니다.
3.1 폰트 굵기 단계별 기준표 및 30% 스케일 규칙
| 굵기 (Weight) | Tailwind 클래스 | 용도 및 적용 기준 |
|---|---|---|
| 400 (Regular) | font-normal |
본문 텍스트, 카드 보조 설명, 긴 안내문구 |
| 500 (Medium) | font-medium |
서브타이틀, 메타 정보, 탭 라벨 (기본 가독성) |
| 600 (SemiBold) | font-semibold |
카드 소제목, 배지 내부 텍스트, 버튼 |
| 700 (Bold) | font-bold |
메인 트랙/아이템 타이틀 (가로폭 100% 확보, 말줄임 적용) |
| 800 (ExtraBold) | font-extrabold |
히어로 메인 타이틀, 브랜드 로고, 강한 임팩트 영역 |
- 제목:
font-bold text-sm text-white truncate (가로폭 100% 확보)- 서브타이틀:
font-medium text-[10px] text-white/40 uppercase tracking-[0.08em]서브타이틀은 제목 대비 크기를 약 30% 축소하고 대문자/자간 확장을 적용하여 작지만 선명하게 읽히도록 위계를 부여합니다.
3.2 타이포그래피 8대 권장 폰트 심층 비교 (Top 8 Recommended Fonts)
웹앱의 성격과 용도에 맞춰 최적의 폰트를 선택할 수 있도록 5대 핵심 지표(특징, 라이선스, 장점, 단점/유의사항)를 비교 분석합니다.
특징: 본고딕 기반, Apple SF Pro와 Inter의 장점을 결합한 대한민국 표준 UI 폰트 (9단계 굵기 및 가변 폰트).
장점: 한/영/숫자 베이스라인과 굵기 조화 극상, 모든 OS에서 글자 왜곡 없는 균일한 품질.
단점/유의사항: 전체 파일 용량이 커 서브셋(Subset)이나 CDN 권장, 대중적이어서 독창적 차별화에는 평이함.
특징: Space Mono 기반 기하학적 비례 서체, 날카로운 직각 꺾임과 미래지향적 하이테크 감성.
장점: 다크 네온 글래스모피즘, AI/테크 대시보드의 대형 타이틀(H1~H3)에 압도적 시각 긴장감 부여.
단점/유의사항: 한글 미지원(Fallback 설정 필수), 12px 이하 본문에서는 가독성이 떨어져 헤드라인 전용 권장.
특징: 종이 질감의 편안함과 디지털 선명함이 공존하는 한·영 조화 고딕 (400/600/800 3단계 웨이트).
장점: 장시간 읽어도 눈 피로가 적고 단정하고 신뢰감 있는 분위기 형성. 디자인 문서 및 가이드에 최적.
단점/유의사항: 3단계 굵기 체계로 한정되어 있어 9단계의 초정밀 웨이트가 필요한 복잡한 UI는 본문 위주 배치가 유리.
특징: 세미 라운드(Semi-rounded) 곡선과 모던 그로테스크가 융합된 오픈소스 영문 산세리프.
장점: 넉넉한 x-height로 10~12px 극소형 크기에서도 뭉개짐 없음, 숫자/기호 조형이 미려하여 핀테크·수치에 최적.
단점/유의사항: 영문/숫자 전용으로 한글 폰트와의 조화로운 복합 글꼴(Composite font) 설정 필요.
특징: Figma, GitHub, Linear 등 실리콘밸리 테크 기업의 디스플레이 화면 특화 UI 서체.
장점: 대문자 I와 소문자 l 완벽 구별, 가변 폰트, Tabular 숫자 등 UI 엔지니어링 기능 완비.
단점/유의사항: 영문 전용이며, 감성이나 개성이 극도로 절제되어 화려한 감성 연출에는 다소 밋밋함.
특징: 개발자를 위해 특수 설계된 고정폭(Monospace) 글꼴, 넉넉한 글자 간격과 명확한 심볼 구분.
장점: BPM(120), 재생시간(03:45), 트랙번호(01), API 키 등이 위아래로 칼같이 수직 정렬되어 사이버 무드 극대화.
단점/유의사항: 일반 문장에 적용 시 가로폭 과다 차지 및 가독성 저하되므로 수치/시간/메타 전용 한정.
특징: 기하학적 산세리프에 인간적인 감성과 리드미컬한 곡선을 부여한 감각적 트렌디 서체.
장점: Web3, 핀테크, 모던 SaaS 브랜드에 즉각적인 젊은 생동감 부여, 볼드 웨이트의 시각적 흡인력 탁월.
단점/유의사항: 영문 전용, 곡선이 경쾌하여 보수적인 공공/금융 시스템에는 다소 캐주얼할 수 있음.
특징: 본고딕 기반으로 글자 자폭(Width)을 슬림하게 다듬어 모바일 화면의 공간 효율성을 극대화한 한글 서체.
장점: Pretendard 대비 글자 폭이 컴팩트하여 좁은 모바일 카드에서 텍스트 말줄임(truncate)을 대폭 줄여줌.
단점/유의사항: 상대적으로 인지도가 낮아 시스템 Fallback 및 서브셋 CDN 사전 점검 필요.
4. 아이콘 시스템 가이드 (Icon Standards & Lucide Integration)
Moodify 디자인 시스템은 오픈소스 표준인 Lucide Icons (https://lucide.dev/)를 100% 채택합니다.
- 마이크로 (10~12px):
w-3 h-3(배지, 작은 메타 정보) - 컴팩트 (14~16px):
w-4 h-4(32px 원형 버튼 내부) - 스탠다드 (18~20px):
w-5 h-5(헤더 메뉴, 바텀 내비게이션 탭) - 라지 (24~28px):
w-6 h-6(플레이어 메인 재생/정지) - 엠프티 (48~64px):
w-12 h-12(빈 목록 안내 그래픽)
- 기본 액션: 가벼운 Outline 선형 아이콘 사용 (공유, 휴지통, 닫기 등)
- 활성/좋아요: 면을 채운 Fill 아이콘 적용 (
fill-current text-red-500) - 2중 취소 모드: Outline 빈 하트(
<Heart className="w-4 h-4 text-white" />)로 "취소" 상태 표현
5. 핵심 컴포넌트 인터랙티브 쇼케이스
5.1 기본 글래스 카드 (Glassmorphism Card)
5.2 2중 확인 액션 카드 (2-Step Red Neon Confirmation)
실수 삭제 방지용 인터랙션: 카드가 레드 네온으로 전환되며 메시지 없이 취소/확정 32px 원형 버튼 2종만 노출
6. 카드 엠비언트 효과 & 특수 FX 시스템 (Live Showcase)
배경 무드등, 시계방향 회전 테두리 빔, 코닉 오로라, 스펙큘러 반사광, 시머 로딩 등 6대 프리미엄 카드 인터랙션 실시간 작동 데모입니다.
6.1 4대 엠비언트 카드 인터랙티브 라이브 갤러리
카드의 둥근 모서리를 따라 광선 빔이 시계방향으로 쉬지 않고 순환합니다.
상단 1px 유리 반사광과 숨쉬는 네온 그림자, 마우스 호버 시 떠오르는 효과를 제공합니다.
6.2 [FX 5] 시머 스켈레톤 로딩 애니메이션 (Shimmer Skeleton Effect)
7. 모바일 반응형 & Safe Area 준수 표준 (Mobile Responsive & Safe Area Standards)
모바일 브라우저와 PWA 독립 실행형 환경에서 하단 시스템 제스처 바, 노치, 가상 키보드 등과의 충돌을 완벽히 방어하기 위한 표준 지침입니다.
- env(safe-area-inset-bottom)을 하단 내비게이션 바 패딩에 필수 바인딩하여 홈 인디케이터 바와의 겹침 원천 차단.
- 뷰포트 높이는 100dvh(동적 뷰포트 단위)를 사용하여 Safari 주소창 출현 시 화면 찌그러짐 방지.
- 3버튼 내비게이션 또는 제스처 바가 하단 액션 버튼을 가리지 않도록 스크롤 컨테이너에 pb-52 또는 pb-[calc(5.5rem+env(safe-area-inset-bottom))]를 선언하여 모든 요소가 시원하게 스크롤되도록 보장.
- 모바일 인터랙션 버튼은 최소 32px (w-8 h-8) 이상의 터치 영역을 확보.
- 터치 순간 active:scale-75 또는 active:scale-[0.98]을 적용해 손끝에 즉각적인 시각 햅틱 피드백 전달.
8. 다국어(i18n) 지원 3대 원칙 (Internationalization Rules)
글로벌 사용자가 어떤 언어 환경에서도 일관된 고품질 사용자 경험을 누릴 수 있도록 준수해야 하는 3대 엔지니어링 원칙입니다.
한국어, 영어, 일본어, 중국어, 태국어, 독일어, 프랑스어, 스페인어 8개 언어 전체에 번역 키를 누락 없이 등록합니다.
UI 상에 노출되는 모든 텍스트, 버튼 라벨, 툴팁, aria-label은 소스 코드 내 하드코딩을 절대 금지하며, 반드시 translations.js 등록 후 t(...)를 통해 호출합니다.
사용자가 설정에서 언어를 바꾸거나 폰트를 변경하더라도 페이지 리로드 없이 앱 내 모든 화면과 컴포넌트에 즉시 실시간 동기화되어 반영되어야 합니다.
9. 새 프로젝트 빠른 적용 5단계 & 실제 소스코드 (Starter Kit Checklist)
어떤 새 프로젝트든 아래 코드를 순서대로 복사해 붙여넣으면 즉시 완성형 UI가 작동합니다.