brunch

You can make anything
by writing

C.S.Lewis

by 김준범 May 30. 2017

[번역]시각인지와 게슈탈트 이론

Design Principles

디자이너라면 많이 들어보았을 게슈탈트 이론에 대해 다룬 글입니다. 모두들 그동안 학교에서 배우고 실무를 통해 경험한 것을 토대로 작업을 하지만 왜 그렇게 디자인을 한 것인지 명확히 설명하기는 어려울 경우가 많이 있는 것 같습니다. 아래의 이론들을 보시면 자신이 무의식적으로 요소나 색상들을 사용하여 디자인을 하던 방식에 대해 의식적으로 잘 정리할 수 있을 것 같습니다. 이후에 게슈탈트의 이론이 디자인에 어떻게 적용되는지에 대해서도 계속 번역 글을 올리겠습니다.

(이 글은 Smashing MagazineSteven Bradley가 올린 Design Principles: Visual Perception And The Principles Of Gestalt을 번역한 글입니다.)









Design Principles: Visual Perception And The Principles Of Gestalt


1910년에 Max Wertheimer라는 심리학자는 철도 건널목에서 신호등이 깜빡이는 것을 보고 인사이트를 얻었다. 그 불빛은 마치 극장 입구를 에워싸고 반짝이는 전구들의 모습과 비슷했다.

관찰자에게는, 불빛이 전구에서 전구로 이동하며 지붕 주위를 따라 이동하는 것 처럼 보이지만, 실제로는 움직이는 것이 아니고 일렬로 늘어선 전구들이 꺼졌다 켜졌다를 반복하는 것에 불과하다.

이 관찰을 통해 우리가 사물을 인지하는 방법에 대해 사실적인 이론을 만들수 있었다. 이 이론들은 우리가 디자이너로서 하는 모든 그래픽 작업의 중심에 존재하고 있다.

이 글은 디자인 원리에 대한 포스트 중 첫번째 글이다. 첫번째 포스트는 게슈탈트 이론으로 시작을 할 것이다. 왜냐하면 우리가 따르는 수많은 디자인 이론들이 게슈탈트 이론으로부터 나왔기 때문이다. 이 포스트에서는, 게슈탈트 이론의 기본적인 정의에 대해 가볍게 이야기 하려고 한다.



게슈탈트 이론의 핵심

"전체는 단순히 부분의 합이 아니다."
- Kurt Koffka

이 말은 게슈탈트 이론을 매우 간단히 말해주고 있다. 사람이 사물의 그룹을 볼 때, 각각의 사물들을 보기 전에 전체적인 모습을 인지한다. 우리는 부분들이 전체적으로 분리되어 존재하더라도, 부분의 합 이전에 하나의 전체를 보는 것이다. 우리는 전체로서의 그룹을 볼 것이다. 


출현(부분보다 먼저 전체가 인지된다.)

출현(Emergence)은 단순한 규칙으로 복잡한 패턴을 조직하는 과정이다. 하나의 사물을 인식할 때, 우리는 먼저 전체적인 형상을 찾는다. 우리는 이 전체적인 패턴을 우리가 이미 알고 있는 형태와 사물에 맞춰 연상한다. 이 전체적인 패턴이 출현되고 나서야, 전체를 이루고 있는 부분들을 보기 시작한다.


구상화(사람의 마음은 빈틈을 채워서 생각한다)

구상화(Reification)는 사물이 존재하는 부분보다 전체 공간이 주는 정보에 의해 인지되는 경향을 말한다. 우리가 보고 있는 것을 머릿 속에 있는 친숙한 패턴과 연관하여 보려고 할 때 항상 정확히 매치가 되는 것은 아니다. 대신 친숙한 패턴과 비슷한 모습으로 보려고 하면서 빈틈을 매꿔서 보게 된다.

구상화는 원하는 형태를 보여주기 위해 완전한 형태를 보여줄 필요가 없다는 것을 의미한다. 보여주려는 형태와 거의 유사한 패턴을 보여주고 있다면, 형태의 일부는 생략해도 상관이 없다. 아래에서 다룰 근접의 원칙에서 구체적인 예를 볼 수 있을 것이다.


다중 안정성(사람의 마음은 불확실한 것을 피하려고 한다.)

