[아카이브] 심리학 법칙들을 통해 멋진 ui만들기

[Zerasion 4]

Voosco 님이 작성하셨던 포스팅의 아카이빙입니다.

---

 

Using Psychological Principles for Great User Interfaces

요 몇 주 올리는 얘기들이 다아아아아아아~ 너무 기본적인 얘기들이 아닌가 싶긴 합니다만, 우리가 그간 일을 하며 게임을 하며 배워온 것들을 모두 기억하고 잘 써먹으려면 꾸준히 복습을 해줘야한다는 차원에서, 그리고 파편화된 지식조각들을 한데 모아 일정한 흐름과 전체 그림으로 보여준다는 측면에서 약간의 가치는 있지 않을까 싶어 오늘도 그런걸 소개합니다. 

원문 주소 : 
http://www.gamedev.net/page/resources/_/creative/game-design/using-psychological-principles-for-great-user-interfaces-r3397

잘 동작하는 UI를 만드는데 쓰이는 검증된 심리학 법칙들이 있다. 

디자인 전문 팀이 있든 프로그래머와 아트가 그 일을 하든, 여러분은 게임을 이해하기 쉽고 해봄직하게 만들기 위해 이 법칙들을 사용할 수 있다. 

게임에 UI를 모아 넣을 때, 그것이 HUD (Heads Up Display)이든, 스테이지 선택 메뉴이든, 게임 내 멥이든 또는 생명력 바이든, 제대로 동작하길 원할 것이다. 완벽한 UI는 보이지 않는 것이며, 이는 유저가 UI의 동작을 파악하기 위해 씨름할 필요가 없음을 의미한다. – UI는 사라지고 플레이어는 그들이 게임에서 하고자 하는 일에 집중할 수 있게 된다. 

여기에 대해 내가 좋아하는 비유는 자동차를 운전하는 경우이다. 운전을 처음 배울 때, 사람들은 운전대가 무슨 일을 하는지, 악셀레이터와 브레이크가 어떻게 동작하는지, 기어변환은 뭔지를 배워야 한다. 그러나 일단 이들에 대해 배우고나면, 이 장치들은 사라져버린다. “운전대를 오른쪽으로 돌려”는 “내 차가 저쪽으로 가면 좋겠군”이 되는 것이다. 

좋은 UI는 플레이어를 앞서 언급한 두 번째 단계로 가능한한 빠르게 데려가고자 한다. 내 개인 사이트인 Game Prodigy 전체에 걸쳐 우리는 이 지점으로 즉시 도달하고자 노력했으며, 이를 통해 플레이어들이 빠르게 게임에 몰입할 수 있게 했다. 

이런 일들을 가능케하기 위해서, 약간의 심리학 법칙들을 이용할 수 있다. – 스캐폴딩 개념, 기능과 색상 일관성, 그리고 7의 법칙이 그것이다. 

시작해보자 !

스캐폴딩 개념

여러분이 게임 UI의 기본 작업을 시작할 때, 여러분이 실제로 작업하고 있는 것은 개념들의 지도이다. 

어떤 개념을 다른 누군가에게 설명할 때 가장 빠른 방법은, 상대가 이미 알고 있는 어떤 개념과 새로운 개념 사이에 비유를 사용하는 것이다. 교육 및 교수법 분야에서는 이를 ‘스캐폴딩’이라고 한다. – 새 아이디어와 기존 아이디어를 함께 보여줌으로써, 새로운 아이디어를 이해하기가 더 쉬워지는 것이다. 

생명력 바는 게임에서 거의 전반적으로 다 쓰인다. 그리고 이는 연료 게이지나 진행 바처럼 사람들이 이미 알고 있는 보편적 개념에 기반하고 있다. 바가 아직 많이 남았다면 갈 길이 한참 남았다는 것을 의미한다. 바가 거의 끝나가는 지점이라면 이제 거의 다 된 것이다. 

이나후네 켄지가 최근 킥스타터를 시작한 Mighty No.9 에서 이 비유가 어떻게 이용되는지를 볼 수 있다. 

