[ 🍄 슈퍼 마리오가 UX 디자인에 대해 우리에게 가르쳐준 것 ] 🕹 Comment Note 흔히 '클래식은 영원하다'고들 하죠. 이번에는 유명 고전 비디오 게임인 '슈퍼 마리오'를 통해, U

[ 🍄 슈퍼 마리오가 UX 디자인에 대해 우리에게 가르쳐준 것 ] 🕹 Comment Note 흔히 '클래식은 영원하다'고들 하죠. 이번에는 유명 고전 비디오 게임인 '슈퍼 마리오'를 통해, UX 디자인의 몇 가지 원칙에 관해 이야기하는 해외 아티클을 가져와 보았습니다! 지난 마리오 데이(3월 10일)를 축하하며 작성되었다고 하는데요. 6가지의 명쾌한 UX 디자인 인사이트와 함께, 저자의 슈퍼 마리오에 대한 애정을 엿보는 재미가 있는 글이에요. 저자인 Ward Andrews는 UI/UX 디자인 회사 'Drawbackwards'의 창립자 겸 CEO라고 합니다. 한편, 대학에서 디자인 창업가 정신을 가르치는 명예교수로도 활동하고 있는데요. 그런 디자인 구루가 슈퍼 마리오로부터 배운 것이 무엇일지, 궁금해 하실 분들을 위해 간단한 발췌 요약본을 준비했습니다. 시간이 되신다면 아티클 전문을 읽어보는 것을 추천 드려요! 그럼, 우리 다 함께 점프해서 퀘스천 박스를 때려 볼까요❔👀 (※ 오역·의역 주의) 1️⃣ 끝을 염두에 두고 시작하라Begin with the End in Mind "끝을 염두에 두면(그리고 사용자의 활동을 보여주면), 사용자는 최종 목표를 보기까지 필요한 시간과 노력을 예상할 수 있다. (…) 사용자는 필요한 노력을 확인하고, 이를 완수하기 위해 스테이지에 진입한다. 레벨 완수 패턴은 계속 반복되어, 사용자에게 성공을 위해 따라야 할 매우 명확한 인터페이스 패턴을 제공한다." 2️⃣ 말하지 말고 보여주라Show, Don't Tell "월드 1-1은 아마 비디오 게임 역사상 최고 수준의 레벨일 것이다 : 아무런 설명도 필요하지 않다. 새로운 플레이어는 패드를 누르는 법과 버튼 하나를 사용하는 법을 배워 전진한다. (…) 화면에는 그 어떤 지문 설명도 없다. 게임은 오히려 플레이어가 어떻게 전진하는지를 직접 배우게 한다. 우리는 이것을 다양한 방법으로 UI 디자인에 적용할 수 있다. 가장 유명한 것은 구글의 단일 양식 필드 화면(홈-검색 화면)이다. (…) 사용자에게 소프트웨어의 인터페이스와 유틸리티를 알려주기 위해, '원인 및 결과' 시스템이 설정된 것이다." 3️⃣ 근접성의 힘Power of Proximity "슈퍼 마리오 브라더스에서는 플레이어가 퀘스천 마크가 달린 블록을 향해 뛰어오르면, 그 즉시 퀘스천 마크의 해답이 나온다. 당신의 눈은 피드백을 얻기 위해 화면을 살펴볼 필요가 없다 – 대신, 화면 속 상자와 당신 간의 인터랙션 가까이에 있다." (이후 단락에서 Southwest Airline 키오스크의 항공편 체크 화면에 대해 불만을 토로하는데, 저자의 비판 겸 농담이 정말 재미있으니 원문으로 확인하세요!) 4️⃣ 제약은 당신의 가장 친한 친구Constraints Are Your Best Friend "마리오의 세계에는 플레이어들이 착착 나아가도록 하기 위한 명쾌한 제약들이 있다. (…) 한 번 결정이 내려지면, 사람은 그것으로부터 앞쪽만을 향하여 나아갈 수 있다. 마리오의 레벨에는 파이프들이 있는데, 그중 몇 개는 플레이어가 지하로 들어갈 수 있도록 하지만 몇 개는 그렇지 않다. 이것은 인터페이스에 시행착오를 도입하고, 여정을 돕는 경험·코인·레벨·파워-업을 추가하여 탐색 프로세스에 보상을 제공하는 간단한 방법이다." 5️⃣ 놀라움과 기쁨Surprise and Delight "사용자를 계속 참여시키는 가장 좋은 방법은 친숙한 인터랙션 패턴을 취한 뒤, 재미있고 예상치 못한 방법으로 그들이 원하는 결과를 산출하는 것이다. 유령들은 다른 크리처들과 마찬가지로 플레이어를 계속 쫓아오지만, 인터랙션을 더욱 재미있게 만드는 특별한 반전을 가지고 있다." (이 단락에서 말하는 '유령'이란, 슈퍼 마리오의 귀신의 집 맵에 등장하는 유령 크리처들을 의미합니다!) 6️⃣ 쓸모 있는 인터랙션의 우선순위를 매기고, 숨 돌릴 곳을 제공하라Prioritize Useful Interactions and Give Them Breathing Room "여백은 훌륭한 인터랙션을 만드는 데에 매우 중요하다. 만약 그것이 주요한 인터랙션의 주의를 빼앗는다면, 화면에 무언가를 배치할 만한 '진짜 공간'이 없는 것이다." "디자인의 초점을 필수적인 인터랙션에 맞추는 것(그리고 보조적인 정보와 내비게이션만 설계하는 것)은 사용자의 요구에 계속 집중할 수 있는 좋은 방법이다."