UI 두번째

UI작업 순서

와이어 프레임  -> 프로토 타이핑 -> 초기 디자인(가이드)

 

와이어 프레임(Wire Frame)

전체적인 UI의 레이아웃을 가안으로 구성

기획 단계에서 가장 중요하다.(화면의 배열을 직접 해본다.)

별도의 툴을 활용하거나.손으로 그리는 경우가 많다.

(보통 파워포인트나 포토샵을 이용)

전문 툴로는 Balsamiq, PowerMocKup이 유명함.

 

프로토 타이핑(Prototyping)

UI를 실제 제작하기전에 검증하는 작업

보통 종이나 툴을 이용하여 조작성, 편의성, 레이아웃 구성을 검증

(그림으로 잘 모르겠으면 가상으로 직접 해보는 것이 최고.)

최근에는 툴을 이용하기도 한다.

 

주의 사항

모바일 디바이스용 게임은 구성에 주의가 필요.

같은 이미지나 레이아웃이라도 해상도와 화면 크기에 따라 실제 크기가 천차만별로 달라진다. (PC나 콘솔을 생각화면 안된다.) 

너무 작아지면 터치가 힘들어질 수 있다.

보통 가장 작은 화면 크기의 디바이스에 맞춘다.(아이폰)

 

주의 사항

가장 좋은 방법은 서비스할 기기 중 가장 작은 것에 와이어프레임을 띄워보는 것.

 

초기 디자인 (디자인 가이드)

실제로 UI 샘플을 제작한다.

이 과정에서 색상, 구조, 폰트 등의 주요 요소가 결정된다.

대부분 그래픽 디자이너가 주도하여 진행된다.

기획자는 전체적인 레이아웃 검증과 사용성을 검증한다.

(실제 제작해보면 기회한 것과 달라지는 경우가 있다.)

레이아웃 등이 변경되면 문서에 반영하거나 지적하여 수정한다.

 

제작할 화면(Scene) 선택

전체 게임 단계에서 UI 화면을 하나 선정한다.

 

와이어 프레임 구성

화면의 레이아웃을 구성해 본다.

 

UI요소 구분

화면에 등장하는 개별 UI요소를 구분한다.

구분한  개별 요소에 대한 상세 설명을 작성한다.

특정종류 UI를 사용할 경우 방식을 명시한다.

(예: HP는 '프로그레스 바'로 표시)

데이터와 연동이 된다면 반드시 어떤 정보를 어떻게 출력할지 지정해 준다.(데이터가 있다면 테이블과 속성을 지정)

(예 : HP는 사용자의 현재 HP를 표시하고, 자릿수는 4자리로 표시)

 

액션 정의 

특정한 기능에서 발생하는 액션이 있을 겨우 진행 과정을 작성한다.

특정한 기능의 발생 조건, 시간 흐름 순으로 설명한다.

액션에 의해서 발생되는 UI 요소가 있다면 상세히 설명한다.

(보통 시스템과 연계되는 경우가 많음)

 

UI 조작과 종류

드롭 다운 리스트(Drop-down List)

미리 정해진 선택지를 사용자가 선택하는 경우 사용

화살표를 누르면 선택 가능한 목록이 등장

값을 선택하면 선택한 값으로 변경(선택 전에는 기본 값이 자동 선택)

보통 인벤토리나 퀘스트 같이 복잡한 정보를 확인할 때 분류로 사용

 

콤보 박스(Combo Box)

드롭 다운 리스트(Drop-down List)와 입력 필드(Text Input Field) 기능을 결합한 형태

사용자가 직접 값을 넣거나, 나열된 항목 중 하나를 선택 가능

보통 게임에서 사용하지 않음.(옵션에서 사용하는 경우는 있음)

 

푸시 번튼(Push Button)

보통 버튼(Button)으로 지칭

사용자의 선택 또는 명령 (의사 표명)을 입력받기 위해 사용

보통 액션으로 연결됨.(사용하면 다른 시스템을 이용)

 

상태에 따라서 구분된다.

