컴퓨터공학 300 주제 시리즈의 288번째 글이다. 전체 지도는 여기.

한 줄 요약

좋은 인터페이스는 할 수 있는 일이 보이고(가시성·신호), 한 일의 결과를 알려 주고(피드백), 실수를 막거나 되돌릴 수 있게(제약·복구) 한다. 이 원칙들은 사람의 지각·기억·운동 특성에서 나온다.

왜 필요한가

UI 를 만들 때 “예쁘게”는 목표가 아니다. 사용자가 헤매지 않고, 실수하지 않고, 실수해도 복구하게 하는 것이 목표다. 원칙을 모르면 다음 일이 반복된다.

  • 저장했는지 알 수 없어 사용자가 버튼을 세 번 누른다(중복 요청).
  • “삭제”와 “저장” 버튼이 같은 모양으로 붙어 있어 실수로 지운다.
  • 화면마다 “확인” 위치가 달라 손이 엉뚱한 곳으로 간다.
  • 오류 메시지가 “Error 500” 뿐이라 사용자가 뭘 해야 할지 모른다.

이것들은 디자이너만의 문제가 아니다. 버튼 비활성화, 중복 제출 방지, 오류 메시지 문구, 되돌리기 기능은 개발자가 구현한다.

핵심 개념

Norman 의 기본 개념

Don Norman 의 The Design of Everyday Things 는 상호작용 설계의 기본 어휘를 정리했다.

개념 뜻 UI 예
어포던스(affordance) 대상과 사람 사이에 가능한 행동의 관계 화면 요소는 클릭이 가능하다
신호(signifier) 어디서 무엇을 할 수 있는지 알려 주는 단서 버튼 모양, 밑줄 링크, 커서 변화
매핑(mapping) 조작과 결과의 대응 관계 슬라이더를 오른쪽으로 → 값 증가
피드백(feedback) 행동의 결과를 즉시 알림 눌림 상태, 진행 표시, 저장 완료 메시지
제약(constraints) 가능한 행동을 제한해 실수를 막음 날짜 선택기, 입력 형식 마스크
개념 모델(conceptual model) 사용자가 시스템이 어떻게 동작한다고 이해하는 방식 “폴더 안에 파일이 있다”

Norman 은 개정판에서 화면 디자인에서 중요한 것은 어포던스 자체보다 신호라고 강조했다. 평평한 디자인에서 클릭 가능한 글자와 그냥 글자가 구분되지 않는 문제가 신호 부족이다.

실행의 간극과 평가의 간극

사용자는 목표를 행동으로 옮기고(실행), 결과를 보고 목표가 이뤄졌는지 판단한다(평가).

목표 --> [실행의 간극] "어떻게 하지?" --> 시스템
목표 <-- [평가의 간극] "됐나?"       <-- 시스템

실행의 간극은 신호·매핑·제약으로 좁힌다. 평가의 간극은 피드백과 상태 표시로 좁힌다.

Shneiderman 의 8가지 황금률

Ben Shneiderman 의 교과서 Designing the User Interface 가 제시한 규칙이다.

  1. 일관성을 지켜라.
  2. 보편적 사용성을 추구하라(초보와 숙련자, 다양한 사용자).
  3. 유익한 피드백을 줘라.
  4. 작업 종결을 알리는 대화를 설계하라.
  5. 오류를 예방하라.
  6. 행동을 쉽게 되돌릴 수 있게 하라.
  7. 사용자가 통제한다고 느끼게 하라.
  8. 단기 기억 부담을 줄여라.

앞 글의 Nielsen 휴리스틱과 상당 부분 겹친다. 서로 다른 연구자가 비슷한 결론에 도달했다는 점이 이 원칙들의 근거다.

Fitts 의 법칙: 크고 가까우면 빠르다

Paul Fitts 는 1954년 목표를 가리키는 운동 시간이 거리와 크기의 비에 로그로 비례함을 보였다. HCI 에서 흔히 쓰는 Shannon 형식은 다음과 같다.

MT = a + b * log2(D / W + 1)
  MT: 이동 시간,  D: 목표까지 거리,  W: 이동 방향의 목표 너비
  a, b: 장치와 사람에 따라 실험으로 구하는 상수
  log2(D/W + 1): 난이도 지수(ID, 비트)

설계에 주는 함의는 분명하다.

  • 자주 누르는 버튼은 크게, 가까이 둔다.
  • 화면 가장자리와 모서리는 마우스가 넘어가지 않아 사실상 너비가 무한대다. 데스크톱 메뉴바가 화면 맨 위에 있으면 빠르게 맞힐 수 있다.
  • 터치 화면에서는 손가락이 마우스 커서보다 부정확하므로 최소 크기가 중요하다. WCAG 2.2 의 성공 기준 2.5.8 은 터치 대상 최소 24x24 CSS 픽셀을 요구하고(예외 있음), Android 접근성 지침은 48dp 이상을 권장한다.

기억보다 인식, 그리고 선택지의 수

사람의 작업 기억은 작다. 명령어를 외우게 하는 대신 메뉴로 보여 주면(인식) 부담이 준다. 대신 선택지가 많아지면 고르는 시간이 늘어난다. 그래서 자주 쓰는 것을 위에, 드문 것을 “더 보기” 아래에 둔다. 숙련자에게는 단축키를 제공해 두 요구를 동시에 만족시킨다.

