Journal Archive

시지각은 시각과 지각의 합성어로 우리가 시각을 통해 들어온 외부 세계의 정보를 조직화하고 해석하는 과정을 의미한다. 인간의 오감 중에서 정보를 가장 많이 수용하는 감각은 시각으로 다른 감각기관 대비 외부의 물리적 에너지를 신경신호로 전환시켜 정보를 형상화시킨 후 대뇌에 기억시키는 능력이 탁월하다. 지각은 개인의 경험을 바탕으로 그 대상이 무엇인가를 이해하는 과정으로 마음의 해석과 같은 심리적 요인이 작용된다[4]. 즉, 인간은 사물을 볼 때 단순히 눈으로 볼 뿐만 아니라 동시에 시각 자극에 대한 주관적 정신작용이 결합되어 지각을 하게 된다. 우리는 눈을 통해 수용된 외부 세계의 자극에 대한 해석 과정을 통해 그 대상을 지각하게 되며 이 과정을 통해 정보화하게 된다[5]. 우리는 대상을 눈을 통해 보지만 마음을 통해 이해한다.’라고 하였다. 이와 같이 우리의 시각은 단순히 이미지를 눈으로 지각하는 것에서 더 나아가 자의적 해석과정을 통해 마음으로 받아들일 수 있을 때 해당 이미지는 더 큰 의미를 갖게 된다[6]. 시지각의 과정을 보면 그림 3과 같이 외부 자극이 눈에 전달되면 이 정보는 망막 이미지를 통해 신경을 따라 대뇌로 전달된다. 이후 인간의 두뇌는 들어온 각종 정보를 분류하고 해석하는데, 만약 이 외부 자극의 사전 지식이나 경험이 없다면 뇌는 감각기관의 정보에 전적으로 의존해 그 자극에 대한 해석을 하게 된다. 반면 외부 자극의 경험이 있을 시에 뇌는 저장된 과거의 경험인 보는 사람의 마음가짐, 주의 정도, 관심과 흥미의 정도, 과거의 누적된 경험과 기억 등을 종합하여 정보의 패턴을 분류한 후 형태를 지각한다[7], [8].

Fig. 3. 
The Process of Visual Perception

게슈탈트(Gestalt) 시지각 원리는 1910년대부터 독일의 심리학자 막스 베르트하이머(Max Wertheimer), 볼프강 쾰러(Wolfgang Köhler), 쿠르트 코프카(Kurt Koffka)를 중심으로 사물의 배치 방식과 인간의 시지각에 관련된 원리를 이론으로 규명한 내용이다. ‘전체는 개별 요소의 단순한 합이 아니라 그 이상의 의미를 지닌다(The whole is more than the sum of its parts.)’라는 유명한 명제를 제시하였으며[6], [10], [12], 이 측면에서 게슈탈트는 단순 형태(Form)나 모양(Shape)의 의미이기보다는 시각에 의해 얻어진 정보가 지각에 의해 체계화된 전체(Whole)로서의 형태의 개념이 더 강하다. 즉, 게슈탈트 원리에서 형태의 지각은 부분이 아닌 전체적 체계화를 통해 이루어지고, 대상이 무엇을 의미하는지 그 형태의 최종 개념을 결정하는 것이 이 지각 과정을 통해 이루어진다[5]. 그러한 이유로 게슈탈트는 형태, 모양의 의미를 내포하는 독일어이지만 단순히 개념으로 불리기보다는 사물이 배치되는 구조의 개념이 강조된 배열(Configuration)이나 게슈탈트 용어 그 자체로 불린다[3], [11]. 이와 같이 게슈탈트 시지각 원리는 전체적 체계화 차원에서 요소의 구조에 따른 조직화 방식이 중요한데 이를 살펴보면 다음과 같다. 우리 뇌는 외계 형태에 대한 정보들의 복잡함 및 애매함을 정리한 후 단순화하여 수용하려 한다. 이는 정보들을 기억하기 쉽거나 특정하게 집단화된 형태로 해석하려는 경향으로[6], [9], 게슈탈트 시지각 원리는 이와 같이 분리된 개별 요소들이 지각단위로 융합될 수 있는 방법과 우리의 뇌가 자극을 통해 수용된 감각 정보를 어떻게 의미 있는 것으로 조직화하는지 그 요소들에 대한 구조적 조직화 원리를 중심으로 한다[4], [7], [12], [13]. 즉, 게슈탈트 명제는 조직화된 전체(Organized Whole)의 의미로 지각을 통합(Integration)한 후 조직화(Perceptual Organization)한 것이다. 여기에서 지각적 통합(Perceptual Integration)은 유입된 감각 결과를 통합하여 의미가 있는 형태로 조직화하는 것을 말한다[10]. 사람의 눈은 카메라나 창문과는 다르다[14]. 사람들은 어떠한 대상을 지각할 때 카메라와 같이 보이는 그대로를 수용하기보다는 체계화된 형태로 만들어 그 의미를 지각하려는 경향이 있다. 여기에서 체계화된 의미 있는 형태가 게슈탈트인 것이다[5], [7]. 그러므로 게슈탈트는 주어진 환경에서 각 요소의 정보가 체계화된 형태, 즉 조직화하여 의미 있게 지각된 혹은 재구성된 형태를 의미한다. 이는 사람들이 갖고 있는 기억(memories)과 기대(expectation), 믿음(belief)과 가치관(values) 및 감정 상태(emotional status)에 따라 물체에 대해서 선 경험이나 지식으로 불완전한 시각을 보충한 후 세상을 주관화된 형태로 재해석한다는 의미이기도 하다[14], [15], [16]. 따라서 게슈탈트는 시각적으로 형태를 인식하기 위한 조직화를 이루려는 과정이며 결과라고 할 수 있다[5].

