DBPIA-NURIMEDIA

Size: px

Start display at page:

Download "DBPIA-NURIMEDIA"

수영 연
6 years ago
Views:

1 ISSN (Print) / ISSN (Online) KIISE Transactions on Computing Practices, Vol. 20, No. 12, pp , Metro 스타일 GUI 의가시화효율최적화 (Effectiveness Optimization for Metro-Style Graphical User Interfaces) 김강태 김기혁 이성길 (Kangtae Kim) (Kihyuk Kim) (Sungkil Lee) 요약최근의소프트웨어는인터페이스에대한사용자의직관적인이해를돕기위해, 시각적으로정보를표현하는그래픽사용자인터페이스 (Graphical User Interface) 를사용한다. 잘디자인된인터페이스는사용자에게정보를효율적으로전달하나, 그렇지않은경우는보기에불편하고난해하다. 시각적정보가효율적으로사람에게전달되기위해서는, 사용자의시각적관심이이미지의중요한영역에있도록해야한다. 이논문은사람의시각체계내탐색 (visual search) 를고려하여 Metro-Style GUI 를시각적으로향상시키는방법을소개한다. 이방법은 Metro-Style GUI 버튼의공간적매핑과색매핑의두단계로구성되어있다. 또한 Metro-Style GUI 의효용성을정의하고, 이를최적화하는알고리즘을함께제안한다. 결과에서는우리의방법을적용하여 Metro-Style 의 GUI 를시각적으로향상시킨예시를제시한다. 키워드 : Metro 스타일 GUI, 색디자인, 그래픽사용자인터페이스, 시각화 Abstract Graphical user interfaces (GUI) in modern software deliver information visually, and a well-designed interface can provide information to the use in an organized and intuitive manner while poorly-designed interfaces can cause visual inconvenience and confusion. In order to effectively deliver information to the user, visual attention should be placed on a prominent location in the image. This paper introduces a method based on a human visual system (HVS) that can improve Metro-style GUIs by reducing a user's workload to visually find information. Our method is designed with spatial mapping and color mapping for buttons in the Metro-style GUI. Also we define a metric for Metro-style GUI effectiveness, including an optimization algorithm. The results show that our method improves the performance of visual search tasks in a Metro-style GUI. Keywords: metro-style GUI, color design, graphical user interfaces, visualization 이논문은미래창조과학부의재원으로한국연구재단의지원을받아 < 실감교류인체감응솔루션 > 글로벌프론티어사업, 중견연구자지원사업으로수행된연구임 (2012M3A6A , 2012R1A2A2A ) 이논문은 2014 한국컴퓨터종합학술대회에서 Metro 스타일 GUI 의가시화효율최적화 의제목으로발표된논문을확장한것임 학생회원 : 성균관대학교전자전기컴퓨터공학과 sonata@skku.edu kihyuk@skku.edu 비회원 : 성균관대학교소프트웨어학과교수 (Sungkyunkwan Univ.) sungkil@skku.edu (Corresponding author 임 ) 논문접수 : 2014년 9월 4일 (Received 4 September 2014) 논문수정 : 2014년 10월 7일 (Revised 7 October 2014) 심사완료 : 2014년 10월 13일 (Accepted 13 October 2014) CopyrightC2014 한국정보과학회ː 개인목적이나교육목적인경우, 이저작물의전체또는일부에대한복사본혹은디지털사본의제작을허가합니다. 이때, 사본은상업적수단으로사용할수없으며첫페이지에본문구와출처를반드시명시해야합니다. 이외의목적으로복제, 배포, 출판, 전송등모든유형의사용행위를하는경우에대하여는사전에허가를얻고비용을지불해야합니다. 정보과학회컴퓨팅의실제논문지제20권제12호 ( )

