게임을 좀 더 이쁘게! 좀 더 편하게! 게임UI/UX!

게임을 좀 더 이쁘게! 좀 더 편하게! 게임UI/UX!

안녕하세요.

메가스터디 게임아카데미가 인사 올립니다 :D

 

 

 

 

 

 

여러분들은 어떤 게임에 흥미를 느끼시나요? 스토리가 흥미로운 게임, 화려한 그래픽의 게임, 좋아하는 장르의 게임, 박진감 넘치는 대전 게임 등등 다양한 요소들 중 취향에 따라 게임을 선택해서 플레이하고 계실 것입니다. 

오늘 함께 알아볼 내용은 게임을 플레이하는 유저가 시각적으로 편안함을 느낄 수 있는, 그리고 게임의 경험을 보다 풍부하도록 도와주는 게임 UI/UX에 대한 것입니다.

 

 

 

 

 

 

게임 UI/UX에 대해서 알아보기 전, 먼저 UI와 UX는 무엇인지부터 알아보겠습니다.

1) UI - 사용자 환경

USER INTERFACE의 줄임말로 UI라 부르고 있습니다. 사용자가 어떠한 제품 혹은 서비스 및 시스템을 이용하도록 하는 인터페이스로 이 UI를 어떤 방식으로 구현하는가에 따라서 편리함, 효율, 시각적 즐거움 등을 사용자에게 제공할 수 있습니다. 

2) UX - 사용자 경험

USER EXPERIENCE의 줄임말입니다. 이 UX는 사용자가 어떠한 제품, 서비스, 시스템 등을 이용하며 느끼는 경험을 의미합니다. UX는 사용자가 체험하며 보이는 반응과 행동을 어떻게 분석하는가에 따라 더 나은 서비스를 제공할 수 있게 합니다.

비슷한 용어이기 때문에 UI와 UX에 대해서 혼동하시는 분들이 많지만, 이 둘은 엄연히 다른 개념입니다.

UX의 경우는 사용자마다 다르게 느낄 수 있기 때문입니다. 즉, UI 등을 통해 느끼는 유저의 경험이 UX가 되므로, UX를 고려하여 UI를 디자인하게 되는 것입니다.

 

 

 

 

 

 

이번에는 UI와 UX의 역사에 대해서 간단히 살펴보겠습니다.

1) UI 역사

배치 인터페이스(batch Interface) : 배치 또는 배치 프로세싱이라 부르는 컴퓨터 프로그램의 흐름에 따라서 순차적으로 처리하는 방식 >> 그래픽 유저 인터페이스(GUI) : 현대의 운영체제와 같이 게임 및 유틸리티 등 넓은 범위에 사용되는 직관적인 인터페이스 >> 커멘드 라인 유저 인터페이스(Command line User Interface) : 명령줄 인터페이스라고도 하며, 홈페이지, 블로그, 쇼핑몰 등에서 사용되는 UI >> 텍스트 기반 유저 인터페이스(Text Based User Interface) : 텍스트를 활용하는 UI로 그래픽 유저 인터페이스와 커멘드 라인 유저 인터페이스의 장점을 채용한 인터페이스

2) UX 역사

제록스 사의 연구 부서였던 PARC의 개인용 컴퓨터 : GUI와 사용자가 마우스를 통해 상호 작용을 하도록 함 >> 최초의 UX 전문가 도널드 노먼 : 현재 애플의 디자인을 필두로 한, 인간 중심 제품 라인업을 디자인 >> 아이폰 : 직관적이며 사용이 간편한 UI 및 터치스크린으로 모바일 분야의 혁신을 일으킴

 

 

 

 

 

 

UI와 UX에 관련된 직업으로는 어떤 것들이 있을까요?

1) 게임 관련

- 게임 UI 디자이너 : 설계에 따라 적합한 구조의 UI 그래픽 리소스를 설계하고 디자인하는 역할을 합니다. 게임 내 필요한 아이콘 및 상징적인 요소들을 이미지화하고, 게임 화면에 배치 및 적용을 담당합니다. 

- 게임 UX 디자이너 : 유저가 게임을 플레이하며 느끼는 시각적 완성도를 높일 수 있도록 UX를 디자인하며, 비주얼적인 컨셉과 전략을 제시하는 역할입니다.

2) 웹 & 앱 관련

- 웹 & 앱 디자이너 : 인터넷 홈페이지의 레이아웃을 디자인, 콘텐츠를 기획하며, PC 모니터에 비해 상대적으로 화면이 작은 모바일 화면의 아이콘 배치 및 위치의 조절을 담당합니다. 

 

 

 

 

 

 

