[번역] 레고 인터페이스 패널로 알아보는 UX

원저자의 허락을 받아 원문 <The UX of LEGO Interface Panels>을 한국어로 번역한 글입니다.

해양 탐사선이나 화성 연구용 탐사선을 조종하는 것은 매우 신중한 작업입니다. 제어판이 잘 동작하길 바랄 뿐입니다. 폭이 넓고 45° 각도인 두 개의 스터드, 유비쿼터스 "2x2 장식 경사 블록"은 레고 미니 피겨가 세상과 상호작용 하는 인터페이스입니다.

이 상징적이고 저해상도의 디자인은 물리적 인터페이스 디자인의 기초를 배우는 데 완벽한 도구입니다. 52가지의 다양한 블록으로 복잡한 인터페이스의 설계, 레이아웃, 구성에 대해 무엇을 배울 수 있는지 살펴봅시다.

레고 UX 디자인의 세계에 오신 것을 환영합니다.

조직화된 카오스

언뜻 보기에 디자인이 아주 다양해서 복잡하게 느껴질 수 있지만, 좀 더 살펴보면 인터페이스마다 혼란스러운 정도가 다르다는 걸 알 수 있습니다. 세상에 존재하는 대부분의 인터페이스에는 스위치, 다이얼과 같은 아날로그 입력과 디지털 화면이 혼합되어 있습니다. 레고 패널도 다르지 않습니다.

패널을 두 축에 따라 분류해 보면 몇 가지 다른 군집을 볼 수 있습니다. 좌측 상단 군집에는 버튼이 줄지어 있는 화면이 있습니다. 가장 우측에는 잘 정돈된 스위치 패널이 작은 군집을 이루고 있습니다. 하단 중앙에는 여러 번 들여다봐도 이해하기 어려운 난해한 디자인들이 자리 잡고 있습니다.

레고 디자인 별로 분류하기

복잡한 기계 인터페이스를 설계하는 것은 인체공학부터 공학까지 다양한 요소를 복합적으로 조율해야 하는 작업입니다. 하지만, 이 문제를 두 가지 핵심 질문으로 나눌 수 있습니다.

1. 서로 다른 입력의 기능을 어떻게 구분할 수 있을까?
2. 수많은 입력과 출력을 어떻게 구성해야 서로의 관계를 이해할 수 있을까?

레고에서 이 두 과제를 해결하는 방법을 자세히 살펴봅시다.

입력의 차별화

2차 세계대전 당시 400명의 조종사가 착륙 직전에 B-17 폭격기의 착륙 장치를 올린 이유는 무엇일까요? 단순히 조종사의 치명적인 실수였을까요? 아니면 더 근본적인 문제가 있었던 것일까요?

심리학자 알폰스 차파니스는 착륙 사고가 자주 발생하는 것은 잘못된 인터페이스 설계 때문일 수 있다고 처음으로 제안했습니다. 착륙 장치와 양력 제어기의 모양이 똑같을 뿐만 아니라 나란히 위치해 있었습니다. 그래서 조종사들이 실수를 범할 가능성이 아주 높았던 것입니다.

B-17 비상 착륙과 이 문제를 근절하는 데 도움이 된 형태 코딩 (출처: 위키피디아)

차파니스는 임시 해결책으로 각 스위치에 모양이 다른 고무 스트립을 붙여, 만지기만 해도 구분할 수 있도록 만들었습니다. 이는 형태 코딩(shape coding)이라는 아이디어를 탄생시켰으며, 오늘날 항공기 조종석에서 여전히 사용되는 차별화 시스템의 기초가 되었습니다.

