📚 지식 노트

사람이라는 처리 장치: 지각, 인지, 운동

HCI(인간–컴퓨터 상호작용)는 사람이 컴퓨터를 쓰는 과정을 연구하고 설계하는 분야이고, UX(사용자 경험)는 그 결과로 사람이 겪는 전체 경험을 가리키는 말로 많이 쓴다. 출발점은 사람을 하나의 처리 장치로 보는 것이다. 눈과 귀로 화면을 지각하고, 작업 기억에서 장기 기억과 맞춰 보며 인지(판단·결정)하고, 손을 움직여 운동(입력)한다. 입력이 화면을 바꾸면 다시 지각으로 돌아간다.

단계마다 한계가 있고, 이 노트의 법칙들은 대부분 그 한계를 숫자나 규칙으로 적은 것이다. 손이 목표에 닿는 시간은 피츠의 법칙, 고르는 시간은 힉의 법칙, 한 번에 머리에 담는 양은 작업 기억, 화면을 묶어 보는 방식은 게슈탈트 원리가 다룬다. 좋은 인터페이스는 이 한계를 넘으라고 요구하지 않는다.

피츠의 법칙: 크고 가까운 것이 빠르다

폴 피츠가 1954년에 발표한 피츠의 법칙은 포인터를 목표로 옮기는 시간이 목표까지의 거리 D와 목표의 폭 W에 달려 있다는 것이다. HCI에서 널리 쓰는 꼴은 스콧 매켄지가 제안한 섀넌 형식이다. 이동 시간 MT = a + b · log₂(D/W + 1)이고, 로그 부분을 난이도 지수(ID, 단위는 비트)라 한다. a와 b는 장치(마우스·손가락·펜)와 사람에 따라 실험으로 맞추는 상수다.

로그이므로 거리가 두 배가 되거나 폭이 절반이 되어도 시간은 일정량씩만 는다. 예를 들어 거리 400, 폭 20인 버튼의 폭을 40으로 넓히면 난이도가 0.93비트 줄어든다. 실무 교훈은 단순하다. 자주 누르는 것은 크게, 함께 쓰는 것은 가까이 둔다. 아이콘에 글자를 붙이고 줄 전체를 누를 수 있게 하며, 제출 버튼은 마지막 입력 칸 옆에, 문맥 메뉴는 누른 자리 근처에 띄운다.

마우스에는 특별한 자리가 있다. 화면 가장자리와 모서리에서는 포인터가 벽에 막혀 멈추므로, 거기 놓인 목표는 진행 방향으로 사실상 무한히 크다. macOS 메뉴 막대가 화면 맨 위에, Windows 작업 표시줄이 맨 아래에 있는 이유로 자주 든다. 다만 터치 화면에는 이 이점이 없다. 손가락은 화면 밖에서 멈춰 주지 않고, 오히려 가장자리 목표가 더 느렸다는 결과가 있다.

힉의 법칙: 고를 것이 많으면 느리다

윌리엄 힉(1952)과 레이 하이먼(1953)의 실험에서 나온 힉의 법칙(힉–하이먼 법칙)은 확률이 같은 선택지가 n개일 때 반응 시간이 log₂(n + 1)에 비례한다는 것이다. 1을 더하는 것은 "반응할지 말지"라는 불확실성까지 셈에 넣기 위해서다. 이것도 로그라서, 선택지를 1개에서 3개, 7개, 15개로 거의 두 배씩 늘릴 때마다 시간은 한 칸씩만 는다.

단서가 중요하다. 이 법칙은 사용자가 선택지를 이미 알고 있어 "어느 것인가"만 정하면 될 때의 이야기다. 처음 보는 메뉴를 무작위 순서로 훑어 찾는 일은 항목 수에 거의 비례해 길어진다. 그래서 실무에서는 법칙의 숫자보다 방향을 쓴다. 빨리 골라야 하는 곳에서는 선택지를 줄이고, 추천 항목을 눈에 띄게 하며, 복잡한 일은 단계로 나누고, 기능은 필요해질 때 조금씩 드러낸다. 반대로 너무 줄여 무엇을 고르는지 모호해지면 그것도 실패다. 긴 목록은 알파벳·가나다순으로 두면 사용자가 반씩 잘라 찾을 수 있다.

