조이 스틱에 숨겨진 UI 법칙

오락실에서 가장 재미있게한 게임은 무엇인가요? 저는 킹오프파이터즈, 철권 그리고 삼국지입니다. 이들 게임 모두다 조이스틱으로 방향을 조절해 하는 게임입니다. 조이스틱은 꽤나 직관적입니다. 직관적이면 배울 필요가 없고, 기억할 필요가 없습니다. 숙련의 기간만 거치면 누구나 능숙하게 할 수 있습니다. 너무 복잡한 서비스들이 많아져 우리의 삶을 편리하게 만들고 있지만, 직관적인 인터페이스가 늘어나지는 않습니다. 직관적인 것과 아름다움 사이의 어느 지점을 찾아야한다. 하지만 직관적인 인터페이스가 줄어들고 있다.


조이스틱

내가 어린시절에는 이런 오락실에 앉아서 위에 동전으로 예약을 걸어두고 게임을 하곤 했다. 내 친구 장모씨는 아침에 등교길에 게임을 하다가 지각하는 사태까지 만들 수 있는 실력을 가진 친구가 있었다. 물론 나는 그렇게 게임을 잘하지 못해 뒤에서 지켜만 보는 입장이었다. 조이스틱의 사용법을 아는 것과는 별개로 화면의 움직임에 따라 내 몸을 움직여 즉각적으로 반응하게 한다는 것이 참 어려운 일이 었다. 그때 그 친구를 보면 지금도 드는 생각이지만 물아일체의 경지다. 내가 가고싶다고 생각하면 조이스틱을 움직여 움직일 수 있다. 나는 피하고 싶어도 잘 안되는데…

초기 조이스틱은 이렇게 생겼다.

손 전체로 잡는 것이다. 그리고 좌측으로 주인공을 보내고 싶으면 왼쪽으로 힘을 줘 조이스틱을 기울이면 된다. 위로 가고 싶으면 상단 방향으로 조이스틱을 기울이면된다. 너무나 직관적이다. 그리고 여기서의 제약은 좌우상하만 움직일 수 있다. z축 인풋은 받아들일 수가 없다. 이 조작법을 모바일 터치 디바이스가 들어오면서 비슷하게 구현한 것이 이런 화면 본적이 있을 것입니다.


가상 방향키(조이스틱) UI

브롤스타즈와 lol wildlift에서 사용하는 방향 UI입니다. 보면 동전을 넣어하는 게임기와 구성이 조금 다를뿐 원리는 같습니다. 여기서 게임기의 버튼 보다는 더 직관적이 되었습니다. 왜냐하면 어떤 버튼이 무엇을 일으키는지 시각적으로 확인할 수 있게 되어있습니다.


물리 버튼의 응용 사례

아래 사례들은 조이스틱과 같은 원리로 인식합니다. 하지만 상하좌우에 더해 Z축 버튼 까지 같이 있습니다.

iriver MP3

2014년도 내가 가장 가지고 싶었던 물건입니다. 휴대폰 보다 노래를 너무 듣고 싶었습니다. 그때 sg워너비 Timeless가 어떻게 그렇게 좋던지…

상하 버튼을 조작하면 음량 조절을 할 수 있었고, 좌우 버튼을 조작하면 이전곡, 다음곡으로 넘어갈 수 있었습니다. 그리고 내 기억이 맞다면 중앙 버튼은 메뉴를 호출하는 버튼이었습니다. 물리키 근처에 힌트를 다 배치해서 사용자들에게 혼란을 최소화 할 수 있는 방법을 선택했습니다. 이런 것을 사용자들은 배려라고 느낍니다.

LG Monitor

중앙 버튼으로 켜고/끄고 합니다. 그리고 메뉴는 화면에서 위와 같이 노출되며 좌측을 선택하면 입력을 고를 수 있는 구조로 되어있습니다. 모니터가 켜져있는 상태에서 중앙 버튼은 메뉴 호출/취소 기능을 한다. 여기서 재미있는 것은 화면에 노출된 모양으로 사용자에게 UI 조작의 힌트를 줬다는 것이다.


이상 조이스틱과 관련된 UI를 확인해보는 시간이었습니다~