다중 안정성(Multi-stability)은 두 가지 다른 해석 사이에서 왔다갔다 하며 모호하게 인지를 하는 상황을 말한다. 어떤 사물은 여러가지 형태로 인식될 수 있다. 아래의 형태/배경(Figure/Ground) 부분에 나온 많이 본듯한 그림이 좋은 예이다. 이 그림은 마주보는 두 개의 얼굴로 보일 수도 있고 꽃병으로 보일 수도 있다.

두 가지를 한번에 볼 수는 없다. 사람은 두 가지 인식 사이에서 왔다갔다 하는 것 보다, 유력한 한가지만 인식하려고 한다. 그리고 다른 한가지는 보려하지 않을수록, 더 인식이 어려워진다.

디자인의 관점에서 보는사람의 인식을 바꾸고 싶다면, 한번에 바꾸려 하지 말아라. 원하는 방향으로 인식시킬 수 있는 방법을 찾고, 그 방법을 지속적으로 강화 시켜라.  그러면 처음의 인식은 점점 약해질 것이다.


불변성(사람들은 유사점과 차이점에 대한 인식을 잘한다.)

불변성(Invariance)은 사물에 대한 인식은 위치하는 각도나 크기 등에 영향받지 않는다는 뜻이다. 사물을 서로 다른 각도에서 볼 경우 형태가 다르게 보이더라도 그 사물을 인식할 수 있는 능력이 있다는 것이다.

누군가를 정면에서 보았을 때만 그 사람을 알아볼 수 있다면 그 사람이 옆으로 돌아서면 누군지 알아볼 수 없게 된다. 실제로 우리는 보는 시점이 달라지더라도, 그 사람이 누군지 인지할 수 있다.

이 이론은 아래의 원칙에서 발견할 수 있다. 게슈탈트 이론은 인식에 관한 것이고, 사물이 시각적으로 커뮤니케이션 되는 방식에 관한 것이다. 이 이론은 우리가 작업하는 비주얼 랭귀지의 핵심에 대해 이야기하고 있다.





게슈탈트 이론

대부분의 이론은 이해하기 쉽게 되어 있다. 대부분의 원칙에 적용될 수 있는 말이 있다.

모든 조건이 같다면, 서로 연관된 요소들은 상위의 개념으로 통합되어 인지된다. - 스티븐 팔머

아래의 많은 원칙들이 이 패턴을 따른다. 연관성을 정의하거나, 인식되는 상위의 개념에 대한 이론들이다.



단순함의 법칙  LAW OF PRÄGNANZ

사람은 모호하거나 복잡한 이미지를 가능한한 단순한 형태로 인지한다.

이것은 게슈탈트 이론의 가장 기본적인 이론이다. 우리는 단순하고, 명료하고, 정돈된 것을 좋아한다. 본능적으로 이런 것들이 안전하다고 느끼기 때문이다. 단순한 형태는 인식하는데 오래걸리지 않고, 덜 위험하거나 놀라게 하지도 않는다.

단순함의 법칙 Law of Prägnanz (Good Figure, Law of Simplicity).


복잡한 형태를 마주치면, 우리는 단순한 요소들이나 단순한 하나의 형태로 인식하려 한다. 단순한 원, 사각형, 삼각형으로 이루어진 위의 왼쪽 이미지를 복잡하고 모호한 하나의 형상으로 보기보다는, 우측처럼 단순한 형태들로 보려고 한다.이 경우에는, 세 개의 분명한 물체들이 하나의 복잡한 물체보다 단순하게 보인다. 하지만 다르게 보면 하나의 물체가 더 단순하게 보일 수도 있다. 폐쇄의 법칙이 그러한 경우를 설명해 준다.



폐쇄  CLOSURE

복잡하게 구성된 물체를 볼 때, 사람은 하나로 인식될 수 있는 패턴을 보려고 한다.

단순함의 법칙과 함께, 폐쇄의 법칙도 단순함을 추구한다. 폐쇄의 법칙은 단순함의 법칙에서 본 세 개의 물체가 하나의 물체보다 더 단순하다고 보는 것과는 반대가 되는 법칙이다. 폐쇄의 법칙은 대신에 부분을 조합하여 하나의 전체를 이루게 한다. 우리의 눈은 하나의 완성된 형태를 이루기 위해 빠진 부분을 채워서 보게 된다.

폐쇄 (Closure)

