오른쪽 아래 취소 버튼 때문에 짜증났던 순간에서 배우는, 인간의 직관을 배신하지 않는 설계
어떤 결제·계산대형 화면을 체험하다가 오른쪽 아래에 취소 계열 버튼이 있는 것을 봤다.
순간적으로 다음 단계나 확정 버튼이 있을 법한 자리처럼 느껴졌고, 한 번 잘못 누를 뻔했다.
짜증이 났다.
그렇다고 “취소 버튼은 절대로 오른쪽에 두면 안 된다”라는 종교를 만들 필요는 없다. 운영체제와 제품마다 관습이 다르고, 오른쪽에 취소가 있다고 해서 자동으로 나쁜 UI는 아니다.
핵심은 사람이 과거 경험으로 예측한 움직임과 실제 UI의 움직임이 어긋나는가이다.
사람은 새 화면을 볼 때마다 백지 상태가 아니다. 스마트폰, 웹사이트, 계산대, 발권기, 리모컨, 엘리베이터에서 배운 규칙을 그대로 가져온다. 그 기대를 깨면 “생각하면 이해되는 화면”이어도 “반사적으로는 틀리기 쉬운 화면”이 된다.
일상적인 오조작은 깊게 고민한 끝의 잘못된 판단보다, 급했거나 익숙했거나 비슷한 버튼이 너무 가까웠기 때문에 생기는 경우가 많다.
이 글은 작은 취소 버튼 사건에서 시작해 콘텐츠 사이트의 자기 감사까지 확장하면서, 사람에게 친절한 UI/UX가 무엇인지 연구와 설계 원칙으로 정리한다.
결론은 설명문을 더 많이 쓰는 것이 아니다.
예측을 배신하지 않고, 잘못 누르기 어렵게 만들고, 잘못 눌러도 돌아올 수 있게 하고, 지금 필요하지 않은 선택을 억지로 처리하게 하지 않는 것.
0. 30초 요약: “사용자가 왜 틀렸나”보다 “틀리기 쉽게 만들지 않았나”를 본다
- 같은 말은 같은 종류의 결과로 이어져야 한다.
- 흔한 행동은 익숙한 위치와 관습을 가능한 한 따른다.
- 결과가 크게 다른 행동을 비슷한 모양으로 붙여 놓지 않는다.
- 비용이 큰 행동은 가능하면 되돌릴 수 있게 하고, 불가능하면 결과를 구체적으로 보여준다.
- 터치 대상은 충분히 크고 서로 떨어져 있어야 한다.
- 고급 기능은 없앨 필요가 없다. 처음부터 전부 펼치지만 않으면 된다.
- 선택지의 개수만 보지 말고 비교 난이도를 본다.
- 클릭 직후 뒤로 가기나 즉시 반대 조작 같은 실제 수정 행동을 본다.
UI는 사용자를 시험하는 곳이 아니다.
목표는 “이 기능을 이해할 수 있는가”가 아니라 “멈춰서 UI를 풀지 않아도 대체로 맞게 움직일 수 있는가”이다.
1. ‘직관적’이라는 것은 보통 과거 경험을 재사용한다는 뜻이다
사람은 제품이 어떻게 움직일지 머릿속에 모델을 만든다. UX에서는 이를 멘탈 모델이라고 부른다.[1][2]
돋보기는 검색, 왼쪽 화살표는 뒤로, 휴지통은 삭제, 삼각형은 재생으로 읽힌다.
사용자는 매번 논리적으로 의미를 증명하지 않는다. 이전 제품에서 배운 문법을 빌린다.
그래서 독창성을 위해 검색을 별 모양으로 만들거나 닫기를 낯선 기호로 바꾸면, 제작자에게는 신선하지만 사용자에게는 퀴즈가 된다.
NN/g의 휴리스틱도 현실 세계와의 대응, 플랫폼 관습, 제품 내부의 일관성을 중요하게 본다.[1]
공간적 대응도 중요하다. 자극의 위치와 요구되는 반응의 위치가 충돌하는 조건에서는 더 많은 오류가 발생할 수 있다는 연구가 있다.[3]
원칙은 간단하다.
사용자가 이미 배운 경험을 초기화시키지 않는다.
2. 이해를 잘못한 것과 손이 미끄러진 것은 다르다
사용자가 시스템을 오해해 잘못 판단할 수 있다.
반대로 의미는 정확히 알아도 잘못 누를 수 있다.
NN/g는 이를 대략 mistake와 slip으로 나눈다.[1]
저장이라고 생각했는데 실제로 삭제였다면 이해 문제다.
삭제인 줄 알지만 저장 버튼 바로 옆이라 반사적으로 눌렀다면 slip에 가깝다.
후자에게 “라벨을 잘 읽으세요”라고 하는 것은 약한 해결책이다.
특히 저장과 폐기, 전송과 취소, 10초 이동과 다른 페이지 이동처럼 결과의 크기가 전혀 다른 기능이 붙어 있으면 위험하다.
NN/g도 파괴적 행동과 확정 행동의 근접 배치가 오조작을 부를 수 있다고 지적한다.[4]
결과가 다르면 위치와 시각적 위계도 다르게 한다.
3. 확인창을 더 만들기 전에 되돌릴 수 있는지부터 본다
삭제, 탈퇴, 전체 삭제, 변경 폐기처럼 위험한 행동에는 확인창을 붙이고 싶어진다.
하지만 모든 일에 “정말 하시겠습니까?”를 띄우면 사람은 읽지 않고 확인을 누르는 법을 배운다.
NN/g는 확인창을 심각하고 되돌리기 어려운 작업에 제한하고, 결과를 구체적으로 보여주며, 가능하면 Undo를 제공하라고 권한다.[5]
“정말 삭제할까요? 예/아니오”보다
“3개 항목을 삭제합니다. 30일 동안 복구할 수 있습니다” “3개 삭제” “유지”
가 더 낫다.
친절한 UI는 실수를 없애겠다고 약속하는 대신, 실수의 비용을 낮춘다.
4. 버튼은 크기뿐 아니라 이웃과의 거리도 설계한다
WCAG 2.2의 Target Size (Minimum)은 포인터 대상이 원칙적으로 24×24 CSS 픽셀 이상이거나 충분한 간격을 갖도록 요구한다.[6]
W3C의 설명 예시 자체가 “Submit을 누르려다 Cancel을 눌렀다”이다.
Enhanced 기준은 44×44 CSS 픽셀을 제시하고, Apple도 일반적으로 44×44포인트 이상의 히트 영역을 권한다.[7][8]
하지만 모두 44로 키우면 끝나는 것은 아니다.
크기, 간격, 행동의 위험도, 사용 빈도, 화면 가장자리, 반대 기능의 근접성을 함께 봐야 한다.
큰 삭제 버튼과 큰 저장 버튼을 똑같은 모양으로 붙여 놓으면 여전히 함정이다.
5. “기능이 있다”와 “지금 보여준다”는 다른 결정이다
고기능 제품은 기능이 쌓인다.
듣기, 빠른 읽기, 북마크, 재생목록, 장 이동, 글 이동, 학습 모드, 설정, 오프라인 저장.
각 기능은 유용할 수 있다.
하지만 처음부터 전부 보여주면 기능 박람회가 된다.
단계적 공개는 처음에 자주 쓰는 핵심 기능만 보여주고, 드물거나 고급인 기능은 두 번째 단계로 보낸다. NN/g는 이를 학습성·효율·오류율 개선에 유용한 방식으로 설명한다.[9]
실전 원칙은 이것이다.
없애지 말고 접어라.
6. 선택지가 많으면 항상 나쁜가? 그렇지는 않다
Hick의 법칙은 선택 대안이나 불확실성과 반응 시간의 관계를 다루고 HCI의 중요한 기본 법칙으로 계속 언급된다.[10]
하지만 리뷰는 자극-반응 호환성, 연습, 매우 큰 선택 집합 등에서 단순한 관계가 달라질 수 있음을 정리한다.[10]
선택 과부하도 조건부다.
2010년 메타분석은 평균 효과가 거의 0에 가까웠고 연구 간 차이가 컸다.[11]
2015년 메타분석은 선택 집합의 복잡성, 과제 난도, 선호의 불확실성, 노력을 줄이려는 목표 등을 중요한 조절 요인으로 제시했다.[12]
따라서 “10개라서 나쁘다”가 아니다.
“차이를 알기 어려운 10개를 피곤한 사람에게 즉시 비교해 고르라고 한다”가 문제다.
시스템 안에는 많아도 된다. 그 순간 비교시키는 수는 작게 만든다.
7. 콘텐츠 사이트를 자기 감사했더니 똑같은 함정이 나왔다
7-1. 제목의 한 단어가 엉뚱한 다음 행동을 불렀다
AI 개발 경험 글 제목에 이사 관련 단어가 들어갔다는 이유로, 본문 전에 이사 행동 안내가 나왔다. 기계적 일치는 성공했지만 의미는 실패했다.
7-2. 10초 이동, 장 이동, 다른 글 이동이 한 줄에 있었다
결과의 크기가 전혀 다른 화살표 기능이 같은 조작대에 모였다. 국소 이동과 페이지 이동은 분리하는 편이 안전하다.
7-3. 같은 ‘글 검색’이 서로 다른 곳으로 갔다
같은 라벨이 다른 목적지로 가면 사용자가 배운 의미가 흔들린다.
7-4. 본문 전에 긴 목차를 전부 펼쳤다
긴 글에 목차는 필요하지만 17개 항목을 먼저 다 보여주면 읽기 전에 비교 과제가 생긴다.
7-5. 검색 결과에서 ‘전부 듣기’가 가장 강한 버튼이었다
강력한 기능이지만 보통의 검색 목적보다 특수 기능이 앞에 나왔다.
7-6. 글 끝에 추천, 순위, 검색, 뉴스레터, 작성자 정보가 몰렸다
모두 필요해도 같은 순간에 같은 우선순위로 보여줄 필요는 없다.
7-7. 알림 등록과 해제가 가까웠다
반대 결과를 만드는 행동이면 시각적 위계와 거리를 나누는 것이 좋다.
재미있는 점은 UX를 신경 쓰는 사이트도 자기 함정을 충분히 만든다는 것이다.
제작자는 기능의 뜻을 이미 안다. 처음 온 사람은 모른다.
8. 광고는 자동으로 나쁜 UX가 아니다. 읽기 과제를 빼앗지 않게 하면 된다
광고는 운영비를 만든다.
문제는 존재보다 주의 경쟁이다.
웹 광고의 시선 연구에서는 배너의 거리와 애니메이션 같은 특성이 시선 행동에 영향을 주었고, 특히 이해를 위한 읽기처럼 인지 자원을 많이 쓰는 과제에서 방해가 커질 수 있었다.[13]
따라서 글 페이지에서는 본문 전에 광고·플레이어·거대한 목차·가입 CTA를 겹쳐 쌓지 않고, 광고와 링크 사이의 오조작 거리도 확보하는 편이 좋다.
질문은 하나다.
이 페이지에 온 사람이 지금 하려는 일이 무엇인가?
9. 사람에게 친절한 UI/UX QC 체크
예측 가능성
- 같은 라벨이 같은 결과를 내는가
- 아이콘이 일반적 의미와 맞는가
- 이유 없이 플랫폼 관습을 뒤집지 않았는가
- 누르기 전에 결과를 대략 예상할 수 있는가
오조작
- 반대 행동이 붙어 있지 않은가
- 파괴적 행동이 주 행동만큼 강하게 보이지 않는가
- 실수를 되돌릴 수 있는가
- 확인창이 실제 결과를 구체적으로 말하는가
손가락과 포인터
- 중요한 버튼은 충분히 큰가
- 작은 버튼끼리 밀집하지 않았는가
- 화면 가장자리에서 조작하기 어렵지 않은가
정보량
- 지금 해야 할 한 가지가 보이는가
- 고급 기능을 처음부터 모두 펼치지 않았는가
- 긴 목차·필터·추천을 필요할 때 확장할 수 있는가
일관성
- 제품 안에서 같은 문법을 쓰는가
- 다른 제품에서 배운 유용한 기대를 이유 없이 깨지 않는가
10. 진짜 UX 개선은 ‘잘못 누른 직후’를 본다
클릭률만 보면 큰 버튼이 이기기 쉽다.
하지만 클릭됐다고 친절한 것은 아니다.
다음과 같은 수정 행동이 더 흥미롭다.
- 몇 초 안에 뒤로 감
- 켠 직후 끔
- 다른 페이지로 갔다가 즉시 돌아옴
- 같은 곳을 반복 클릭
- 오류 뒤 이탈
- 두 번째 시도에서 정상 완료
- 주요 콘텐츠에 도달하기까지 비정상적으로 오래 걸림
이 신호는 혼란의 증거가 아니라 단서다. 개인을 추적해 단정하지 말고 익명 집계로 본다.
가설 → 작은 변경 → 수정 행동 관측 → 좋아지면 유지 → 나빠지면 되돌리기
이렇게 닫힌 개선 루프를 만들면 된다.
11. 결론: 친절함은 설명을 늘리는 것이 아니라 함정을 줄이는 것이다
좋은 UI는 대개 눈에 띄지 않는다.
버튼이 눌린다. 뒤로 갈 수 있다. 예상한 곳에 예상한 기능이 있다.
나쁜 UI는 한 번의 오조작으로 갑자기 주인공이 된다.
“왜 거기에 취소가 있어?”
기계의 사설 문법을 사람에게 외우게 하지 말고, 사람이 이미 가진 예측에 기계가 맞추는 편이 낫다.
기능을 없앨 필요는 없다. 고급 기능도 유지할 수 있다. 광고도 필요하면 둘 수 있다. 글도 천 개 있어도 된다.
다만 지금 필요한 것을 먼저 보여주고, 반대 행동을 떨어뜨리고, 결과의 크기를 시각적 위계에 반영하고, 실패해도 돌아오게 만든다.
사람에게 친절한 UI/UX는 더 똑똑한 사용자를 요구하는 설계가 아니라, 평범한 사람이 평범하게 움직여도 사고가 적은 설계다.
- Nielsen Norman Group, “10 Usability Heuristics for User Interface Design nngroup.com
- Nielsen Norman Group, “Mental Models nngroup.com
- Christ et al. (2000) pubmed.ncbi.nlm.nih.gov
- Nielsen Norman Group, “Top 10 Application-Design Mistakes nngroup.com
- Nielsen Norman Group, confirmation dialogs nngroup.com
- W3C WAI, WCAG 2.2 “Target Size (Minimum) w3.org
- W3C WAI, WCAG 2.2 “Target Size (Enhanced) w3.org
- Apple Human Interface Guidelines, “Buttons developer.apple.com
- Nielsen Norman Group, “Progressive Disclosure nngroup.com
- Proctor & Schneider (2018) pubmed.ncbi.nlm.nih.gov
- Scheibehenne, Greifeneder & Todd (2010) doi.org
- Chernev, Böckenholt & Goodman (2015) doi.org
- Hervet et al pmc.ncbi.nlm.nih.gov
