고급 UI/UX 및 게임 디자인 가이드 (Premium UI/UX & Game Design)
본 스킬은 AI 에이전트가 웹, 애플리케이션 인터페이스 또는 게임을 디자인할 때 '투박하고, 단조롭고, 개발자 미감'이라는 기본 출력에서 벗어나 현대적이고 세련된 시각적 계층 구조와 부드러운 상호작용 경험(마이크로 인터랙션)을 갖춘 전문가 수준의 제품을 생산하도록 안내합니다.
1. 시각적 미학 및 디자인 시스템 규범 (Design System & Aesthetics)
🎨 평범한 색상 거부 (Color Palette)
- 순수 색상 금지:
#FF0000(순수 빨강),#00FF00(순수 초록),#0000FF(순수 파랑),#FFFF00(순수 노랑)은 절대 사용하지 마십시오. - 선별된 색조 (Semantic Colors):
- 배경 및 텍스트: 진한 슬레이트 그레이 (Deep Slate, 예:
#0B0F19,#1E293B) 또는 극한의 매트 블랙을 사용하고, 높은 대비를 가지면서도 부드러운 유백색 (#F8FAFC)을 함께 사용합니다. - 테마 색상 (Primary): 인디고 (
#6366F1), 오로라 그린 (#10B981), 바이올렛 (#8B5CF6), 그라데이션 로즈 레드를 사용합니다. - 상태 색상: 오류는 부드러운 코랄 레드 (
#EF4444), 성공은 에메랄드 그린 (#34D399)을 사용합니다.
- 배경 및 텍스트: 진한 슬레이트 그레이 (Deep Slate, 예:
✍️ 현대적인 타이포그래피와 서체 계층 (Typography)
- 서체 로드: 반드시 Google Fonts에서 현대적인 서체를 로드합니다. 예시:
- UI/본문:
Inter또는Plus Jakarta Sans. - 제목/숫자:
Outfit또는Cabinet Grotesk.
- UI/본문:
- 글자 두께 대비 (Font Weights): 제목은
700또는800, 부제목은500/600, 본문은400을 사용합니다. 단순한 글자 크기보다 글자 두께 대비를 통해 시각적 계층을 구축합니다.
🔮 공간적 깊이와 모래알 유리 효과 (Depth & Glassmorphism)
- 둥근 모서리 디자인: 버튼 둥근 모서리는 최소
8px에서12px; 카드는16px에서24px로 설정합니다. - 모래알 유리 (Glassmorphism):
background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.1); - 부드러운 그림자 (Box Shadows): 단일한 딱딱한 검은 그림자 대신 여러 레이어의 미세 그림자를 사용하여 떠 있는 듯한 느낌을 만듭니다:
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02);
2. 부드러운 마이크로 인터랙션과 동적 효과 (Micro-interactions & Motion)
UI의 정교함은 '피드백과 동적 움직임'에서 비롯됩니다. 전환 애니메이션이 없는 인터페이스는 딱딱하게 느껴집니다.
✨ 버튼 및 상호작용 컴포넌트의 동적 효과 (Button Interactions)
- 부드러운 전환: 모든 Hover/Focus/Active 상태에는 부드러운 전환을 추가해야 합니다:
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - 호버 시 상승 및 광택: 마우스를 올리면 카드가 살짝 위로 떠오르고 그림자가 짙어지거나 테두리가 빛납니다.
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border-color: rgba(99, 102, 241, 0.4); } - 클릭 압력 피드백 (Press Feedbacks):
.button:active { transform: scale(0.96); }
🌀 로딩 및 전환 (Transitions & Loaders)
- 스켈레톤 화면 (Skeleton Screen): 비동기적으로 로드되는 데이터는 딱딱한 "Loading..." 텍스트 대신 부드럽게 깜빡이는 스켈레톤 화면을 디자인해야 합니다.
- SVG 정교한 애니메이션: Spinner가 필요한 경우, CSS로 회전하는 경량 SVG 아이콘을 사용하고 그라데이션 효과를 함께 적용합니다.
3. 게임 UI/UX 전용 규범 (Game UI/UX Guidelines)
⏱️ 게임 루프와 부드러운 제어 (Game Loop & Controls)
- 물리와 렌더링 분리:
requestAnimationFrame을 사용하여 렌더링하고, 고정 시간 간격으로 물리 처리를 수행합니다. - 제어 평활화 (Control Smoothing): 센서를 사용하여 게임을 제어하는 경우, 데이터에 저역 통과 필터 또는 보간을 적용하여 컴포넌트 떨림을 방지합니다.
💥 촉각적 피드백 (Game Juice & Tactile Feedback)
- 점수 획득/성공 피드백:
- 글자가 커지면서 튀어오름 (
transform: scale(1.2)와 바운스 애니메이션 결합). - 파티클 효과 분사.
- 숫자가 위로 떠오르며 사라짐.
- 글자가 커지면서 튀어오름 (
- 피해/실패 피드백:
- 화면 흔들림 (Screen Shake).
- 빨간색 깜빡임.
- 카드 흔들림 (Shake animation).
📺 인터페이스 구성 및 HUD (Heads-Up Display)
- 전체 화면, 시차 없는 반응형 레이아웃.
- 반투명 어두운 오버레이를 사용하고, 팝업 메뉴는 Scale-up 또는 Slide-in 애니메이션으로 나타나게 합니다.
4. 개발 워크플로우 및 구현 규범 (Implementation Workflow)
- 구현 전 디자인: 코드를 작성하기 전에 ASCII/Markdown으로 레이아웃 스케치를 먼저 그립니다.
- 플레이스홀더 거부: "Lorem Ipsum"과 같은 테스트 데이터를 사용하지 않습니다. 아이콘은 반드시 SVG (예: Lucide 아이콘)를 사용합니다.
- CSS Variables로 테마 색상 중앙 관리.