2 Metro 스타일 GUI 의가시화효율최적화 서론최근의소프트웨어는인터페이스에대한사용자의직관적인이해를돕기위해, 시각적으로정보를표현하는그래픽사용자인터페이스 (Graphical User Interface) 를사용한다. GUI를디자인하는것은정보를보다효율적으로전달하기위해서시각적으로변환하는과정인데이터시각화로해석할수있다. 그러나보편적으로 GUI 를설계하는것은기존에개발자가사용하던프레임워크또는디자이너의경험에의존하는경우가많다. 이로인해심미적으로는우수하지만, 직관적으로이해하기힘들거나원하는정보를빠르게찾기가힘든인터페이스가많다. 이런문제를해결하기위해서사람이시각적으로정보를받아들이는과정을인터페이스디자인에반영한다면, 보다효율적인인터페이스를구성할수있을뿐아니라, 체계적인인터페이스구성프레임워크를만들수있다. 시각적정보가효율적으로사람에게전달되기위해서는, 사용자의시각적관심 (visual attention) 이이미지의중요한영역에있도록해야한다. 사용자가의도하는바가없다면, 사람은눈에잘띄는영역에서시작하여덜띄는영역으로순차적인시각체계내탐색 (visual search) 을행한다. 이에기반하여, 중요한정보들부터시각체계내탐색의대상이되도록인터페이스를디자인한다면, 중요한정보를효과적으로전달할수있을것이다. 본논문은최근에소개된그리드기반의 Metro-Style GUI를사람의시각체계 (Human Visual System:HVS) 에기반하여시각적으로향상시키는알고리즘을제안한다. 또한 Metro-Style GUI의시각적효용성을측정하는방법을정의하고, 이에따른최적화알고리즘을제안한다. 이러한최적화에는인터페이스를구성하는정보인어플리케이션의카테고리, 어플리케이션들의사용도및터치기반의접근용이도 (reachability) 가중요도로반영되었다. 본논문은 Color Selection Optimization for Metrostyle GUI 과유사한접근으로, 이의후속연구로서진행되었다 [1]. 기존의단순히색을선택하는알고리즘을개선하였을뿐아니라, 색의위치에대한고려및어플리케이션의특성을최적화에반영하였다. 또한사용자실험테이터에기반하여엄밀히중요도를모델링하여, 기존의알고리즘보다더욱향상된프레임워크를제시한다. 2. 관련연구데이터와시각적인변수의대응에서색이데이터가지니는특성을반영해야한다는색디자인에관한연구가있다 [2]. 이연구는통계적데이터의순서 (order) 와분리 (separation) 가색디자인에반영되어야함을제안한다. 순서는선택되는색들의지각되는순서가통계적데이터들의순서에대응해야함을의미하며, 분리 (separation) 는데이터간의차이가색의차이에반영되어야함을의미한다. 하지만이와같은이론은데이터시각화과정의바탕이론이될수는있지만, 정량적인설계에반영되기에는다소추상적이다. 시각지각이론인 Treisman의 feature integration theory는시각화의효율성을측정하고정량화하는것에적용되었다 [3]. 이이론을통해이미지의각영역이눈에띄는정도 (saliency) 를정량화하였고, 이미지의중요도분석에적용된대표적인예로 Itti의 saliency map이있다 [4]. Saliency map은고 / 저해상도로샘플링된이미지들의차이를통해눈에띄는정도를나타낸이미지이다. 인터페이스를시각적으로향상하는것은인터페이스내의각객체가얼마나눈에잘띄는지를분석하는것뿐만아니라사람의시각체계내탐색 (visual search) 또한고려되어야한다. 색, 모양, 크기의세가지특성들이다양한객체들에대한시각체계내탐색은각각의특성에대해특징맵 (feature map) 을형성하는것으로, 독립적 / 병렬적으로처리된다 [5]. 선행연구로서소개된, Color Selection Optimization for Metro-style GUI 는객체간의색대비에기반하여인터페이스의효용성을모델링하여최적의색조합을찾는알고리즘을제안한다 [1]. 본논문에서는색의공간적매핑 / 색매핑두단계의개선된알고리즘을제시한다. 추가적으로사용되는색팔레트를생성하는방법의개선및모바일사용에관한사용자실험데이터를최적화에중요도로반영하여, 보다향상된결과를보인다. 3. 알고리즘본논문에서는색팔레트를생성하기위해, 색값에대한명칭을가지는색들에대해서, 색선호에관한사용자실험을수행하였다. 이를바탕으로, 사람의시각체계를고려한 Metro-Style GUI 버튼들의공간적매핑과색매핑방법을제시한다. 또한최적화는인터페이스에반영되어야할다양한데이터들을중요도로적용할수있도록모델링되었다. 본논문에서는이러한데이터들의예로, 어플리케이션의사용빈도에대한사용자실험결과및스크린상에서의객체의위치에따른물리적접근용이도 (reachability) 를중요도로모델링하였다. 제시하는방법의전체프레임워크는그림 1과같다. 3.1 사전정의 (preliminary definitions) Metro-Style GUI을구성하는요소로는어플리케이션버튼, 배경화면, 사용될색팔레트, 어플리케이션아이콘등이있다. 이러한요소들은사용하는디스플레이디바

