ISSN 2383-6318(Print) / ISSN 2383-6326(Online)

KIISE Transactions on Computing Practices, Vol. 20, No. 12, pp. 670-675, 2014. 12

http://dx.doi.org/10.5626/KTCP.2014.20.12.670

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

․이 논문은 미래창조과학부의 재원으로 한국연구재단의 지원을 받아 <실감교

류 인체감응솔루션> 로벌 론티어사업, 견연구자지원사업으로 수행된 연

구임(2012M3A6A3055695, 2012R1A2A2A01045719)

․이 논문은 2014 한국컴퓨터종합학술 회에서 ‘Metro 스타일 GUI의 가시화

효율 최 화’의 제목으로 발표된 논문을 확장한 것임

논문 수 : 2014년 9월 4일

(Received 4 September 2014)

논문수정 : 2014년 10월 7일

(Revised 7 October 2014)

심사완료 : 2014년 10월 13일

(Accepted 13 October 2014)†

††

학생회원

비 회 원

:

:

성균 학교 자 기컴퓨터공학과

sonata@skku.edu

kihyuk@skku.edu

성균 학교 소 트웨어학과 교수

(Sungkyunkwan Univ.)

sungkil@skku.edu

(Corresponding author임)

CopyrightⒸ2014 한국정보과학회ː개인 목 이나 교육 목 인 경우, 이 작물

의 체 는 일부에 한 복사본 혹은 디지털 사본의 제작을 허가합니다. 이 때,

사본은 상업 수단으로 사용할 수 없으며 첫 페이지에 본 문구와 출처를 반드시

명시해야 합니다. 이 외의 목 으로 복제, 배포, 출 , 송 등 모든 유형의 사용행

를 하는 경우에 하여는 사 에 허가를 얻고 비용을 지불해야 합니다.

정보과학회 컴퓨 의 실제 논문지 제20권 제12호(2014. 12)

Metro 스타일 GUI의 가시화 효율 최 화 671

1. 서 론

최근의 소 트웨어는 인터페이스에 한 사용자의 직

인 이해를 돕기 해, 시각 으로 정보를 표 하는

그래픽 사용자 인터페이스(Graphical User Interface)를

사용한다. GUI를 디자인하는 것은 정보를 보다 효율

으로 달하기 해서 시각 으로 변환하는 과정인 데

이터 시각화로 해석할 수 있다. 그러나 보편 으로 GUI

를 설계하는 것은 기존에 개발자가 사용하던 임워

크 는 디자이 의 경험에 의존하는 경우가 많다. 이로

인해 심미 으로는 우수하지만, 직 으로 이해하기 힘

들거나 원하는 정보를 빠르게 찾기가 힘든 인터페이스

가 많다. 이런 문제를 해결하기 해서 사람이 시각 으

로 정보를 받아들이는 과정을 인터페이스 디자인에 반

한다면, 보다 효율 인 인터페이스를 구성할 수 있을

뿐 아니라, 체계 인 인터페이스 구성 임워크를 만

들 수 있다.

시각 정보가 효율 으로 사람에게 달되기 해서

는, 사용자의 시각 심(visual attention)이 이미지의

요한 역에 있도록 해야 한다. 사용자가 의도하는 바

가 없다면, 사람은 에 잘 띄는 역에서 시작하여 덜

띄는 역으로 순차 인 시각체계 내 탐색(visual search)

을 행한다. 이에 기반하여, 요한 정보들부터 시각체계

내 탐색의 상이 되도록 인터페이스를 디자인한다면,

요한 정보를 효과 으로 달할 수 있을 것이다.

본 논문은 최근에 소개된 그리드 기반의 Metro-Style

GUI를 사람의 시각체계(Human Visual System:HVS)

에 기반하여 시각 으로 향상시키는 알고리즘을 제안한

다. 한 Metro-Style GUI의 시각 효용성을 측정하

는 방법을 정의하고, 이에 따른 최 화 알고리즘을 제안

한다. 이러한 최 화에는 인터페이스를 구성하는 정보인

어 리 이션의 카테고리, 어 리 이션들의 사용도

터치기반의 근용이도(reachability)가 요도로 반 되

었다.

본 논문은 “Color Selection Optimization for Metro-

style 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)

그림 1 체 임워크

Fig. 1 Overview of our framework

이스 환경에 따라 다양할 수 있기 때문에 특정한 값

으로 정의될 수 없다. 본 논문에서 Metro-Style GUI를

구성하기 해 사 정의한 내용을 아래부터 설명한다.

본 논문에서는 Metro-Style GUI에서 사용되는 정사

각형 형태의 가장 작은 버튼을 단 버튼으로 정의하

다. 터치기반 디바이스에서 사용되는 최소 버튼 크기는

ISO ANSI에 의해 선택 오류(selection error)를 감

안한 수치인 0.75inch × 0.75 inch로 정의되어 있다. 이

