Human Perception & Cognitive Models

1. Overview

인간 인지 및 인지 모델(Human Perception & Cognitive Models, HPC)은 컴퓨터 시스템을 다루는 사용자의 뇌를 하나의 '생물학적 정보 처리 하드웨어'로 정의하고, 이 장치가 수용 가능한 데이터의 물리적 밀도와 수리적 처리 속도를 분석하는 '인지 거버넌스 물리학'입니다.

훌륭한 UI/UX는 미학적 감각에서 나오는 것이 아니라 인간의 뇌과학과 심리학적 한계를 수치화하는 공학에서 출발합니다. 학습자는 흩어진 정보를 하나의 덩어리(Chunk)로 묶어 인식하는 게슈탈트 원리(Gestalt Principles)의 시각적 역학과, 뇌의 캐시 메모리인 작업 기억(Working Memory)의 용량 한계인 인지 부하(Cognitive Load) 기제를 배웁니다. 더불어 선택지가 늘어날수록 결정 시간이 로그 함수 단위로 증가하는 힉의 법칙(Hick's Law)과 목표 도달 속도를 계산하는 피츠의 법칙(Fitts's Law) 같은 정량적 반응 모델을 익혀, '생각하지 않아도' 직관적으로 인터페이스를 조작할 수 있는 하이엔드 경험 설계의 뼈대를 다집니다.

2. Scope & Boundaries

In-Scope