672 정보과학회 컴퓨팅의 실제 논문지 제 20 권 제 12 호(2014.12) 을 고려하여 대비가 큰 색의 조합을 찾을 수 있으나, 이 는 추가적인 색 선택의 기준을 요구한다. 본 논문에서는 보편적으로 많이 사용되는 색들에 대해서 사용될 색 후 보를 사용자가 선택함을 가정한다.

이에 기반하여, 본 논문에서는 같은 카테고리로 분류되는 버튼은 같은 색으로 매핑됨을 가정하였다. 3.2 공간적 매핑(Spatial Mapping) 본 알고리즘은 Metro-Stlye GUI를 구성함에 있어, 먼저 버튼을 공간적으로 매핑하고, 이후 버튼의 색 및 밝기를 매핑하는 두단계 과정을 거친다.

3 672 정보과학회 컴퓨팅의 실제 논문지 제 20 권 제 12 호( ) 을 고려하여 대비가 큰 색의 조합을 찾을 수 있으나, 이 는 추가적인 색 선택의 기준을 요구한다. 본 논문에서는 보편적으로 많이 사용되는 색들에 대해서 사용될 색 후 보를 사용자가 선택함을 가정한다. 사용될 색의 개수는 색이 있는 객체들의 구별 능력은 5가지 색을 사용할 때 가장 높다는 Healy et. al.의 연구 결과에 따랐다[6]. 이 는 사람의 기억부하의 한계와 관계가 깊다. 시각체계 내 탐색의 효율을 높이기 위한 대표적인 시 각화 방법으로 데이터들을 분류하는 것(grouping)이 있 다[7]. 이에 기반하여, 본 논문에서는 같은 카테고리로 분류되는 버튼은 같은 색으로 매핑됨을 가정하였다. 3.2 공간적 매핑(Spatial Mapping) 본 알고리즘은 Metro-Stlye GUI를 구성함에 있어, 먼저 버튼을 공간적으로 매핑하고, 이후 버튼의 색 및 밝기를 매핑하는 두단계 과정을 거친다. Metro-Style GUI에서 같은 색으로 매핑된 같은 카테 고리의 버튼들은 인접하게 배치한다. 이는 사용자가 의도 하는 버튼을 검색할 때, 공간적 위치를 찾는 과정과 색을 찾는 과정이 독립적/병렬적으로 수행되기 때문으로, 버튼 의 위치를 찾는 시각체계 내 탐색의 부하를 줄이기 위함 그림 1 전체 프레임워크 Fig. 1 Overview of our framework 이다. 같은 카테고리의 버튼을 인접하게 배치함은 시각체 계 내 탐색의 영역을 줄이는 효과가 있다(그림 2). 이스 및 환경에 따라 다양할 수 있기 때문에 특정한 값 으로 정의될 수 없다. 본 논문에서 Metro-Style GUI를 구성하기 위해 사전 정의한 내용을 아래부터 설명한다. 본 논문에서는 Metro-Style GUI에서 사용되는 정사 각형 형태의 가장 작은 버튼을 단위 버튼으로 정의하였 다. 터치기반 디바이스에서 사용되는 최소 버튼 크기는 ISO 및 ANSI에 의해 선택 오류(selection error)를 감 안한 수치인 0.75inch 0.75 inch로 정의되어 있다. 이 그림 2 시각체계 내 탐색 영역의 축소 크기를 하한선으로 버튼은 임의의 크기로 정의되었다. Fig. 2 Reduction of region in a visual search 단위 버튼을 기준으로, 다양한 크기의 버튼이 사용된다. 일반적으로, 단위 버튼 면적 및 이의 2배, 4배의 버튼 3.3 색 매핑(Color Mapping) 크기가 가장 많이 사용된다. 본 논문에서는 가장 작은 사전정의한 바와 같이 색 팔레트를 구성하는 색의 개 버튼과 2배 버튼의 크기를 사용하였고, 두 종류의 버튼 수는 5개이다. 사용되는 색을 제한하는 것은 시각체계 이 차지하는 면적을 동일하게 하였다. 내 탐색의 효율을 높이는 것 뿐 아니라, 인터페이스가 사람이 모바일 디바이스를 볼 때, 사람의 시야에는 모 많은 색의 사용으로 시각적으로 불편해지는 것을 방지 바일 디바이스 뿐 아니라 주변 환경 등이 포함되는데, 모 하는 효과가 있다. 부가적으로 이러한 근사는 제안하는 바일 디바이스에는 베젤이 존재한다. 베젤은 주변 환경 프레임워크의 연산부하를 크게 줄인다. 같은 카테고리 과 디스플레이를 구별시켜주는 효과를 만들기 때문에, 내에서 어플리케이션 간의 구별을 위해 사용빈도에 따 본 연구에서는 주변 환경의 영향을 고려하지 않는다. 베젤 라 아이콘의 밝기에 차등을 둔다. 은 단위버튼 넓이로 단순화하여 효용성 계산에 포함된다. 각 버튼이 눈에 띄는 정도(Saliency)는 사람의 시야각 Metro-Style GUI의 색 팔레트(color palettes)를 생 을 고려하여 주변부에 대비한 중심부의 색 대비로 계산 성을 위해서는 사용될 색 후보들과 사용될 색의 개수가 되어야 한다. Metro-Style GUI에서는 버튼 단위로 색 먼저 정의되어야 한다. 색 후보들은 색공간(color space) 이 매핑되기 때문에, 각 버튼이 주변 버튼 사이에서 눈