이 방법이 가장 잘 먹히는 것은 현실 세계에서 흔히 쓰이는 요소를 스캐폴딩으로 사용할 때이다. 

한 가지 주의할 것은, 모든 플레이어들은 서로 다른 지식 수준을 가지고 있다. 여러분의 게임이 캐주얼 플레이어 또는 전형적인 “비(非)게이머”를 대상으로 한다면, 여러분은 아마도 현실 세계에서 비유로 사용될 개념을 끌어와 시도해야 할 것이다. 여러분의 플레이어가 게이머이며 다양한 많은 게임의 관습에 익숙하다면, 다른 게임에서 비유를 가져와도 어떤 요소가 어떻게 동작하는지를 플레이어들이 이미 알고 있을거라 기대해 봄직하다. 

유용한 또 다른 개념들로는 조명 스위치, (난방기구 등에 붙은) 다이얼, on/off 스위치, 엘리베이터 버튼, 탈출 버튼, 또는 시계/알람 등이 있다. 현실 세계에서 보편적일수록 더 좋다. 

적용 : UI를 개발할 때, 스스로에게 다음의 질문을 해보자 

• 
  [*]플레이어들에게 전혀 친숙하지 않을만한 비유나 UI개념이 포함되어 있는가? [/*:m]
  [*]새로운 개념들이 익숙한 개념에 스캐폴딩함으로써 이해하기에 더 쉬워지는가? [/*:m][/list:u]

동작과 색상의 일관성을 위한 분투

플레이어들에게 UI 개념을 소개할 때, 게임 전반에 걸쳐 일관성이 관철되고 있는지를 확실히 하고 싶을 것이다. 

방금 언급했던 스캐폴딩 개념의 연장선에서, 일관성은 플레이어들이 이미 친숙한 요소들을 이해하는데 도움을 준다. 최악의 경험은 일단 플레이어에게 뭔가가 동작하는 방법에 대해 가르친 후에, 게임의 다른 부분에서는 그 뭔가가 전혀 동작하지 않는 것이다. 

이 법칙이 잘 적용된 사례가 최근 화제가 된 인디 게임, 서류 주세요(Papers, Please)이다. 이 게임은 플레이어에게 다양한 아이템을 주면서, 이를 기반으로 누구를 국경선 너머 이민자로 받아들일 것인지를 결정하게 한다. 여기에는 여권, 사진, 그리고 다른 요소들이 포함된다. 

각각의 아이템들은 상호작용적으로 동작하며, 마우스를 이용해 드래그해서 책상 여기저기로 옮길 수 있다. 서류를 다루는 꽤 감각적인 방법이다. 그러나 이 게임에는 캐릭터들 간의 대화도 많다. 대화는 화면 위에 떠있는 박스를 통해 진행되며, 위아래를 이용해 메뉴를 선택할 수 있다. (파이널 판타지나 매스 이펙트의 대화메뉴를 연상하면 된다) 

그러나 이런 인터랙션 스타일은 플레이어가 게임의 다른 부분들과 인터랙션하는 방식과 맞지 않는다. 

따라서 UI를 일관되게 유지하기 위해, 서류 주세요는 대화를 프린트 된 대사의 형식으로 오브젝트화 하여 책상 위에 놓아둔다. 따라서 플레이어는 새로운 메뉴를 건드려야 하거나, 게임과 인터랙션 하기 위한 새로운 방법을 배울 필요가 없다. – 다른 오브젝트들과 같아지는 것이다. 이를 통해 게임은 일관된 느낌을 주며, 플레이어는 이 요소와 인터랙션 하는 방법을 즉각적으로 이해할 수 있다. 

색상 또한 일관성을 유지하는 좋은 방법들 중 하나이며, Game Prodigy에서 우리가 가르쳤던 중요한 개념들 중 하나이다. 서로 다른 색상들은 문화적으로 그에 연관되는 의미들을 가지고 있으며, 이 색상들의 일관성을 유지하면 보다 직관적인 게임이 될 수 있다. 

서구문화권에서 빨간색은 대체로 (교통 신호등의) 정지, 경고, 또는 나쁜 것을 의미한다. GTA5의 맵 UI 가장자리에 나타나는 빨간 색 그림자는 전형적인 ‘데미지를 입음’ 표시이다. 

아울러 님블 퀘스트 (Nimble Quest)에서 적을 표시하는 UI를 봐도 그렇다. 빨간 해골은 얼마나 많은 ‘나쁜 놈들’이 남았는지를 나타내며, 이 또한 빨간색의 사용과 관련되어 있다. 

이런 색상들은 게임에서 무슨 일이 벌어지고 있는지를 빠르게 이해할 수 있는 감각을 제공한다. 

적용 :

숫자폭과 단위화

연습을 하나 해보자. 아래의 숫자를 기억하고, 눈을 감은 후, 기억한 숫자를 다시 떠올려보자. 

4930661

그냥 넘기지 말고 실제로 한 번 해보자. 이후에 설명할 내용을 이해하는데 도움이 된다. 

했는가? 좋다. 그럼 아래 숫자도 해보자. 

5982385741

어떤가? 한 연구에 의하면, 첫번째 숫자는 단순하다. 그러나 두번째 숫자는 어렵다. 왜? 

연구는 사람들은 한 번에 7개의 개별적 숫자들을 기억할 수 있으며, 한 두개 정도의 개인차가 있을 뿐이다. 이를 ‘숫자폭’이라 부르며, 전화번호가 (지역 또는 국가코드를 제외하고) 7자리인 이유이다. 

이 개념은 더 추상적인 감각으로도 이용될 수 있다. 게임이 7개의 요소를 플레이어에게 동시에 보여준다면, 대부분의 플레이어들이 한꺼번에 다룰 수 있는 문제의 한계에 도달하게 된다. 여기서 더 넘어가면 무질서하고 혼란스럽게 된다. 

그러나 게임 내의 개념들은 한데 모아 하나의 상위 개념으로 다룰 수도 있다. 이를 ‘단위화’라고 하며 기억에 대한 심리학 문헌에서 자주 볼 수 있다. 

예를 들어, 아래 숫자들을 기억하려 노력해보자. 

199020012013

이 숫자를 1990, 2001, 2013으로 단위화하면 외우기가 훨씬 쉽다. 

다크 소울 (Dark Souls)에서 숫자폭과 단위화의 예시를 살펴보자. 

이 스샷에서는 많은 일들이 벌어지고 있다. HUD에는 총 9개의 UI요소가 보인다. 

1.    체력바
2.    스태미너바
3.    레벨
4.    위 아이템
5.    아래 아이템
6.    오른쪽 장비
7.    왼쪽 장비
8.    화폐
9.    인터랙션 대화

그러나 이들 중 4가지, 즉 무기와 아이템은 단위화되어 있기 때문에 플레이어는 이들을 D-pad에 매칭되는 하나의 개념으로 취급할 수 있다. 

이는 전체 요소의 갯수를 6개로 줄여준다 : 위/아래/왼쪽/오른쪽 버튼을 하나의 “아이템”으로 묶음으로써 가능한 것이다. 단위화와 매칭을 통해 이들 요소의 조작과 화면에서 보여지는 방법의 두 가지가 하나로 연결되고, 따라서 다크 소울은 플레이어가 감당할 수 있을 정도로 단순화된다. 

또 다른 예를 테라리아에서 찾아보자. 

단위화를 사용하면 이 UI는 단 3개의 핵심 요소들로 간추려진다. 

1.    생명력바
2.    마나바
3.    아이템바 (모두 단위화 됨)

이런 비주얼 디자인은 게임을 집어들기 부담없이 느끼게 해주며, 무슨 일이 벌어지고 있는지 즉각적으로 이해할 수 있다. 

적용 :

당신의 게임에 집어넣을 UI를 디자인할 때, 게임의 유저층이 이미 알고 있는 개념과 지식을 꺼내어 비유하려 노력하라. (당신이 만들고 있는 것이 완전히 새로운 것이라 할지라도 그중 일부는 보편적 개념들로부터 가져올 수 있을 것이다) 플레이어들이 놀라지 않고도 이곳저곳을 둘러볼 수 있도록 하기위해 인터랙션 스타일과 색상의 일관성을 유지하라. 너무 무질서해보이지 않도록, 동시에 보여주는 요소나 개념의 숫자가 7이 넘지 않게 주의하라. 

이 모든 규칙들에는 물론 예외가 있다. 그러나 이들을 지킨다면 당신의 게임을 쉽게 이해할 수 있게 만드는데 도움이 될 것이다. 

몇몇 괜찮은 심리학적 법칙들을 통해, 좋은 UI는 플레이어들이 메뉴를 알아보고 당신이 만든 게임에 몰입하는데 도움을 줄 수 있다. 

행운을 빈다 !

게임을 어떻게 디자인하고 구축하는지에 대해, 그리고 게임 업계 일자리에 대해 더 알고 싶다면 29페이지짜리 무료 전자책인 Game Prodigy을 확인하라. 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
게임은 재미있지만 버튼 배치는 ... 무슨 주사위 굴려서 할당했나 싶던 GTA5가 문득 떠오르는군요.

[*]플레이어는 한 번에 몇 개의 UI요소에 신경을 써야하는가? 만약 7개 이상이라면, 이를 줄이는 것을 고려하거나 흔한 개념들을 묶어서 단위화하라.[/*:m]
[*]단위화 된 요소들이 비슷한 방식으로 인터랙션하게 하라[/*:m][/list:u]
요약
[*]UI요소를 디자인할 때, 이들 사이에 일관성을 유지하려 노력하라. 하나의 인터랙션 타입을 다른 것으로 바꾸지 말라. 특히 게임 전반에 걸친 다른 요소들과 다를 경우에는 더더욱. [/*:m]
[*]게임 요소들 사이의 색상 사용이 플레이어들에게 익숙한 코드를 차용하게 하라.[/*:m][/list:u]

[Zerasion 4]

GTA5.. 말씀하신대로 너무 많은 액션들을 패드 안에 우겨넣다보니 상당히 정신없는 컨트롤러 세팅이 만들어진 느낌이었습니다.

닌텐도 회장의 와이프미터(Wife meter)라는 유명한 기준처럼, 주변에 게임에 익숙치 않은 누군가가 있고, 그에게 게임을 플레이하게 하고 지켜볼 수 있는 기회가 있다는 건 상당히 좋은 경험이라고고 생각합니다.

일단 제 아내는 저보다 숙련된 게이머라 와이프미터를 사용하기엔 큰 무리가 있지만(...), 대신 처남이 게임을 상당히 좋아하지만 플레이 해본 게임의 가짓 수가 많지 않아 신작 온라인 게임이나, 아니면 콘솔 타이틀을 플레이시켜주고 뒤에서 지켜보는 건 재미도 있지만 배우는 것도 많더라고요.

특히 GTA5에서 그 수많은 인터랙션 요소들을 일일이 설명해줄 때나, 뭐를 누르면 뭐가 어떻게 된다는 걸 설명해줄 때.. (심지어 튜토리얼 중이었는데도 설명이 필요할 줄이야!) GTA5가 그렇게 접근성이 훌륭하지는 않다는 사실을 배웠습니다.

[Zerasion 4]

tophet 님이 작성하셨던 리플라이의 아카이빙입니다.

---

인용

 

색상 또한 일관성을 유지하는 좋은 방법들 중 하나이며, Game Prodigy에서 우리가 가르쳤던 중요한 개념들 중 하나이다. 서로 다른 색상들은 문화적으로 그에 연관되는 의미들을 가지고 있으며, 이 색상들의 일관성을 유지하면 보다 직관적인 게임이 될 수 있다.

서구문화권에서 빨간색은 대체로 (교통 신호등의) 정지, 경고, 또는 나쁜 것을 의미한다. GTA5의 맵 UI 가장자리에 나타나는 빨간 색 그림자는 전형적인 ‘데미지를 입음’ 표시이다. 

 

빨간색은 적을 나타내고 파란색은 아군을 나타낸다는 것을 UI 디자이너에게 납득시키느라 고생했던 아주 옛 추억이 떠오르는군요...