1P by GN⁺ | ★ favorite | 댓글 1개
  • LEGO의 2x2 장식 경사 브릭은 미니피겨가 배·우주선·차량을 조작하는 제어 패널이며, 작은 물리 UI 안에서도 좋은 인터페이스 원칙을 읽어낼 수 있음
  • 복잡한 기계 인터페이스에서 중요한 축은 입력을 서로 구분하는 방법과, 많은 입력·출력을 사용자가 이해할 수 있게 조직화하는 방식임
  • 크기·형태·색상·질감·위치·조작 방식 같은 코딩은 오작동을 줄이며, B-17 착륙장치 사고와 2015년 Ford Lincoln SUV 리콜은 구분 실패가 실제 위험으로 이어질 수 있음을 보여줌
  • 조직화 기준은 기능, 조작 방식, 기술, 사용 사례로 나뉘며, 소련식 제어 패널, Audi TT 송풍구, SpaceX Dragon 캡슐, LEGO 패널에서 각각의 장단점이 드러남
  • 좋은 인터페이스는 입력이 잘 구분되고 관계가 명확하며 조직화가 단순해야 하므로, “최고”를 찾기보다 혼동을 부르는 나쁜 배치를 피하는 판단이 중요함

LEGO 패널을 물리 인터페이스로 보기

  • 바다 탐사선이나 화성 연구 셔틀을 조종하는 LEGO 미니피겨에게 2x2 decorated slope는 세상과 상호작용하는 제어 패널임
  • 해상도는 낮지만, 복잡한 물리 인터페이스의 설계·배치·조직화를 살펴보기에 적합한 사례가 됨
  • 52개의 서로 다른 브릭을 기준으로 보면, LEGO 패널도 실제 인터페이스처럼 디지털 화면과 스위치·다이얼 같은 아날로그 입력이 섞여 있음

혼돈 속에서 보이는 분류

  • LEGO 패널 중 일부는 비교적 질서 있지만, 어떤 패널은 한눈에 이해하기 어려울 만큼 혼란스러움
  • 패널을 화면아날로그 입력이라는 두 축에 놓으면 몇 가지 군집이 나타남
    • 화면과 버튼 줄이 함께 있는 패널은 한쪽에 모임
    • 정돈된 스위치 패널은 다른 쪽에 작은 군집을 이룸
    • 중앙 하단에는 몇 번 봐도 이해하기 어려운 개념적 패널들이 위치함
  • 복잡한 기계 인터페이스 설계는 인체공학부터 엔지니어링까지 여러 요소를 다루지만, 결국 두 질문으로 압축됨
    • 서로 다른 입력 기능을 어떻게 구분할 것인가
    • 많은 입력과 출력을 어떻게 조직화해 관계를 이해시킬 것인가

입력을 구분하는 방법

  • WWII 당시 B-17 폭격기 조종사들은 착륙 직전 착륙장치를 올리는 사고를 자주 냈고, 심리학자 Alphonse Chapanis는 이를 조종사 실수가 아니라 나쁜 인터페이스 디자인 문제로 봄
  • 착륙장치와 플랩 조작 노브가 서로 인접해 있고 형태도 같아, 조종사가 급한 상황에서 잘못 잡기 쉬웠음
  • 임시 해결책은 각 스위치에 서로 다른 형태의 고무 조각을 붙여, 보지 않고도 촉각으로 구분할 수 있게 하는 것이었음
  • 이 접근은 형태 코딩(shape coding) 개념으로 이어졌고, 항공기 조종석에서 계속 쓰이는 구분 체계가 됨

LEGO 패널에서 드러나는 구분의 차이

  • 같은 LEGO 패널이라도 입력 요소가 얼마나 다르게 생겼는지에 따라 조작 난이도가 달라짐
  • "Slope 45 2 x 2 with 12 Buttons" 패널은 버튼들이 서로 비슷해, 보지 않고 찾으려면 손과 눈의 정밀한 협응이 필요함
  • "Aircraft Multiple Flight Controls" 패널은 스로틀, 토글 스위치, 푸시 버튼을 서로 다른 방식으로 구분함
    • 스로틀은 크고 선형적인 수직 움직임을 가짐
    • 토글 스위치는 둥근 수직 젖힘 동작으로 구분됨
    • 푸시 버튼은 사각형 눌림 동작으로 읽힘
  • 2015년 Ford는 Lincoln SUV 13,500대를 리콜했는데, 운전자가 고속도로에서 스포츠 모드를 켜려다 엔진 start/stop 버튼을 잘못 눌러 엔진을 꺼버리는 문제가 있었음

