[게임 디자인] 시스템 디자인의 기초 3

지난시간에 이어 오늘은 게임기획에서 중요한

UI에 대한 소개를 하겠습니다

게임 시스템 디자인 | UI 실무

• 와이어프레임(Wireframe) : 화면 레이아웃을 표시하기 위한 UI 배치
• 목업(Mockup) : 실제와 흡사한 정적인 형태의 모형
• 스토리보드(Storyboard) : 정책, 절차, 와이어프레임, 설명 등이 모두 포함된 문서
• 프로토타입(Prototype) : 다양한 인터렉션이 결합되어 실제 서비스처럼 작동하는 모형

---

스케일 폼

플래시와 액션스크립트를 사용하는 UI 개발용 미들웨어

언리얼, 크라이엔진에 내장

이외 타 3D 게임 엔진과 함께 사용 가능

 

UI 기획 순서

UI 가 필요한 상황 리스트 정리

상황 별 기획 : UI 페이지 리스트 정리, 페이지 연결도 작성

페이지 별 기획 : UI 컨셉기획, 세부 스토리보드 기획, 세부 UI 요소에 대한 설명

 

UI 가 필요한 상황 정리

비슷한 장르, 플랫폼의 타 게임을 참고하는 것이 편리

머리 속으로만 생각하면 상황이나 페이지가 누락될 가능성이 많음

게임 흐름에 따른 분류 | 시작, 로그인, 로비, 인 게임, 마을, 배틀, 종료 등

흐름 별 기능 분류 | 마을 : 상점, 대장장이, 경매장 등

 

스토리보드 / 세부 UI 기획

와이어 프레임 기반으로 제작

UI 간의 연결

각 컴포넌트의 위치와 크기, 기능 정리

각 컴포넌트의 액션 및 상태 정리

UI 기획, 역기획은 가장 좋은 시스템 기획 훈련 중 하나

---

PC UI 컴포넌트 리스트

컴포넌트 별 정리 정보

1. 텍스트가 표시되는 컴포넌트

- 사이즈, 폰트, 색상, 최대 표시 글자 수, 줄 바꿈 여부, 글자가 많아졌을 때 스크롤 바 표시 등의 액션

2. 버튼 등 익터렉션이 있는 컴포넌트

- 상태 리스트

3. 기타

- 이펙트, 툴팁 등의 정리

 

모든 컴포넌트의 사이즈와 위치는 가능한 8의 배수에 맞추고 최소한 짝수 단위로 지정되어야 함

(왜냐하면 메모리 공간을 2진수 범위의 사이즈에 저장. 2D 이미지를 관리하는 방식)

 

스마트 디바이스 UI 기획

디바이스 별로 해상도가 다르기 때문에 각각의 디바이스에 맞춘 UI 기획 필요

가로, 세로 혹은 둘 다를 지원하는지 체크모든 디바이스에 맞출 수 없음

게임의 서비스 타켓에 맞는 몇 개의 해상도를 선택해서 작업해야 함

모든 컴포넌트의 사이즈, 위치 값은 짝수 단위로 지정버튼 등 인터렉션이 있는 컴포넌트의 경우 터치 영역을 고려해 배치

 

스마트 디바이스 입력

PC 디바이스 입력 체계

- 마우스 & 키보드

- 제한적인 상황에서 조이스틱, 마이크 등이 사용되기도 함

스마트 디바이스의 입력 체계

- 터치 제스처 : 터치 스크린

- 기울기 및 움직임의 속도와 방향 : 자이로 센서

- 위치/방위 정보 체크 : GPS 및 네트워크

- 조도 및 이미지 감지 : 카메라

---

공감해주셔서 감사합니다