현업에서 UI 디자이너로 활동하고 있는 분들의 인터뷰를 통하여 어떠한 마음가짐과 준비가 필요한지 확인해 보겠습니다.

1) 획일화된 UI는 No! 특별한 UX를 줄 수 있는 UI로

2) 사용자의 이목을 집중시켜 눈길을 끌 수 있도록

3) 사용성의 확장을 위해 사용자가 UI를 커스터마이징 할 수 있도록

4) 디자이너의 개성을 충분히 담을 수 있도록

 

 

 

 

 

 

그러면 여기서 잠깐! UI와 UX 분야에서 활용되고 있는, 알아두면 좋을 전문용어를 몇 가지 살펴보도록 하겠습니다.

1) Splash Screen

프로그램을 로드하는 동안 보아는 이미지를 뜻합니다. 짧은 시간 동안 로고 등과 함께 간략한 소개를 하거나, 로딩의 진행률 등을 표시하기도 합니다.

2) Coach Marks

앱 혹은 웹 등에 처음으로 진입하는 사용자를 위한 간단한 도움말을 제공해주는 패턴입니다. 보통 메인 화면 위에 반투명한 화면을 덮어 가이드라인을 제공합니다.

3) Walkthroughs

앞서 알아본 Coach Marks보다 더욱 상세한 도움말을 뜻합니다. 초기 진입 시 단계별로 상세한 정보를 제공하는 방식이며, 이러한 긴 과정을 필요로 하지 않는 사용자는 UX를 위하여 건너뛰기를 통해 매인 화면으로 진입할 수 있도록 하는 경우가 많습니다.

 

 

 

 

 

 

그렇다면 UI와 UX 분야에서 직무를 수행하는 분들은 어떤 소프트웨어를 주로 활용하고 있을까요? 대표적인 3가지의 툴을 소개해 보겠습니다.

1) Sketch

Vector 기반의 설계/UI 디자인에 특화된 툴로 Mac os만 지원하고 있습니다. 다양하고 유용한 플러그인들과 프로토타입 툴들과의 연동이 용이하여 웹과의 연동성 역시 뛰어난 툴입니다.

2) Adobe XD

어도비에서 만들어낸 UI 디자인 전용 프로그램입니다. 기존의 포토샵, 일러스트레이터 등과 비슷한 사용 환경과 단축키 그리고 어도비 클라우드 환경을 사용할 수 있습니다. 공유 링크를 통해 피드백을 주고받을 수 있는 특징이 있습니다.

3) Figma

2020년 가장 기대되는 UI 디자인 툴 1위에 선정되기도 했던 프로그램으로 '협업을 위한 디자인 툴'이라는 특징을 내세우고 있습니다. 웹브라우저 기반으로 별도의 앱이 필요하지 않으며, 리소스를 클라우드에 저장하기 때문에 별도의 저장공간 역시 필요하지 않다는 장점이 있습니다. 여러 사람이 동시에 편집 가능하여 탁월한 협업 효율을 보이는 툴입니다.

 

 

 

 

 

 

마지막으로 UI 및 UX로의 취업을 위해 필요한 준비 중, 포트폴리오 준비에 관한 내용을 살펴보겠습니다. 

1) 웹사이트를 이용한 포트폴리오 제작

아직 많은 국내 기업들이 PDF 형식의 포트폴리오를 요구하고 있지만, 단순한 포트폴리오를 넘어 자신만의 데이터를 수집할 수 있는 도구인 웹사이트를 제작해 보는 것도 좋습니다.

2) 자신만의 이야기를 전달

수많은 지원자들 중 자신이 어떻게 남들과 다른지 차별화를 하는 일입니다. 자신의 독특한 점은 무엇인지 그리고 업무에 유용한 자신의 역량, 관심사와 경험 등을 포트폴리오에 표현하는 것입니다.

3) 매력적인 비주얼의 디자인

결국 시각적으로 사용자를 사로잡을 수 있는 디자인이 중요하기 때문에 폰트 및 컬러의 활용 그리고 디자인의 일관성 등이 포트폴리오에 표현되어야 합니다.

4) 포트폴리오의 구성

의외로 많은 분들이 포트폴리오의 순서 구성을 고민합니다. 이때 가장 최고의 프로젝트를 가장 앞 순서에 배치하여 지원하는 직무와 회사의 방향이 적합하다는 것을 보여야 합니다.