입력 구분을 위한 6가지 코딩

  • 인터페이스 오류를 줄이는 기본 구분 방식은 여섯 가지임
    • 크기: 중요한 조작부나 자주 쓰는 조작부를 물리적으로 더 크게 만들어 구분함
    • 형태: 손으로 만졌을 때 다른 기능임을 알 수 있도록 모양을 다르게 만듦
    • 색상: 관련 항목을 묶거나 위험·상태 차이를 빠르게 알아보게 함
    • 질감: 보지 않고 조작해야 하는 상황, 특히 정밀 제어가 필요한 작은 다이얼에서 유용함
    • 위치: 쌍안경이나 게임 콘솔처럼 손의 기본 위치가 분명한 제품에서 주 동작과 보조 동작을 나누는 데 활용됨
    • 조작 방식: 돌리기, 수직 슬라이드처럼 서로 다른 움직임을 각 입력에 배정함
  • 크레인 레버를 위로 올리면 크레인이 올라가는 식으로, 스위치 움직임이 실제 동작과 맞을 때 조작 의미가 더 강하게 전달됨

입력을 조직화하는 방법

  • 입력 구분은 인접한 스위치 간 혼동을 줄이는 첫 단계지만, 사용자가 인터페이스의 멘털 모델을 만들려면 조직화가 필요함
  • 같은 배치라도 관련 항목을 색이나 영역으로 묶으면 더 명확해지며, 이는 게슈탈트 원리 중 공통 영역으로 관련 항목을 인식하는 방식과 맞닿아 있음
  • 남는 문제는 어떤 기준으로 입력을 묶을지임

통합형과 분산형 인터페이스

  • 소련식 제어 패널은 거대한 공장 도식 위에 다이얼과 레버를 배치해, 정보를 매우 문자 그대로 조직화한 예임
  • 이런 패널은 모든 입력과 피드백을 하나의 패널에 모은 통합형 인터페이스에 해당함
  • 반대 방식은 각 조명과 스위치를 실제 밸브가 있는 위치로 옮기는 분산형 인터페이스
  • Audi TT의 송풍구는 분산형 접근이 사용자 경험에서 좋은 결과를 낼 수 있음을 보여줌
  • 소련식 도식형 패널은 “이 밸브가 탱크 Б로 물을 넣는가?” 같은 질문에는 강하지만, “모든 물 밸브가 닫혔는가?”나 “교대 준비에 필요한 스위치는 어디 있는가?” 같은 질문에는 약함

조직화 기준 네 가지

  • 기능 기반 조직화는 제품 기능별로 입력과 출력을 묶는 방식이며, 가장 흔하고 기본적인 설계 철학에 가까움
    • Cambridge Consultants의 COVID-19 인공호흡기는 명확한 기능 기반 조직화 사례임
    • 자동차에서도 공기 흐름 제어 스위치 묶음이나 조명 조작 레버처럼 자주 보임
  • 조작 방식 기반 조직화는 같은 방식으로 작동하는 스위치를 같은 위치에 두는 방식임
    • 한 줄로 나열된 같은 형태와 같은 동작의 스위치들이 서로 다른 시스템 부위를 제어한다면 이 방식에 해당함
  • 기술 기반 조직화는 전기·기계·유압 시스템의 배선이나 라우팅 같은 기술적 제약 때문에 인터페이스 묶음이 결정되는 경우임
    • 버튼이 화면 옆에 붙은 터치스크린은 화면과 물리 버튼이 기술적으로 분리된 사례임
    • SpaceX Dragon 캡슐의 물리 제어장치도 화면 옆에 놓인 형태로 다뤄짐
  • 사용 사례 기반 조직화는 시스템 속성이 아니라 사용자의 일상 업무와 작업 흐름을 기준으로 묶는 방식임
    • LEGO body scanner factory를 예로 들면, prepare machine, load body, process scan 같은 작업별로 스위치를 묶을 수 있음
    • 이 방식은 컴퓨터 쪽에는 더 복잡할 수 있지만, 조작자에게는 더 간결할 수 있음

LEGO 패널에 적용된 조직화

  • LEGO의 판타지 지향 디자인에는 소련식 도식 접근이 쓰이며, 외계 시스템의 내부 작동에 대한 멘털 모델을 제공하는 데 적합함
  • "Monitor with -19° pattern" 패널은 기능 기반 조직화 예로 볼 수 있음
    • 한 군집은 온도 제어처럼 보임
    • 다른 군집은 생체 신호 모니터링처럼 보임
  • 어떤 패널은 스위치가 실제로 무엇을 제어하는지는 알 수 없지만, 조작 방식에 따라 묶인 것처럼 보임
  • 1990년대 초반 경찰 제어 장치는 오디오·비디오 재생이 나뉘어 있어 기술 기반 조직화 예로 볼 수 있음
    • 새 테이프 릴 기술과 오래된 아날로그 전화선 시스템의 호환성 문제로 나뉘었다고 상상할 수 있는 사례임

좋은 LEGO 인터페이스의 조건

  • “최고의 인터페이스”는 하나로 정하기 어렵지만, 나쁜 인터페이스의 사례는 쉽게 찾을 수 있음
  • 선호되는 LEGO 패널들은 공통적으로 시각적 배치가 아름답고, 입력이 명확히 구분되며, 조직화가 단순하고 깨끗함
  • 복잡한 인터페이스 설계에서는 입력 구분과 조직화가 함께 작동해야 사용자가 혼동 없이 제어할 수 있음

댓글과 토론