Metro 스타일 GUI 의가시화효율최적화 673 에띄는정도로근사하였다. 따라서버튼이눈에띄는정도 (Saliency) 는식 (1) 과같이해당버튼과인접한버튼과의색대비의합으로계산된다. (1) p 버튼이눈에잘띄는정도는 p에인접한버튼의집합인들에대해, 매핑된색의색거리의선형합으로정의되었다 (1)[8].

색은인접해있는색에따라시각적으로다르게지각된다. 이러한현상을동시대비 (simultaneous constrast) 라고하며, 색이주변색들에자식의보색을더하는현상이다. 따라서, 어두운배경을사용하는것은배경색의보색을이외의요소들에게더하는효과가있어인터페이스의가시성을향상시킨다 [11,12]. 또한덜중요한정보는상대적으로눈에덜띄게만드는방법으로, 카테고리의 Level을정의하였다.

같은카테고리로분류된어플리케이션에대해서는각어플리케이션의사용빈도에따라, 사용빈도와비례하는밝기를적용하였고, 결과는그림 3과같다. 이러한사용빈도는사용자에따라다양할수있기때문에효용성계산에는포함되지않았다.

이에, Flurry에서수행한모바일어플리케이션사용빈도에대한사용자실험결과를바탕으로각어플리케이션의중요도를모델링하였다 [14]. 디스플레이에서각어플리케이션의위치는사용성및가시성에영향을미친다. 이에, 우리는터치디바이스를잡는경우, 엄지손가락과의거리에따른접근용이도 (reachability) 를정의하였다.

