13.2 UI 설정 조건

Chapter13 UI/UX

13.1 UI/UX 란 ?

13.2 UI 설정 조건

13.3 UI 분류

13.4 카메라 시점 설정

13.5 조작 설정

13.6 UI 설정

13.1 UI/UX 란 ?

– UI(User Interface) 의 약자

• 게임에서 화면을 통해 유저에게 정보를 제공

• 유저의 선택에 따라 게임을 진행할 수 있도록 하는 기능

– UX(User Experience) 의 약자

• 유저의 경험과 요구를 바탕으로 유저가 보다 편하고 쉽게 사용할 수 있도록 UI 를 개발 / 개선하는 것

13.2 UI 설정 조건

1. 직관성

– 유저가 바로 파악하거나 쉽게 유추할 수 있도록 직관적 으로 제작

– 유저가 새롭거나 익숙하지 않은 것에 거부감을 가지는 문제를 방지하기 위함

– 직관성의 대표적인 예 -> 게임아이콘

• 그림으로 해당 버튼의 의미를 알려줌

• 쉽게 뜻을 이해하도록 만드는 것이 중요

– 개발할 때 새로운 것을 넣는 것은 좋지만 그 경우에도

유저가 이해하기 쉬운 구조로 제작하는 것이 중요

13.2 UI 설정 조건

2. 편의성

– 유저가 쉽게 플레이할 수 있도록 쉽고 간단한 구조로 제작

– 편의성의 대표적인 예 -> 단축키

• 캐릭터 정보창 출력 : [C] 키 / 인벤토리창 : [I] 키

• 도움말창 : [H] 키

• 단축키의 지원은 원하는 창을 바로 출력할 수 있기 때문에 편의성이 높아짐

– 게임 UI 가 복잡해지는 이유

• 잘못된 설계 -> 필요 항목과 배치 위치를 제대로 파악하 지 못함

• 개발자의 잘못된 판단 -> 익숙한 구조에 대한 오판

13.2 UI 설정 조건

– 문제해결 방법

• 초기 설계 시에 시간을 들여 충분히 고민하여 설계

• 테스터를 활용해 구조를 개선

• 기존에 있는 게임의 구조를 파악해 초기 설계에 반영

3. 일관성

– 유저의 혼동을 없애기 위해 UI 의 구조와 형태를 모두 동일하게 제작

확인확인 취소취소 예예 아니오아니오

YES YES NO NO

예 2 : 예 3 :

13.3 UI 분류

– 게임의 규모 , 장르 등에 따라 필요한 양이 다름

• 슈팅 / 액션 장르는 UI 구조가 간단

• MMORPG 등 큰 장르는 UI 구조가 복잡하고 설정 항목이 많음

– 복잡하고 설정할 항목이 많은 경우 용도에 따라 분류하 여 설정

1) 로그인 UI : 게임 실행부터 게임플레이 화면 또는 로비 화면 출력전까지 필요한 UI

2) 메인 UI : 메인 화면에 출력되는 기본 UI

3) 개별 UI : 상점 메뉴 , 퀘스트창 , 이동수단 등과 같은 개별 시스템용 UI

4) 조작 / 선택 : 입력장치와 입력 방법 ( 키보드 , 마우스 등 ), 아이콘에 대한 설정

5) 카메라 : 카메라 뷰 형태 , 조작 설정

13.4 카메라 시점 설정

– 카메라 시점 : 유저가 게임을 보는 시점

– 어떤 시점을 선택했는가에 따라 그래픽 형태가 달라짐 – 게임 형태를 제안하거나 결정할 때 시점도 같이 결정

1. 시점의 종류

① 탑뷰 (Top View)

• 위에서 아래로 내려다보는 시점 (Top Down View)

• 게임 적용시 약간 각도를 두어 측면이 보이게 만드는 방식 을 주로 사용

• 2D 에서 쉽게 입체감을 주고 다양한 방향으로 캐릭터 이 동이 가능

• RPG, RTS, 보드 게임 등에서 많이 사용

13.4 카메라 시점 설정

② 사이드뷰 (Side View)

• 옆에서 캐릭터와 맵을 보는 시점

• 주로 좌우로 화면이 이동 ( 액션 , 슈팅 )

• 공간감을 살리기 어렵고 이동 방향에 제약이 있음

③ 쿼터뷰 (Quarter View)

• 대각선 방향으로 캐릭터와 맵을 보는 시점 (2.5D/ 아이소 매트릭뷰 (Isometric View))

