게임 UI 프론트엔드은(는) 무엇을 하나요?
개요
게임에 보이는 인터페이스 레이어가 필요할 때 이 스킬을 사용하세요. 목표는 일반적인 대시보드 UI를 만드는 것이 아닙니다. 목표는 플레이 경험을 지원하는, 가독성 있고 테마에 맞는 브라우저 게임 인터페이스를 만드는 것입니다.
기본 가정: 게임 월드는 Canvas 또는 WebGL로 구축하고, 텍스트가 많은 UI는 DOM으로 구축합니다.
프론트엔드 표준
- 코딩 전에 시각적 방향성을 설정하세요.
- 장르와 판타지
- 머티리얼 언어
- 타이포그래피
- 팔레트
- 모션 톤
- UI 테마에 CSS 변수를 사용하세요.
- 명확한 계층 구조를 구축하세요.
- 중요한 전투 또는 생존 정보를 먼저
- 보조 도구는 그다음
- 거의 사용하지 않는 설정은 메뉴나 서랍 뒤에
- 특히 3D 환경에서는 플레이 필드를 먼저 보호하세요.
- 초기 화면은 몇 초 안에 플레이 가능하게 느껴져야 합니다.
- 기본적으로 하나의 주요 영구 HUD 클러스터와 최대 하나의 작은 보조 클러스터를 사용합니다.
- 일반 플레이 중에는 플레이 필드의 중앙을 깨끗하게 유지하세요.
- 일반 플레이 중에는 플레이 필드의 중앙 하단을 대부분 깨끗하게 유지하세요.
- 지식, 현장 노트, 퀘스트 세부 정보 및 긴 제어 목록은 서랍, 토글 또는 일시 중지 화면 뒤에 배치하세요.
- 영구적인 박스형 패널보다는 상황별 프롬프트와 일시적인 힌트를 선호하세요.
- 오버레이는 움직임 속에서도 읽기 쉽게 유지하세요.
- 필요한 곳에 배경 패널, 가장자리 처리, 대비 및 절제된 블러를 사용하세요.
- 처음부터 데스크톱과 모바일 모두를 위해 디자인하세요.
- 3D UI는 카메라 및 입력 제어 경계를 고려하여 디자인하세요.
- 메뉴, 대화 상자 또는 포인터 기반 UI가 활성화된 경우 카메라 제어 입력을 일시 중지하거나 차단하세요.
- 포인터 잠금, 드래그하여 보기 및 메뉴 상호 작용 상태를 명시적으로 유지하세요.
3D 스타터 기본값
탐험, 이동 또는 3인칭 스타터 스캐폴드의 경우 다음 UI 예산을 선호하세요:
- 가장자리에 있는 하나의 간결한 목표 칩 또는 상태 스트립
- 하나의 일시적인 컨트롤 힌트 또는 상호 작용 프롬프트
- 저널, 지도 또는 퀘스트 로그와 같은 하나의 선택적 접이식 보조 표면
첫 로드 시 모든 정보 표면을 열지 마세요. 사용자가 더 깊은 UI를 열기 전에 장면을 읽을 수 있어야 합니다.
3D 브라우저 게임의 기본 구현 제약 조건:
- 항상 켜져 있는 전체 너비 헤더 + 멀티 카드 본문 + 전체 너비 푸터 레이아웃 없음
- 일반 이동 중에는 큰 중앙 화면 또는 중앙 하단 오버레이 없음
- 사용자가 명시적으로 더 조밀한 레이아웃을 요청하지 않는 한, 데스크톱에서 영구 HUD가 뷰포트의 약 20-25% 이상을 덮지 않음
- 모바일에서는 더 큰 패널로 플레이 필드를 덮기 전에 좁은 스택 또는 상황별 칩으로 축소
프롬프팅 규칙
모델에게 게임 UI를 설계하거나 구현하도록 요청할 때 다음을 포함하세요:
- 게임 판타지
- 카메라 또는 시점
- 플레이어 동사
- HUD 레이어
- 3D 게임의 경우 카메라 또는 제어 모드
- 모션 톤
- 데스크톱 및 모바일 기대치
- 플레이 필드 보호 및 공개 전략
- 피해야 할 명시적인 안티 패턴
구체적인 프롬프트 형태는 ../../references/frontend-prompts.md를 참조하세요.
모션 규칙
- 지속적인 마이크로 애니메이션보다는 의미 있는 몇 가지 전환을 선호하세요.
- 상태 변경, 보상, 위험 및 온보딩을 위해 강한 모션을 아껴 사용하세요.
- 필수적이지 않은 애니메이션의 경우 축소된 모션 설정을 준수하세요.
- 3D HUD 움직임이 카메라 움직임과 경쟁하지 않도록 유지하세요.
좋은 예시
- HUD 요소는 장면을 평평하게 만들지 않으면서도 읽기 쉽습니다.
- 메뉴는 SaaS 관리 패널이 아닌 게임 세계에 자연스럽게 느껴집니다.
- 레이아웃이 중단점에 따라 깔끔하게 적응합니다.
- 포인터, 키보드 및 게임 상태 피드백이 명확합니다.
- 3D 게임에서 메뉴 및 HUD 상태가 카메라 제어 또는 포인터 잠금과 충돌하지 않습니다.
- 3D 게임에서 첫 번째 플레이 가능한 뷰는 이동, 조준 및 공간 읽기를 위해 뷰포트의 대부분을 사용할 수 있도록 유지합니다.
- 지속적인 정보 밀도가 충분히 낮아 스크린샷이 UI 구성도가 아닌 게임 장면으로 읽힙니다.
안티 패턴
- 일반적인 앱 대시보드 레이아웃
- 테마가 없는 플랫 플레이스홀더 스타일링
- 의도 없이 기본 글꼴 스택 사용
- 플레이 필드를 가리는 조밀한 오버레이
- 라이브 플레이 가능한 장면 위에 놓인 큰 타이틀 카드 또는 여러 문단의 노트
- 뷰포트의 모든 가장자리에 균등하게 분포된 동일한 가중치의 박스형 패널
- 첫 로드 시 컨트롤, 목표, 노트 및 지식이 모두 한 번에 확장됨
- 3D 플레이에서 항상 켜져 있는 큰 중앙 또는 본문 패널이 있는 전체 너비 상단 및 하단 크롬
- 모든 요소에 대한 과도한 모션
- DOM이 더 명확하고 저렴할 때 Canvas 전용 UI 사용
- 표준 DOM이 더 명확할 때 HUD 컨트롤을 3D 장면에 강제로 넣기
- 모달 또는 인벤토리 패널 아래에서 카메라 입력이 활성 상태로 유지되도록 두기
참조
- 공유 아키텍처:
../web-game-foundations/SKILL.md - 프롬프트 레시피:
../../references/frontend-prompts.md - 로우 크롬 3D 레이아웃 패턴:
../../references/three-hud-layout-patterns.md - React 호스팅 3D UI 컨텍스트:
../react-three-fiber-game/SKILL.md - 플레이테스트 리뷰:
../../references/playtest-checklist.md