게슈탈트 시지각 원리는 두뇌가 기본적인 자극들을 체계화하는 방식의 유형에 대한 연구이며[5] 다음과 같은 원리들로 구성되어 있다.

(1) 전경과 배경의 원리

사람은 사물을 볼 때 사물의 전체 형태를 배경과 분리하려는 행위를 가장 먼저 한다[17]. 이와 같이 지각의 첫 단계는 배경에서 형태를 구분하는 것에서 시작되며[18] 이때 형태의 윤곽이 어떻게 달리 지각되는지의 이해를 위해 지각의 윤곽적 측면을 다루는 것이[6] 전경과 배경 원리(Figure & Ground Segregation)이다. 이 원리는 게슈탈트를 이루는 기본 원리로 사물 인식 시 그냥 보는 것이 아닌 우리가 보고 싶은 것을 배경과 자연스럽게 분리시켜 보는 것을 말하며[9] 여기서 사물의 형태를 보는 것은, 단순하게 본다는 것이 아닌 덴마크의 심리학자 루빈(Edgar Rubin)의 잔의 예시와 같이 형태를 정확히 파악하기 위해 윤곽선(Contour)을 기준으로 선택적으로 통찰하는 것을 의미한다[19]. 지각에 의해 뚜렷이 보이는 형태 또는 도형이 전경이며, 형태를 둘러싸고 있는 바탕을 배경이라 한다. 전경과 배경의 원리는 형태 지각 시 단순하게 형태만을 보는 것이 아닌 형태를 둘러싼 배경 영향을 받는 것을 의미한다[5]. 전경과 배경 원리를 통해 중요 시각요소의 명확한 강조가 가능하며[9] 한 공간에서 두 가지 다른 의미가 동시에 작용하도록 다중 의미를 전달하게 할 수도 있다[20].

(2) 그루핑의 원리

그루핑의 원리(Principle of Grouping)는 배경에서 분리된 전경을 의미 있는 형태로 조직화하기 위한[17] 과정으로 조직적 정보 전달을 위해 시각적으로 묶어주는 원리이다. 이 유형에는 가까운 것들끼리 묶어주는 근접성의 원리(Principle of Proximity), 모양이 비슷한 것들끼리 묶어주는 유사성의 원리(Principle of Similarity), 틈이 있으면 채워주는 폐쇄성의 원리(Principle of Closure), 운동의 방향성에 따라 연결되는 연속성의 원리(Principle of Continuation), 같은 운동 방향일 때 하나의 공동화되는 공동운명의 원리(Principle of Common Fate)로 구성된다. 다음은 각 그루핑 원리를 정리한 내용이다.

