세상에서 가장 최악의 볼륨 조절 UI 모음 — UX 안티패턴에서 배우는 인터페이스 설계

좋은 UI를 배우는 가장 재미있는 방법

인터페이스 설계를 제대로 이해하는 방법 중 하나는, 의도적으로 최악의 인터페이스를 만들어보는 것입니다. UX 디자이너이자 개발자들 사이에서 전설처럼 회자되는 한 프로젝트가 있습니다. "세상에서 가장 최악의 볼륨 조절 UI"라는 이름의 이 컬렉션은, 개발자와 디자이너들이 상상할 수 있는 가장 사용하기 어렵고, 비직관적이며, 때로는 물리 법칙을 무시하는 볼륨 조절 인터페이스를 모아놓은 것입니다.

이 프로젝트의 출발점은 단순합니다. 볼륨 조절이라는 것은 0에서 100 사이의 숫자 하나를 선택하는, UI 설계에서 가장 기본적인 과제 중 하나입니다. 슬라이더 하나면 충분한 이 작업을 얼마나 복잡하고 고통스럽게 만들 수 있는지를 탐구하는 일종의 사고 실험입니다. 그리고 그 결과물들은 웃기면서도 동시에 소름 끼칠 정도로 교훈적입니다.

구체적으로 어떤 것들이 있나

가장 유명한 예시 몇 가지를 소개하면 이 프로젝트의 매력을 바로 이해할 수 있습니다.

"볼륨을 올리려면 파이를 그리세요" UI: 원형 차트를 직접 그려서 볼륨을 설정합니다. 사용자가 마우스로 원 안에 파이 조각을 그리면, 그 면적 비율이 볼륨이 됩니다. 정확한 볼륨을 설정하려면 기하학적 감각이 필요합니다.

git commit 메시지로 볼륨 조절: 볼륨을 바꾸려면 git repository에 원하는 볼륨 값을 커밋 메시지에 적어서 push해야 합니다. 개발자만 볼륨을 조절할 수 있는 셈입니다.

볼륨 미로: 볼륨 슬라이더가 미로 안에 있어서, 마우스로 미로를 통과해야만 볼륨 노브에 도달할 수 있습니다. 벽에 부딪히면 처음부터 다시 시작해야 합니다.

랜덤 볼륨 버튼: 버튼 하나만 있고, 누를 때마다 랜덤으로 볼륨이 설정됩니다. 원하는 볼륨이 나올 때까지 계속 누르세요.

역전된 스크롤 슬라이더: 슬라이더를 오른쪽으로 드래그하면 볼륨이 내려가고, 왼쪽으로 드래그하면 올라갑니다. 간단하지만 사용자의 근육 기억(muscle memory)을 완벽하게 배반합니다.

이 외에도 볼륨을 설정하기 위해 CAPTCHA를 풀어야 하는 UI, 두 사람이 동시에 버튼을 눌러야 작동하는 핵발사 코드 스타일 UI, 볼륨 값을 로마 숫자로 입력해야 하는 UI 등 수십 가지 변형이 존재합니다.

웃긴데 왜 교훈적인가

이 프로젝트가 단순한 밈을 넘어서는 이유는, 각각의 나쁜 UI가 실제 UX 원칙의 위반 사례를 극단적으로 보여주기 때문입니다. UX 분야에서 자주 인용되는 몇 가지 원칙과 연결지어 보겠습니다.

제이콥의 법칙(Jakob's Law): 사용자는 대부분의 시간을 다른 사이트에서 보내므로, 당신의 사이트도 이미 알고 있는 방식대로 작동하길 기대합니다. 역전된 슬라이더가 불쾌한 이유가 정확히 이것입니다. 슬라이더는 오른쪽이 증가라는 관례(convention)를 위반하면, 사용자의 기존 멘탈 모델과 충돌합니다.

피츠의 법칙(Fitts's Law): 대상을 클릭하는 데 걸리는 시간은 대상까지의 거리와 대상의 크기에 비례합니다. 볼륨 미로 UI는 이 법칙을 극단적으로 악용합니다. 목표(슬라이더 노브)까지의 경로를 인위적으로 늘림으로써 조작 시간을 수십 배로 증가시킵니다.

인지 부하(Cognitive Load): 파이 차트로 볼륨을 설정하는 UI는 "숫자 하나를 선택하라"는 단순한 과제에 불필요한 인지적 변환 과정을 추가합니다. 사용자는 원하는 볼륨 → 비율 → 면적 → 마우스 동작으로 여러 단계의 정신적 번역을 해야 합니다.

되돌릴 수 있는 행동(Reversibility): 랜덤 볼륨 버튼은 사용자에게 통제권을 완전히 빼앗습니다. 좋은 UI는 사용자가 언제든 이전 상태로 돌아갈 수 있다는 안전감을 제공하는데, 이 UI는 그 반대입니다.

실제 제품에서 발견되는 유사 패턴

이 프로젝트가 순수한 풍자라고 생각할 수 있지만, 놀랍게도 실제 제품에서 이와 유사한 안티패턴을 종종 발견할 수 있습니다. 쿠키 동의 팝업에서 '거부'를 선택하려면 5단계의 토글을 하나씩 꺼야 하는 다크 패턴, 구독 해지를 위해 전화를 걸어야 하는 서비스, 검색보다 사용하기 어려운 카테고리 네비게이션 등이 대표적입니다.

한국에서 특히 자주 보이는 사례도 있습니다. 공인인증서 시절의 보안 프로그램 설치 과정(ActiveX 5개를 순서대로 설치해야 하는), 모바일에서 PC 버전으로 강제 리다이렉트되는 관공서 사이트, 회원가입 시 비밀번호 규칙이 너무 복잡해서 사용자가 결국 포스트잇에 적어두게 만드는 보안 정책 등은, 의도는 좋았지만 결과적으로 사용자 경험을 해치는 경우입니다.

한국 개발자에게 주는 시사점

이 프로젝트는 팀 내 UX 리뷰나 디자인 워크숍에서 활용하기 좋은 교육 자료입니다. "이 기능의 최악의 UI를 설계해보라"는 역발상 워크숍은 팀원들이 UX 원칙을 체화하는 데 효과적입니다. 최악을 정의할 수 있어야 최선도 정의할 수 있기 때문입니다.

프론트엔드 개발자라면, 이 프로젝트의 구현들을 살펴보면서 다양한 인터랙션 패턴의 구현 방법을 학습할 수도 있습니다. 드래그 앤 드롭, 캔버스 기반 입력, 제스처 인식 등 평소에 잘 다루지 않는 인터랙션 기술을 장난스러운 맥락에서 연습할 수 있습니다.

가장 중요한 교훈은 이것입니다. 좋은 인터페이스는 사용자가 그 존재를 의식하지 못하는 인터페이스입니다. 볼륨을 조절하는 데 생각이 필요하다면, 그 UI는 이미 실패한 것입니다. 같은 원리가 API 설계, CLI 도구, 개발자 경험(DX) 전반에도 적용됩니다.

마무리

최악의 UI를 모아놓은 이 유쾌한 프로젝트는, 역설적으로 좋은 인터페이스 설계의 원칙을 가장 선명하게 보여줍니다. 사용자가 생각하지 않아도 되는 것이 좋은 UI입니다.

여러분이 최근에 경험한 '최악의 UI'는 무엇인가요? 그리고 왜 그것이 나쁜 UI라고 느꼈는지, 어떤 원칙을 위반하고 있는 건지 한번 분석해보시면 어떨까요?