작업 기억: 7±2라는 신화와 약 4묶음

"사람은 한 번에 7±2개를 기억한다"는 말은 조지 밀러의 1956년 논문에서 왔고, 메뉴 항목을 일곱 개로 제한하라는 식의 설계 규칙으로 퍼졌다. 그러나 이후 연구는 이 수가 대략의 길잡이였다고 본다. 넬슨 카원은 2001년 리뷰 논문에서 밀러의 7은 대략의 길잡이였을 뿐이고, 단기 기억의 중심 용량은 그보다 작은 평균 약 네 덩어리라는 증거가 강하다고 정리했다. 또 하나의 오해는 이 한계를 화면에 보이는 항목 수에 적용하는 것이다. 메뉴는 눈앞에 있으니 기억할 필요가 없다. 한계가 문제되는 것은 사용자가 화면을 넘어 머리에 들고 가야 하는 것이다.

그래서 설계 원칙은 "기억하게 하지 말고 알아보게 하라"다. 앞 화면에서 본 인증 코드를 다음 화면에서 입력하게 하지 말고 붙여넣기나 자동 채우기를 허락하고, 긴 숫자는 끊어 보여 주며, 여러 단계의 양식에서는 앞에서 고른 값을 요약해 계속 보여 준다. 닐슨의 여섯 번째 휴리스틱(아래)도 같은 이야기다.

게슈탈트 원리: 화면을 묶어 보는 방식

20세기 전반의 게슈탈트 심리학자들은 사람이 낱낱의 요소를 어떻게 무리로 묶어 보는지 연구했다. 처음에 나온 원리로 근접(가까운 것끼리), 유사(색·모양이 닮은 것끼리), 폐쇄(끊긴 선을 이어 닫힌 모양으로)가 있고, 같은 테두리 안의 것끼리 묶는 공통 영역 같은 원리가 나중에 더해졌다.

화면 설계에서 가장 힘이 센 것은 근접이다. 닐슨 노먼 그룹의 정리대로 근접은 색이나 모양의 닮음 같은 다른 단서를 이길 만큼 강하다. 그래서 입력 칸의 이름표는 아래 칸보다 자기 칸에 더 가깝게 두고, 관련된 칸은 무리로 모으며, 관계없는 버튼 사이에는 여백을 둔다. 관계없는 것을 한데 모으면 그 안에 든 버튼이 묻히고, 관련된 것이 멀리 떨어지면 하나를 못 보고 지나친다. 반응형 레이아웃에서 좁은 화면으로 바뀔 때 묶음이 깨지지 않는지도 확인해야 한다.

노먼의 행동 단계, 어포던스, 시그니파이어

돈 노먼의 『The Design of Everyday Things』(2013년 개정판)는 사람이 무언가를 할 때 거치는 행동 7단계를 제시한다. 목표를 세우고, 실행 쪽 세 단계(계획 → 구체화 → 실행)로 세상을 바꾼 뒤, 평가 쪽 세 단계(지각 → 해석 → 비교)로 결과를 목표와 견준다. 사용자가 막히는 곳은 둘 가운데 하나다. 무엇을 어떻게 해야 할지 모르는 실행의 간극, 한 일이 제대로 됐는지 모르는 평가의 간극이다.

실행의 간극을 메우는 개념이 어포던스와 시그니파이어다. 어포던스는 물건과 사람 사이에 가능한 행동(판은 밀 수 있고, 손잡이는 잡아당길 수 있다)이고, 시그니파이어는 그 행동이 어디서 가능한지 알려 주는 신호다. 노먼은 개정판에서 시그니파이어 개념을 더해 둘을 구분했다. 화면의 평평한 글자는 누를 수 있어도(어포던스) 누를 수 있다는 신호가 없으면 누르지 않는다. 테두리·밑줄·색·커서 모양이 시그니파이어다. 평가의 간극은 피드백이 메운다. 누르면 눌린 모습이 보이고, 저장하면 저장됐다고 알려 준다.

닐슨의 사용성 휴리스틱 10가지

