Type something to search...

18 게슈탈트이론

게슈탈트(Gestalt) 이론이란?

**막스 베르트하이머(Max Wertheimer)**의 이론으로, 우리의 뇌는 구성요소들을 개별적으로 보기에 앞서 그 윤곽이나 패턴, 형태적 차이를 먼저 파악하려는 습성을 지녔다는 이론입니다.

우리의 뇌는 구성요소들을 개별적으로 보기에 앞서서 그 윤곽이나 패턴 형태적 차이를 먼저 파악하려는 습성을 지녔다


4가지 원칙

  • 유사성의 원리
  • 근접성의 원리
  • 연속성의 원리
  • 공통영역의 원리

유사성의 원리

색, 모양, 크기가 유사한 요소들을 하나의 관계로 묶어보려는 경향. 유사한 형태끼리 연결되어 보입니다.

유사성의 원리 기본 개념

유사성의 원리 - 색상에 의한 그룹핑

유사성의 원리 - 형태에 의한 그룹핑


근접성의 원리

서로 이웃해 있는 요소들과 그렇지 않은 요소들을 구분하려는 경향. 가까이에 있는 건 같은 것으로, 멀리 있는 건 다른 것으로 인지합니다.

서로 가까이 있는 시각 요소들은 더 멀리 떨어져 있는 요소들보다 서로 연관된 것으로 봅니다. 그루핑이 안되어 보인다는 말은 이 원리를 이해를 못 하고 디자인을 해서입니다.

서로 연관된 정보들은 가까이, 다른 정보들은 멀리! 이 원칙을 지키면 됩니다.

근접성의 원리 기본 개념

환경부: 연관된 정보는 여백을 좁고 그렇지 않은 정보는 여백을 넓습니다


연속성의 원리

연속성을 띄는 배열은 관련성이 높다고 인식합니다. 선이나 부드러운 곡선으로 배열된 요소는 불규칙하거나 거친 선으로 배열된 요소보다 관련된다고 인식합니다.

1,2: 4개의 분리된 선이 중앙에서 만나는 것이 아니라, 두 개의 부드러운 선(직선 또는 곡선)이 서로 교차하는 것으로 자연스럽게 인식한다. 3: 점들의 색상이 중간에 바뀌지만(유사성 원리가 적용될 수 있지만), 우리는 이를 두 개의 분리된 그룹이 아닌 하나의 연속된 수직선으로 인식한다.

콘텐츠 리스트나, 캐로셀, 메뉴 리스트 등 연속성을 위해 간격이 일정하도록 해줘야겠죠?


공통영역의 원리

근접성의 원칙과 비슷하게, 동일한 영역 내에 배치되는 요소는 하나의 그룹으로 인식합니다.

요약

박스 안에 있는 요소들은 같은 정보로 묶어 보이는 것입니다. 박스 형식의 카드 UI가 좋은 예시가 될 수 있죠.

공통영역의 원리 - 카드 UI 예시