study of VISUAL HIERARCHY
시각적 우선순위에 관한 연구

어떻게 하면 디자인의 요소들을 내가 잘 활용할 수 있을까라는 디자이너로서 단순한 의문에서 시작하였다. 데이터 시각화를 하면서 각각의 정보 단계를 그래픽 요소들이 서로 침해하지 않 을까 항상 고민해왔다. 가령 1차 정보의 텍스트보다 바로 옆에 있는 2차 정보의 이미지가 관람자의 시각을 뺐는데 이런 경우는 어떻게 해결할까, 이런 의문들이다.
인터렉션 디자인에 대한 관심과 흥미가 커지고 공부를 계속하 면서, 이러한 의문을 내가 구현할 수 있는 능력 안에서 실험 해 볼 수 있을 것 같았다. 따라서 시각적 우선순위에 대한 이론을 정리해보고, 그것에 관해 실제 실험을 직접 해 보았다. 그리고 실제 UI디자인에서 사용자의 시각적 인지 순위까지 직접 실험 해 보았다.


시각적 우선순위
시각적 우선 순위는 디자인상의 정의에 따르면 “강조점을 따라 서정렬된시각요소들의집합을의미” 하며,눈으로인지할수 있는 사물의 올바른 차례라는 의미로 시각적 질서를 뜻한다. 루 돌프 아른하임 Rudolf Arnheim은 ‘질서는 인간이 이해하려 는 대상에 필연적으로 개입되어 있는 조건’이라고 하였다. 그 러므로 사물을 보면서 형성되는 시각적 우선 순위는 우리가 인 식하지 못하는 가운데 그 대상에 내재된 질서의 구조를 파악하 는것이다. 또한이현상에대한이해는시각적으로표현된내 용에 대해서 시각요소들이 어떤 관계를 가지고 있는지를 파악 할수있게해준다.이를통해우리는전달되는정보의쟁점을 이해하게 된다.
이연구에서는디자인그래픽요소들만의특징과여러요소 들 간의 관계에서 나타나는 대비와 그것이 가져오는 시각적 강 조 들이 만들어내는 시각적 위계질서를 알아보려 한다. 실험 요 소를 크게 구조, 크기, 색상, 모양으로 나누고, 보조적으로 이미 지, 텍스트, 텍스트의 종류, 위치, 기타 이미지 트렌드 등으로 분류하여 각자의 특징을 비교하는 식으로 실험을 진행하였다.




시선 추적기 제작

2013년 가을 학기 타이포그라피 시간, 아티스트 북이라는 프로젝트를 진행한 적이 있다. 평소 인터렉션 디자인에 관심이 많아 디 지털적으로 구현되는 아티스트 북을 만들었다. 실제 책 페이지를 직접 손으로 넘기면 디지털 화면의 책장이 넘어가 그 안에서 모 션 그래픽적으로 내용을 전달하는 형식이었다.
구현 원리는 책장마다 작게 색깔로 표시해두고, 카메라가 그 색을 인지해 해당 페이지로 이동하게 하는 식이었다.
이 프로젝트를 진행하면서 간단한 코딩으로 카메라가 색깔과 형태를 인식하게 할 수 있다는 것을 경험했다.
이후, 카메라 인식을 이용해 좀 더 큰 프로젝트를 진행할 수 있을 것 같았다. 특히시선인식을이원리를통해구현할수있을듯했다.흰색바탕(눈흰자)위에검고동그란원의형태(눈동자)를인식할수있다 면눈의위치와움직임을추적할수있을것같았고,그비례를잘계산하면스크린에서움직이는시선을계산할수있을것같았다. 검색 결과, 아주 똑같은 원리로Parsons School of Design의 Zachary Lieberman씨가 theEyeWriter 프로젝트를 진 행 했었고, 이 오픈 소소를 가지고 만든 삼성전자의 안구마우스 보급 사업, eyeCan 프로젝트의 한글 메뉴얼도 오픈 소스로 제 공되어 있었다.



시선 추적 소프트웨어 프로그래밍
eyeCan v1.0을 이용하여 시선 추적기를 마우스와 똑같이 사용할 수 있게 되었다. 이후 마우스 커서를 추적하는 방식으로만 프 로그래밍하면 되었다.
미디어아트 및 교육용 언어 지향의 오픈소스 프로그래밍 언어인 Processing을 이용하여 시선 빈도를 표현하는 열 지도heat map를 구현하였다.
열 지도에서는 시선이 머문 시간을 색깔로 표현하였고, 시선 이동 순서는 숫자로 표시하였다. 시선의 빈도나 머문 시간은 보라색 에서 파란색, 파란색에서 초록색, 노란색, 빨간색으로 변하게 코딩하여, 사용자의 시선 시간을 인지와 연결시켜 해석하도록 프로 그래밍 했다.
시선과 인지가 일치하지는 않기 때문에 시선 추적기 이외에도 단순한 방법인 질의 응답식화면을 빠르게 보여준 뒤 어떤 요소가 인 지되는지 그리게 하거나 설문으로 조사하는 방법으로도 실험을 병행했다.

 




study of VISUAL HIERARCHY
Senior Project 188×257mm사륙배판 / Book design

 

실험 내용 설정
선, 면, 색, 이미지, 텍스트 등 이들 각 요소를 조합해 서로의 시각적 우선순위를 비교 하는 방식으로 실험을 진행했다. 이 그래픽 요소들에 대한 시각적 우선순위 실험 이후 에는, 웹 사이트들을 대상으로 시각적 우선순위를 실험하였다.
실험은 이미지 당4초 정도로 실험하였고, 웹사이트의 경우 주요 그래픽 요소의 갯수 에 따라 8초까지 실험시간을 설정히였다. 또한 시선 추적기 이외에도 질의 응답식화 면을 빠르게 보여준 뒤 어떤 요소가 인지되는지 그리게 하거나 설문으로 조사하는 방 법으로도 실험을 병행했다.


프로젝트 최종 결과물
사륙배판(188x257mm)의 책 1권으로 완성하였다. 책의 내용은 1부, 2부로 나누어 져 있다. 1부는 시각적 이론을 간단히 적용하거나, 평소 디자인 요소의 시선 인지에 관해 궁굼했던 것을 실험한 내용이다. 2부는 실제 UI디자인에 관한 실험으로, 주요 웹 사이트 디자인을 이용한 사용자의 시선 인지 실험 결과를 디자인하였다.
이 책의 주요 형식적 특징은, 디지털적이고 IT기술에 관련한 내용과 그 실험 과정을 아 날로그적인 책의 형태와 아날로그적인 인터렉션(팝업, 페이지 레이어링, 투명한 필름 을 사용한 페이지 등)으로 풀어냈다는 점이다.

 


김태욱
KIM. TAE-WOOK.
elche1@naver.com
div4