Hacker News 의견들
  • 당시 올라온 스레드 https://news.ycombinator.com/item?id=24035866와 조금 뒤의 작은 스레드 https://news.ycombinator.com/item?id=29502811에도 저자 댓글이 몇 개 있음

  • Audi 예시 링크는 죽었지만, 보관된 버전은 https://web.archive.org/web/20211126012727/https://deeptread...에서 볼 수 있음

    • 훌륭한 디자인의 정말 좋은 예시이고, 보기에도 아름다움. 이런 방식이 널리 퍼지지 못한 게 아쉬움
      전기차를 갖고 싶긴 하지만 터치스크린으로 조작하는 차는 절대 싫음. 유능한 디자이너들은 다 어디로 갔고 왜 전기차를 설계하지 않았는지 궁금함
    • 이 디자인은 그다지 마음에 들지 않음. 말은 되지만 배치가 너무 듬성듬성한 느낌임
      지금 타는 Renault Laguna 3의 공조 조작부가 좋음. 공기 배출구 사이에 있고 위쪽에 Soft, Auto, Fast 세 버튼이 있음. Slow나 Hard처럼 부정적 뉘앙스가 있는 단어 대신 쓴 점이 마음에 듦. Soft는 조용하게, Auto는 가장 자주 쓰는 설정, Fast는 의미가 분명하고 뒷좌석 승객이 있을 때도 권장됨
      그 아래에는 현재 온도와 다른 공조 설정 표시가 있고, 온도는 0.5°C 단위로 바꿀 수 있는 크고 편한 위/아래 로커 스위치가 있음. 온도는 보통 많이 바꾸지 않는데, 손잡이는 온도조절기의 개념을 모르는 사람이 자꾸 돌리게 만드는 느낌임
      그다음에는 에어컨 끄기, 내기 순환, 팬 속도, 송풍 방향 버튼이 있음. 바로 아래에는 빠른 김서림 제거와 뒷유리 열선 버튼이 있고, LCD에 상태가 표시되지 않는 버튼들은 작은 LED로 상태를 보여줌
      실제 동작은 여기서 볼 수 있음: https://youtu.be/oNHvtI_8A5w?t=12
  • 실제 인터페이스를 분석한 부분이 꽤 흥미로움. 이 분야 초보라 기능별 / 동작별 / 기술별 / 사용 사례별 구분을 깊게 생각해 본 적이 없었음

  • 약간 빗나간 얘기지만, 바로 어제 Lego의 사라진 Modulex 브랜드와 1960년대부터 1990년대까지 진지하게, 꽤 널리 쓰였던 Lego 브릭 기반 프로젝트 관리 보드에 대해 알게 됨
    작은 크기와 편안한 파스텔 색상이 특히 매력적으로 보였고, 더 촉각적이고 실제로 다루기 즐거운 컴퓨터 UI가 그리워짐

  • 작은 그림이 있는 UI/UX 사이트라면 휴대폰에서 확대할 수 있으면 좋겠음

    • Android라면 Firefox와 Chrome의 접근성 옵션에서, 사이트가 원래 막아도 모든 페이지를 항상 확대할 수 있음. Firefox에서는 Settings -> Accessibility -> Zoom on all websites에 있음
    • 이 사이트 작성자임. 다른 댓글을 보니 Android를 쓰는 것 같은데, 테스트할 수 있는 건 iPhone뿐이라 내 폰에서는 핀치 확대가 문제없이 됨
      일부러 막은 건 아니고, 왜 그런지 알아보겠음
    • 내 Samsung 휴대폰의 Chrome에서는 확대됨
  • 어릴 때 가장 좋아했던 건 38이 표시된 흰색 레이더 화면이었음. UX 쪽으로 갔어야 했나 싶음

  • 내 휴대폰이 Bop It에 더 가까웠으면 좋겠음

    • cyberdeck을 쓸 만한 용도가 있었으면 좋겠음
  • 누군가 Factorio Facebook 그룹에 Bricklink Studio 2.0으로 만든 빨간 과학 팩 공장의 아름답고 영감 있는 Lego 렌더링을 올렸음
    https://www.facebook.com/groups/factoriogroup/posts/24121149...

  • Lincoln MKC는 참 불운했음
    https://www.consumerreports.org/cro/news/2015/05/recalled-li...
    전원 버튼을 기둥 위쪽으로 옮긴 것 같음

    • 내 차는 2012년식 BMW인데, 주행 중에 시작/정지 버튼을 눌러도 엔진이 꺼지지 않음. 버튼을 누르고 차가 정지해 있을 때만 엔진이 꺼짐
      이 정도는 너무 당연한 인터록으로 보이는데, Ford가 이걸 생각하지 못하고 해결책으로 버튼 위치를 옮겼다는 게 이해가 안 됨
    • 그 버튼이 정말 엔진을 켜고 끄는 버튼인가? 다른 차들에서 본 비슷한 아이콘의 시작/정지 버튼은 차가 멈췄을 때 오염을 줄이려고 엔진을 끄는 자동 시작/정지 시스템을 켜고 끄는 용도였음