비전공자를 위한 UI 디자인 기초 (2): UI 디자인 원칙, 사용성 휴리스틱

UI 디자인 원칙, 사용성 휴리스틱으로 좋은 UI를 구분하는 법. 닐슨 10가지 원칙과 1분 체크리스트로 내 서비스 사용성을 직접 점검해 보세요.

코드잇

Nov 25, 2025

비전공자를 위한 UI 디자인 기초 (2): UI 디자인 원칙, 사용성 휴리스틱

Contents

사용성이 뭐예요?사용성 휴리스틱은 뭐예요?사용성 점검해보기

UI 디자인 공부를 시작한 비전공자라면 반드시 알아야 할 지식 2편

지난 시간에는 디자인 씽킹, 사용자 중심 디자인을 통해 디자이너처럼 생각하는 법을 배웠죠. 오늘은 다음 단계인 좋은 UI를 판단하게 해 줄 원칙, 사용성 휴리스틱에 대해 알려드릴게요.

사용성은 무엇이고, 또 휴리스틱은 무엇인지, 실제 UI에는 어떻게 적용하면 되는지 함께 알아 보아요.

사용성이 뭐예요?

“사용자가 목표를 얼마나 효과적·효율적·만족스럽게 달성할 수 있는가“

국제적인 디자인 교육 재단 Interaction Design Foundation은 위와 같이 정의하며 사용성의 3가지 요소를 제시했어요.

📱

사용성의 3 요소

효과성 – 원하는 일을 제대로 해낼 수 있는가?

효율성 – 불필요한 클릭/페이지 전환 없이 빠르게 끝낼 수 있는가?

만족도 – 덜 짜증나고, 다시 쓰고 싶은 느낌이 드는가?

예를 들어, 처음 들어간 웹사이트에서 회원가입 버튼을 금방 찾고, 몇 번의 클릭 만으로 가입을 마쳤으며, 그 과정이 만족스러웠다면 사용성이 좋은 서비스라고 할 수 있어요. 여러분이 자주 사용하는 토스가 사용성이 좋은 걸로 유명하죠.

실제로 사용성은 미국 정부의 디지털 가이드라인에도 적혀있을 만큼 제품과 서비스에서 매우 중요한 기준이에요.

사용성 휴리스틱은 뭐예요?

✅

먼저, 휴리스틱이란?

원칙이라고 생각하면 되는데, 반드시 딱 맞아 떨어지기 보다는 “보통 그렇더라” 정도의 느슨한 원칙을 얘기해요.

디자인에서도 사용성을 높여주는 원칙들이 존재하고 이를 사용성 휴리스틱이라고 불러요.

그 중에서도 가장 유명한 건 닐슨의 10가지 사용성 휴리스틱이에요. 1994년 실제 사용성 문제 249개를 분석해 만들어졌죠. 약 30년이 지난 지금까지 여러 디자인 회사와 교육기관에서 가르치고 있을 정도로 UI 디자인의 표준 원칙이라고 불려요.

지금부터 각 원칙들을 쉬운 예시와 함께 하나씩 살펴 볼게요.

1. 시스템 상태의 가시성

💡

사용자가 지금 무슨 일이 일어나고 있는지 알 수 있어야 해요

예시: 파일 업로드 진행률 바(%)

2. 현실과의 일치

💡

컴퓨터 용어 말고, 사람이 쓰는 언어로 말해야 해요

예시: 삭제 대신 ‘휴지통 비우기’

3 사용자의 자유와 통제

💡

사용자가 실수해도 되돌리거나 취소할 수 있어야 해요.

예시: 구글의 이메일 전송 취소하기

4. 일관성과 표준

💡

비슷한 것들은 항상 같이 행동해야 해요.

예시: 링크는 같은 색과 밑줄 스타일로 표시

5. 오류 예방

💡

오류 메시지를 잘 쓰기 보다, 애초에 실수를 줄이도록 만들어요.

예시: “제거하시겠습니까?” 한 번 더 확인

6. 떠올리기보단 보여주기

💡

필요한 정보라면 사용자가 떠올리게 만들지 말고, 그냥 보여줘요.

예시: 최근 검색어 보여주기

7. 유연성과 사용 효율

💡

초보자에게 쉬운 것도 중요하지만, 숙련자는 더 빠르게 쓸 수 있도록 해줘야 해요.

예시: 노션의 슬래시(/) 키보드 단축키

8. 심미적이고 최소한의 디자인

💡

불필요한 정보는 줄이고 필요한 정보만 보여줘요.

예시: 첫 화면은 한 가지 핵심 메시지(모든 IT 강의를 무제한으로)와 CTA(모든 강의 보러가기)만 노출

*CTA(Call To Action): 사용자에게 특정 행동을 수행하도록 유도하는 장치/버튼

9. 정확한 오류 인식·진단·회복 지원

💡

에러가 났을 때 무슨 일인지, 어떻게 해결하는지 쉽게 알려줘야 해요.

예시: 단순 에러 메시지 대신 “앱을 껐다 켜거나 삭제하고 다시 설치해주세요”

10. 도움말과 문서

💡

사용성을 높이기 위한 간단한 도움말을 넣어줘요

예시: 기능별 짧은 튜토리얼, FAQ, 검색 가능한 도움말 센터

사용성 점검해보기

그럼 이제 이 10가지 원칙들을 실제로 적용해 볼까요?

여러분이 좋아하는 서비스를 아무거나 하나 골라 아래의 리스트를 채워 보세요! 떠오르는 서비스가 없다면 코드잇으로 시작해 봐도 좋아요.

✅ 1분 UI 점검 리스트

질문	점수 (1~5점)
화면을 처음 봤을 때, 내가 찾는 버튼이 1초 안에 보이나요?	ㅤ
“이게 무슨 기능이지?”라는 생각이 드는 레이블/아이콘은 없나요?	ㅤ
비슷한 기능이 각 화면마다 다른 이름/위치로 나오지는 않나요?	ㅤ
내 예상과 다르게 작동하는 것들은 없나요?	ㅤ
실수를 해도 쉽게 되돌릴 수 있나요?	ㅤ
실수를 미리 막아주는 장치가 있나요?	ㅤ
숙련된 사용자를 위한 단축/자동화 기능이 있나요?	ㅤ
에러 메시지가 이해하기 쉽고 해결책을 알려주나요?	ㅤ
배경과 글자의 색이 잘 구분되어 있나요?	ㅤ
도움말/가이드는 필요한 만큼 있나요?	ㅤ