크기를 하한선으로 버튼은 임의의 크기로 정의되었다.

단 버튼을 기 으로, 다양한 크기의 버튼이 사용된다.

일반 으로, 단 버튼 면 이의 2배, 4배의 버튼

크기가 가장 많이 사용된다. 본 논문에서는 가장 작은

버튼과 2배 버튼의 크기를 사용하 고, 두 종류의 버튼

이 차지하는 면 을 동일하게 하 다.

사람이 모바일 디바이스를 볼 때, 사람의 시야에는 모

바일 디바이스 뿐 아니라 주변 환경 등이 포함되는데, 모

바일 디바이스에는 베젤이 존재한다. 베젤은 주변 환경

과 디스 이를 구별시켜주는 효과를 만들기 때문에,

본 연구에서는 주변 환경의 향을 고려하지 않는다. 베젤

은 단 버튼 넓이로 단순화하여 효용성 계산에 포함된다.

Metro-Style GUI의 색 팔 트(color palettes)를 생

성을 해서는 사용될 색 후보들과 사용될 색의 개수가

먼 정의되어야 한다. 색 후보들은 색공간(color space)

을 고려하여 비가 큰 색의 조합을 찾을 수 있으나, 이

는 추가 인 색 선택의 기 을 요구한다. 본 논문에서는

보편 으로 많이 사용되는 색들에 해서 사용될 색 후

보를 사용자가 선택함을 가정한다. 사용될 색의 개수는

색이 있는 객체들의 구별 능력은 5가지 색을 사용할 때

가장 높다는 Healy et. al.의 연구 결과에 따랐다[6]. 이

는 사람의 기억부하의 한계와 계가 깊다.

시각체계 내 탐색의 효율을 높이기 한 표 인 시

각화 방법으로 데이터들을 분류하는 것(grouping)이 있

다[7]. 이에 기반하여, 본 논문에서는 같은 카테고리로

분류되는 버튼은 같은 색으로 매핑됨을 가정하 다.

3.2 공간 매핑(Spatial Mapping)

본 알고리즘은 Metro-Stlye GUI를 구성함에 있어,

먼 버튼을 공간 으로 매핑하고, 이후 버튼의 색

밝기를 매핑하는 두단계 과정을 거친다.

Metro-Style GUI에서 같은 색으로 매핑된 같은 카테

고리의 버튼들은 인 하게 배치한다. 이는 사용자가 의도

하는 버튼을 검색할 때, 공간 치를 찾는 과정과 색을

찾는 과정이 독립 /병렬 으로 수행되기 때문으로, 버튼

의 치를 찾는 시각체계 내 탐색의 부하를 이기 함

이다. 같은 카테고리의 버튼을 인 하게 배치함은 시각체

계 내 탐색의 역을 이는 효과가 있다(그림 2).

그림 2 시각체계 내 탐색 역의 축소

Fig. 2 Reduction of region in a visual search

3.3 색 매핑(Color Mapping)

사 정의한 바와 같이 색 팔 트를 구성하는 색의 개

수는 5개이다. 사용되는 색을 제한하는 것은 시각체계

내 탐색의 효율을 높이는 것 뿐 아니라, 인터페이스가

많은 색의 사용으로 시각 으로 불편해지는 것을 방지

하는 효과가 있다. 부가 으로 이러한 근사는 제안하는

임워크의 연산부하를 크게 인다. 같은 카테고리

내에서 어 리 이션 간의 구별을 해 사용빈도에 따

라 아이콘의 밝기에 차등을 둔다.

각 버튼이 에 띄는 정도(Saliency)는 사람의 시야각

을 고려하여 주변부에 비한 심부의 색 비로 계산

되어야 한다. Metro-Style GUI에서는 버튼 단 로 색

이 매핑되기 때문에, 각 버튼이 주변 버튼 사이에서

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과 같다. 이러한 사용빈도는 사용자에 따라

다양할 수 있기 때문에 효용성 계산에는 포함되지 않았다.

그림 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 설계에 요도

로 반 한다. 다양한 데이터들이 인터페이스 설계에 반

될 수 있고, 본 연구에서는 어 리 이션의 사용 빈도

와 사람이 터치기반 디바이스를 잡는 방식에 따른 엄지

손가락의 버튼과의 거리인 근용이도(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)

효용성 E는 각 버튼이 에 잘 띄는 정도(Saliency)

의 선형합으로, 는 선형합의 가 치로 용되었다.

효용성을 최 화하는 것이 최 화의 목표이다. 본 논문

에서는 색 팔 트를 생성하기 해 사용된 5개의 색에

해서 모든 가능한 조합을 탐색하고, E가 최 가 되는

색 조합을 찾는다. 따라서 이 문제는 가능한 색 조합인

5!(120)개의 permutation 효용성이 최 값이 되는 조

합을 찾는 것으로, 상세한 알고리즘은 알고리즘 1과 같다.