4 Metro 스타일 GUI 의가시화효율최적화 673 에띄는정도로근사하였다. 따라서버튼이눈에띄는정도 (Saliency) 는식 (1) 과같이해당버튼과인접한버튼과의색대비의합으로계산된다. (1) p 버튼이눈에잘띄는정도는 p에인접한버튼의집합인들에대해, 매핑된색의색거리의선형합으로정의되었다 (1)[8]. 색차이를계산하는것은사람이지각하는색의차이와색의 Euclidean distance가비례하도록설계된지각기반색공간을사용하는것이적합하다. 우리는 CIE Lab 색공간에기반한 CIE 1976 방법을이용하며, x, y 두가지색에대한색거리는식 (2) 와같다 [9,10]. (2) Metro-Style GUI에서는버튼뿐아니라배경또한색이매핑된다. 색은인접해있는색에따라시각적으로다르게지각된다. 이러한현상을동시대비 (simultaneous constrast) 라고하며, 색이주변색들에자식의보색을더하는현상이다. 따라서, 어두운배경을사용하는것은배경색의보색을이외의요소들에게더하는효과가있어인터페이스의가시성을향상시킨다 [11,12]. 또한덜중요한정보는상대적으로눈에덜띄게만드는방법으로, 카테고리의 Level을정의하였다. 각카테고리를사용빈도에관한사용자실험데이터에기반하여중요한정보및덜중요한정보를분리하여두가지 Level로분류하였고, 낮은레벨의카테고리의경우는배경색과동일한색조 (Hue) 의색이매핑된다. 어플리케이션의색은 Metro-Style GUI에보편적으로많이사용되는흰색으로색을가정하였다. 같은카테고리로분류된어플리케이션에대해서는각어플리케이션의사용빈도에따라, 사용빈도와비례하는밝기를적용하였고, 결과는그림 3과같다. 이러한사용빈도는사용자에따라다양할수있기때문에효용성계산에는포함되지않았다. 영될수있고, 본연구에서는어플리케이션의사용빈도와사람이터치기반디바이스를잡는방식에따른엄지손가락의버튼과의거리인접근용이도 (reachability) 를중요도로모델링하였다 [13]. 어플리케이션의사용빈도는해당버튼이중요한정보인지를판별하는기준이될수있다. 자주사용되는버튼이눈에잘띈다면, 인터페이스의사용성 (usability) 은향상된다. 이에, Flurry에서수행한모바일어플리케이션사용빈도에대한사용자실험결과를바탕으로각어플리케이션의중요도를모델링하였다 [14]. 디스플레이에서각어플리케이션의위치는사용성및가시성에영향을미친다. 이에, 우리는터치디바이스를잡는경우, 엄지손가락과의거리에따른접근용이도 (reachability) 를정의하였다. 터치디바이스를잡는방식은한손으로잡고잡은손의엄지를사용한터치입력 (one handed), 한손으로감싸쥐고다른손으로터치입력 (cradled), 양손으로기기를잡고양손의엄지를사용한터치입력 (two handed) 이있다. 거리에따라중요도값을세단계로나누었고, 양손의엄지를사용한터치입력에대해중요도를모델링한결과는그림 4와같다. 그림 4 휴대폰의접근용이도 ( 양손으로잡는경우 ) Fig. 4 Reachability of mobile phone (two handed) 3.5 효용성최적화 (Effectiveness Optimization) Metro-Style GUI의시각적효용성은식 (3) 과같이각버튼이눈에잘띄는정도 (saliency) 의선형합으로정의하였다. 이는각버튼에대해서모델링된중요도를쉽게반영할수있도록설계되었다. (3) 그림 3 사용빈도에따른 App. 밝기 : 전 (left), 후 (right) Fig. 3 Mapping luminance of application based on the usage frequency: before (left) and after (right) 3.4 중요도모델링 (Importance Modeling) Metro-Style GUI를구성하는어플리케이션의특성과터치기반디바이스에따른특성을 GUI 설계에중요도로반영한다. 다양한데이터들이인터페이스설계에반 효용성 E는각버튼이눈에잘띄는정도 (Saliency) 의선형합으로, 는선형합의가중치로적용되었다. 효용성을최대화하는것이최적화의목표이다. 본논문에서는색팔레트를생성하기위해사용된 5개의색에대해서모든가능한조합을탐색하고, E가최대가되는색조합을찾는다. 따라서이문제는가능한색조합인 5!(120) 개의 permutation 중효용성이최대값이되는조합을찾는것으로, 상세한알고리즘은알고리즘 1과같다.

674 정보과학회 컴퓨팅의 실제 논문지 제 20 권 제 12 호(2014.12) 알고리즘 1 효용성 최적화 Algorithm 1 Effectiveness Optimization 그림 6 테블릿: 샘플 (좌), 공간적 매핑 (중), 최적화 결과 (우) Fig. 6 Tablet: Mobile device: Samples (left), spatially 4.

