비디오 게임에서 배우는 좋은 UX 설계 (2019)

AI 요약

UX 디자이너인 글쓴이는 게임의 표현 방식이나 보상 장치를 앱에 가져오는 대신, 게임이 사용자를 가르치고 경험을 구성하는 원리를 배우려 합니다. 게임은 화려한 효과와 긴장감을 쓰지만 앱은 단순함을 지향한다는 차이를 인정하면서도, 게임 디자인의 사고법이 앱 UX를 다시 바라보는 관점이 될 수 있다고 설명합니다. 글쓴이는 게임 디자인을 분석한 Raph Koster와 8주 동안 논의하며 여섯 가지 렌즈를 정리했습니다.

사용자가 만드는 이야기

‘Story’는 만든 사람이 구성한 사건의 흐름이고, ‘Narrative’는 사용자가 경험을 기억하며 스스로 엮는 이야기입니다. 사용자는 단계를 건너뛰거나 한곳에 오래 머물면서 설계자가 의도한 순서와 다르게 움직입니다. 그 과정에서도 경험에 의미를 붙이므로, 기능을 연결 없이 한꺼번에 내놓으면 사용자가 의도하지 않은 이야기로 기능을 이해할 수 있습니다.

글쓴이는 1984년 매킨토시의 부팅 화면을 예로 듭니다. 당시 컴퓨터가 켜질 때 이해하기 어려운 텍스트를 보여준 것과 달리, 매킨토시는 웃는 얼굴이 있는 화면에서 시작해 데스크톱으로 이어졌습니다. 작은 변화가 차례로 나타나며 사용자는 컴퓨터가 켜지는 과정을 하나의 경험으로 받아들입니다. 페이팔(PayPal)의 랜딩 페이지도 개인용과 기업용 중 하나를 고르게 하고, 선택에 따라 다음 정보와 행동을 제시하는 사례로 듭니다.

게임은 프랙털처럼 설계합니다

프로그(Frogger)에서 길을 건너는 일은 자동차의 움직임을 읽고, 개구리를 움직이고, 조이스틱의 방향과 속도를 익히는 여러 학습 단계로 나뉩니다. 게임은 각 단계마다 필요한 동기와 피드백을 설계합니다. 앱은 지침을 따르고 일관성을 지키는 데 집중하지만, 글쓴이는 기존 패턴을 반복하는 데 그치지 말고 사용자 행동을 큰 단계부터 작은 동작까지 쪼개 살펴보자고 제안합니다. 메뉴 항목 하나를 고르는 일에도 메뉴 가로 탐색, 항목 선택, 하위 메뉴 열기 같은 여러 기술이 필요합니다.

학습 루프와 하나의 핵심 동작

학습 루프는 의도, 행동, 결과를 거쳐 사용자의 멘탈 모델을 갱신하는 과정입니다. 슈퍼 마리오 브라더스는 점프 하나를 가르치면서 버튼을 누르는 시간과 착지 시점에 변화를 주고, 점프를 이동과 공격으로 확장합니다. 서로 다른 기능마다 버튼을 추가하는 대신, 익숙한 동작에 변형을 더해 표현력을 키웁니다. 글쓴이는 닌텐도가 게임의 기본 동작을 먼저 다듬고, 코스와 적은 나중에 구성했다는 미야모토 시게루의 말을 인용합니다. 매킨토시가 마우스 이동, 클릭, 메뉴, 드래그를 차례로 익히게 했던 사례와 구글 지도에서 핀치 확대가 드래그 동작 위에 쌓이는 사례도 함께 설명합니다.

어포던스와 피드백

게임은 사용자가 이미 배운 동작을 알아차리게 하고, 시각·소리·촉각 신호를 함께 씁니다. 《젤다의 전설: 브레스 오브 더 와일드》에서 등반 중 체력 표시가 줄어드는 것뿐 아니라, 가파른 곳에서 땀이 나고 캐릭터가 힘을 주는 모습은 체력이 더 빠르게 소모된다는 점을 알려줍니다. 사용자는 이 신호를 의식적으로 분석하지 않아도 덜 가파른 경로를 찾도록 배웁니다. 잔디를 지나갈 때 곤충이 튀어나오는 장식적 효과나 《하프라이프》에서 변기 물을 내리는 상호작용처럼, 작은 반응이 세계를 살아 있게 하고 다른 동작을 시도하도록 준비시키기도 합니다.

힌트와 진행 속도

어포던스가 이미 익힌 동작을 강화한다면, 힌트는 사용자를 새로운 학습 단계로 이끕니다. 게임은 반복해서 보이는 단서로 다음 행동을 넌지시 알립니다. 《슈퍼 마리오 오디세이》의 달 수집 요소는 다음 목적지를 보여주고, 《브레스 오브 더 와일드》의 깨진 벽 무늬는 뒤에 무언가 있다는 신호가 됩니다. 앱의 팝업처럼 사용을 막는 안내와 달리, 게임의 힌트는 기다리며 발견하게 합니다.

