HCI를 활용한 디자인 이론

- 3월 25, 2026

UX & Design Theory

HCI를 활용한
디자인 이론

인간과 컴퓨터의 상호작용을 연구하는 HCI. 핵심 이론과 실제 예시로 쉽게 이해해봐요.

HCI(Human-Computer Interaction)는 사람이 디지털 시스템과 어떻게 상호작용하는지를 연구하는 학문입니다. 단순한 UI 디자인을 넘어, 사람의 인지·행동 심리를 반영한 설계 원칙을 제공합니다. 아래 4가지 핵심 이론을 실제 예시와 함께 살펴볼게요.

닐슨의 10가지 사용성 휴리스틱Nielsen's 10 Usability Heuristics

Jakob Nielsen이 제안한 UI 설계 원칙으로, 인터페이스가 사용자에게 얼마나 직관적인지를 평가하는 10가지 기준입니다.

① 시스템 상태 가시성

→ 로딩 바, 진행 알림 표시

② 현실 세계와의 일치

→ 장바구니 아이콘, 폴더 개념

③ 사용자 제어 및 자유도

→ 실행 취소(Undo) 기능

④ 일관성과 표준

→ 저장 = Ctrl+S 통일

⑤ 오류 예방

→ 삭제 전 확인 대화창

⑥ 인식 vs 기억 최소화

→ 자동완성, 최근 검색 기록

⑦ 유연성과 효율성

→ 단축키 지원

⑧ 미적·최소한 디자인

→ 불필요한 정보 제거

⑨ 오류 인식·진단·복구

→ 명확한 오류 메시지

⑩ 도움말 및 문서화

→ 검색 가능한 매뉴얼

💡

실제 예시: Gmail에서 이메일을 실수로 삭제하면 나타나는 "실행 취소" 버튼. ③번 원칙(사용자 제어 및 자유도)이 적용된 대표적인 사례입니다.

피츠의 법칙Fitts' Law

목표물(버튼 등)을 클릭하는 데 걸리는 시간은 목표물의 크기가 클수록, 거리가 가까울수록 짧아집니다. 모바일 UI 설계에서 특히 중요한 원칙입니다.

❌ 나쁜 예시

커서 → 확인

거리: 멀다 / 크기: 작다
→ 클릭 시간 길어짐

✅ 좋은 예시

커서 → 확인

거리: 가깝다 / 크기: 크다
→ 클릭 시간 짧아짐

💡

실제 예시: 모바일 앱의 "구매하기" 버튼을 화면 하단에 크게 배치하는 것, macOS의 메뉴바가 화면 모서리에 위치해 빠르게 접근 가능한 것.

힉의 법칙Hick's Law

선택지의 수가 많아질수록 결정하는 데 걸리는 시간이 늘어납니다. 선택지를 줄이고 단계를 나누는 것이 핵심입니다.

❌ 선택지 과부하

16개 선택지 → 결정 마비

✅ 계층화된 메뉴

4개 카테고리 → 단계적 선택

💡

실제 예시: 넷플릭스가 방대한 콘텐츠를 장르별로 분류하거나, 온보딩 화면을 여러 단계로 나누어 사용자의 인지 부담을 줄이는 방식.

게슈탈트 법칙Gestalt Principles

인간의 뇌가 시각 요소를 어떻게 묶어서 인식하는지에 관한 원리로, UI 레이아웃 설계의 근거가 됩니다.

근접성 (Proximity)

가까운 요소끼리 같은 그룹으로 인식

유사성 (Similarity)

같은 모양·색은 같은 그룹으로 인식

연속성 (Continuity)

시선은 자연스러운 흐름을 따라 이동

폐합성 (Closure)

불완전해도 완성된 도형으로 인식

전경/배경 (Figure/Ground)

주요 요소가 배경에서 분리되어 인식

버튼

공동 운명 (Common Fate)

같은 방향으로 움직이면 같은 그룹

↓

↑

💡

실제 예시: 카드 UI에서 제목·설명·버튼을 하나의 박스 안에 묶는 것(근접성), 링크를 파란색으로 통일하는 것(유사성).

✦

HCI 이론의 실제 활용 흐름

HCI 이론들은 서로 독립적이지 않고, 디자인 프로세스 전반에서 함께 적용됩니다.

사용자 연구

니즈 파악

이론 적용

휴리스틱·법칙

프로토타입

시각·인터랙션

사용성 테스트

반복 개선

모바일 앱 설계 예시: 피츠 법칙으로 버튼 크기·위치를 잡고, 힉의 법칙으로 메뉴를 단순화하며, 게슈탈트로 레이아웃을 구성하고, 닐슨 휴리스틱으로 전반적인 UX를 검토합니다.

이 블로그 검색

쑥이의 UI/UX 온라인 무료강의,피그마(figma)