노멀(Normal)	아무런 액션 없이 화면에 출력만 되어 있는 상태
포커스(Focus)	버튼 위에 커서를 대고 있는 상태(롤오버) PC에서만 사용
다운 (Down)	버튼이 눌린 상태 (모바일에서는 손가락에 가리기 떄문에 사용 안하는 경우가 있음)
비활성(Disble)	번튼을 사용할 수 없는 상태.(눌러도 기능하지 않음)

라디오 버튼(Radio Button)

어느 한 가지만 선택 또는 취소하기 위해 사용하는 버튼의 종류

나열된 것 중 단 하나만 선택 가능

선택지가 적을 때 주로 사용(많으면 드롭 다운 리스트를 활용)

 

체크 박스(Check Box)

원하는 것들을 동시에 선택할 때 사용

때때로 on/off의 개념으로 사용

게임에서는 주로 옵션 설정에 사용

 

토글(Toggle Button /Switch)

on/off 상태를 설정할 때 사용한다.

상태에 따라서 GUI의 표현 방식도 달라져야 하는 것이 특징 (필수)

모바일에서는 스위치 형태로 많이 사용 (터치가 편하고 직관적)

 

툴팁 (Tooltip)

마우스가 롤오버 되거나, 클릭/터치를 했을 때 나오는 말풍선 형태의 설명

게임에서는 아이템 설명 등에 주로 활용됨

경우에 따라 비교를 위해 다중으로 구성하는 경우가 많음.

 

스피너(Spinner)

숫자 입력 컨트롤 UI

상/하/좌우 번튼 또는  "+", "-" 버튼으로 원하는 숫자를 지정

직접 입력이 가능한 경우도 있음.

 

스크롤/ 슬라이더(Slider)

입력 값의 제한 범위를 시각적으로 알 수 있는 UI 

값의 범위가 제한 적인 경우 사용(절대 값)

게임에서는 보통 옵션 설정, 수량지정 등에 활용

 

입력 필드 (Text Input Field)

사용자가 직접 텍스트를 입력하는 UI

특정한 정보를 수집하거나, 입력받아야 할 때 주로 사용한다.

여러 줄을 입력받을 때는 입력 영역(Text Area)로 구분

모바일은 가로(Landscape) 일 때 입력 필드를 전체 화면으로 할지 그냥 입력할지 결정이 중요.

(그냥 입력하면 입력 필드가 키보드에 가리는 경우가 발생)

 

대화 상자(Dialog Box)

사용자에게 지시사항 전달이나 어떤 결정을 묻기 위해 사용

보편적으로 팝업 창(Pop-up Window)이라고 부른다.

일시적으로 하던 행동을 중지시키는 효과가 있다.

보통 사용자의 중요한 결정을 재확인하거나 경고 메시지  전달 등에 활용한다.

 

패치(9 Patch)

창(Window Border) 또는 팝업의 크기가 일정하지 않고 유동적일 때 사용한다. (모서리를 재외 한 공간을 임의로 늘이거나 줄여 사용)

창 디자인을 동일하게 유지하고 용량 절약에 좋다.

주로 대화 상자 구성에 많이 활용된다.

내부 공간 활용 범위를 반드시 지정해 주어야 한다.(중요)

 

다이얼(Dial UI)

실제 기계 메타포를 적용한 UI

실제 다이얼 장치를 조작하듯이 좌/우로 회전하여 값을 조절한다. (실제 작동은 슬라이더와 비슷하다)

주로 음향 조정에 많이 사용한다.

게임에서는 UI의 구성을 다이얼 방식(무한 루프)으로 배열해서 사용하는 경우가 있다.

 

트로버 (Throbber)

로딩과 같이 종료를 예측할 수 없이 기다려야 할 때 사용한다.

계속해서 움직여 플로그램이 다운되지 않았음을 사용자에게 인식시킨다.

화면 중앙에 등장하여 UI 기능을 정지시키거나, 마우스 커서가 변경된다.

(어느 쪽이든 사용자는 아무것도 할 수 없다.)

무한대로 돌아가는 의미에서 스피닝 휠 (Spinnig Wheel)이라고도 부른다.

 

프로그레스바(Progress Bar)

종료를 예측할 수 있거나, 수치를 직관적으로  표현할 때 사용한다.

게임에서는 로딩 바, 업데이트, HP 바 등으로 사용한다.

보통 프로그레스 바만 사용하지 않고 수치를 병해 하는 경우가 많다