# 유사성의 법칙 (Law of Similarity)

UI버전 끼리끼리 관상은 과학

모양, 색깔 등 외형이 비슷하면 '아, 얘네는 똑같은 기능을 하나봐' 라고 본능적으로 느끼게 만드는 시각적 동질감

# 정의

인간가 뇌는 시각적 요소들이 있을 때, 그들의 공통점을 찾아 하나의 그룹으로 묶어 인식하는 심리적 매커니즘

시각적 특징을 공유하고 → 그룹화해서 인지하고 → 이들이 동일한 기능을 수행할 것을 기대한다

# 유래

20세기 초 독일의 게슈탈트 심리학자 막스 베르트하이머가 인간이 파편화된 정보를 어떻게 전체 형상으로 인식하는지 연구하며 정립했다

# 예시

- 대시보드 서비스

같은 성격의 수치 데이터는 동일한 폰트 크기나 색상으로 배치해 데이터 간의 연관성을 느끼게 한다

# 활용

이를 활용해 사용자의 학습 비용을 줄이고 예측 가능한 경험을 제공할 수 있다

- **시각적 위계 확립 : **
- 중요한 버튼(primary), 덜 중요한 버튼(secondary) 스타일을 다르게 설정해 위계를 구분할 수 있다

- **정보 구조화 : **
- border, divider 같은 물리적 경계선을 사용하지 않아도 색상, 모양만으로 정보 덩어리를 만들어 ui를 구성할 수도 있다

- **컴포넌트 재사용 : **
- 디자인 시스템에서 자주쓰이는 UI를 컴포넌트로 지정하고, 일관된 컴포넌트 스타일을 유지하자는 근거

> 별개의 요소를 하나의 맥락으로 묶어주는 강력한 끈

디자이너는 시각적 공통점을 전략적으로 배치해 사용자가 별도의 설명을 듣지 않아도 인터페이스 구조를 파악할 수 있도록 할 수 있어야 한다

For the site tree, see the [root Markdown](https://slashpage.com/haleys-archive.md).