야콥 닐슨이 1994년에 정리한 사용성 휴리스틱은 규칙이라기보다 넓은 경험칙이다. 2020년에 설명과 예를 다듬었지만 항목 열 개는 처음 그대로다. 평가자 몇 명이 화면을 하나씩 훑으며 각 항목을 어기는 곳을 적는 휴리스틱 평가는 사용자를 모으지 않고도 할 수 있는 싸고 빠른 점검이다.

• 시스템 상태: 지금 무슨 일이 일어나는지 알맞은 때에 알린다(업로드 진행률, "저장됨").
• 현실 세계와의 일치: 사용자의 말과 순서를 쓴다. 내부 오류 코드 대신 "카드 유효기간이 지났습니다".
• 통제와 자유: 실수로 들어간 곳에서 나갈 비상구를 둔다. 실행 취소, 뒤로 가기, 취소 버튼.
• 일관성과 표준: 같은 것은 같은 이름·모양으로, 다른 앱들이 하는 관례를 따른다.
• 오류 예방: 오류 메시지보다 오류가 안 나게 하는 것이 낫다. 날짜는 달력에서 고르게 하고, 되돌릴 수 없는 일은 한 번 더 확인한다.
• 기억보다 알아보기: 필요한 정보와 선택지를 보이게 둔다(위 작업 기억 절).
• 유연성과 효율: 처음 쓰는 사람에게는 쉬운 길, 숙련자에게는 단축키·제스처 같은 지름길.
• 미적이고 군더더기 없는 설계: 덜 중요한 정보 하나하나가 중요한 정보와 주의를 다툰다.
• 오류를 알아보고 고치게 돕기: 무엇이 잘못됐고 어떻게 고치는지 쉬운 말로.
• 도움말과 문서: 없어도 쓸 수 있는 게 가장 좋지만, 필요할 때 찾기 쉬운 곳에 작업 중심으로 둔다.

응답 시간의 한계: 0.1초, 1초, 10초

얼마나 빨라야 "빠르다"고 느낄까. 닐슨은 1993년 책 Usability Engineering에서, 밀러(1968)와 카드 등(1991)의 연구를 바탕으로 세 한계를 정리했다. 그는 이 조언이 수십 년 동안 거의 바뀌지 않았다고 말한다. 기술이 아니라 사람의 지각에 묶인 숫자이기 때문이다.

• 0.1초: 시스템이 즉시 반응한다고 느끼는 한계다. 결과만 보여 주면 되고 따로 피드백이 필요 없다. 키 입력, 끌기, 버튼이 눌린 모습은 이 안이어야 한다.
• 1초: 지연을 알아채지만 생각의 흐름은 끊기지 않는 한계다. 1초 아래면 대개 특별한 표시가 필요 없다.
• 10초: 주의를 붙잡아 둘 수 있는 한계다. 이보다 길면 사용자는 다른 일로 넘어가므로, 언제 끝나는지 알려 주는 피드백(진행률)이 필요하다.

체감 속도는 실제 속도와 다르다. 버튼이 눌린 모습을 0.1초 안에 먼저 보여 주고 결과는 뒤에 채우거나, 서버 응답을 기다리지 않고 성공을 가정해 화면을 먼저 바꾸는 낙관적 갱신, 빈 화면 대신 자리 모양을 먼저 그리는 기법이 모두 이 한계를 쓴다. 웹 쪽 지표(INP 등)는 웹 개발 노트, 프레임 단위의 예산은 모바일 앱 개발 노트에 있다.

0.1초와 1초 사이에는 도허티 문턱이 자주 인용된다. 1982년 IBM의 월터 도허티와 아르빈드 타다니가 IBM Systems Journal 논문에서, 당시 기준이던 2초 대신 400ms 안에 응답해야 한다고 주장한 데서 왔다. Laws of UX는 이것을 “사람과 컴퓨터가 서로를 기다리지 않는 400ms 아래의 속도에서 생산성이 치솟는다”고 요약한다(Doherty Threshold). 닐슨의 세 한계와 다투는 숫자가 아니라, 주고받기가 이어지는 작업에서는 1초보다 훨씬 빨라야 흐름이 산다는 같은 이야기다.

자주 인용되는 UX 법칙: 야콥, 테슬러, 피크엔드

