빠진 부분이 있어도 뇌가 알아서 채워 완전한 형태로 지각한다는 원리. 실제로는 선이 끊겨 있어도 삼각형이 보입니다.
디자인 아틀라스<div class="stage">
<div class="pac p1"></div>
<div class="pac p2"></div>
<div class="pac p3"></div>
<svg class="tri" viewBox="0 0 100 100"><polygon points="50,30 32,68 68,68" /></svg>
</div>.stage{position:relative;width:60%;height:80%;min-width:180px}
.pac{position:absolute;width:34%;aspect-ratio:1;border-radius:50%;background:conic-gradient(from -30deg,var(--fg) 0deg 300deg,transparent 300deg 360deg)}
.p1{left:33%;top:0;transform:rotate(90deg)}
.p2{left:0;bottom:0;transform:rotate(-36deg)}
.p3{right:0;bottom:0;transform:rotate(216deg)}
.tri{position:absolute;inset:0;width:100%;height:100%}
.tri polygon{fill:none;stroke:var(--accent);stroke-width:2.5;opacity:.15;animation:reveal 3s ease-in-out infinite}
@keyframes reveal{0%,100%{opacity:.08}50%{opacity:.7}}게슈탈트 심리학의 프레그난츠 법칙(Law of Prägnanz) 아래 있는 원리로, 이탈리아 심리학자 가에타노 카니자(Gaetano Kanizsa)가 1955년 발표한 "카니자 삼각형"이 가장 유명한 예시입니다. 팩맨처럼 한쪽이 파인 원 3개를 삼각형 배치로 놓으면, 실제로 존재하지 않는 흰색 삼각형의 윤곽이 보입니다.
로고 디자인(WWF 판다, NBC 공작)이나 로딩 스피너(점 일부만 그려도 원으로 지각)처럼, 요소를 다 그리지 않아도 형태를 전달할 수 있다는 뜻입니다. 불필요한 선·테두리를 줄여도 사용자는 여전히 형태를 완성해서 봅니다.
데모의 팩맨 3개 사이로 보이지 않는 삼각형 윤곽이 은은하게 나타났다 사라지길 반복합니다 — 그게 실제로 그려진 선이 아니라는 걸 보여주기 위해서입니다.
아이콘·로고·로딩 인디케이터를 최소한의 요소로 그릴 때 활용하세요. 다만 너무 단순화하면 뜻이 안 통하니 테스트로 확인하세요.