UIUX디자인/디자인

[UX 평가 시리즈 #2] UX 체크리스트 – 닐슨 휴리스틱 10원칙

찐망고 2025. 7. 21. 15:25
반응형

 

안녕하세요, 찐망고입니다.


UX 평가 시리즈 두 번째 포스팅입니다.

 

지난 1편에서는 좋은 UX의 정의를
국제표준인 ISO 9241-11 기준으로 정리해봤습니다.

UX의 핵심은
✔ 효과성 (Effectiveness)
✔ 효율성 (Efficiency)
✔ 만족도 (Satisfaction)

이 세 가지 요소로 설명되었죠.

 

그렇다면 이제,
실제 UI 화면과 기능 하나하나를 어떻게 평가할 수 있을까요?

바로 그 질문에 답해주는 체크리스트가 있습니다.
닐슨의 10가지 UX 휴리스틱(Heuristics)인데요.

 

닐슨 휴리스틱이란?

1990년, UX 전문가 Jakob NielsenRolf Molich가 발표한
사용성 평가 기준 10가지입니다.

가장 기본이 되는 화면 인터페이스 점검 기준으로 자리 잡았죠.

 

닐슨의 10가지 UX 휴리스틱

1) Visibility of system status – 시스템 상태 가시성

  • 시스템이 지금 어떤 상태인지 사용자에게 항상 알려줘야 함
  • 예: 로딩 중 표시, 저장 완료 메시지, 진행률 바

2) Match between system and the real world – 시스템과 실제 세계의 일치

  • 사용자 언어와 사고방식에 맞춘 표현 사용
  • 마이크로 카피에 자주 적용되는 상황
구분 시스템 중심 표현 사용자 중심 표현
입력 필드 이메일을 입력하세요 받는 사람 이메일을 입력하세요
버튼/CTA 확인 신청완료하기, 장바구니에 담기
오류 메시지 404 not found 페이지를 찾을 수 없습니다.
상태 알림 업데이트 완료 최신 정보로 업데이트 
  • 국내서비스 예시
네이버 메일 "받는 사람" / "제목을 입력하세요"
카카오페이 “결제 완료” / “친구에게 송금”
배달의 민족 “받을 주소 설정하기” / “문 앞에 두고 가주세요”

 

3) User control and freedom – 사용자 통제와 자유

  • 실수했을 때 쉽게 복구할 수 있어야 함
  • 예: 실행 취소, 뒤로가기, 되돌리기 기능

4) Consistency and standards – 일관성과 표준

  • 같은 기능은 항상 같은 방식으로 보여야 함
  • 예: 실무에서 자주 나오는 UI 일관성 예시
예시 항목 잘된 일관성 사례
뒤로 가기 버튼 항상 좌측 상단에 위치, ← 아이콘 유지 (예: iOS 앱 대부분)
주요 네비게이션 바 모든 페이지 하단에 고정 (예: 인스타그램, 카카오톡)
버튼 스타일 같은 동작은 같은 컬러/모양 유지 (예: ‘확인’은 파란색, ‘취소’는 회색)
알림 메시지 항상 화면 상단 or 하단 고정 / 애니메이션 방식도 동일
폼 구성 이름–이메일–비밀번호 순서가 모든 페이지에 동일
앱 로딩 화면 일관된 로고 + 스피너 → 일관된 브랜드 인식 제공

 

5) Error prevention – 오류 방지

  • 아예 실수를 하지 않도록 설계하는 것이 중요
구분 설명 예시
삭제 전 확인 실수로 클릭했을 때 사고 방지 정말 삭제 하시겠어요? 확인 창
비밀번호 조건 안내 입력 전에 기준을 명확히 안내 영문+숫자 포함, 8자 이상
비활성화 버튼 입력이 완료되기 전엔 진행 불가 [가입하기] 버튼 비활성화 → 필수 항목 입력 후 활성화
자동완성/제안 오타나 잘못된 선택 방지 검색어 추천, 주소 자동완성
파일 업로드 제한 허용되지 않는 파일 막기 JPG/PNG만 업로드 가능합니다.
금액 입력 제한 허용 범위 외 입력 불가 처리 최소 금액은 1,000원 입니다 / 숫자외 입력차단
중복확인 아이디/이메일중복 여부 미리 체크 이미 사용 중인 이메일입니다. 실시간 안내

 

6) Recognition rather than recall – 기억보다 인지에 의존

  • 사용자가 기억하지 않아도 되도록 정보는 눈앞에 보여야 함
  • 예: 