왼쪽의 이미지는, 세 개의 검은색 팩맨처럼 생긴 형태로 이루어진 형태이지만 흰색 삼각형을 볼 수 있다. 오른쪽 이미지는, 여러가지 임의여 형태로 이루어진 이미지이지만, 팬더를 볼 수 있다. 삼각형과 팬더를 보는 것이 각각의 부분을 보려고 하는 것보다 쉽기 때문이다.

폐쇄의 법칙은 요소들을 서로 접착제와 같은 역할을 한다. 패턴을 보려고 하는 인간의 습성에서 나타나는 현상이다.

패쇄의 법칙에서 중요한 점은 사람의 눈이 빈 곳을 채울 수 있도록 충분한 정보를 제공하는 것이다. 너무 많은 부분이 생략된다면, 부분이 전체로 보이지 않고 독립된 요소로만 보일 것이다. 너무 많은 정보가 제공된다면, 폐쇄의 법칙이 적용될 필요가 없다.



대칭과 순서  SYMMETRY AND ORDER

사람은 사물을 가운데를 중심으로 대칭인 형태로 보는 경향이 있다.

대칭은 고정되고 정렬된 느낌을 주며, 사람은 그런 느낌을 찾으려 하는 경향이 있다. 혼돈 속에서 정돈 된 것을 만들고 싶은 것은 인간의 본능이다. 이 이론에 의하면, 사물들이 완벽하게 대칭적으로 균형을 이룰 필요가 없음에도 불구하고, 우리는 균형있는 구성을 원하는 경향이 있다.

대칭과 순서 (Symmetry and Order)

위의 이미지에서, 당신은 세 개의 괄호를 볼 수 있어야 한다. 이 글의 뒤에서 다룰 근접의 원리에서는 사람들이 세 개의 괄호가 아닌 다른 것을 볼 것이라고 말할 수도 있다. 하지만 대칭의 법칙은 근접의 법칙보다 앞서서 적용된다.



형태와 배경  FIGURE/GROUND

요소들은 형태(시선이 가는 부분) 또는 배경(형태가 위치한 배경) 둘 중에 하나로 인식된다.

형태/배경은 밝은 공간과 어두운 공간 사이의 관계를 의미한다. 이 이론은 사람의 눈은 무엇이 보이는지 이해하기 위해 사물의 전체 형태를 배경과 분리하려 한다는 것이다. 이것은 사람이 어떤 사물을 보던지 가장 처음에 하는 행위이다.

형태와 배경 (Figure and ground)


형태와 배경의 관계는 어떤 것이 형태이고 배경인지 얼마나 잘 구분이 되는가에 따라 확실할 수도 있고 모호할 수도 있다. 위의 예는 불확실하게 구분되는 관계의 고전적인 예이다. 검은색과 흰색 중 어떤 것을 형태나 배경으로 볼지에 따라 두 개의 얼굴을 볼 수 도있고 화분을 볼 수 도있다. 이 두가지 인식이 쉽게 전환된다면 불확실한 관계라고 할 수 있다. 관계가 확실할 수록, 보는 사람에게 우리가 보여주고 싶은 것을 더 잘 보여줄 수 있다. 아래의 두 가지 이론이 도움이 될 것이다.


공간(Area)
겹쳐있는 두 개의 물체 중 작은 것이 형태로 보이고, 큰 것이 배경으로 보인다. 위의 오른쪽 이미지에서 볼 수 있듯,  색상에 관계없이 작은 물체가 형태로 보인다.

볼록함(Convexity)
볼록한 것이 오목한 것보다 형태로 보이는 경향이 있다.




균일한 연결  UNIFORM CONNECTEDNESS

시각적으로 연결된 요소들은 연결되지 않은 요소들보다 더욱 연관성있는 것 처럼 인지된다.

아래의 그림에서, 두 쌍의 요소들이 선으로 연결되어 있다. 이 연결은 연결된 요소들이 어떤 방식으로 관련되어 있는 것 처럼 인식시켜 준다.

균일한 연결 (Uniform Connectedness.)

게슈탈트의 모든 이론들은 사물들이 서로 연관되어 있다는 것을 의미하고 있으며, 그 중에 균일한 연결이 가장 강력하다. 위의 이미지에서는 두 개의 사각형과 두 개의 원이 보이지만, 시각적으로 연결되어 있는 사각형과 원의 결합이 더욱 강해 보인다.