• - 근접성의 원리 : 좀 더 가까이 있는 두 개 혹은 그 이상의 시각요소들이 무리를 지어 패턴이나 그룹으로 집단화되며[3] 가까이 있는 요소들에서 서로 연관성을 찾고 그렇지 않은 요소들은 구분하려 하는 원리이다.
• - 유사성의 원리 : 유사성은 모양, 크기, 색상 등 연관성이 큰 유사 시각요소들끼리 우선적으로 하나의 패턴으로 집단화하려는 경향으로[3] 비슷한 성격의 요소들을 하나로 인식할 수 있도록 만들어 주는 원리이다[9].
• - 폐쇄성의 원리 : 사람의 마음은 기존 경험과 지식을 바탕으로 빈틈을 채워서 생각하며 구조나 의미의 완전성을 찾으려는 경향이 있다[9]. 즉 윤곽선이 뚫려 있어도 빈틈을 메워 완전히 닫힌 형태로 구조화하여 지각하려는 원리이다[5].
• - 연속성의 원리 : 베르트하이머의 ‘좋은 연속의 법칙(Good Continuation)’이란 말에서 유래하였으며[11], 곡선은 곡선대로 직선은 직선대로 어떤 형태나 그룹이 방향성을 가지고 연속될 때 이어져 보이게 되는 원리이다[3][5].
• - 공동운명의 원리 : 같은 방향으로 대상들이 움직일 때 이들을 하나의 단위로 인식[3]하며, 동일 방향으로 움직이는 요소들이 다른 방향으로 움직이거나 움직이지 않는 요소들보다 더욱 관련되어 보인다는 원리이다[17].

(3) 프래그넌츠의 원리

프래그넌츠(Principle of Prägnanz) 원리는 사람들의 마음은 어떠한 사실에 대해 간결한 의미를 찾으려 한다[20]는 원리로 단순성의 원칙, 또는 간결성의 원칙이라고도 한다[3]. 인간의 지각구조는 가장 단순하고 안정적이며 경제적인 구조로 형태를 지각하려는 경향이 있으며[21] 단순한 형태일수록 정보 전달 또한 명확해지므로 인지 부하를 감소시키는 직관적 시각화가 중요하다. 프래그넌츠 원리를 통해 필요한 시각 요소만 남기거나 혼란이 발생될 요소를 최소화하여 정보의 의미를 명쾌히 할 수 있다. 필요 시각 요소만 사용하여 정보의 의미를 명쾌하고 정확히 전달할 수 있게 되며 경제성 또한 갖게 된다[20].

(4) 친숙성의 원리

친숙성(Principle of Familiarity)의 원리는 정보 부족에 따른 불완전한 형태를 이미 알고 있는 익숙한 형태와 연관시켜 스스로 이해하려는 경향이다[7]. 친숙성의 법칙은 메타포의 개념과 밀접하고 예측성(predictability)을 제공한다[20]. 형태의 테두리나 공간이 온전하게 존재하지 않더라도 집단화된 형태가 친숙하거나 의미 있어 보인다면 과거의 경험으로부터 그 의미를 전달받을 수 있다[12].

그림 5의 첫 번째 이미지[28]는 레이아웃 디자인 시 근접성의 원리가 적용된 예로 요소가 동일 간격일 때는 동일 수준 정보의 나열된 의미로 보이나 오른쪽과 같이 중간에 간격을 두면 분리된 3개 그룹으로서의 의미를 전달한다. 두 번째 이미지[29]는 그리드 공간으로 구분된 후 한 덩어리로 그룹화된 섬네일 이미지, 텍스트, 하단 버튼은 서로 관련 정보임을 의미한다. 숫자 ‘13’ 사례의 경우 더욱 근접될수록 영문 ‘B'로 인지되어 근접에 따른 의미 변화를 보여준다. ’아버지가 방에 들어가신다‘, ’No Where'와 ‘Father'사례도 근접성의 원리에 따른 띄어쓰기 원칙에 따라 그 정보의 의미가 변화한다. 이메일 혹은 문자 메시지에 활용되는 웃는 얼굴 ‘:-)’은 근접될수록 서로 분리된 3개의 독립된 문자로 인식하기보다 하나의 결합된 웃는 얼굴 정보가 그 의미로 전달된다[30]. 이와 같이 텍스트 기반 시각 정보는 사람들이 개별 낱자 형태를 먼저 보기보다는 그룹 된 각 단어를 먼저 인식 후 그 정보의 의미를 인지하는 특징이 있다[31]. 마지막 이미지에서 우리는 세 개의 괄호를 볼 수 있다. 근접의 원리 기준이라면 세 개의 괄호가 아닌 가까운 것끼리 묶여서 지각되어야겠지만 이 경우는 시작과 끝이 마주 보는 대칭의 법칙이 적용된 예로 이는 근접의 법칙보다 앞서서 그 정보의 의미가 형성된다[17].