Metro-Style GUI의 버튼들이 사용자 실험을 통해서 도출하였다. 공간적 매핑되었고, 색의 배치 및 조합 또한 주변 카테 알고리즘을 적용한 결과, 제시하는 Metro-Style GUI 고리들과 대비가 증가하여 시각적으로 향상되었다. 의 효용성 E는 공간적인 매핑 이후에 색 매핑으로 인하 여 130%이상 상승하였고 측정결과를 표 1에 제시한다.

5 674 정보과학회 컴퓨팅의 실제 논문지 제 20 권 제 12 호( ) 알고리즘 1 효용성 최적화 Algorithm 1 Effectiveness Optimization 그림 6 테블릿: 샘플 (좌), 공간적 매핑 (중), 최적화 결과 (우) Fig. 6 Tablet: Mobile device: Samples (left), spatially 4. 결 과 mapped results (middle), and optimization results (right) 본 논문의 알고리즘을 적용한 결과를 그림 5와 그림 6 에 제시한다. 색 팔레트는 비전문자 7명을 대상으로 각 들로 표시되었고, 우측에 시각적으로 향상된 본 프레임 버튼간 구별이 가장 잘되는 색 배치 및 색 조합에 대한 워크를 적용한 결과이다. Metro-Style GUI의 버튼들이 사용자 실험을 통해서 도출하였다. 공간적 매핑되었고, 색의 배치 및 조합 또한 주변 카테 알고리즘을 적용한 결과, 제시하는 Metro-Style GUI 고리들과 대비가 증가하여 시각적으로 향상되었다. 의 효용성 E는 공간적인 매핑 이후에 색 매핑으로 인하 여 130%이상 상승하였고 측정결과를 표 1에 제시한다. 표 1 효용성 향상률 처음 입력이 된 인터페이스는 아래 그림의 좌측에 sample Table 1 Effectiveness improvement ratio 5. 결 론 본 논문은 Metro-Style GUI의 디자인 설계를 위한, 사람의 시각체계 내 탐색을 고려한 인터페이스 디자인 알고리즘을 제안한다. 또한, Metro-Style GUI의 시각적 효용성을 측정하는 방법을 정의하였고, 이를 최적화하는 알고리즘을 함께 제안하였다. 어플리케이션의 특성 및 디바이스를 사용하는 방법을 인터페이스 디자인에 반영 하기 위해 중요도를 모델링하였고, 최적화에 포함되었다. 본 연구는 다음과 같은 한계점을 지니며, 추후 연구로 그림 5 휴대폰: 샘플 (좌), 공간적 매핑 (중), 최적화 결과 (우) Fig. 5 Mobile device: Samples (left), spatially mapped results(middle), and optimization results (right) 진행될 것이다. (1) 색 팔레트는 정해진 것으로 가정하 고, 주어진 색 팔레트에서 근최적의 색 매핑을 얻는다. 본 연구에서 색 팔레트는 사용자 실험을 통해 얻었으나,

Metro 스타일 GUI 의가시화효율최적화 675 지각기반의색팔레트생성하는방법에대한연구가필요하다. (2) Metro-Style GUI의구성을이루는요소인어플리케이션아이콘의색이고려되지않았다. 현재는어플리케이션아이콘의색은흰색으로통일하고, 사용빈도에따라서밝기에차등을두었다. 제안된방법은 Metro-Style GUI 뿐아니라, 다른형태의 GUI에도적용될수있다.

HCI Korea 2013, pp. 365-367, 2013. (in Korean) [2] B. E. Trumbo, "A Theory for Coloring Bivariate Statistical Maps," Am. Statistician, Vol. 35, No. 4, pp. 220-226, 1981. [3] A. M. Treisman and G.

Niebur, "A Model of Saliency-Based Visual Attention for Rapid Scene Analysis," IEEE Trans. on Pattern Analysis and Machine Intelligence, Vol. 20, No. 11, pp. 1254-1259, 1998. [5] P. T. Quinlan and G.