연결되어 있다는 것을 인식시키기 위해 선이 요소와 닿아있을 필요는 없다는 것도 주목하라.



공동 영역  COMMON REGIONS

닫힌 공간에 존재하는 요소들은 그룹의 일부분으로 인식된다. 

요소들 간의 연결을 보여주는 또 다른 방법은 요소들을 가두는 것이다. 닫힌 공간 안에 있는 것들은 서로 연관된 것으로 인식되고, 닫힌 공간의 밖에 있는 것들은 분리된 것으로 인식된다.  아래의 원들은 모두 같은 원이지만, 두 개의 다른 그룹으로 나눠서 보면 각각의 그룹에 있는 원들끼리 서로 연관되어 보인다.

공동 영역 (Common Regions.)

공동의 공간을 보여주는 전형적인 방법은 위에 그린 것 처럼 연관된 요소들 주변에 박스를 그리는 것이다. 각각 다른 배경색 위에 요소를 배치하는 것도 공동의 공간을 보여주는 방법이다.



근접  PROXIMITY

서로 가까이 있는 요소들은 서로 멀리 떨어져있는 요소들보다 더 연관되어 보인다.

근접은 공간이 닫혀있는 공동영역과 비슷한 개념이다. 요소들이 서로 가까이 위치해 있으면, 따로 떨어져 존재할 때보다 그룹의 일부분으로 인식된다. 그룹 안의 요소들이 그룹 밖의 요소와의 거리보다 서로 가까이 있을 때 더욱 그렇게 보인다.

근접 (Proximity.)

요소들은 근접해 있는 관계처럼 보이기 위해서 서로 비슷한 모양을 할 필요는 없으며, 서로 가까이 있기만 하면 된다.



연속  CONTINUATION

어떤 선이나 곡선을 따라 나열된 요소들은 그렇지 않은 요소들보다 더 연관되어 보인다.

강이나, 길, 울타리의 선을 따라가는 것은 사람의 본능이다. 사람이 특정한 방향을 따라서 보거나 움직이게 되면, 별로 중요한게 없다고 판단될 때 까지 계속 따라서 보거나 움직이는 경향이 있다.

연속(Continuation.)

이 원리에서 더 나아가면, 사람은 이 형태가 끝나는 점을 넘어서도 계속된 형태를 인지한다는 것을 알 수 있다. 위의 이미지에서, 우리는 한 점에서 만나는 네 개의 라인과 커브가 아닌, 하나의 라인과 하나의 커브가 교차하는 것을 볼 수 있다.



공동 운명  COMMON FATE (SYNCHRONY)

같은 방향으로 움직이는 요소들은 움직이지 않거나 서로 다른방향으로 움직이는 요소들보다 더욱 연관되어 보인다.

요소들이 서로 떨어져있거나, 형태가 비슷하지 않아도, 똑같이 움직이거나 변화하고 있으면 그 요소들은 서로 연관되어 보인다. 요소들이 꼭 같은 방향으로 움직이고 있을 필요는 없다. 공동 운명을 가진 것처럼 보이기만 하면 된다. 예를 들면, 네 사람이 같이 있을 때, 두 사람이 오른쪽을 향해서 서있는 것 같이 보딘다면 그들은 공동 운명을 가진 것 처럼 보일 것이다. 두 명이 같은 방향을 바라보고 있기만 해도, 공동운명을 가진 것처럼 보인다.

공동 운명 Common Fate (Synchrony).

위의 그림에서, 화살표는 서로 공동 운명을 가졌다는 것을 충분히 보여주고 있다. 공동운명을 보여주기 위해 움직임이나 변화가 꼭 필요한 것은 아니지만, 움직임을 암시하는 같은 방향의 화살표를 보여주는 것 보다는 공동운명을 더욱 강하게 보여줄 수 있다. 



평행  PARALLESISM

서로 평행을 이루고 있는 요소들은 서로 평행이 아닌 요소들보다 더욱 연관되어 보인다.

이 원리는 위의 공동운명과 비슷한 원리이다. 선은 어떤 방향을 지시하거나 움직이는 모습으로 해석될 수 있다. 평행선은 서로 같은 방향을 가리키거나 움직이는 것으로 보일 수 있기 때문에 공동운명과 비슷한 원리라고 할 수 있다.

평행  (PARALLESISM)




유사  SIMILARITY