• 90~120 도의 마름모꼴 형태로 맵을 구성하여 2D 게임 에 적용할 경우 입체화된 지형을 만들 수 있음

• RTS, 시뮬레이션 또는 액션이 강조된 RPG 등에서 사용

13.4 카메라 시점

④ 백뷰 (Back View)

• 캐릭터의 시점 , 캐릭터의 뒤에서 앞을 바라보는 시점

• 종류는 1 인칭과 3 인칭 시점

• 넓은 시야 확보 , 높은 현실감으로 몰입이 쉬움

• 3D 기반 게임에서 사용 (1 인칭 :FPS, 3 인칭 :TPS/RPG)

13.4 카메라 시점

2. 시점의 설정

① 시점의 선택

• 개발할 게임의 형태에 맞는 시점을 선택

• 게임 장르와 그래픽 형태에 맞춰 선택

② 시점 고정 / 변환 여부 결정

• 유저가 시점을 변경할 수 있도록 할 것인지 결정

• 2D 방식은 시점이 고정 /3D 방식은 시점을 변환할 수 있 기 때문에 고정 / 변환 여부 결정

③ 시점 위치 설정

• 게임을 플레이할 수 있는 수준의 결과물이 만들어진 후에 테스트를 거쳐 가장 좋은 위치를 찾아 결정

• 게임 개발 시 시점을 카메라라고 표현 , 게임엔진에서도 카메라 형태의 UI 를 많이 사용

13.4 카메라 시점

(1) 시점 기본 위치 설정

– 거리 : 유저 캐릭터 위치를 기준으로 후방 몇 m 에 둘 것인 지 설정

– 각도 : 방위각 설정 및 수평 기준으로 하방 시야 각도 설정

(2) 시점 위치 변환 영역 설정

– 줌인 / 줌아웃 : 줌인 / 줌아웃할 경우 시점 위치 / 거리 / 각도 – 회전 : 수직 상하방으로 볼 수 있는 최대 시점의 위치 / 거리 /

각도 설정

– 수평으로 볼 수 있는 시점의 위치 / 거리 / 각도 설정 – 시야 회전 속도 설정

13.5 조작 설정

– 게임을 플레이하기 위해 게임에 입력하는 방법을 설정 하는 것

– 기본적인 조작 방식은 게임 형태를 결정할 때 같이 결 정

– 게임의 형태를 테스트 할 수 있을 때 세부 설정

1. 입력 방식 선택

– 주변기기를 이용하는 방식

• PC 나 콘솔 등에서 사용

• 키보드 / 마우스 / 조이스틱 등을 사용해 입력

– 화면에 직접 입력하는 방식

• 스마트폰 , 태블릿 PC 처럼 화면을 직접 터치해 입력

– 개발할 게임에 효율적인 방식을 파악해 결정

13.5 조작 설정

2. 조작 방식 설정

– 게임 플레이 시에 필요한 조작 방식에 대해 설정 – 장르마다 많이 사용하는 조작 방식을 참조해 설정

① 키보드 설정

입력키 설정 입력키 설정

W 앞으로 캐릭터 이동 Space

bar 점프

A 왼쪽으로 캐릭터 방향 회전 Enter 채팅

S 뒤로 캐릭터 이동 F1~F12 스킬 사용

D 오른쪽으로 캐릭터 방향 회전 1~0 스킬 사용

Q 왼쪽으로 이동 C 캐릭터창 출력

E 오른쪽으로 이동 I 인벤토리창 출력

↑ 앞으로 캐릭터 이동 K 스킬창 출력

↓ 뒤로 캐릭터 이동 L 퀘스트창 출력

← 왼쪽으로 캐릭터 방향 회전 M 월드맵 출력

→ 오른쪽으로 캐릭터 방향 회전 N 시스템창 출력

13.5 조작 설정

② 마우스 설정

(1) 입력 설정

– 키보드보다 버튼 수가 적어 설정이 단순

(2) 커서 아이콘 설정

– 사용 용도에 따라 다른 형태가 출력되도록 설정

입력버튼 설정

L 더블클

릭 행동

L 클릭 선택

R 클릭 선택

휠 카메라 줌인 / 줌아 웃

커서 형태 설정

기본 커서 . 화살표 형태로 만든다 .

말풍선 커서 . 말풍선 안에 점이 나열된 형태로 만든다 .

