🐨CoalaCoding
DocsExamplesTry itBoardB반B반
🐨CoalaCoding

개발자를 위한 한국어 웹 기술 문서

문서

  • JavaScript
  • Web Publishing
  • React
  • Python

커뮤니티

  • 게시판
  • 예제 모음
  • Try it 에디터

기타

  • GitHub
  • 관리자
© 2026 CoalaCoding. All rights reserved.
  • topBtn
  • rollingBanner
  • menu
  • stickyMenu
  • accordion
  • swiper
  • activeMenu
  • slide
  • tab
  • scrollEffect
  • ajax
  • tabSlide
  • adaption
  • 좋은-디자인을-위한-요소
  • 논리적vs물리적해상도
  • 게슈탈트이론
  • 색채심리학
  • 황금비율
  • 컬러모드
  • 디자인실무용어
  • 이미지파일의특징
  • 폰트와사이즈
  • 레이아웃기초
  • 10가지법칙
  • 아이트래킹
  • 색상을성공적으로고르는방법
  • 타이포그래피10가지팁
  • 스타일가이드만들기
  • 모바일디자인버튼
  • 조형요소
  • 6가지비주얼체계규칙
  • 아이콘디자인이론
  • 해상도와그리드시스템
  • 피그마란
  • 작업환경세팅
  • 인터페이스예제
  • 기능심화
  • 인터페이스설계
  1. 홈
  2. 문서
  3. HTML & CSS
  4. UI 컴포넌트
  5. 게슈탈트이론

게슈탈트이론

디자인의 기본 원리인 게슈탈트 이론의 4가지 원칙을 알아봅니다

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

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

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

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


4가지 원칙

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

유사성의 원리

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

유사성의 원리 기본 개념

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

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


근접성의 원리

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

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

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

근접성의 원리 기본 개념

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


연속성의 원리

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

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

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


공통영역의 원리

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

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

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

목차

  • 구문