비슷한 특징을 가지고 있는 요소들은 그렇지 않은 요소들보다 더 연관되어 보인다.

색상, 형태, 크기, 텍스쳐 등 여러가지 특징이 유사성을 가질 수 있다. 보는 사람이 유사성을 발견한다면, 공유하는 특성으로 인해 요소들이 연관되어 보일 것이다.

아래의 그림을 보면, 색상의 유사성으로 인해 붉은 원들은 붉은 원들끼리 연관되어 보이고, 검은 원은 검은 원들끼리 연관되어 보인다. 모두 같은 형태의 원이라도, 붉은 원과 검은색 원들은 서로 유사해 보이지 않는다.

유사 (Similarity)

온라인에서는 링크의 컬러에서 유사성의 원칙을 확실히 볼 수 있다. 전형적으로 컨텐츠 안의 링크는 파란색 밑줄이 있는 텍스트로 표시된다. 이 것은 보는사람에게 이 다른 종류의 텍스트들이 서로 연관되어 있다는 것을 알게 해주고, 이것이 링크를 나타낸다는 것을 알게 되면, 다른 것들도 또한 링크를 나타낸다는 것을 알게 된다.



초점  FOCAL POINTS

특별한 점이 있거나, 강조되거나, 다른 요소들은 보는 사람의 주의를 집중시킨다.

이 이론은 우리의 주의가 다른 요소들과는 다르게 보이는 요소들의 대비에 집중된다는 것을 의미한다. 아래의 이미지를 보면, 당신의 시선은 사각형에 집중될 것이다. 다른 요소들과는 다른 색상과 형태로 되어있기 때문이다. 그리고 더욱 강조하기 위해 그림자 효과도 적용되었다.

초점 (FOCAL POINTS)

초점의 원리는 사람들에게 잠재적인 위험을 빨리 인식시키고 싶은 용도로 사용될 수 있다. 유사와 초점의 원리는 서로 관련성이 있으며, 초점의 원리는 다른 요소들이 서로 유사하게 보이지 않는다면 성립될 수 없다.



과거의 경험  PAST EXPERIENCES

요소들은 관찰자의 과거의 경험에 따라 인식되는 경향이 있다.

과거의 경험은 게슈탈트 이론 중 가장 약한 이론일 것이다. 다른 이론들과 겹치는 상황이라면, 다른 이론들이 과거의 경험 이론보다 더 앞서 영향을 미칠 것이다.

과거의 경험은 개개인에 따라 다르기 때문에, 어떻게 인지될지 가정을 하기가 어렵다. 그러나, 공유할 수 있는 공통의 경험도 있다. 예를 들면, 색상의 의미들은 과거의 경험으로부터 의미를 전달할 수 있다.

과거의 경험 (PAST EXPERIENCES)

살면서 신호등을 많이 보았기 때문에, 붉은 색은 멈추라는 의미이고, 초록색은 가도 된다는 의미라는 것을 알 수 있다. 위 이미지에는 신호등에서 일반적으로 사용하는 세 가지 색상이 적용되어 있어서 신호등의 이미지로 인식했을 것이다. 이것이 과거의 경험 법칙이 작동하는 원리이다.






게슈탈트 이론 요약

개슈탈트의 이론은 중요한 이론이다. 우리가 디자이너로서 작업하는 모든 것의 기초를 이루고 있기 때문이다. 이 이론은 모든 사람이 사물을 시각적으로 인식하는 방식에 대해 말하고 있다. 

위의 법칙들은 이해하기 쉬울 것이다. 위의 내용들 중 이미지와 정의만 이해해도 된다. 동시에 이 이론들을 기본적으로 이해를 하는 것과 그 이론들이 디자인에 어떻게 영향을 미치는지를 아는 것과 는 다르다.

다음에는 게슈탈트 이론이 디자인에 어떠한 영향을 미치는지에 대해서 다룰 것이다. 동시에 유사성의 원칙이 균형잡힌 구성을 잡는데 어떻게 도움이 되는지, 초점과 유사성의 원칙이 디자인에 있어서 시각적 계층을 만드는 방법에 대해서도 다룰 것이다. 다음에는 형태/배경의 관계와 요소를 위치할 때 고려해야 할 점에 대해서 더 깊이 알아보도록 하겠다.




원문 출처 : 

https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/























작가의 이전글 [번역]정직한 UI와 올바른 선택
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari