게임 UI 디자인 교과서

가장 쉽고 빠르게 완성하는

단계별 게임 UI 디자인

포토샵 & 유니티!

《게임 UI 디자인 교과서》는 화려한 디자인 테크닉이나 연출을 위한 기술적 세밀함보다, 게임 UI의 개념과 기본적인 제작 진행 과정을 큰 틀에서 설명하여 게임 UI 디자인을 지망하는 사람 뿐 아니라, 게임 개발에 관심을 가지는 일반인과 학생 누구라도 쉽게 게임 UI 디자인에 관한 전반적인 이해도를 넓힐 수 있도록 구성하였습니다. 게임 UI 디자인을 정리한 책이 많지 않은 현재, 게임 UI 디자인의 기초 이론과 예제를 통한 실습으로 구성된 《게임 UI 디자인 교과서》를 통해 막막했던 게임 UI 디자인에 대한 개념을 이해하고 실무에 대한 이해도를 높이는 데 도움이 될 것입니다.

STEP1 게임 UI 디자인 이해

STEP2 게임 UI 디자인 준비

STEP3 포토샵을 활용한 UI 디자인 작업

STEP4 유니티를 활용한 UI 전체 구성

이은정

보드게임 디자이너이자 게임학 연구자로, 게임학 관련 이론을 분석하고 보드게임 문법과 메커니즘을 해석하면서 재미있는 게임을 만들고 있다.

멋진 게임 디자이너로 살아가기 위해 다양한 경험을 쌓고 있으며, 이 과정에서 발견한 지식과 노하우를 게임과 저서로 남기고 있다. 현재 보드게임 개발사의 기획이사와 대학교 게임 관련 학과(부)에서 게임 기획 및 개발 강의를 겸하고 있다.

프로필 : 동서울대학교 게임콘텐츠과 겸임교수, 광운대학교 게임학 박사, 가천대학교 게임학 석사

저서 : 『게임 디자인&페이퍼 프로토타입』(길벗캠퍼스, 2024), 『보드게임 지도사』(형설미래교육원, 2019), 『언플러그드 보드게임으로 배우는 컴

퓨팅 사고력』(형설미래교육원, 2018)

김범석

어릴 적부터 낙서와 그림을 즐겨 그리고 좋아했던 것이 자연스럽게 만화와 게임에 대한 관심으로 이어졌다. 우연한 기회로 게임 UI 디자인을 시작했으며, PC 패키지, PC 온라인, PDA, 피쳐폰, 스마트폰 등 다양한 환경의 게임 개발 프로젝트에서 UI 디자이너로 활동하였다. 현재는 보드게임 개발사에서 근무하며 동시에 대학교 게임 관련 학과(부)에서 UI 디자인과 2D 그래픽을 강의하고 있다.

프로필: ㈜매직빈게임즈 개발 팀장, 한국영상대학교 게임애니메이션과 겸임교수, 가천대학교 게임학 석사

WEEK 01 게임 UI 디자인의 이해

1.1 게임과 디자인

01 게임

02 디자인과 디자인 특성

1.2 HCI와 UI/UX

01 HCI

02 UI/유저 인터페이스

03 UI의 구성요소

04 UX/사용자 경험

05 게임 UI와 게임 UI 특성

연습 문제

WEEK 02 게임 UI 제작 과정

2.1 게임 UI 제작 과정의 이해

01 디자인 도출

02 기획서 숙지

03 화면 제작

2.2 게임 UI의 사용성 평가

01 사용성 평가

02 사용성

03 휴리스틱 평가

연습 문제

WEEK 03 게임 UI 디자인을 위한 준비

3.1 디지털 이미지

01 해상도와 PPI의 이해

02 디지털의 색 영역

03 비트맵 방식과 벡터 방식

3.2 도구(Tool)의 이해

01 펜 도구의 기능과 활용

02 도형 도구의 종류와 형태

03 레이어 스타일의 속성

04 레이어 정리와 그룹화

연습 문제

WEEK 04 팝업

4.1 팝업의 이해

01 팝업의 개념과 종류

02 팝업의 구조

03 버튼의 종류와 기능

4.2 팝업 제작하기

01 완성 이미지

02 기본 프레임 제작

03 제목부와 내용부 제작

04 텍스트 제작

05 확인 버튼 제작

연습 문제

WEEK 05 환경설정(옵션)

5.1 환경설정의 이해

01 환경설정의 중요성

02 환경설정을 위한 UI 요소

5.2 환경설정 제작하기

01 완성 이미지

02 환경설정 프레임 제작

03 카테고리 제작

04 설정 메뉴 버튼의 내용부 프레임 제작

05 체크 박스 제작

06 슬라이더 제작

07 스피커 아이콘 제작

08 라디오 버튼 제작

09 토글 제작

10 스텝퍼 제작

11 드롭다운 제작

12 닫기 버튼 제작

연습 문제

WEEK 06 아이콘

6.1 아이콘의 이해

01 아이콘

02 아이콘의 종류

03 아이콘 디자인 시 유의 사항

6.2 아이콘 제작하기

01 완성 이미지

02 재화 아이템 제작

03 주머니 이미지 제작

연습 문제

WEEK 07 메인 화면

7.1 메인 화면의 이해

01 네트워크 방식

02 메인 화면

03 게이지와 폰트

7.2 캐릭터 정보 화면 제작하기

01 완성 이미지

02 배경색과 캐릭터 위치 설정

03 돌아가기, 메뉴, 홈 버튼 제작

04 재화 정보 제작

05 캐릭터 정보 제작

06 캐릭터 스킬 정보 제작

07 캐릭터 업그레이드 버튼 제작

연습 문제

WEEK 08 상점

8.1 상점의 이해

01 게임에서의 상점

02 상점의 구성요소

03 상점의 UI 요소들

8.2 상점 제작하기

01 완성 이미지

02 상점 카테고리 제작

03 상품 목록 제작

연습 문제

WEEK 09 리소스 정리

9.1 리소스의 이해

01 게임 UI 리소스의 개념과 목적

02 리소스의 저장 방식

9.2 리소스 정리하기

01 완성 이미지

02 창의 리소스화

03 슬롯의 리소스화

04 아이콘의 리소스화

05 게이지의 리소스화

06 버튼의 리소스화

연습 문제

WEEK 10 유니티의 이해

10.1 유니티의 이해

01 엔진의 개념

02 유니티 UI

03 유니티 에디터 설치

10.2 유니티 기본 화면과 조작

01 유니티 기본 화면과 조작 도구

02 오브젝트 추가와 기본 조작

연습 문제

WEEK 11 uGUI 기초

11.1 uGUI 사용을 위한 기본 오브젝트의 이해

01 스프라이트 아트라스

02 캔버스

03 캔버스의 컴포넌트들

04 렉트 트랜스폼

05 앵커와 위치 좌표 설정의 활용

연습 문제

WEEK 12 UI 오브젝트 1

12.1 UI 오브젝트와 컴포넌트

01 이미지

02 텍스트 메시 프로

03 버튼

12.2 UI 오브젝트의 활용

01 완성 이미지

02 팝업의 구성

03 UI 구조 설정

연습 문제

WEEK 13 UI 오브젝트 2

13.1 옵션 선택용 UI 오브젝트

01 토글

02 드롭다운

03 슬라이더

04 스크롤 뷰

05 레이아웃 컴포넌트

13.2 UI 오브젝트의 활용

01 완성 이미지

02 상단부 구성

03 중단부 구성

04 하단부 구성

연습 문제

도판 목록

찾아보기