오류 메시지 설계

좋은 오류 메시지는 세 가지를 담는다.

나쁜 예:  Error: invalid input
좋은 예:  전화번호 형식이 맞지 않습니다. 숫자만 10~11자리로 입력하세요. (예: 01012345678)
          [무엇이 잘못됐나]           [어떻게 고치나]                [예시]

사용자를 탓하는 말투, 내부 예외 이름, 스택 트레이스는 화면에 내보내지 않는다. 스택 트레이스 노출은 보안 문제이기도 하다.

직접 해 보기

Fitts 의 법칙으로 버튼 배치 네 가지의 상대적 이동 시간을 비교한다. 상수 a, b 는 설명을 위한 가정값이다. 실제 값은 장치와 사용자 실험으로 구한다.

import math

# MT = a + b * log2(D / W + 1). a, b 는 설명용 가정값이다.
a, b = 0.1, 0.15   # 초, 초/비트

def movement_time(D, W):
    ID = math.log2(D / W + 1)          # 난이도 지수(비트)
    return ID, a + b * ID

cases = {
    "가까운 큰 버튼  (D=100, W=48)": (100, 48),
    "가까운 작은 아이콘(D=100, W=16)": (100, 16),
    "먼 큰 버튼     (D=800, W=48)": (800, 48),
    "먼 작은 아이콘  (D=800, W=16)": (800, 16),
}
for name, (D, W) in cases.items():
    ID, mt = movement_time(D, W)
    print(f"{name}: ID={ID:.2f} bit, 예상 {mt * 1000:.0f} ms")

실행 결과다.

가까운 큰 버튼  (D=100, W=48): ID=1.62 bit, 예상 344 ms
가까운 작은 아이콘(D=100, W=16): ID=2.86 bit, 예상 529 ms
먼 큰 버튼     (D=800, W=48): ID=4.14 bit, 예상 721 ms
먼 작은 아이콘  (D=800, W=16): ID=5.67 bit, 예상 951 ms

절대값은 가정이지만 순서와 비율은 법칙에서 나온다. 거리를 8배 늘리는 것과 크기를 3분의 1로 줄이는 것이 모두 비용을 올린다. 하루 수백 번 누르는 버튼이라면 이 차이가 쌓인다. 반대로 “전체 삭제”처럼 실수로 누르면 안 되는 버튼은 일부러 멀리 두고 확인 단계를 둔다. Fitts 의 법칙을 거꾸로 쓰는 셈이다.

현업에서는

  • 폼 제출 버튼은 요청 중에 비활성화하고 진행 상태를 보여 준다. 피드백이 없으면 사용자는 다시 누르고, 서버는 중복 주문을 받는다. 서버 쪽에서도 멱등성 키로 막는 것이 정석이지만, UI 피드백이 첫 방어선이다.
  • 파괴적 작업에는 “정말 삭제?” 확인창보다 되돌리기가 나은 경우가 많다. 확인창은 습관적으로 누르게 된다. 휴지통, 지연 삭제, “실행 취소” 토스트가 그 예다. kubectl delete 처럼 되돌리기가 없는 CLI 에서는 --dry-run 같은 미리보기가 같은 역할을 한다.
  • CLI 도 인터페이스다. 일관된 플래그 이름, --help 의 예시, 실패 시 다음 행동을 알려 주는 메시지, 0이 아닌 종료 코드는 모두 위 원칙의 CLI 버전이다.
  • 플랫폼 지침(Apple HIG, Material Design)은 이 원칙들을 각 플랫폼의 관례로 구체화한 것이다. 플랫폼 관례를 따르면 사용자가 다른 앱에서 배운 것을 그대로 쓴다. 일관성 원칙이다.

확인 문제

  1. 어포던스와 신호(signifier)의 차이를 UI 예로 설명하라.
  2. 결제 버튼을 누른 뒤 아무 변화가 없으면 어떤 원칙이 깨진 것이고, 어떤 기술적 문제가 이어질 수 있나?
  3. Fitts 의 법칙에서 화면 모서리가 유리한 이유는?
  4. 파괴적 작업에서 확인 대화상자보다 되돌리기가 나을 수 있는 이유는?

풀이

  1. 어포던스는 가능한 행동 자체(그 요소는 클릭할 수 있다), 신호는 그 가능성을 알려 주는 단서(버튼 테두리, 커서 모양)다. 클릭은 되지만 그냥 글자처럼 보이면 어포던스는 있고 신호가 없다.
  2. 피드백(시스템 상태의 가시성) 원칙이다. 사용자가 반복해서 눌러 중복 요청·중복 결제가 생길 수 있다.
  3. 포인터가 가장자리에서 멈추므로 그 방향의 실질적 목표 너비가 매우 커져 난이도 지수가 낮아진다.
  4. 확인창은 자주 보면 습관적으로 통과하게 되어 실수를 막지 못한다. 되돌리기는 실수 후에도 복구할 수 있다.

더 읽을거리 (References)

  • W3C WAI, Understanding SC 2.5.8: Target Size (Minimum)
  • Android Accessibility Help, Touch target size
  • P. M. Fitts, “The information capacity of the human motor system in controlling the amplitude of movement,” Journal of Experimental Psychology, 47(6), 381–391, 1954.
  • D. Norman, The Design of Everyday Things, Revised and Expanded Edition, Basic Books, 2013.