아래의 세 가지 인터페이스를 비교하며 이를 실제로 어떻게 적용할 수 있는지 살펴보겠습니다. 전체 레이아웃은 무시하고, 개별 스위치 간의 차이에 집중해야 합니다. 눈으로 보지 않고 버튼을 찾는다고 상상해 보세요. 왼쪽 패널("12개의 버튼이 있는 45도 경사의 2*2")은 정확한 손과 눈의 협응이 필요합니다. 반면 오른쪽 패널("항공기 다중 비행 제어)은 스로틀(큰 선형, 수직 이동), 토글 스위치(원형, 수직으로 짧게 누름), 푸시 버튼(사각형, 누름)을 명확히 구분하여 조작을 더 쉽게 만듭니다.

왼쪽에서 오른쪽으로 갈수록 더 나은 입력 차별화를 가짐

이와 같은 차별화는 오늘날에도 여전히 매우 중요한 문제입니다. 2015년 자동차 회사 포드는 13,500대의 링컨 SUV를 리콜했습니다. 운전자들이 고속도로에서 속도를 내면서 스포츠 모드를 활성화하려다 실수로 엔진을 꺼버리는 문제가 발생했기 때문입니다. 그 이유가 무엇일지 아래 이미지를 통해 맞혀 보세요.

포드 링컨 MKC의 엔진 시작/정지 버튼이 이동되기 전의 모습 (출처: CNN)

형태 코딩은 차별화를 위한 한 가지 접근법에 불과하며, 다른 방법들도 많이 존재합니다. 그중 색상 코딩은 아마 일상에서 가장 흔히 보이는 접근법일 것입니다. 이 외에도 네 가지 접근법이 더 존재합니다. 바로 크기, 질감, 위치, 조작 코딩입니다. 이 여섯 가지의 접근법은 사용자의 오류를 방지하는 인터페이스 설계에 효과적입니다.

6가지의 기본 코딩. 이 예시 중 많은 것들이 여러 코딩을 하나로 결합하고 있음.

크기, 형태, 색상 코딩은 기본적인 요소로, 많은 인터페이스 문제를 빠르게 해결할 수 있습니다. 특히 질감은 정밀한 제어가 필요한 작은 다이얼을 눈으로 보지 않고도 조작을 가능하게 하는 훌륭한 차별화 요소입니다.

위치 코딩은 직관적으로 보이지만 자주 활용되지 않습니다. 쌍안경이나 게임 콘솔처럼 기본적인 인체 공학적 위치가 명확한 제품은 자연스러운 손 위치를 활용하여 주요 동작과 보조 동작을 구분합니다.

마지막으로, 조작 코딩은 다양한 입력에 비틀기나 수직 슬라이드와 같이 다른 동작을 할당하는 방식입니다. 레버를 올리면 크레인이 올라가는 크레인 레버처럼 스위치 동작이 그 뒤에 있는 조작을 강화할 때 이 방식은 더 효과적입니다.

LEGO 인터페이스에서 사용되는 여섯 가지 차별화 방법: 크기, 형태, 색상, 질감, 위치, 조작 방식

차별화는 인접한 스위치 간의 혼동을 피할 수 있는 좋은 첫걸음입니다. 하지만 조직화를 통해서만 사용자를 위한 명확하고 정확한 멘탈 모델을 만들 수 있습니다.

입력의 조직화

아래 세 개의 패널을 비교해 보세요. 레이아웃은 동일하지만, 파란색 패널이 흰색 패널보다 훨씬 더 명확합니다. 파란색 패널에는, 공통된 영역을 가진 항목들을 관련지어 식별하는 게슈탈트 법칙이 적용되었습니다.

군집화를 통한 기본적인 차별화

쉬워 보이는군요. 하지만 입력을 어떤 기준으로 군집화 할지 어떻게 결정할까요?

저는 소련의 제어 패널을 출발점으로 사용하는 것을 좋아합니다. 비논리적인 다이얼과 레버로 이루어진 이 아름다운 벽이 거대한 공장 설계도에 배치되었을 때 그 생동감이 드러납니다. 이렇게 정보를 문자 그대로 조직한 예시를 찾기 힘들 것입니다.

실제 소련의 제어 패널 (출처: Present and Correct)

이러한 패널을 통합된 인터페이스라고 부릅니다. 모든 입력과 피드백이 하나의 패널에 모여 있습니다. 이 접근 방식은 다이슨이 자사의 자동차에 적용한 방식입니다. 이제 그 반대의 상황을 상상해 보세요. 각 조명과 스위치를 공장 내 해당 밸브가 위치한 곳으로 옮긴다면 어떨까요? 말도 안된다고 들리겠지만, 아우디 TT의 통풍구에서 볼 수 있듯이, 이 분산된 접근 방식은 사용자 경험을 크게 향상시킬 수 있습니다. 저는 작년에 이러한 분산형 인터페이스에 대해 많은 글을 썼습니다.

레고 차량 대시보드: 분산형(왼쪽) vs. 통합형(오른쪽)

소련의 공장으로 다시 돌아가 보죠. 그 인터페이스 패널들은 "이 밸브가 탱크 Б에 물을 넣게 하는가?"라는 질문에 답하기에는 좋지만, "모든 물 밸브가 닫혀 있는가?" 또는 "교대 근무 준비를 위해 필요한 스위치들은 어디에 있는가?"라는 질문에 대해 답하기는 아주 어렵습니다.

레고는 소련의 도식적 접근법을 그들의 판타지 지향적 디자인에 적용합니다. 회로도는 외계 시스템의 내부 작동 방식을 멘탈 모델로 제공하는 데 뛰어나기 때문입니다. 하지만 일상적인 용도로는 다른 접근 방식이 더 효과적입니다.

레고 곤충 로봇과 UFO 인터페이스. 이 버튼들은 실제로 어떤 기능을 할까?

기능 기반 조직화는 가장 흔하며 어쩌면 "기본적인" 디자인 철학일 것입니다. 각 제품의 기능에 필요한 입력과 출력을 그룹화합니다. 캠브리지 컨설턴트의 코로나 19 인공호흡기가 좋은 예시이며 자동차에서도 자주 볼 수 있습니다. 공기 흐름 제어를 위한 스위치 클러스터나 모든 조명이 하나의 제어 스틱에 모여 있는 것처럼 말입니다.

명확한 기능 기반 조직화를 갖춘 캠브리지 컨설턴트의 코로나19 인공호흡기 (출처: 캠브리지 컨설턴트)

조작 방식에 의한 조직화는 특정 방식으로 기능하는 모든 스위치를 같은 곳에 배치하는 것입니다. 아래 사진의 모든 밸브가 무엇을 하는지 정확히 알 수는 없지만, 모두 서로 관련된 것들을 열지는 않을 것입니다. 모양과 기능은 같지만 시스템의 서로 다른 부분을 제어하는 스위치를 모아두는 것이 바로 조작 방식에 의한 조직화입니다.

출처: 트위터 @aglushko

오늘날 대부분의 인터페이스는 사실상 전기 신호로 제어되는 방식이지만, 과거에는 트랙터 캐빈에서 당겨진 레버가 좌석 아래의 유압 실린더를 실제로 이동시키는 방식이었습니다. 이렇게 여러 전기적, 기계적, 유압적 시스템들을 효율적으로 연결하는 것은 인터페이스 군집화에 큰 영향을 미쳐 기술에 의한 조직화로 이어지게 됩니다.

이에 해당하는 현대의 사례는 놀라울 정도로 흔합니다. 예를 들어, 버튼이 화면 옆에 배치된 터치스크린은 기술 기반의 분리를 보여줍니다. 미래 세계에는 SpaceX가 이러한 물리적 제어 장치를 정보와 함께 화면 내에 바로 배치할 수 있을지도 모르지만, 현재는 아무 문제가 없는 것처럼 화면 옆에 어색하게 배치되어 있습니다.

SpaceX 드래곤 캡슐에 있는 Bob과 Doug (출처: SpaceX)

레고에서는 "-19° 패턴의 모니터"에서 기능 기반 조직화를 찾아볼 수 있습니다. 첫 번째 패널에는 두 개의 명확한 군집이 있으며, 아마 하나는 온도 조절을 위한 것이고 다른 하나는 활력 징후 모니터링을 위한 것일 것입니다. 아래 두 번째 패널에서는, 모든 스위치가 무엇을 하는지 모르겠지만, 그들이 제어할 대상이 아니라 조작 방식에 따라 군집화된 것 같습니다.

레고 패널 중 SpaceX Dragon 캡슐처럼 기술 분리가 있는 것도 많지만, 저는 1990년대 초 경찰 통제 장치가 최신 테이프 릴 기술이 구형 아날로그 전화선 시스템과 호환되지 않아 오디오와 비디오 재생을 분리할 수밖에 없었다고 상상합니다. 이것이 바로 기술에 의한 조직화의 실제 사례입니다.

왼쪽에서 오른쪽 순서로 기능, 조작, 기술, 사례 기반의 패널

지금까지 다룬 기능, 조작 방식, 기술에 의한 조직화는 모두 사용자가 아닌 시스템의 속성에 기반을 두고 있습니다. 반대로 사례 중심의 조직화는 시스템보다는 사용자에게 더 직관적인 방법입니다. 이는 사용자의 일상적인 루틴과 작업을 기준으로 군집화 합니다.

매일 레고 신체 스캐너 공장에 출근한다고 상상해 보세요. 스위치를 작업별로 (예: 기계 준비, 몸체 적재, 스캔 처리 등) 그룹화하면 방사선과 스캐너 버튼을 여러 다른 영역으로 나누게 됩니다. 컴퓨터로는 더 복잡하지만, 실제 운영자에게는 더 간편합니다. 디자이너로서, 어떤 방식이 가장 적합한지는 당신과 사용자만이 판단할 수 있습니다.

그렇다면, 가장 좋은 인터페이스는 무엇인가요?

저는 종종 "가장 좋은 인터페이스는 없다"고 말하지만, 최악의 인터페이스를 예로 들기는 쉽습니다.

그럼에도 제가 좋아하는 세 가지의 인터페이스가 있습니다. 명확하게 차별화된 입력과 간단하고 깔끔한 조직화를 갖춘 아름답고 시각적인 레이아웃들입니다. 저는 그 어떤 것의 콘솔 앞에 앉아도 자랑스럽게 느낄 것입니다.

아름다운 인터페이스 패널