대화가 가능한 대상에게 커서를 둘 경우 출력 . 공격 커서 . 검 형태로 만든다 .

공격 가능한 대상에게 커서를 둘 경우 출력 .

크기 조절 커서 . 양쪽에 화살표가 달린 형태로 만든다 .

크기를 조절할 수 있는 창 위치에 둘 경우에 출력 .

13.6 UI 설정

1. UI 기본 형태 설정

– 어떤 형태로 만들지 기본개념을 설정

– 일관성을 위해 반드시 정해진 형태에 맞게 모든 UI 를 제작

– UI 콘셉트 설정의 기본 항목 1) 모드 설정

• 풀스크린 모드 / 창모드 지원 설정 ( 해상도 설정 )

2) 스타일

• UI 의 기본 모양 또는 양식을 설정 ( 모던 , 앤티크 스타일 )

3) 재질

• UI 에 사용할 재질을 선택 ( 금속 , 나무 등 패턴 )

13.6 UI 설정

3) 창 형태

• 창의 형태 , 이동여부 , 고정창의 유무 등을 설정

4) 투과여부

• 반투명과 불투명을 선택

• 반투명을 선택하면 투명도값의 정도를 설정

– 콘셉트가 결정되면 이것을 토대로 UI 의 기본 설정 – 기획자의 의도에 따라 가감

1) 해상도

• 해상도를 설정하고 이를 기준으로 UI 설정

• 2D 인 경우 해상도가 고정되므로 정한 해상도가 기본

• 3D 인 경우 해상도 변경이 가능하므로 여기서 정한 해상 도가 최소기준

13.6 UI 설정

2) 사용폰트

• 게임에 사용할 기본 폰트의 종류를 선택

UI

다음의 항목은 앞으로 설정할 UI 창 개별설정에 모두 동일하게 적용한다 .

1.

.

2.

3.

4.

5.

다 .

13.6 UI 설정

2. 필요 항목 설정

– 필요한 UI 종류와 양이 방대할 경우 용도별로 기획서 를 나눠 설정

• 어떤 UI 기획서를 만들 것인지 결정

• 해당 UI 에 들어갈 개별 항목을 파악해 나열

6.

.

7.

8. UI

9.

10.

13.6 UI 설정

3. 구조도 설정

– 설정한 각 UI 항목들을 구조도로 만들어 연결

• 구조도는 UI 의 흐름을 한 눈에 파악 가능

• 부족한 부분을 찾는데 유용

포털사이트 접속

게임시작 버튼 선택 및 클라이언트 실행 공지창 출력

인트로 화면 로그인 화면 서버 선택 화면 캐릭터 선택 화면 캐릭터 생성 화면 로딩 화면

사용 메시지

13.6 UI 설정

게임 시작 ( 버튼 ) 자동 업데이트

게임 실행 인트로 로그인 화면

서버 선택 화면

캐릭터 선택 화면 캐릭터 생성 화면 캐릭터 생성 ( 버튼 )

캐릭터 선택 게임 시작 ( 버튼 )

새로 하기 로딩 화면 이어 하기

13.6 UI 설정

4. UI 디자인

– 완성된 구조도를 토대로 순서에 따라 개별 UI 를 설정 1) UI 에 들어갈 항목을 찾아 나열

• 개별 UI 별로 따로 설정

• 다음은 서버화면 UI 설정 시에 필요한 사항 예

– 회사로고 / 게임버전 / 게임 로고 / 배경화면 / 서버선택창 / 퍼 블리셔 / 회사이름

2) 제작할 UI 의 러프 디자인 제작

• 항목을 배치할 위치를 정하는 것으로 간략하게 설정

캐릭터 선택 게임 시작 ( 버튼 ) 최종 접속 시에 플레이한 캐릭터가

선택된 상태로 출력

13.6 UI 설정

3) 게임에 적용할 기획서 작성

• 기획서에 UI 를 설정할 때는 이후의 사항에 따라 작성

4) 항목별 UI 위치 결정

• 특정 위치에 고정된 형태로 출력되는 UI 의 경우 러프디 자인에서 설정한 위치에 배치 ( 정보창 등 )

• 이동형 UI 인 경우 정중앙에 배치

5) 디자인

• 개별 UI 의 형태를 게임에 적용할 형태와 동일한 구조로 디자인

– UI 기획은 기본 구조를 설정하는 역할

– 세부 디자인은 UI 디자이너가 담당

13.4 UI 설정

