전경-배경

Figure-Ground

눈은 장면을 "형태(전경)"와 "여백(배경)"으로 나눠 지각한다는 게슈탈트 원리. 어느 쪽이 전경인지는 뒤집힐 수 있습니다.

다른 이름: Figure/groundRubin's vase

···

html

<svg class="fg" viewBox="0 0 100 100">
  <path id="blobA" d="M50,4 C74,4 84,22 78,38 C90,44 90,60 78,64 C84,80 74,96 50,96 C26,96 16,80 22,64 C10,60 10,44 22,38 C16,22 26,4 50,4 Z"/>
</svg>

css

.fg{width:60%;height:80%;min-width:150px}
#blobA{transition:fill 1.2s ease,stroke 1.2s ease}

const blob = document.getElementById('blobA');
const svg = document.querySelector('.fg');
let a = true;
function apply() {
  blob.style.fill = a ? 'var(--fg)' : 'var(--bg)';
  svg.style.background = a ? 'var(--bg)' : 'var(--fg)';
  blob.style.stroke = a ? 'none' : 'var(--line)';
}
apply();
setInterval(() => { a = !a; apply(); }, 2000);

덴마크 심리학자 에드가 루빈(Edgar Rubin)이 1915년 제시한 "루빈의 꽃병"이 대표 사례입니다 — 검은 꽃병으로도, 마주 보는 두 얼굴로도 읽히는 동일한 그림에서, 무엇이 "형태"이고 무엇이 "배경"인지는 대비와 색으로 결정됩니다.

UI에서는 모달이 배경을 어둡게 깔아(→ 전경으로 밀어 올리기), 아이콘의 여백이 우연히 다른 의미로 읽히지 않게 조심하는 데 씁니다. 로고에 음각 공간을 활용하는 것(FedEx 화살표)도 이 원리의 응용입니다.

데모의 색이 바뀔 때마다 어느 쪽 도형이 "형태"로 보이는지가 뒤집힙니다 — 모양은 그대로인데 지각만 바뀝니다.

언제 쓰나

아이콘·로고의 여백(네거티브 스페이스)도 의도한 모양으로 읽히는지 확인하세요. 모달·팝오버는 배경을 죽여 전경을 분명히 하세요.