전경배경관계 (Figure-Ground Relationship)
쉽게 풀면
그림에서 무엇이 주인공이고 무엇이 배경인지를 눈이 구분해서 보는 방식이다.
왜 중요한가
전경-배경은 시각장에서 무엇이 대상(전경)이고 무엇이 바탕(배경)인지를 뇌가 나누는 지각 과정으로, 모달 창 뒤의 어두운 오버레이나 카드의 그림자가 '이것이 앞에 있다'고 알려 주는 원리입니다.
로고에서 배경이 동시에 형태가 되는 페덱스의 화살표나 루빈의 꽃병 같은 반전 도형이 이 원리를 활용한 대표 사례이며, 텍스트 가독성의 전제 조건이기도 합니다.
다크 모드 인터페이스에서는 밝은 배경 대비 어두운 배경이라는 반전된 조건에서도 전경-배경 구분이 유지되도록 그림자 대신 미세한 밝기 차이나 테두리로 깊이를 표현하는 별도의 설계 규칙이 필요하다.
핵심 정리
- 전경-배경은 시야를 하나의 형태(전경)와 그 뒤의 바탕(배경)으로 나누어 지각하는 가장 기본적인 조직화입니다. 덴마크의 심리학자 루빈(Rubin)이 1915년에 체계적으로 기술했습니다(1921년 독일어판으로 널리 알려짐).
- 전경은 물체 같은 성질(윤곽이 뚜렷함)을 가지며 앞에 있는 것처럼 보이고, 둘 사이의 경계는 전경에 속하는 것처럼 지각됩니다. 배경은 전경 뒤로 계속 이어지는 것처럼 보입니다.
- 어느 쪽이 전경이 되는지는 면적이 작은 쪽, 닫힌 영역, 대비가 큰 쪽, 대칭·볼록한 쪽, 시야의 아래쪽에 있는 영역일수록 전경이 되기 쉽다고 알려져 있습니다(Wagemans 등, 2012; Vecera 등, 2002).
- 단서가 팽팽하면 루빈의 꽃병처럼 전경과 배경이 번갈아 뒤집히는 이중 도형이 만들어집니다.
예시로 보기
화면 설계에서는 대화 상자 뒤의 어두운 오버레이나 카드의 그림자가 “이것이 앞에 있다”는 단서를 주어 사용자가 조작 대상을 즉시 알아보게 합니다. 로고 디자인에서는 글자 사이의 빈 공간이 화살표 모양이 되는 FedEx 로고처럼 배경을 또 하나의 형태로 활용합니다.
배경 이미지 위에 글자를 얹을 때 이미지 밝기 분포가 고르지 않으면 특정 위치에서 전경(글자)과 배경의 구분이 약해져 가독성이 떨어질 수 있습니다. 이런 문제를 보정하려고 그라디언트 오버레이를 넣는 것이 설계 관행입니다.
자주 하는 오해
| 오해 | 바로잡기 |
|---|---|
| 전경은 항상 중요한 대상이고 배경은 중요하지 않다. | 전경-배경은 지각의 구조이지 정보의 중요도가 아닙니다. 설계에서는 배경이 의미를 만드는 경우도 있습니다(음의 공간). |
| 누구나 같은 것을 전경으로 본다. | 단서가 모호하면 사람과 순간에 따라 달라지고 번갈아 뒤집히기도 합니다. 경험·의미(알아보기 쉬운 형태)도 영향을 줍니다. |
| 작고 닫히고 아래에 있는 영역이 반드시 전경이 된다. | 이것은 경향성이며 여러 단서가 겹칠 때의 확률적 결과입니다. 한 단서만으로 결정되지 않습니다. |
| 디자인 원칙일 뿐 지각 이론이 아니다. | 게슈탈트 심리학에서 나온 지각 이론이며, 시각 과학에서는 뇌가 경계를 어느 쪽에 귀속시키는지와 관련된 연구가 이어져 왔습니다. |
논문에서는 이렇게 쓰입니다
실제 논문에서
이 용어를 직접 쓴 국내 논문 문장을 아직 수집하지 못했습니다. 수집되는 대로 출처와 함께 싣겠습니다.
예시 문장
아래는 용어의 쓰임을 보여 주려고 만든 예시로, 실제 논문에서 가져온 문장이 아닙니다.
주 형태와 배경을 뒤바꿔 인지할 수 있게 만든 로고 디자인 사례를 다룬 연구이다.
화면 속 요소가 전경인지 배경인지 뚜렷할수록 사용자가 조작할 대상을 더 빨리 알아챈다는 것을 실험으로 보여준 연구이다.
조금 더 깊게 보면
전경-배경 구분은 게슈탈트 심리학(특히 Edgar Rubin, 1915)에서 정리되었으며, 작고 닫히고 대비가 강하고 아래쪽에 있는 영역이 전경으로 인식되는 경향이 있습니다. UI에서 이 구분이 모호하면(예: 배경과 비슷한 톤의 버튼, 그림자 없는 팝오버) 무엇이 조작 대상인지 알 수 없어 인터랙션 비용이 늘어납니다.
플랫 디자인이 깊이 단서를 제거해 전경-배경 구분을 약화시켰다는 비판이 있고, 이것이 그림자를 되살린 머티리얼 디자인의 배경입니다.
전경으로 인식되기 쉬운 조건은 면적이 작고, 윤곽이 닫혀 있으며, 대비가 강하고, 화면 아래쪽에 위치하는 경우로 정리되며, 이 조건을 반대로 설계하면 의도적으로 배경처럼 보이게 만들 수도 있다.
주의할 점
전경배경관계는 명확하지 않으면 관람자가 어떤 형태가 주요 요소인지 혼란스러워할 수 있다. 배경 이미지 위에 텍스트를 올리는 히어로 섹션에서는 이미지의 밝기 분포가 고르지 않아 특정 위치에서만 전경-배경 구분이 실패하는 경우가 흔해 그라디언트 오버레이로 보정하는 것이 관행이다.
헷갈리기 쉬운 용어
게슈탈트 계열의 용어들이 겹쳐 쓰입니다.
| 용어 | 무엇을 가리키나 | 초점 |
|---|---|---|
| 전경-배경 | 형태와 바탕을 나누는 지각 원리 | 시각 디자인·UI에서의 적용 |
| 도형-배경 조직화 | 장면을 주된 대상과 배경으로 나누는 지각 과정 | 지각심리학의 용어 |
| 게슈탈트 원리 | 근접·유사·폐합 등 묶는 규칙 전체 | 여러 원리 중 하나가 전경-배경 |
전경-배경과 도형-배경은 같은 현상을 가리키는 번역어 차이로 쓰이는 경우가 많습니다.
참고 문헌
- Rubin, E. (1921). Visuell wahrgenommene Figuren: Studien in psychologischer Analyse. Gyldendalske Boghandel.
- Wagemans, J., Elder, J. H., Kubovy, M., Palmer, S. E., Peterson, M. A., Singh, M., & von der Heydt, R. (2012). A century of Gestalt psychology in visual perception: I. Perceptual grouping and figure-ground organization. Psychological Bulletin, 138(6).
- Vecera, S. P., Vogel, E. K., & Woodman, G. F. (2002). Lower region: A new cue for figure-ground assignment. Journal of Experimental Psychology: General, 131(2).
- Palmer, S. E. (1999). Vision Science: Photons to Phenomenology. MIT Press.
표의 기준값은 위 문헌에 근거한 관례이며, 분야·학술지마다 다른 기준을 쓸 수 있습니다.