구분 설명 예시
자동완성 사용자가 타이핑을 다 하기전에 예측 제공 검색창 자동완성, 주소 입력 추천
최근 항목 표시 사용자가 자주 사용한 항목을 다시 고를 수 있게 함 최근 본 상품, 최근 채팅방, 최근 입력주소
툴팁(Tooltip) 버튼이나 기능 위에 마우스를 올리면 설명 노출 아이콘 위에 설정, 삭제, 내보내기 같은 힌트
드롭다운에서
선택값 기억
이전에 선택했던 옵션을 기억하거나 추천 이전에 선택한 배송지,
최근 사용한 결제 수단
아이콘+텍스트 아이콘만으로 기능 파악이 어려울 때 텍스트 추가 예: 휴지통 아이콘 + 삭제, 연필 아이콘 + 편집
탭 유지 다시 방문해도 이전 탭 상태를 기억 예: 쇼핑몰 필터 적용 상태 유지, 브라우저 세션 저장

 

7) Flexibility and efficiency of use – 유연성과 효율성

  • 초보자와 전문가 모두를 배려한 설계
  • 예: 단축키 제공, 설정 커스터마이징
구분 초보자 UX 전문가 UX
복사/붙여넣기 마우스 우클릭 메뉴 Ctrl + C / Ctrl + V 단축키
작업 흐름 단계별 가이드 제공 (온보딩, 툴팁) 스킵옵션, 일괄처리 가능
설정 변경 기본 설정 값 추천 고급 사용자용 커스터마이징 (단축키설정)
입력 폼 드롭다운으로 보기 쉽게 선택 직접 입력 허용 or 자동완성
툴바/버튼 아이콘 + 텍스트로 구성 텍스트 생략, 아이콘만으로 최소 UI제공

 

8) Aesthetic and minimalist design – 미학적이고 절제된 디자인

  • 꼭 필요한 정보만, 시각적으로 깔끔하게 보여줘야 함
  • 예: 군더더기 없는 화면 구성, 정보 과잉 피하기
  • 추천 앱: 토스( 여백 많고, 텍스트 적고, CTA 한두 개만 존재 )
    노션(화면 구성 단순 / 기능 아이콘 최소화 )
    애플앱스토어(군더더기 없는 그리드형 카드 레이아웃)

9) Help users recognize, diagnose, and recover from errors – 오류 인식, 진단, 복구 지원

  • 에러가 발생했을 때 원인과 해결 방법을 안내
  • 예: 비밀번호가 너무 짧습니다(최소 8자)처럼 구체적 안내
비밀번호 입력 "입력 오류" "비밀번호는 최소 8자, 숫자/특수문자 포함해야 합니다"
결제 실패 "결제 실패" "카드 유효기간이 만료되었습니다. 카드 정보를 확인해 주세요"
주소 입력 "주소를 입력해 주세요" "도로명 또는 지번 주소를 입력해 주세요"
폼 입력 누락 "필수 입력 항목입니다" "이메일 주소를 입력해 주세요 (예: user@email.com)"
로그인 실패 "오류가 발생했습니다" "비밀번호가 틀렸습니다. 다시 확인해 주세요"

 

10) Help and documentation – 도움말과 문서 제공

  • 사용자가 막혔을 때 스스로 해결할 수 있게 도와야 함
  • 예: 자주 묻는 질문, 검색 가능한 가이드, 헬프센터 링크
결제 오류가 날 때 “결제 FAQ 보기” 버튼 제공
비밀번호 찾기 “비밀번호를 잊으셨나요?” 링크 바로 제공
기능 사용법 모를 때 "사용 가이드 보기", "빠른 시작 안내"
문의가 필요할 때 챗봇, 1:1 문의, 헬프센터 바로가기

 

정리하자면 닐슨 휴리스틱은 UI의 품질을 점검할 수 있는 UX체크리스트입니다.

대부분의 UX 문제는 런칭 전에 이 10가지를 점검했는지 여부에서 갈립니다.

실무에선 이 중 3~5가지만 골라
디자인 QA나 사용자 인터뷰 전에 활용해도 충분하겠죠?

 

UI를 잘 만들었는데도,
이탈률이 높거나 기능 사용률이 낮다면?
이제는 사용자의 행동 데이터를 통해 UX를 판단해야 할 차례입니다.

 

 

출처

Nielsen Norman Group – 10 Usability Heuristics for User Interface Design

 

10 Usability Heuristics for User Interface Design

Jakob Nielsen's 10 general principles for interaction design. They are called "heuristics" because they are broad rules of thumb and not specific usability guidelines.

www.nngroup.com

 

 

다음 3편에서는
구글이 만든 UX 측정 프레임워크,
HEART 모델을 정리할 예정

반응형