Fig. 5. 
A Case of the Principle of Proximity.

*There is an image that can convey meaning only in Korean

픽토그램[32]과 고객 리뷰(Customer Review)[33]의 경우 컬러가 유사한 요소끼리 그룹화되어 그 정보의 의미를 전달한다. ‘5’라는 숫자 정보가 인지되는 색맹검사[34]와 같은 사례는 유사 명도, 혹은 색상을 통해 인지된 정보의 의미를 전달하고 있다. 그다음 사례들과 같이 버튼[29], 텍스트 메뉴[34] 등 각종 UI 컴포넌트에 유사성의 원리가 적용된 사례, 그리고 최근 방문 페이지에 다른 컬러를 적용하여 그 의미를 전달하는 사례 등에서 컬러 유사성에 따른 그룹화를 통해 인터랙션 가능 여부를 포함한 각종 기능 조작 관련 정보의 의미를 형성시키고 있다. 마지막 사례는 균형과 연결(Uniform Connectedness)의 원리가 적용된 사례로 시각적으로 연결된 요소들이 유사성 원리보다 더욱 관련되게 지각되며 요소와 선이 꼭 닿아있을 필요는 없다.[17]

Fig. 6. 
A Case of Principle of Similarity

오스카 무노즈(Oscar Muñoz)는 뜨거운 돌 위에 그림을 그리는 작품을 진행하였는데, 이는 새로운 선을 그리면 이전 그림이 증발되어 사라지지만 관객의 마음속엔 여전히 완성형의 얼굴을 보게 되는 폐쇄성 원리의 경험을 준다[35] 밤하늘 7개 별자리를 보면 실제 이어지진 않았지만 폐쇄시켜 북두칠성[36]의 의미임을 연상할 수 있다[5] 펜더[37], 축구공[38], USA 로고[37], 원형 로딩 바[28], 아이콘[39] 모두 폐쇄되게 이어지지 않았지만 최소한의 정보나 시각 단서[6]를 통해 우리는 완성형의 의미를 전달받을 수 있다.

Fig. 7. 
A Case of Principle of Closure

증감 라인 그래프[40]가 겹쳐있을 때 동일 방향으로 연속되어 있는 선들은 중첩되어도 연속된 방향의 정량 정보의 의미를 전달한다. NY 양키스(New York Yankees)[41]사례는 ‘N'과 'Y'가 겹쳐있어도 같은 방향으로 이어진 텍스트 정보의 의미를 전달한다. 미국 전문 의료기기 제조업체인 메드트로닉(Medtronic)[42]로고는 가운데 원을 중심축으로 45도 각도 간격으로 자세가 연속된 인체 표현을 통해 인간 중심 정보의 의미를 전달하고 있다[4]. 지리 정보, 항공 이동 정보 등에 적용된 이동 경로 선[43]은 겹침이 있어도 연속된 방향으로 이어진 정보에 그 의미를 부여한다. UI 디자인에서 이미지 및 텍스트 정보가 일부 잘려서 제시되면[44] 연속된 방향으로 추가 정보가 있음에 대한 의미를 전달한다. 여러 개 Q&A가 연속 배치되는 등의 각종 리스트(Lists)[45]UI 컴포넌트는 연속적으로 이어진 정보가 있음에 대한 의미를 전달한다.

Fig. 8. 
A Case of Principle of Continuity

첫 번째 사례[17]와 같이 화살표로 같은 방향의 움직임을 암시하거나 두 명이 같은 방향을 바라보고 있다면, 그리고 실제 움직임이 있다면 공동운명과 관련된 정보의 의미 전달을 하게 된다. 원형 메뉴(Circular Menu)와 탭(Tab)[44] 캐스 케이딩 메뉴(Cascading menu)[46]와 같은 UI 컴포넌트의 경우에도 동일 운동 방향으로 그룹화되어 연결된 정보의 의미 전달을 한다. 데이터 시각화에 많이 활용되는 노드 링크 시각화[12]도 인터랙션 시 움직임 방향으로 묶여 한 그룹 단위임에 대한 의미 전달을 하고 있다.

