디자인 아틀라스
EN
⌘ UX 용어·법칙

공통 영역의 법칙

Law of Common Region

같은 테두리·배경 안에 있는 요소들은 하나의 그룹으로 지각된다는 게슈탈트 원리.

다른 이름: Common regionGestalt common region
···
html
<div class="stage">
  <div class="pane"><div class="tag">A</div>
    <div class="scatter">
      <span></span><span></span><span></span><span></span><span></span><span></span>
    </div>
  </div>
  <div class="pane"><div class="tag">B</div>
    <div class="grouped">
      <div class="box"><span></span><span></span><span></span></div>
      <div class="box"><span></span><span></span><span></span></div>
    </div>
  </div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:6%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted)}
.scatter{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.scatter span{width:16px;height:16px;border-radius:50%;background:var(--accent)}
.grouped{display:flex;gap:14%}
.box{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:10px;border:1px solid var(--line);background:var(--bg);animation:pulse 2.6s ease-in-out infinite}
.box span{width:16px;height:16px;border-radius:50%;background:var(--accent)}
@keyframes pulse{0%,100%{border-color:var(--line)}50%{border-color:var(--accent)}}

20세기 초 막스 베르트하이머(Max Wertheimer)를 비롯한 게슈탈트 심리학자들이 정립한 지각 원리 중 하나를 스티븐 팔머(Stephen Palmer)가 1990년대에 "공통 영역"으로 명명해 정리했습니다. 근접성의 법칙(요소들이 가까우면 그룹으로 보인다)과 닮았지만, 공통 영역은 **경계선 하나만으로 근접성 부족을 뒤집을 수 있다**는 게 다릅니다.

카드 UI가 대표 사례입니다. 제목·이미지·버튼이 서로 좀 떨어져 있어도 같은 카드 테두리 안에 있으면 한 묶음으로 읽힙니다. 반대로 경계가 없으면 사용자는 "이 버튼이 이 카드 것인지, 옆 카드 것인지" 헷갈립니다.

데모의 A는 점 6개가 테두리 없이 흩어져 있어 어떤 게 한 그룹인지 애매하고, B는 같은 점들이 박스 두 개로 나뉘어 있어 즉시 두 그룹으로 읽힙니다.

언제 쓰나

카드·섹션 경계를 그릴지 말지 고민될 때. 근접성만으로 그룹이 안 읽힌다면 옅은 배경이나 테두리 하나로 해결되는 경우가 많습니다.