모양·색이 비슷한 요소들은 위치가 떨어져 있어도 같은 그룹으로 지각한다는 원리.
디자인 아틀라스<div class="grid" id="grid"></div>.grid{width:88%;height:80%;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:10px;place-items:center}
.shape{width:clamp(16px,4.4vmin,40px);height:clamp(16px,4.4vmin,40px);border-radius:6px;transition:background 1s ease}const grid = document.getElementById('grid');
const order = [0,1,0,1, 1,0,1,0, 0,1,0,1];
const els = order.map(() => { const s = document.createElement('div'); s.className = 'shape'; grid.appendChild(s); return s; });
const muted = 'var(--muted)';
const colors = ['var(--accent)', 'var(--accent-2)'];
function mono() { els.forEach(e => e.style.background = muted); }
function colored() { els.forEach((e, i) => e.style.background = colors[order[i]]); }
mono();
setInterval(() => { const isMono = els[0].style.background === muted; isMono ? colored() : mono(); }, 2000);근접성과 함께 게슈탈트 심리학의 핵심 그룹화 법칙입니다. 근접성이 "거리"로 그룹을 만든다면, 유사성은 색·모양·크기 같은 "속성"으로 그룹을 만듭니다 — 같은 줄에 안 있어도 파란 점들끼리는 한 그룹으로 보입니다.
UI에서는 같은 유형의 액션(예: 파괴적 동작)에 항상 같은 색(빨강)을 쓰고, 같은 카테고리의 태그에 같은 모양을 쓰는 식으로 응용됩니다. 링크에 일관되게 밑줄+파란색을 쓰는 것도 유사성으로 "이건 클릭 가능"이라는 그룹을 학습시키는 것입니다.
데모의 도형들은 격자 위치를 그대로 둔 채 색만 바뀌며, 색이 같은 것끼리 그룹으로 "보이기" 시작합니다.
색·아이콘 시스템을 정할 때 "같은 의미는 항상 같은 색/모양"이라는 규칙을 지키세요. 예외를 두면 유사성이 거짓 신호가 됩니다.