진행 속도도 중요합니다. 복잡한 게임 월드 오브 워크래프트(World of Warcraft)는 공격 주문 하나로 시작하고, 레벨이 오르면서 기능을 더합니다. 반대로 앱은 첫 화면에서 기능을 모두 보여줘 사용자가 안내를 건너뛰게 만들곤 합니다. 글쓴이는 사용자가 처음 해야 할 한 가지를 분명히 정하고, 그다음 기능은 경험이 쌓이는 속도에 맞춰 제시하자고 말합니다. 여섯 렌즈는 경험을 이야기의 흐름으로 보고, 작은 동작으로 나누고, 핵심 학습 루프를 설계한 뒤, 어포던스와 힌트, 진행 속도로 다시 쌓는 방식으로 정리됩니다.

Hacker News 반응

• @iamagurgle — 글을 전부 읽지는 않았지만, 제목을 보니 제가 쓰는 프로그램이 떠올랐습니다. TreeSheets라는 스프레드시트·노트 앱인데, 게임 업계 사람이 만들었고 쓰는 재미가 있습니다.
  • @leephillips — 흥미로운 프로그램처럼 보입니다. 지금까지 들어본 적이 없다는 게 믿기지 않을 정도인데, Debian 저장소에도 있네요.
  • @rchase — 와, 감사합니다. 한 번도 들어본 적 없는데 정말 아름다운 프로그램이네요.
• @blymphony — UX의 ‘즐거움’이라는 요소를 섬세하게 살펴본 신선한 관점입니다. 좋은 UX를 지나치게 단순하게만 보는 댓글을 많이 읽는데, 아직 해결되지 않은 주제를 그렇게 단순하게 다루는 건 어색합니다.
  • @djdiedjiefjjej — 맞습니다. 여기 사람들은 소프트웨어가 ‘진짜 컴퓨팅, 황금기 시절’처럼 느껴지도록 최대한 불친절하고 구식이어야 한다고 생각하는 것 같습니다. 터무니없습니다. 컴퓨터는 쓰는 즐거움을 줘야 합니다. 인터페이스는 사용자를 즐겁게 해야 합니다. 사용 경험은 기분 좋게 만들어야 합니다. 처음부터 그게 목적 아니었나요?
  • @tomasphan — 여기서 그런 생각을 하는 사람은 없습니다. 리눅스에 집착하는 사람 몇몇은 있지만, HN 이용자 99%는 UI/UX에서 마찰을 줄여야 한다고 압니다.
  • @isicjeicjeif — “여기서는 아무도 그런 생각을 안 한다”면서 “리눅스에 집착하는 사람 몇몇은 있다”는 건가요? 어느 쪽인가요?
  • @t-3 — 저는 인터페이스에서 ‘즐거움’을 원하지 않습니다. 해야 할 일을 하고 싶습니다. 인터페이스는 일을 쉽게 만들어야지, 반짝이고 새로워 보이게 하느라 입력과 피드백을 늦추는 데 집중하면 안 됩니다.
• @krm01 — 좋은 글입니다. UI/UX 분야에서 수년간 일했고, 그전에는 대학에서 게임 디자인을 공부해 예술과 기술을 결합한 공학 학위를 받았습니다. 게임 디자인 원칙은 UX 문제를 때로는 색다르고 즐거운 방식으로 풀게 해줬습니다. 아주 작은 예로, 검색이 엄청 느린 소프트웨어가 있었습니다. 엔지니어들이 속도를 더 높이지 못했는데, 로딩 화면에 이야기를 더하는 오래된 게임 디자인 기법으로 이탈률을 낮췄습니다. 재미있는 애니메이션과 현재 진행 중인 작업을 설명하는 문구를 넣었더니 기다리는 동안의 즐거움도 늘었습니다.
• @joinHNtheysaid — 게임 UX가 게임을 거의 업무용 UI처럼 느끼게 하는 점이 큰 영향을 줬습니다. 모두 포토샵 사용법을 배우려고 돈을 내지만, 게임 UI를 배우려고 돈을 내는 사람은 없습니다. 튜토리얼 시간에도 그렇습니다. 《토탈 어나이얼레이션》은 RTS 게임 UI의 중요한 이정표였습니다. 공장에서 유닛의 경로와 행동을 지정하는 방식은 직관적 설계의 정점이었습니다. 《스타크래프트》처럼 분당 클릭 수를 겨루는 조작보다 전략 경험을 크게 개선했습니다.
  • @NortySpock — 《Beyond All Reason》의 ‘Move Line Drag’ 명령을 써보셨나요? 대기열에 추가할 수도 있습니다. 원하는 유닛 배치 형태를 일련의 경유점으로 낙서하듯 그릴 수 있는데, 생각하는 속도로 조작할 수 있어 정말 놀랍습니다.
• @ocd — 리눅스나 BSD 데스크톱에서 UI를 설정할 때마다 《스타워즈 갤럭시즈》의 CU 이전 UI와 효과음, 또는 특정 시기 일본 PSX·PS2 게임 디자인을 떠올리지 않는 순간은 없을 겁니다.
• @canpan — 게임과 앱의 차이 중 하나는 개발과 출시 방식입니다. 게임은 완성한 뒤 커뮤니티에 한 번에 출시하므로 모두가 초보자라고 가정합니다. 학습이 막히는 지점을 찾으려고 새로운 테스터를 계속 대상으로 시험합니다. 앱 기능은 기존 고객을 위해 만들고, 고객이 이미 사용법을 안다고 가정합니다. 새로운 사용자를 대상으로 시험하는 경우는 드뭅니다.

원문: jenson.org / 번역·요약: Trawling