3. 서버 선택 화면

1. 기본화면

1.

• 위치 : 화면 하당 중앙 출력

• 폰트 색상 : 검은색

• 박스 색상 :

선택 -> 짙은 올리브색 비선택 -> 옆은 올리브색

• 서버 선택 시 해당 서버 박스 에 체크아이콘 출력

2.

• 위치 : 화면 상단 왼쪽 출력

• 폰트 색상 : 흰색

• 폰트 크기 : 12

• UI 디자인에 대한 설명은 디자인된 부분을 제외한 빈 영역에 한다 .

• 예는 일반적인 형태로 설명에 적합한 형태라면 어떤 것이라도 사용 가능

13.6 UI 설정

• UI 디자인을 정중앙에 배치하고 설명을 양끝에 둔 형태

3. 서버 선택 화면

1. 기본화면

13.6 UI 설정

• 한 화면에 표현할 UI 가 많은 경우 각 페이지에 항목별로 나눠 형태와 내용을 설정

• 위 예는 설명이 필요한 UI 만 따로 배치해 설명한 것

3. 서버 선택 화면

1. 기본화면

1.

• 위치 : 화면 상단 오른쪽

• 게임 버전 정보 하단에 위치

• 크기 : 140* 100 픽셀 기

• 준해당 크기에 맞춰 로고 디자 인

13.6 UI 설정

• 다른 UI 를 제외하고 설정이 필요한 UI 만 두는 방법

• 위치가 정해진 UI 인 경우에는 해당 위치에 대한 설명을 넣는다 .

3. 서버 선택 화면

3. 유저캐릭터 정보창

이름 멍멍아 야옹해봐

Lv 23

HP MP Exp

1500/1500 800/800

1. 유저캐릭터 정보창

• 위치 : 화면 상단 왼쪽

• 이동여부 : 고정

• 개별 설정

이름 : 유저캐릭터 이름 출력 검은색 폰트 사용

레벨 : 현재 레벨을 수치로 출력 노란색 폰트 사용

HP바 : 적색으로 잔량 표시 바 중간에 현재 / 최대 수치 출력 MP바 : 청색으로 잔량 표시 바 중간에 현재 / 최대 수치 출력 수치 폰트는 흰색 사용

13.6 UI 설정

• 출력 위치는 고정되어 있으나 특정한 조건에만 출력되는 UI 인 경우 출력 위치와 출력되는 조건 , 출력 형태를 설정

• 다음은 버프 / 디버프 아이콘 설정 예

• UI 를 다른 위치로 이동할 수 있는지 설정

• [ 이동 가능 ]/[ 고정 ]

- 위치 : 유저 캐릭터 정보창 오른쪽 하단부에 출력 - 크기 : 24 * 24

- 출력 개수 : 1 ~ 8 개 - 설정

• 유저 캐릭터에게 버프 / 디버프 적용 시에 출력한다 .

• 해당 버프 / 디버프가 해제되면 소거한다 .

• 아이콘 중앙에 남은 시간을 숫자로 표시한다 .

13.6 UI 설정

• 이동형 UI 인 경우 최초 출력 위치와 소거 후 재출력될 위 치에 대해 설정

– 일반적으로 화면 중앙이 기본 출력위치이며 소거 위치를 재출 력 위치로 설정

• 창의 크기를 변경할 수 있는 UI 인 경우 해당 창의 기본 크기 / 최대 크기 / 창 크기 조절 방법에 대해 설정

13.6 UI 설정

• 기획서를 토대로 UI 디자이너가 제작

– 공통으로 사용하거나 정확한 규격이 요구되는 경우 픽셀 단위 로 계산해 설정

• UI 와 폰트에 적용할 색상 설정

– RGB/HTML 색상코드 이용도 가능하나 기획서에 사용하는 것은 권장하지 않음

• 특정 UI 에 적용할 폰트의 크기는 적용할 크기를 수치로 정해 해당 UI 설정 항목에 따로 설정

• UI 에 투명도가 지원될 경우 해당 UI 에 투명 / 반투명 지 원 여부와 반투명일 때 투과율에 대해 설정

• 유저가 직접 입력하는 항목의 경우 입력할 최대 글자 수 설정

– UI 의 종류에 따라 최대 글자수가 달라지므로 해당 항목에 맞게 수 치 적용 ( 이름 : 8 자 이하 , 메시지 : 150 자 이하 )

13.6 UI 설정

