시각적으로 유사한 요소들은 분리되어 있어도 하나의 그룹으로 인식된다.
무슨 법칙인가?
게슈탈트 심리학의 핵심 원칙. 색상, 형태, 크기, 방향이 비슷한 요소는 뇌가 자동으로 묶어서 처리한다. 근접성이 ‘공간적 가까움’이라면 유사성은 ‘시각적 닮음’이다.
이 법칙은 UI 컴포넌트 일관성을 유지해야 하는 과학적 근거다. 버튼, 링크, 헤딩이 각기 다른 스타일이면 사용자는 같은 기능인지 알 수 없다.
디자인 시스템(design system)이 중요한 이유가 여기에 있다. 일관된 색상, 타이포그래피, 컴포넌트 스타일이 유사성의 법칙을 활용해 인지 부하를 줄인다.
실무에서 어떻게 쓰이나?
- Bootstrap 버튼 스타일 — 모든 기본 버튼이 같은 둥근 모서리, 같은 패딩, 같은 호버 효과를 가져 ‘클릭 가능한 버튼’을 즉시 인식할 수 있다.
- 하이퍼링크 색상 — 파란색 밑줄이 30년 된 웹 표준이다. 이 유사성 덕분에 텍스트 중에서도 링크를 즉시 찾을 수 있다.
- Airbnb 숙소 카드 — 모든 카드가 동일한 레이아웃(이미지-평점-가격)을 사용해 카드 간 비교가 직관적이다.
코난쌤의 한줄 코멘트
AI 교육 자료에서도 스타일 일관성이 중요하다. 개념 설명은 파란 박스, 경고는 빨간 박스처럼 유사성을 부여하면 문서 구조를 빠르게 파악한다.