6 Metro 스타일 GUI 의가시화효율최적화 675 지각기반의색팔레트생성하는방법에대한연구가필요하다. (2) Metro-Style GUI의구성을이루는요소인어플리케이션아이콘의색이고려되지않았다. 현재는어플리케이션아이콘의색은흰색으로통일하고, 사용빈도에따라서밝기에차등을두었다. 제안된방법은 Metro-Style GUI 뿐아니라, 다른형태의 GUI에도적용될수있다. Metro-Style의경우, 버튼단위로같은색을지니기때문에색거리계산단위의근사화가가능하였다. 이를통해사람의시각체계를고려한, 시각적으로개선된 GUI를사용자에게제공할수있을것으로예상한다. References [1] K. T. Kim, Y. N. Jeong, and S. K. Lee, "Color Selection Optimization for Metro-style GUI," Proc. HCI Korea 2013, pp , (in Korean) [2] B. E. Trumbo, "A Theory for Coloring Bivariate Statistical Maps," Am. Statistician, Vol. 35, No. 4, pp , [3] A. M. Treisman and G. Gelade, "A Feature-Integration Theory of Attention," Cognitive Psychology, Vol. 12, No. 1, pp , [4] L. Itti, C. Koch, and E. Niebur, "A Model of Saliency-Based Visual Attention for Rapid Scene Analysis," IEEE Trans. on Pattern Analysis and Machine Intelligence, Vol. 20, No. 11, pp , [5] P. T. Quinlan and G. W. Humphreys, "Visual search for targets defined by combinations of color, shape, and size: An examination of the task constraints on feature and conjunction searches," Perception & Psychophysics, Vol. 41, No. 5, pp , [6] C. G. Healey, "Choosing Effective Colours for Data Visualization," Proc. of the Visualization 1996, pp , [7] M. Tory and T. Möller, "Human Factors in Visualization Research," IEEE Trans. on Visualization and Computer Graphics, Vol. 10, No. 1, pp , [8] S. Lee, M. Sips, and H.-P. Seidel, "Perceptually Driven Visibility Optimization for Categorical Data Visualization," IEEE Trans. on Visualization and Computer Graphics, Vol. 19, No. 10, pp , [9] J. Schanda, Colorimetry: Understanding the CIE system, pp. 79, John Wiley & Sons, New Jersey, [10] C. A. Brewer, "Color use guidelines for data representations," Proc. the Section on Statistical Graphics, American Statistical Association, pp , [11] C. A. Brewer, "Review of Colour Terms and Simultaneous Contrast Research for Cartography," Cartographica: The International Journal for Geographic Information and Geovisualization, Vol. 29, No. 3, pp , [12] C. A. Brewer, "Evaluation of a Model for Predicting Simultaneous Contrast on Color Maps," Professional Geographer, Vol. 49, No. 3, pp , [13] S. Hoober. (2013, Feburary 18). How Do Users Really Hold Mobile Devices? [online]. Available: [14] S. Perez. (2012, October 22). Flurry Examines App Loyalty: News & Communication Apps Top Charts, Personalization Apps See High Churn [online]. Available: 김강태 2011 년성균관대학교전자전기공학과 ( 학사 ) 년 ~ 현재성균관대학교전자전기컴퓨터공학과석사과정. 관심분야는 Perception-based rendering, Real-time rendering, HCI 김기혁 2013년광운대학교컴퓨터소프트웨어학과 ( 학사 ). 2014년~현재성균관대학교전자전기컴퓨터공학과석사과정. 관심분야는 Image-based ray tracing, HCI, Realtime rendering 이성길 2002년포항공과대학교신소재공학과 ( 학사 ). 2009년포항공과대학교컴퓨터공학과 ( 박사 ). 2009년~2011년독일 Max- Planck-Institut Informatik 박사후연구원. 2011년~현재성균관대학교소프트웨어학과조교수. 관심분야는 Real-time rendering, Perception-based rendering and visualization, Image-based ray tracing, High-Performance GPU Computing

룩업테이블기반비선형렌즈플레어실시간렌더링방법 (Real-Time Nonlinear Lens-Flare Rendering Method Based on Look-Up Table) 조성훈 정유나 이성길 (Sunghun Jo) (Yuna Jeong) (Sungkil Lee) 요

룩업테이블기반비선형렌즈플레어실시간렌더링방법 (Real-Time Nonlinear Lens-Flare Rendering Method Based on Look-Up Table) 조성훈 정유나 이성길 (Sunghun Jo) (Yuna Jeong) (Sungkil Lee) 요약.,,. /.,,. :,,,, Abstract In computer graphics, high-quality