피츠·힉 말고도 디자인 토론에서 이름으로 불리는 법칙이 몇 있다. 실험식이라기보다 경험칙이라, 숫자를 주기보다 판단의 방향을 정해 준다.

• 야콥의 법칙(Jakob's law): 사용자는 대부분의 시간을 다른 사이트에서 보낸다. 그래서 내 사이트도 이미 아는 다른 사이트들처럼 동작하기를 바란다. 야콥 닐슨이 이름 붙였다(Jakob's Law). 장바구니 아이콘의 자리, 로고를 누르면 홈으로 가는 동작처럼 굳은 관례를 새로 발명하면 배우는 비용을 사용자에게 떠넘긴다. 크게 바꿀 때는 한동안 옛 화면을 고를 수 있게 하는 것도 방법이다.
• 테슬러의 법칙(복잡성 보존의 법칙): 어떤 시스템이든 줄일 수 없는 복잡성이 있고, 그 몫은 시스템이나 사용자 중 누군가가 진다. 1980년대 중반 제록스 PARC의 래리 테슬러가 말했다(Tesler's Law). 주소 입력을 칸 하나로 줄이면 그 복잡성은 사라지지 않고 서버의 주소 해석으로 옮겨 간다. 단순한 화면은 대개 누군가 그 뒤에서 복잡성을 떠안은 결과다.
• 피크엔드 법칙: 사람은 경험을 매 순간의 평균이 아니라 가장 강렬했던 순간과 마지막 순간으로 기억한다. 근거는 대니얼 카너먼 등의 1993년 실험이다(NN/g: The Peak–End Rule). 결제 완료 화면, 오류가 난 순간의 안내처럼 끝과 최악의 지점을 특히 다듬는다. 부정적인 경험이 더 생생하게 남는다는 점도 함께 기억한다.

사용자 조사와 평가: 인터뷰, 관찰, 사용성 테스트

사람들이 무엇을 말하는지와 실제로 무엇을 하는지는 다르다. 그래서 조사 방법을 섞어 쓴다. 인터뷰는 사용자의 목표·맥락·불만을 이해하는 데 좋지만, 미래의 행동("이 기능이 있으면 쓰겠어요")에 대한 답은 믿기 어렵다. 관찰(현장 조사)은 사람들이 실제 환경에서 일하는 모습을 보며 말로 나오지 않는 우회 방법과 불편을 찾는다. 사용성 테스트는 대표 사용자에게 실제 과제("이 상품을 장바구니에 담고 주문해 보세요")를 주고 생각을 말하며 해 보게 한 뒤, 어디서 막히는지 지켜본다. 진행자는 돕거나 유도하지 않는 것이 핵심이다.

몇 명이면 될까. 닐슨이 쓴 모델에서 한 사용자가 찾는 문제의 비율을 L이라 하면, n명이 함께 찾는 비율은 1 − (1 − L)ⁿ이다. 닐슨은 여러 프로젝트에서 평균 L이 31%였다고 보고한다. 이 공식으로 다섯 명이면 약 84%(닐슨은 곡선에서 85%로 읽었다), 열다섯 명이면 99.6%다.

닐슨의 권고는 그래서 "15명을 한 번에"가 아니라 "5명씩 세 번, 그 사이에 고치기"다. 처음 다섯 명이 찾은 큰 문제를 고치고 나면, 다음 다섯 명은 그 문제에 가려 있던 새 문제를 찾는다. 단서도 있다. L은 제품과 과제에 따라 크게 다르고, 사용자 무리가 뚜렷이 다르면(예: 판매자와 구매자) 무리마다 따로 테스트해야 한다. 그리고 이것은 문제를 찾는 질적 테스트의 이야기다. "B안이 더 많이 팔리나" 같은 양적 질문에는 훨씬 많은 사람이 필요하다.

A/B 테스트

A/B 테스트는 실제 사용자를 무작위로 둘로 나눠 한쪽에는 지금 화면(A), 다른 쪽에는 바꾼 화면(B)을 보이고, 미리 정한 지표(전환율, 이탈률 등)를 견주는 실험이다. 무작위로 나누었으므로 두 무리의 차이는 화면 탓이거나 우연 탓이고, 통계 검정은 그 차이가 우연(노이즈)으로 설명되기 어려운지를 묻는다.

• 미리 정한다. 주 지표, 필요한 표본 크기, 기간을 시작 전에 정한다. 결과를 매일 들여다보다 유리할 때 멈추면 우연한 차이를 성과로 착각하기 쉽다.
• 지표를 여럿 보면 무엇이든 하나는 걸린다. 주 지표는 하나로 두고, 나머지는 해치지 않았는지 보는 보호 지표로 둔다.
• 단기 지표의 함정. 버튼을 요란하게 하면 클릭은 늘어도 반품과 이탈이 늘 수 있다. 아래 다크 패턴 절이 그 끝이다.

표본 크기·유의성·신뢰 구간을 계산하는 통계는 데이터 엔지니어링 노트의 통계 기초 절에서 다룬다.

접근성: 모두가 쓸 수 있게

접근성은 시각·청각·운동·인지 장애가 있는 사람도 쓸 수 있게 만드는 일이다. 장애는 영구적인 것만이 아니다. 팔을 다친 사람, 햇빛 아래서 화면을 보는 사람, 한 손에 짐을 든 사람도 같은 혜택을 본다. 화면 낭독기가 읽을 수 있는 구조, 키보드만으로 하는 조작, 충분한 명도 대비, 색에만 기대지 않는 정보 전달이 기본이다. 웹의 시맨틱 HTML·ARIA·WCAG는 웹 개발 노트의 접근성 절에 있고, 색만으로 구분한 화면이 색각 이상인 사람에게 어떻게 보이는지는 이 사이트의 색각 이상 시뮬레이터로 직접 볼 수 있다.

손가락에는 피츠의 법칙이 더 엄격하다. 플랫폼 지침이 터치 목표의 크기를 정해 둔 이유다. 애플의 휴먼 인터페이스 가이드라인은 iOS·iPadOS 컨트롤의 기본 크기를 44×44pt(최소 28×28pt)로 두고, 구글의 안드로이드 접근성 도움말은 터치 목표를 최소 48×48dp로 하라고 하며 이것이 화면 크기와 상관없이 약 9mm라고 적는다. 웹의 WCAG 2.2는 AA 기준으로 최소 24×24 CSS px를 요구하되, 간격이 충분하거나 같은 기능의 다른 컨트롤이 있으면 예외로 둔다. 실제 픽셀로는 44pt가 @3x 화면에서 132px, 48dp가 xxhdpi에서 144px다.

다크 패턴과 윤리

사용자를 돕는 데 쓰는 지식은 사용자를 속이는 데도 쓸 수 있다. 사용자가 원하지 않는 일을 하도록 유도하는 설계를 다크 패턴(요즘은 기만적 설계 패턴)이라 한다. 이 유형들을 모아 온 deceptive.design(옛 이름 darkpatterns.org)은 몰래 끼워 넣기, 강제 행동, 어려운 해지, 사전 선택, 방해, 숨은 구독, 숨은 비용, 헷갈리는 문구, 시각적 방해, 가짜 사회적 증거, 가짜 긴급함, 끈질긴 재촉, 가짜 희소성, 광고 위장, 컨펌셰이밍, 비교 방해 등을 꼽는다.

다크 패턴은 A/B 테스트에서 "이긴다". 미리 체크된 동의 칸은 동의율을 올리고, 해지 단계를 늘리면 해지율이 내려간다. 그래서 지표만 보는 조직에서는 저절로 자라난다. 막는 방법은 지표에 사용자의 이익을 넣는 것이다. 해지하기가 가입하기만큼 쉬운지, 선택 항목이 기본으로 꺼져 있는지, 거절 버튼이 승낙 버튼과 같은 무게인지를 리뷰 점검표에 둔다. 사용자가 나중에 속았다고 느끼면 그 비용은 신뢰와 평판으로 돌아온다. 접근성과 마찬가지로, 사용자를 존중하는 설계는 선의가 아니라 기본 품질이다.

핵심 자료

웹 접근성은 웹 개발 노트, 터치 화면의 단위와 프레임 예산은 모바일 앱 개발 노트, 색각 이상 화면은 색각 이상 시뮬레이터에서 볼 수 있다.