• 수치가 출력되는 항목인 경우 출력 자리수를 결정하고 출 력공간을 크기에 맞게 설정

• 활성화된 상태와 비활성화된 상태가 공존하는 UI 를 설정 할 경우 각각의 형태를 같이 디자인 .

– 변경되는 조건을 같이 설정한다 .

3. 서버 선택 화면

4.

1. 타겟행동창 - 선택가능 항목 귓속말

친구초대 파티초대 거래신청 PvP신청

- 비활성화 설정

이미 친구거나 파티원인 경우에는 해당 메뉴가 비활성화 된다 .

귓속말친구초대 파티초대거래신청

PvP

[

귓속말친구초대 파티초대거래신청

PvP

[

화 ]

13.6 UI 설정

• 체크박스 형태의 UI 를 설정할 경우 체크박스의 형태와 선택시의 결과 처리에 대해 설정

13.6 UI 설정

• 선택버튼은 각각의 선택에 따른 결과에 대해 설정

3. 서버 선택 화면

5.

- 캐릭터 생성 : 클릭 시 캐릭터 생 성화면으로 이동

- 캐릭터 삭제 : 클릭 시 경고창 출 력

- 서버 선택 : 서버 선택화면으로 이 동

- 게임 종료 : 클릭 시 종료창 출력

캐릭터 생성 캐릭터 삭제 서버 선택 게임 종료

13.6 UI 설정

• 카메라가 이동하며 보여주는 경우 ( 캐릭터 선택화면 등 ) 이동 동선 및 촬영 범위를 설정

– 다음은 캐릭터 선택 시 줌인 / 줌아웃될 경우에 보이는 영역에 대해 설정한 예

3. 서버 선택 화면

6.

- 캐릭터 생성화면 이동 시 카메라 는 [a] 위치에 둔다 .

- [a] 위치에 카메라가 있을 경우에 는 유저캐릭터의 전신이 화면에 출력되게 한다 .

- UI에 설정된 [+] 버튼을 클릭하 면 카메라가 [b] 위치까지 이동한 다 . [-] 버튼을 클릭하면 원 위치 로 이동한다 .

- [b]위치에 카메라가 있을 경우에 는 유저캐릭터의 상반신만 화면에 출력되게 한다 .

이동

카메라 시점

캐릭터

13.6 UI 설정

• UI 에 사용하는 툴팁 설정

– 선택한 항목에 필요한 정보를 먼저 지정

– 툴팁에 해당 정보의 배치 위치를 설정

블레이즈 소드 (Lv 21) 종류 : 한손 검

직업 : 나이트

공격력 : 120~140 공격속도 : 1.5 무게 : 180

7%의 확률로 화염효과를 발생시켜 대상에게 15%의 추가데미지를 준다 .

아이템용 툴팁 정보 : 아이템 이름 , 사용 가능 레벨 , 스테이터스 , 상세 설명

13.6 UI 설정

• 시스템 메시지창에 출력되는 메시지를 종류별로 분류하고 필요한 메시지 문장을 작성

– 색상을 다르게 할 필요가 있는 경우 해당 색상에 대해서도 설 정

종류 메시지

아이템 구입 [이름 ] 을 ( 를 ) [ 숫자 ] 개 구입했습니다 .

소지금 부족 소지금이 부족하여 아이템을 구입할 수 없습니다 .

인벤토리 공간 부족 인벤토리에 공간이 부족하여 아이템을 구입할 수 없습니다 . 아이템 판매 [이름 ] 을 ( 를 ) [ 숫자 ] 개 판매했습니다 .

돈 획득 [숫자 ] 골드를 획득했습니다 .

메시지 색상 메시지 종류

흰색 일반공격 / 스킬 사용 , 데미지 부여 , 경험치 획득 , 아이템 사용 ,

연두색 판매 , 구입

노란색 적 사망 , 아이템 획득 , 강화 성공 , 제작 성공

붉은색 유저캐릭터 사망 , 선택 불가 , 공격 불가 , 강화 실패 , 제작 실패

13.6 UI 설정

• 배경화면이 필요한 경우 배경화면 설정 기획서를 작성하 고 해당 제작 파트에 요청

• 애니메이션이나 이펙트 설정이 필요한 경우 해당 항목을 분리해 설정

12.7 실습과제 : UI 설정

– 자신이 기획중인 게임의 UI 기획서 작성

목차

UI

1.

2. UI

3.

개별 UI 형태 설정