674 정보과학회 컴퓨 의 실제 논문지 제 20 권 제 12 호(2014.12)

알고리즘 1 효용성 최 화

Algorithm 1 Effectiveness Optimization

4. 결 과

본 논문의 알고리즘을 용한 결과를 그림 5와 그림 6

에 제시한다. 색 팔 트는 비 문자 7명을 상으로 각

버튼간 구별이 가장 잘되는 색 배치 색 조합에 한

사용자 실험을 통해서 도출하 다.

알고리즘을 용한 결과, 제시하는 Metro-Style GUI

의 효용성 E는 공간 인 매핑 이후에 색 매핑으로 인하

여 130%이상 상승하 고 측정결과를 표 1에 제시한다.

처음 입력이 된 인터페이스는 아래 그림의 좌측에 sample

그림 5 휴 폰: 샘 (좌), 공간 매핑 ( ), 최 화 결과 (우)

Fig. 5 Mobile device: Samples (left), spatially mapped

results(middle), and optimization results (right)

그림 6 테블릿: 샘 (좌), 공간 매핑 ( ), 최 화 결과 (우)

Fig. 6 Tablet: Mobile device: Samples (left), spatially

mapped results (middle), and optimization results

(right)

들로 표시되었고, 우측에 시각 으로 향상된 본 임

워크를 용한 결과이다. Metro-Style GUI의 버튼들이

공간 매핑되었고, 색의 배치 조합 한 주변 카테

고리들과 비가 증가하여 시각 으로 향상되었다.

표 1 효용성 향상률

Table 1 Effectiveness improvement ratio

5. 결 론

본 논문은 Metro-Style GUI의 디자인 설계를 한,

사람의 시각체계 내 탐색을 고려한 인터페이스 디자인

알고리즘을 제안한다. 한, Metro-Style GUI의 시각

효용성을 측정하는 방법을 정의하 고, 이를 최 화하는

알고리즘을 함께 제안하 다. 어 리 이션의 특성

디바이스를 사용하는 방법을 인터페이스 디자인에 반

하기 해 요도를 모델링하 고, 최 화에 포함되었다.

본 연구는 다음과 같은 한계 을 지니며, 추후 연구로

진행될 것이다. (1) 색 팔 트는 정해진 것으로 가정하

고, 주어진 색 팔 트에서 근최 의 색 매핑을 얻는다.

본 연구에서 색 팔 트는 사용자 실험을 통해 얻었으나,

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. 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. Gelade, "A Feature-Integ-

ration Theory of Attention," Cognitive Psychology,

Vol. 12, No. 1, pp. 97-136, 1980.

[ 4 ] L. Itti, C. Koch, and E. Niebur, "A Model of Sali-

ency-Based Visual Attention for Rapid Scene Ana-

lysis," IEEE Trans. on Pattern Analysis and Machine

Intelligence, Vol. 20, No. 11, pp. 1254-1259, 1998.

[ 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. 455-472, 1987.

[ 6 ] C. G. Healey, "Choosing Effective Colours for Data

Visualization," Proc. of the Visualization 1996, pp. 263-

270, 1996.

[ 7 ] M. Tory and T. Möller, "Human Factors in Visua-

lization Research," IEEE Trans. on Visualization

and Computer Graphics, Vol. 10, No. 1, pp. 72-84, 2004.

[ 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. 1746-1757,

2013.

[ 9 ] J. Schanda, Colorimetry: Understanding the CIE

system, pp. 79, John Wiley & Sons, New Jersey, 2007.

[10] C. A. Brewer, "Color use guidelines for data represen-

tations," Proc. the Section on Statistical Graphics,

American Statistical Association, pp. 55-60, 1999.

[11] C. A. Brewer, "Review of Colour Terms and Simul-

taneous Contrast Research for Cartography," Carto-

graphica: The International Journal for Geographic

Information and Geovisualization, Vol. 29, No. 3,

pp. 20-30, 1992.

[12] C. A. Brewer, "Evaluation of a Model for Predicting

Simultaneous Contrast on Color Maps," Professional

Geographer, Vol. 49, No. 3, pp. 280-294, 1997.

[13] S. Hoober. (2013, Feburary 18). How Do Users

Really Hold Mobile Devices? [online]. Available:

http://www.uxmatter.com

[14] S. Perez. (2012, October 22). Flurry Examines App

Loyalty: News & Communication Apps Top Charts,

Personalization Apps See High Churn [online].

Available: http://www.techcrunch.com

김 강 태

2011년 성균 학교 자 기공학과(학

사). 2012년～ 재 성균 학교 자

기컴퓨터공학과 석사과정. 심분야는

Perception-based rendering, Real-time

rendering, HCI

김 기

2013년 운 학교 컴퓨터소 트웨어학

과(학사). 2014년～ 재 성균 학교

자 기컴퓨터공학과 석사과정. 심분야

는 Image-based ray tracing, HCI, Real-

time 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 Com-

puting