인터넷 광고 - ⑩ 인터넷에서 보여지는 그래픽의 시지각
안정된 시선유도 등 '효율적 정보전달'은 인터페이스 디자인의 최대 목적
정관호/멀티미디어팀
"외계를 바라보는 과정은 대상 자체의 속성과 관찰하는 주체의 본성 사이에서 이루어지는 상호작용 과정이다" - 루돌프 아른하임의 「미술과 시지각」의 서문 중 '정보의 바다!' 인터넷을 대표하는 가장 정석적인 문장으로 알려져 있다.
그러나 동시에 인터넷은 '정보의 쓰레기장'이라는 오명을 가지고 있다. 인터넷의 시각적 측면도 이와 같다. 인터넷은 '시각적 보물창고'인 동시에 '시각적 공해공간'이 되어버렸다.
인터넷 관련 테크놀러지의 발전과 정보량의 폭증 속에서 초기에는 보이지 않던 많은 무책임한 시각 기호의 등장으로 커뮤니케이션의 오류를 범하고 있으며, 정리되지 않은(내용이 아닌 형식면에서) 정보의 무자비한 융단 폭격은 사용자의 시각적 혼란을 야기시키고 있다.
인터넷에서 시각적 측면이 중요한 것은 인간이 지닌 감각 중에 '자극과 동시에 지각'이 이루어지는 가장 예민한 감각이 시각이라는 점과 인터넷이 가지는 정보의 99.9%(문자를 포함한)가 시각 정보라는 데 있다.
따라서 인터넷을 시지각의 관점에서 살펴보는 것은 반드시 필요한 과정이며 이를 통해 한층 더 발전된 홈페이지 디자인이 이루어지리라고 본다.
1. 인터넷과 기호
기호란 인간이 지각할 수 있는 모든 감각을 통해 얻어지는 물체 자체에 대한 상징이다. 간단히 말해 A를 설명하기 위해 B를 만들었다면 B는 A의 기호가 된다. 또 이 기호들은 자연적 또는 인위적 학습을 통해 공유하게 되며 동시에 커뮤니케이션 집단을 형성하게 된다. 그것은 기호가 하나의 약속이기 때문이다.
'A를 B라고 하자'는 약속의 산물이 커뮤니케이션인 것이다. 우리는 대표적인 기호로 문자를 들 수 있다. '목덜미엔 누렇고 긴 갈기가 나 있고 이빨이 날카롭고 힘이 세며 육식성인 무서운 동물'을 간단하게 '사자'라고 불렀을 때 '사자'라는 개념을 알고 있는(학습된) 사람은 <그림1>의 커뮤니케이션 과정을 거쳐 원대 상체에 대한 연상작용을 일으킨다.
다음의 예문을 보자. 예) "안녕하십니까? 여기는 LG애드입니다" 이 예문 속에서 'LG애드'를 '파란색의 강조된 문자'로만 인식했다면 인터넷을 모르는 사람일 것이다. 인터넷에서 파란색의 문자는 다른 HTML 문서로 링크되는 버튼을 의미하며 이것은 공급자와 사용자간의 약속이다.
인터넷에는 또 하나의 같은 기능을 하는 중요한 기호가 있다. <그림2>를 보면 왼쪽의 화살표는 단순한 지시를 오른쪽의 손가락은 클릭이 가능한, 즉 버튼 역할을 할 수 있는 장소에 있다는 것을 의미한다. 따라서 이 기호의 약속에 익숙한 사람일수록 클릭할 곳을 찾기 위해 손가락 모양이 나타날 때까지 끊임없이 마우스를 움직이게 된다.
이렇게 이중적인 기호(파란색의 문자와 포인터의 변화)가 필요한 것은 보다 정확한 정보 전달을 위한 것이다. 시간이 가면 갈수록 홈페이지의 기능적인 면보다 디자인적 아름다움을 중시하는 경향이 생겨나면서 버튼이 아님에도 단순한 강조나 이미지의 메이크업을 위해 파란색 문자를 사용하는 경우가 많아졌다.
이 정보의 오류를 보완해주는 것이 바로 포인터의 변화다. 인터넷을 안다는 것은 학습된 기호의 규칙을 안다는 것이며 이를 따라줌으로써 인터넷 커뮤니케이션 집단에 소속될 수 있다.
2. 인터넷과 시지각
인간의 감각 중에 고등 감각계에 속하는 시각은 매우 복잡한 수용체계를 지니고 있어서 <그림3>과 같이 단순해 보이는 그러나 결코 쉽게 설명되지 않는 부분을 가지고 있다. 보여지는 지각(이성적 사고에 의해 깨닫게 되는) 이전의 지각(선험적인 깨달음)이 시지각이다.
우리가 한 곳을 보고 있다고 생각한다면 그것은 착각에 불과하다. 눈은 끊임없이 움직이며 대상체를 탐색한다.
<그림4>는 눈이 한 대상체를 탐색하기 위해 얼마나 많은 안구 운동을 하는가와 어느 곳에 탐색이 집중되는가를 실험한 것이다.
이것은 의식의 결과가 아니다. 무의식적으로 이루어지는 눈의 초자동화 기술이다. 결과값에서 알 수 있듯이 눈은 차별화되고 복잡한 부분을 찾아다닌다. 이것을 다른 말로 '시각적 유희'라고 할 수 있는데, 광고에서 늘 강렬한 그래픽 요소를 사용하게 되는 이유 중 하나가 바로 이것이다.
이 실험에선 정지된 그림만을 가지고 했지만 이미 잘 알려진 연구들에서 시각적 유희의 목표가 되는 것은 ① 움직이는 것 > ② 대상체의 특이한(관심을 끄는 형태 또는 색상 ) 부분> ③ 대상체의 외곽선 > 순으로 나타난다고 한다. 또 인간은 인간에게 가장 큰 관심을 보인다. 이를 증명하는 것이 <그림5>와 <그림6>이다.
이것은 Yahoo 등과 같이 웹 검색엔진에 올려진 다양한 종류의 LG 광고들 중 가장 클릭률이 높았던 것으로 모두 코믹한 인간을 그래픽적 요소로 활용했다는 공통점을 지니고 있다.
그동안의 클릭률을 비교해보면 인간+코믹 > 인간 > 일반 사물 > 문자의 순으로 문자만으로 구성된 광고가 가장 떨어진다. 예외 경우로는 수용자 이익에 소구(상금이 걸린)하는 광고는 문자만으로도 클릭률이 높다.
그 순서야 어떻든 일단 자극 수용기를 통해 얻어진 대상체의 형, 색상, 동적 방향성, 질감, 위치에 따른 균형, 양감 등은 순식간에 저울질되고 정보화되어 뇌로 전달된다.
다시 안구 운동의 순서로 돌아가보자. 잘 정리된 디자인은 시선의 순서를 잘 정리하는 것과 같다고 했다. 무엇을 먼저 보여야 하고 무엇이 나중인가? 통일, 변화, 강조의 기초적인 디자인 원리가 이 질문의 해답을 제시할 것이다.
<그림7>과 <그림8>을 보자. 실제 화면을 보면 <그림7>의 경우 움직이는 그래픽이 4개 이상이었으며 원색적이고 강렬한 색채와 큼지막한 글자들로 모니터를 꽉 메워버린다. 눈이 어디를 봐야 할지 모르게 만들었다.
특히 일반적인 Web Search Engine 경우처럼 지정된 한 곳에서 광고를 소화하지 않고 한 페이지(특히 메인 페이지)에 모든 Gif Animation 광고를 삽입함으로써 2개 이상의 TV를 동시에 보고 있는 것처럼 시선이 둘 곳을 모르고 방황하게 된다.
<그림8>의 경우에는 다섯 종류나 되는 색상의 문자 기호들로 Hyper Text에 대한 시각적 오류를 범하게 했다. 도대체 어떤 것이 버튼일까?
신문이 가지고 있는 특성(큼지막한 헤드라인을 요구하는 기사들과 서로 더 잘 보이게 해달라는 광고들) 때문에 어쩔 수 없는 디자인이었다고 할지 모르지만 우리나라와 가장 유사한 신문 형태를 취하고 있는 일본 요미우리 신문사의 홈페이지를 보자.
통일의 변화 그리고 강조란 이런 것이 아닐른지…. 가장 효과적인 정보 전달 방법과 안정된 시선 유도 그리고 효과적인 광고 매체가 어떤 것인가를 잘 보여주고 있다.
3. 홈페이지 디자인의 미래
인터넷은 초기의 'Hyper Text(인터렉티브한 문자)'에 'Hyper Media'가 첨가되면서 디자인의 대상이 되기 시작했다. 사진과 일러스트가 들어가고 그림 형식의 타이포그라피가 등장했으며 화려하고 다양한 인터렉티브 애니메이션 기법들이 속속 합류하게 되었다.
이러한 시각적 기호들의 다변화는 인터넷의 확산과 더불어 이루어졌으며 그 확산 속에 그저 화려하거나 정보만 전달하면 된다는 식의 편협한 생각들로 조악한 디자인의 홈페이지들을 등장시키게 되었다.
홈페이지를 디자인하는 목적은 아름다운 Web Site를 구축하는 것이 아니라 정보를 얼마나 효율적으로 전달할 수 있느냐에 있다.
우리가 너무나 잘 알고 있는 유명한 웹 검색엔진들의 홈페이지 제작 의도를 유추해보면 한결같이 폭주하는 정보를 어떻게 분류할 것이며 사용자가 얼마나 쉽게 정보에 접근할 수 있도록 하느냐에 맞추어져 있다. 그리고 기술의 발전은 또 하나의 대안을 제시하고 있다.
<그림10>의 넷스케이프 4.0버전 초기 화면은 한 페이지 자체만으로도 수십페이지에 해당되는 정보를 소화해낼 수 있도록 제작되어 있다. 3개의 작은 윈도우를 모두 한 윈도우에 처리하려 했다면 17인치 모니터에서 최소한 2번 이상의 스크롤이 이루어질 것이고 정보의 시각적 연결고리도 끊어졌을 것이다.
정보의 고속화! 그것은 전용선의 속도가 빨라지고 신기술이 개발되어야만 이루어지는 것이 아니다. 기호의 조직화와 사용자를 위한 적절한 인터페이스 디자인을 하는 본질적인 고속화도 함께 이루어져야 할 것이다.