시각적으로 연결된 요소들은 연결되지 않은 요소보다 더 관련 있는 것으로 인식된다.
무슨 법칙인가?
게슈탈트 그룹화 원칙 중 근접성, 유사성, 공통 영역보다 더 강력한 원칙이다. 선, 색상 대역, 또는 다른 시각적 연결로 묶인 요소는 같은 그룹으로 강하게 인식된다.
화살표, 연결선, 브래킷 등이 이 법칙의 시각적 표현이다. 두 요소 사이에 선을 긋는 것만으로도 뇌는 ‘이 둘은 관련이 있다’고 판단한다.
퍼널 다이어그램, 스텝 퍼시져(step progress indicator), 플로우차트가 모두 이 법칙을 활용한다.
실무에서 어떻게 쓰이나?
- 결제 진행 바 — ‘장바구니 → 배송정보 → 결제 → 완료’ 단계가 선으로 연결되면 현재 위치를 직관적으로 파악할 수 있다.
- 지하철 노선도 — 같은 색상 선으로 연결된 역들이 같은 노선임을 즉시 알 수 있다.
- Figma 레이어 패널 — 부모-자식 관계가 들여쓰기와 연결선으로 표시되어 계층 구조가 명확하다.
코난쌤의 한줄 코멘트
업무 자동화 워크플로우를 시각화할 때 연결선이 핵심이다. 단계 사이의 관계를 선으로 보여주면 비개발자도 프로세스를 이해할 수 있다.