• 시각적 인지 (Visual Processing): 시선 추적(Eye Tracking), 색상 인지 물리, 게슈탈트(Gestalt) 법칙, F-패턴 및 Z-패턴 레이아웃.
• 기억 아키텍처 (Memory Architectures): 작업 기억(Working Memory: 7±2 법칙), 단기 기억에서 장기 기억으로의 전이 물리, 청킹(Chunking).
• 인간 반응 법칙 (Human Response Laws): 힉의 법칙(Hick's Law), 피츠의 법칙(Fitts's Law), 밀러의 법칙(Miller's Law), 테슬러의 복잡성 보존 법칙.
• 멘탈 모델 (User Mental Models): 사용자의 기존 지식 구조, 시스템 모델과의 간극(Gulf of Execution & Evaluation), 스큐어모피즘과 어포던스(Affordance).

Out-of-Scope

• 타이포그래피 및 색채의 심미적 배색 조합: UI 컴포넌트의 구체적인 그리드 시스템과 디자인 토큰 $\rightarrow$ 12-02. Visual Grammar & Design Systems 영역으로 위임.
• 순수 뇌 해부학 및 신경과학 연구: 시신경과 뉴런의 생물학적 작용 원리 $\rightarrow$ 의학 및 순수 인지과학 영역으로 위임.

Boundaries

• HPC vs. Software Engineering (09): SE(09)가 "버튼을 클릭했을 때 서버가 0.1초 안에 반응하게 만들려면 코드를 어떻게 짜야 하는가?"라는 시스템 성능을 다룬다면, HPC는 "버튼을 어디에, 어떤 크기로 두어야 사용자가 0.1초 안에 그 버튼을 인식하고 누를 수 있는가?"라는 인간 하드웨어의 성능을 다룹니다.

3. Counterexample

• 심미성 최우선주의의 함정 (Aesthetic-Usability Effect Fallacy): "UI가 예쁘기만 하면 사용성도 좋을 것이다"라고 착각하여, 가독성이 극도로 떨어지는 연한 회색 폰트를 쓰거나 버튼의 경계를 지워버리는 플랫 디자인(Flat Design)의 맹신. 예쁜 쓰레기는 결국 버려집니다. 사용자의 눈이 화면에서 가장 중요한 정보(Call To Action)를 찾는 데 걸리는 밀리초 단위의 시간을 무시한 디자인은, 아무리 아름다워도 인지 부하를 폭발시켜 사용자의 앱 이탈률을 높입니다.
• 기억력 과대평가 (Working Memory Overestimation): 체크아웃 폼이나 회원가입 페이지에서 한 화면에 20개의 입력 칸을 때려 넣고 사용자가 다 기억해서 채우기를 바라는 엔지니어의 오만. 인간의 작업 기억 용량은 마법의 숫자 7±2를 넘지 못합니다. 5개 이상의 덩어리(Chunk)가 주어지면 뇌는 인지 과부하(Cognitive Overload)에 걸려 에러를 냅니다. 정보를 '마법사(Wizard)' 패턴처럼 3~4단계로 쪼개어 보여주는 물리적 정보 분산 시스템이 필수적입니다.

4. Prerequisites

• 컴퓨터 과학의 문제 해결 (Basic): 시스템의 상태 공간과 제어 흐름에 대한 기본 논리를 알아야 사용자와 시스템 간의 인터랙션을 모델링할 수 있습니다. (ROOT)
• 정보 아키텍처 기초 (Recommended): 데이터 구조(Data Structure)가 폴더와 파일로 어떻게 위계적으로 나뉘는지 알아야 멘탈 모델을 이해하기 편합니다. (04-01. CDS)

5. Learning Map

6. Learning Topics

Basic

Core Topic 01: 게슈탈트 심리학과 시각적 인지 물리 (Gestalt & Visual Perception)

• Why to Learn: 복잡한 대시보드에서 사용자의 시선이 어디로 꽂히고 무엇을 한 묶음으로 인식하는지 물리적으로 예측하여, 정보의 구조를 화면에 정확히 투영하기 위해서입니다.
• What to Learn:
  • Concepts: 시각적 계층 구조(Visual Hierarchy), 전경-배경 분리(Figure-Ground).
  • Skills: 게슈탈트 법칙 (근접성 Proximity, 유사성 Similarity, 연속성 Continuity, 폐쇄성 Closure).
  • Tools: 시선 추적(Eye-tracking) 히트맵, 모호성 점검(Squint Test).
  • Trade-offs: 근접성의 원칙을 활용해 관련 항목을 다닥다닥 붙여 그룹화하는 것 vs 항목들 사이에 여백(White Space)을 너무 많이 두어 그룹이 쪼개져 보이고 인과관계가 깨지는 현상 사이의 간격 조정.
• How to Learn:
  • 1단계: 선을 긋지 않고도 여백(Margin/Padding)의 수치만으로 메뉴와 본문이 확연히 쪼개져 보이게 만드는 '근접성의 원칙'을 HTML/CSS 코드로 직접 구현해 봅니다.
  • 2단계: 화면을 흐릿하게 만드는 스퀸트 테스트(Squint Test)를 진행했을 때, 색상(유사성)과 모양만으로 "아, 이 3개 버튼은 같은 동작을 하는구나"라고 뇌가 0.1초 만에 파악하는 기제를 분석합니다.
• Implement: 특정 이커머스 상품 목록 페이지에서 게슈탈트 법칙이 어떻게 잘못 적용되어 사용자에게 혼선을 주는지 진단하고, 여백과 색상을 재배치하여 시각적 위계를 바로잡은 Wireframe 수정안 작성.

Recommended

Core Topic 02: 인지 부하 이론과 정보의 청킹 (Cognitive Load & Chunking)

• Why to Learn: 사용자가 앱을 쓰면서 "아, 복잡해서 머리 아파"라고 느끼고 이탈해버리는 임계점을 수학적으로 계산하여, 정보를 한입 크기로 잘게 부수기 위함입니다.
• What to Learn:
  • Concepts: 인지 부하(Cognitive Load: 내재적, 외재적, 본질적), 작업 기억(Working Memory).
  • Skills: 조지 밀러의 7±2 법칙(Miller's Law), 청킹(Chunking), 점진적 공개(Progressive Disclosure).
  • Tools: UX 사용성 테스트 스크립트.
  • Trade-offs: 첫 화면에 모든 기능을 한눈에 다 보여주어 뎁스(Depth)를 줄이는 것(전문가용) vs 기능을 메뉴 안으로 다 숨기고 필요한 순간에만 보여주어 인지 부하를 줄이는 점진적 공개(초보자용) 간의 타협점.
• How to Learn:
  • 1단계: 16자리의 신용카드 번호를 한 번에 입력하라고 하는 텍스트 박스(인지 과부하)와, 4자리씩 4칸으로 쪼개어 자동 포커스 이동을 시켜주는 텍스트 박스(청킹)의 입력 속도 및 에러율 차이를 수치적으로 증명합니다.
  • 2단계: 고급 세팅(Advanced Settings) 옵션을 평소에는 접어두었다가(Accordion UX) 사용자가 명시적으로 원할 때만 펼쳐 보여주는 '점진적 공개'가 어떻게 외재적 인지 부하(Extraneous Load)를 제거하는지 구조적으로 분석합니다.
• Implement: 입력해야 할 필드가 15개인 모바일 회원가입 화면을, 인지 부하 이론에 입각하여 3개의 스텝(계정 생성 $\rightarrow$ 개인 정보 $\rightarrow$ 관심사)으로 물리적 분할을 수행한 플로우 차트 문서화.

Practical

Core Topic 03: 정량적 인터랙션 법칙 (Reaction Physics: Hick & Fitts)

• Why to Learn: "버튼을 오른쪽 밑에 두는 게 낫겠다"는 감에 의존한 디자인을 버리고, 마우스나 손가락이 도달하는 시간을 밀리초(ms) 단위로 계산하는 역학을 쓰기 위해서입니다.
• What to Learn:
  • Concepts: 인간 반응 시간(Reaction Time), 결정 마비(Decision Paralysis).
  • Skills: 피츠의 법칙(Fitts's Law: $T = a + b \log_2(1 + D/W)$), 힉의 법칙(Hick's Law: $RT = a + b \log_2(n)$).
  • Tools: 포인팅 디바이스 분석, Fitts' Law 시뮬레이터.
  • Trade-offs: 피츠의 법칙에 따라 버튼(W)을 무한정 크게 만들어 클릭 시간을 0으로 수렴하게 만들고 싶은 공학적 욕심 vs 너무 큰 버튼 때문에 다른 정보를 보여줄 화면 공간을 다 빼앗기는 UI 레이아웃의 한계.
• How to Learn:
  • 1단계: 맥(Mac) OS의 메뉴바가 화면 맨 위 끝(Edge)에 무한대의 너비(W=$\infty$)로 박혀있기 때문에, 마우스를 위로 휙 던지기만 해도 무조건 클릭에 성공하는 피츠의 법칙 적용의 물리적 마법을 추적합니다.
  • 2단계: 넷플릭스 메인 화면에 100개의 영화가 있으면 고르는 데(선택) 시간이 기하급수적으로 늘어나지만(힉의 법칙), 넷플릭스가 "지금 뜨는 콘텐츠 10선"으로 후보를 억지로 줄여주면 반응 속도가 3배 빨라지는 결정의 경제학을 계산합니다.
• Implement: 모바일 웹의 하단 내비게이션 바(GNB) 디자인에서 엄지손가락의 도달 범위(Thumb Zone)와 피츠의 법칙을 결합하여, 핵심 액션 버튼(예: 결제하기)의 최적 크기와 위치 좌표를 산출하는 보고서.

Advanced

Core Topic 04: 멘탈 모델과 갭 최소화 (Mental Models & Affordance)

• Why to Learn: 사용자가 설명서를 읽지 않고도 "이렇게 하면 되겠지"라고 무의식적으로 추론한 방향과, 소프트웨어가 실제로 동작하는 방향을 일치시키기 위해서입니다.
• What to Learn:
  • Concepts: 멘탈 모델(Mental Model), 실행의 차이(Gulf of Execution), 평가의 차이(Gulf of Evaluation).
  • Skills: 어포던스(Affordance: 행동 유도성), 기표(Signifier), 매핑(Mapping).
  • Tools: 도널드 노먼(Donald Norman)의 디자인 원리 평가표.
  • Trade-offs: "장바구니", "폴더", "휴지통"처럼 현실 세계의 물리적 은유(메타포)를 그대로 가져와 즉각적인 직관성을 제공하는 스큐어모피즘 vs 디지털에서만 가능한 혁신적인 추상 모델을 도입하여 학습 곡선(Learning Curve)은 가파르지만 극한의 효율을 뽑아내는 파워 유저용 인터페이스.
• How to Learn:
  • 1단계: 문에 달린 납작한 금속판(밀어야 함)과 손잡이(당겨야 함)가 물리적 어포던스를 통해 행동을 강제하듯, 디지털 버튼에 그림자(Drop Shadow)를 주어 "나는 클릭할 수 있게 입체적으로 튀어나와 있다"는 기표(Signifier)를 던져주는 논리를 뜯어봅니다.
  • 2단계: 사용자가 '저장'을 누른 직후, 시스템이 아무 반응을 안 주면 사용자는 '저장이 안 됐나?'라며 멘탈 모델이 붕괴(Gulf of Evaluation)하지만, 토스트 팝업으로 "저장 완료"를 띄워주면 그 간극이 즉시 메워지는 피드백 루프를 스케치합니다.
• Implement: 사용자가 처음 접하는 혁신적인 제스처 기반 앱(예: 핀치 투 줌, 스와이프 투 딜리트)에서 멘탈 모델의 갭을 극복하기 위해, 최초 접속 시 빈 화면(Empty State)에 제공될 물리적 은유 기반의 온보딩(Onboarding) 애니메이션 시퀀스 설계.

7. Terminology

8. References

Primary References

• [P1] CS2023 - HCI/Foundations — Human capabilities and perception.
• [P5] SFIA - User experience research (USER) — Analyzing user behaviors and models.

Secondary References

• [The Design of Everyday Things] Don Norman — The bible of cognitive design.
• [Designing with the Mind in Mind] Jeff Johnson — Practical cognitive psychology for UI.

Industry References

• [Nielsen Norman Group - Cognitive Load Articles] — Industry standard UX research.
• [Apple HIG - Foundations of Interaction] — Human-centric design guidelines.

9. Final Checklist

Primary Checklist

• 특정 UI 레이아웃이 게슈탈트 법칙에 따라 어떻게 수리적 '그룹'으로 인식되는지 물리 증명 가능한가? (P1)
• 작업 기억의 수리적 한계 수치(7±2 등)를 초과하는 물리적 정보량을 어떻게 수치적으로 분산할지 제안할 수 있는가? (P1)

Secondary Checklist

• 힉의 법칙에 기초하여 내비게이션 뎁스(Depth)와 너비(Breadth) 중 무엇이 탐색 속도에 물리적으로 유리한지 논할 수 있는가?
• 사용자의 '멘탈 모델'과 실제 시스템 구조 사이의 간극(Gulf of Execution)을 좁히기 위한 물리적 피드백 장치를 고안할 수 있는가?

Industry Checklist

• 시선 추적(Eye-tracking) 데이터를 보고 사용자의 인지적 주의가 어느 물리적 영역에서 가장 많이 정체되는지 진단 가능한가? (SFIA)
• 저시력자나 고령자의 인지 물리 한계를 인지하고 그들을 위한 정보 가독성(Contrast, Type size) 수치를 계산할 수 있는가?