통합 요약노트

Ch.1 게슈탈트 원리

인간이 형태를 인식하는 시각 법칙 — 근접성, 유사성, 폐합, 전경/배경

이 챕터의 내용

1

게슈탈트 6가지 원칙

100년 전 독일 심리학자들이 밝혀낸 게슈탈트 원리 — UI 디자인의 가장 기본적인 문법입니다.

같은 정보, 다른 배치 — 왜 느낌이 완전히 달라질까?

인간의 뇌는 시각 정보를 받아들일 때 자동으로 패턴을 찾습니다. 가까운 것은 묶고, 비슷한 것은 같은 그룹으로 인식하죠. 이 자동 규칙을 체계화한 것이 게슈탈트 심리학입니다.

게슈탈트(Gestalt) = '전체 형태' — 부분의 합 이상을 본다

  • 근접성: 가까운 것은 한 그룹
  • 유사성: 닮은 것은 한 그룹
  • 연속성: 시선은 흐름을 따른다
  • 폐합: 빈 곳을 채워 인식한다
  • 전경/배경: 주인공과 무대를 분리
  • 프래그난츠: 단순한 형태를 선호
상세 노트 보기arrow_forward
2

실제 앱에서 게슈탈트 찾기

좋은 UI는 게슈탈트를 의식적으로 활용하고, 나쁜 UI는 무의식적으로 위반합니다.

좋은 UI는 게슈탈트를 의식적으로 활용합니다

Spotify 홈 화면: 플레이리스트 카드들이 같은 크기와 간격으로 배열(유사성 + 근접성). 카테고리 간 넓은 간격이 섹션을 구분(근접성).

Airbnb 검색 결과: 사진-제목-가격이 하나의 카드로 밀착 배치(근접성). 지도 위 핀과 목록이 동시에 하이라이트(공동 운명).

상세 노트 보기arrow_forward
3

프래그난츠 법칙과 단순성

답은 숨기는 것이 아니라 구조화하는 것입니다. 게슈탈트 원칙이 그 방법을 알려줍니다.

정보가 적은 게 아니라 구조가 명확한 것이 단순함이다

프래그난츠 법칙에 따르면, 인간의 뇌는 가능한 한 단순하고 규칙적인 해석을 선호합니다. 이는 UI 설계에서 두 가지를 의미합니다:

6가지 원칙이 함께 작동할 때 비로소 읽히는 UI가 됩니다

  • 게슈탈트 6원칙: 근접성, 유사성, 연속성, 폐합, 전경/배경, 공동 운명
  • 상위 법칙: 프래그난츠 — 뇌는 단순한 해석을 선호
  • 좋은 UI = 게슈탈트를 의식적으로 활용한 UI
  • 다음 주제: 8px 그리드 시스템 → 근접성을 수치로 통제하는 방법
상세 노트 보기arrow_forward

key

핵심 용어 모음

💡

디자인 씽킹

사용자 공감으로 시작하는 문제 해결 프로세스

❤️

공감

사용자의 입장에서 문제를 이해하고 느끼는 것

🔍

사용자 리서치

사용자의 행동·니즈·동기를 조사하는 것

👤

페르소나

실제 사용자 데이터를 기반으로 만든 가상 인물

📝

와이어프레임

UI의 구조와 레이아웃을 보여주는 저해상도 설계도

🖥️

프로토타입

실제 작동하는 것처럼 만든 시제품

규칙 1

요소의 수를 줄이는 것보다 **패턴을 일관되게** 유지하는 것이 중요하다

규칙 2

예외가 많아지면 뇌의 패턴 인식이 실패하여 '복잡하다'고 느낀다

compare_arrows

비교 정리

항목게슈탈트 준수게슈탈트 위반
간격관련 요소 8px, 섹션 간 32px모든 간격이 동일하거나 랜덤
스타일같은 역할 = 같은 색·크기버튼마다 다른 스타일
구분카드 그림자로 전경/배경 분리모든 요소가 같은 평면

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 코스 시작하기