Fig. 9. 
A Case of the Principle of Common Fate.

A-1, A-2와 같이 전경과 배경의 원리에서는 윤곽선의 유형과 텍스트 조합에서 정보의 의미 생성이 주로 일어난다.

A-1과 같이 열린 윤곽선의 한쪽 면만 함께 쓰는 경우, A-2와 같이 폐쇄된 윤곽선을 함께 쓰는 경우가 있으며 함께 제시된 텍스트 정보가 전경과 배경의 시각언어를 오가며 인지할 수 있게 단서를 제공하는 것이 중요하다. A-3은 UI 디자인에서 많이 쓰이는 팝업 및 모달 윈도우로, 윤곽선 밖의 화면을 어둡게 톤다운 처리하여 전경과 배경의 의미를 구분한다.

B-1의 경우 레이아웃에서 가장 많이 활용되는 각 시각요소의 그룹화로 요소 간 공간을 통해 정보 간 구분의 의미를 전달한다. B-2의 띄어쓰기 사례들은 요소들의 가깝고 멀고의 거리 단서에 따라 직접적 생성 정보의 의미 변경이 일어나므로 조합 방식에 따른 창의성 부여에 용이하다. B-3의 중괄호 사례는 근접성 원리보다 대칭성의 원리가 더 강하게 의미를 전달하는 예외 사례로 유의해야 한다.

C-1은 유사성의 대표 시각 요소인 컬러와 명도의 유사성에 따른 정보 그룹화와 의미 생성을 보여준다. C-2는 UI 디자인의 버튼과 메뉴 예시로 롤오버를 통해 의미 생성의 그룹화가 가능하고 컬러 외에 형태, 크기도 유사성의 의미작용이 일어날 수 있음을 설명한다. C-3은 선으로 요소를 연결시킬 경우 요소 간 유사성이 없더라도 유사성의 원리보다 연결성이 더 앞서 그룹화의 의미를 전달하므로 유의해야 한다.

D-1은 형태의 시각 삭제 시 우리 마음이 그 형태의 의미를 완성 지어 볼 수 있게 하는 예시의 가이드이다. D-2는 실제 선이 없어도 폐쇄된 도형을 보게 되는 폐쇄성 원리의 대표 예시로 정보가 유실되기 전까지 형태를 생략할 수 있는 의미 유지의 지점 발굴이 중요하다. D-3은 UI 프로그레스 바와 아이콘 적용의 예시로 역시 의미를 가늠할 수 있는 완성형 도형과 시각 삭제의 지점이 중요하다.

E-1은 여러 선이 겹치더라도 동일 방향으로 이어짐의 의미를 생성시켜 주는 연속 정보의 단서를 통해 그룹화가 가능함을 제시한다. E-2와 같이 로고에 적용 시 요소가 겹치더라도 각도 등 운동 방향이 같을 때 연속되게 의미 생성이 된다. E-3과 같이 UI 디자인 시 이미지가 잘리거나 걸쳤을 때 추가 정보가 있음의 의미를 생성하는 연속성의 단서 제공이 된다.

F-1은 정적, 동적 관계없이 동일 운동 방향에 따라 공동 운명으로 묶여 있음에 대한 의미를 생성한다. F-2는 UI 디자인의 탭과 캐스케이드 메뉴로 묶임 표현의 공통 시각요소와 위계 체계를 통한 의미 생성이 중요하다. F-3은 데이터 시각화의 노드-링크로 동일 방향으로 노드들이 인터랙션 되면 공동운명의 의미를 전달한다.

G-1은 프래그넌츠 원리 예시로 한눈에 사물을 단순하게 인지할 수 있도록 그 겹쳐진 구조 원리의 단서 정보 제공을 통한 의미 생성 및 전달이 중요하다.

H-1의 친숙성의 원리는 사물에 대한 보편적 이전 경험을 연결시켜줄 수 있는 단서 제시가 중요하며, 그 사물의 원형의 의미를 이해하기에 적당한 양의 정보 제공이 중요하다.