저작자표시-비영리-변경금지 2.0 대한민국

이용자는 아래의 조건을 따르는 경우에 한하여 자유롭게

l 이 저작물을 복제, 배포, 전송, 전시, 공연 및 방송할 수 있습니다.

다음과 같은 조건을 따라야 합니다:

l 귀하는, 이 저작물의 재이용이나 배포의 경우, 이 저작물에 적용된 이용허락조건을 명확하게 나타내어야 합니다.

l 저작권자로부터 별도의 허가를 받으면 이러한 조건들은 적용되지 않습니다.

저작권법에 따른 이용자의 권리는 위의 내용에 의하여 영향을 받지 않습니다.

이것은 이용허락규약(Legal Code)을 이해하기 쉽게 요약한 것입니다.

Disclaimer

저작자표시. 귀하는 원저작자를 표시하여야 합니다.

비영리. 귀하는 이 저작물을 영리 목적으로 이용할 수 없습니다.

변경금지. 귀하는 이 저작물을 개작, 변형 또는 가공할 수 없습니다.

http://creativecommons.org/licenses/by-nc-nd/2.0/kr/legalcodehttp://creativecommons.org/licenses/by-nc-nd/2.0/kr/

碩士學位 請求論文

指導敎授 趙 浚 東

Designing Multi-device Drawing

Application Based on Distributed User

Interface and Evaluating UX

成均館大學校 一般大學院

휴먼ICT融合 學科

盧 우 리

碩士學位 請求論文

指導敎授 趙 浚 東

Designing Multi-device Drawing

Application Based on Distributed User

Interface and Evaluating UX

成均館大學校 一般大學院

휴먼ICT融合 學科

盧 우 리

碩士學位 請求論文

指導敎授 趙 浚 東

Designing Multi-device Drawing

Application Based on Distributed User

Interface and Evaluating UX

이 論文을 工學 碩士學位請求論文으로 提出합니다.

2016 年 10 月 日

成均館大學校 一般大學院

휴먼ICT融合 學科

盧 우 리

이 論文을 盧우리의 工學

碩士學位 論文으로 認定함.

2016 年 12 月 日

審査委員長

審査委員

審査委員

i

목차

제1장 Introduction ............................................................................................ 1

제2장 Related Work ........................................................................................ 6

2-1 Cross-device Interaction .......................................................................... 6

2-2 Designing Multi-device Experience ......................................................... 8

2-3 Distributed User Interface ......................................................................... 8

제3장 Prototyping ............................................................................................. 10

3-1 Concept ........................................................................................................ 10

3-2 Application Design ...................................................................................... 12

3-2-1 Smartphone Application ........................................................................ 12

3-2-2 Smartwatch Application ........................................................................ 13

3-3 Implementation ........................................................................................... 15

3-4 User Test .................................................................................................... 16

3-4-1 Test Design ........................................................................................... 16

3-4-2 Test Result ............................................................................................ 17

제4장 Evaluation .............................................................................................. 20

4-1 Experiment Condition ................................................................................ 20

4-2 Result .......................................................................................................... 24

4-2-1 System Usability Scale(SUS) .............................................................. 24

4-2-2 User Experience Questionnaire(UEQ) ................................................ 24

제5장 Conclusion and Discussion .................................................................. 29

References ........................................................................................................ 32

ii

Appendix ............................................................................................................ 34

Abstract ............................................................................................................. 38

표목차

표 1.2 드로잉 애플리케이션 Sketch의 팔레트 비/활성에 따른 화면 영역

비교 ...................................................................................................................... 4

표 3.2 DEMIPLAT속성 별로 TakeOut에 적용한 내용 설명 ............................ 10

표 3.3 단일디바이스 드로잉 애플리케이션과 TaskeOut 드로잉 애플리케이션의

차이점 ................................................................................................................... 11

표 3.4 TakeOut 애플리케이션 Using case ......................................................... 11

표 3.12 User Test 평가 및 설문 항목 ............................................................... 17

표 3.14 참가자 별 User Test 결과 데이터 ....................................................... 18

표 4.1 실험 평가 요소와 측정 항목 설명 ........................................................... 20

표 4.2 실험 Condition 설명 ................................................................................ 21

표 4.5 실험 Task 상세 설명 .............................................................................. 23

표 4.5 실험참가자별 SUS결과 수치 데이터 ...................................................... 24

표 4.10 Comparison of Scale Means(UEQ) 결과 수치 데이터 ........................ 27

그림목차

그림 1.1 전 세계 웨어러블 디바이스 시장의 규모 그래프 .................................. 2

그림 2.1 Duet 의 읽기 애플리케이션의 도구 선택 인터랙션 참고 이미지 ........... 7

그림 2.2 SleeD 디바이스와 대형 스크린과의 인터랙션 참고 이미지 .................. 7

iii

그림 2.3 Vi-Bros 실내 보행자 길안내 시스템의 진동 피드백 참고 이미지 ....... 7

그림 2.4 DUI 의 Transversal model ................................................................... 9

그림 3.1 스마트폰과 스마트워치 TakeOut 애플리케이션의 컨셉 ....................... 10

그림 3.5 스마트폰 애플리케이션 Screenshots .................................................... 12

그림 3.6 스마트워치 애플리케이션 메인 화면 Screenshots ................................ 13

그림 3.7 스마트워치 애플리케이션 화면 Flow ..................................................... 13

그림 3.8 스마트워치 애플리케이션 브러쉬 팔레트 화면 Screenshots ................ 14

그림 3.9 스마트워치 애플리케이션 컬러 팔레트 화면 Screenshots .................... 14

그림 3.10 구현한 스마트폰과 스마트워치 애플리케이션과 사용 디바이스 .......... 15

그림 3.11 User test에 참여 중인 참가자들의 모습 ............................................. 16

그림 3.13 방사형 그래프로 표현한 User test 결과 ............................................ 18

그림 4.3 실험 환경 및 실험 중인 참가자의 모습들 ............................................. 21

그림 4.4 실험 진행 순서 ...................................................................................... 22

그림 4.6 Condition 1의 Task1을 수행한 후 측정한 UEQ 결과 그래프 ............. 25

그림 4.7 Condition 1의 Task2를 수행한 후 측정한 UEQ 결과 그래프 ............. 25

그림 4.8 Condition 2의 Task2를 수행한 후 측정한 UEQ 결과 그래프 ............. 26

그림 4.9 Condition 2의 Task2를 수행한 후 측정한 UEQ 결과 그래프 ............. 27

그림 4.11 Task1의 T-test 결과 비교 그래프 ................................................... 28

그림 4.12 Task2의 T-test 결과 비교 그래프 ................................................... 28

iv

논문요약

Designing Multi-device Drawing Application Based on

Distributed User Interface and Evaluating UX

다양한 스마트 디바이스들이 등장하면서 개인이 스마트폰, 테블릿, 스마트워치

등 여러 대의 디바이스를 동시에 이용하는 멀티디바이스 시대가 되었다. 이는 최근

스마트워치와 같은 다양한 웨어러블 디바이스의 보급으로 더욱 확장되었다. 이러한

멀티 디바이스 환경은, 기존의 디바이스 하나로 제한되었던 인터랙션을 확장할 수

있는 기회가 되고 있다. 스마트폰은 핸드핼드(hand-held) 디바이스로 디스플레이

내에서 많은 도구과 메뉴를 활용하는 드로잉 인터랙션에 한계를 가지고 있다.

따라서 사용자가 드로잉 인터랙션 시, 스마트폰 단일사용으로 인해 가지는 한계를

보완하고, 사용자 경험을 향상시킬 수 있는 새로운 멀티디바이스 애플리케이션

디자인이 필요하다고 보았다. 이를 위해 DUI(Distributed User Interface) 기반의

멀티디바이스(스마트폰과 스마트워치) 드로잉 애플리케이션 TakeOut을 제안한다.

TakeOut은 기존 스마트폰 드로잉 애플리케이션의 인터페이스를 스마트폰과

스마트워치에 분리하여 두 디바이스의 활용도를 높였다. 즉, 스마트폰은 캔버스로

스마트워치를 팔레트로 인터랙션하게 된다. 인터페이스가 두 디바이스로

분할되어있어 각 독립적인 task를 가지며, 각 디바이스 별 명확한 사용이 가능하다.

또한 스마트폰 화면 전체 공간을 사용할 수 있어, 비주얼 클러터를 최소화한다.

v

본 논문에서는 제안한 멀티디바이스 드로잉 애플리케이션 TakeOut의

프로토타입을 제작하여 12명의 실험참가자를 대상으로 실험을 진행하였다.

UEQ결과 TakeOut 애플리케이션은 드로잉 인터랙션에 대해 전반적으로 긍정적인

사용자 경험을 제공하는 것을 확인할 수 있었고, 단일디바이스 애플리케이션

Sketch와의 사용자경험 비교 평가를 통해 사용자가 스마트폰 단일디바이스

어플리케이션 Sketch를 활용하여 드로잉 인터랙션을 할 때와 멀티디바이스

어플리케이션 TakeOut을 활용하여 드로잉 인터랙션을 할 때에 경험에서 유의미한

차이가 있음을 알 수 있었다. 또한 SUS를 통해 TakeOut의 높은 사용성을

확인하였다. 따라서 멀티디바이스를 활용하는 TakeOut이 기존의 단일디바이스를

활용하는 애플리케이션보다 드로잉 인터랙션에 대한 사용자 경험을 향상시킬 수

있는 가능성을 가지고 있다고 볼 수 있다.

주제어 : Multi-device UX, Cross-device interaction, Distributed User Interface,

Drawing application

1

제 1 장 Introduction

모바일(mobile) 기술의 발달로 다양한 스마트 디바이스들이 등장하면서

개인이 스마트폰, 태블릿, 스마트워치 등 여러 대의 디바이스를 동시에 이용하는

1 인 멀티 디바이스(multi-device) 시대를 맞이하게 되었다. 이는 구글(Google)이

2012 년 발표한 리포트 ‘The Multi Screen World’에서 처음 언급했다[1]. IT

리서치 전문회사인 가트너(Gartner)는 2018 년 웨어러블, 스마트폰, 테블릿, PC 를

포함한 총 개인용 기기 대수가 83 억대에 달할 것으로 예상했다[2]. 또한 사용자

1 명당 평균 3 개 이상의 개인용 디바이스를 소유할 것이라고 전망했다. 실제로,

한국마이크로소프트가 국내 직장인 및 전문직 종사자 400 명을 대상으로 진행한

‘한국 직장인 디바이스 사용 실태 조사’ 결과 94% 이상이 스마트폰, 노트북,

테블릿, 데스크톱 등 3 대 이상의 디바이스를 보유하고 있다고 응답했다[3]. 이처럼

여러 대의 디바이스를 보유한 사용자가 많아짐으로써 멀티디바이스 경험에 대한

사용자의 관심과 요구가 높아졌고, 디바이스 간 인터랙션과 멀티디바이스

UX(User experience)에 관한 연구가 활발하게 진행되고 있다.

멀티디바이스 경험은 최근 다양한 웨어러블 디바이스(Wearable device)의

보급으로 더욱 확장되었다. 웨어러블 디바이스란 MIT 미디어랩(Media Lab)의

정의에 따르면 신체에 부착 또는 착용하여 컴퓨팅(computing) 행위를 할 수 있는

모든 것을 지칭하며 일부 컴퓨팅 기능을 수행할 수 있는 애플리케이션까지

포함한다[4]. 시계나 밴드, 안경 그리고 의류 및 액세서리와 같이 몸에 착용하고

다닐 수 있는 스마트 디바이스를 말한다. 따라서 웨어러블 디바이스 사용은 기존의

2

스마트 디바이스와 연계하여 사용할 수 있는 새로운 방식의 인터랙션 기회를

제공할 수 있을 것이다.

그림 1.1 에서와 같이 전 세계 웨어러블 디바이스 시장의 규모는 매년 점차

확장되고 있다. 또한 2018 년에는 120 억 달러 이상의 시장 규모를 가질 것으로

예측했다[5]. 웨어러블 디바이스 중 대표적인 스마트워치(Smartwatch)는 이미

다양한 시장을 확보하면서 피트니스, 헬스케어, 엔터테인먼트 등의 다양한 분야에서

폭넓게 활용되고 있다. 얼라이드 마켓 리서치(AMR:Allied Market Researh)는

최근 리포트에서 세계 스마트워치 시장 규모가 2014 년부터 2020 년까지

지속적으로 성장하며, 세계 스마트워치 시장이 2014 년 대비 67.6% 커진

329 억달러 규모로 팽창할 것이라고 전망했다[6].

3

특히 스마트워치는 애플리케이션(application)을 설치할 수 있고, 스마트폰과

연동하여 편리한 기능을 갖추고 있어 향후 스마트폰 시장을 대체할 수 있는 차세대

스마트 디바이스로서의 가능성을 보여주며 학계와 기업들의 주목을 받고 있다.

하지만 스마트워치는 보조 디바이스로 단순히 스마트폰의 일부 기능을 대체하는

수준의 역할을 가지고 있다. 이에 학계에서는 스마트워치를 스마트폰과 연결하여

사용자에게 새로운 인터랙션 경험을 제공할 수 있도록 하는 멀티디바이스

인터랙션(multi-device interaction) 연구를 진행하고 있다[7, 9, 11].

멀티디바이스 인터랙션은 단일디바이스 인터랙션보다 확장된 사용자 경험을

제공하며 새로운 인터랙션을 탐색할 수 있는 기회가 되고 있다.

스마트폰은 핸드핼드(hand-held) 디바이스로 디스플레이 내에서 많은 도구와

메뉴를 활용하는 인터랙션에 한계를 가지고 있다. 특히, 스마트폰 드로잉

어플리케이션에서 도구 팔레트를 사용하여 드로잉 인터랙션을 하는 경우 크게

발생하게 된다. 드로잉 인터랙션은 터치 기반으로 손이나 펜으로 글자를 그리거나

그림을 그리는 행위로 정의 한다. 그림 1.2 와 같이 스마트폰 드로잉

애플리케이션에서 드로잉 Task(색상선택 및 변경, 붓 크기 조절, 지우개 선택

등)를 수행하고자 하는 경우, 스마트폰 화면에 해당 툴 메뉴가 활성화 되기 때문에

화면의 제약이 발생하게 된다.

4

Full Screen Area Canvas Area Tool Palette Area

Drawing

App

Screen

[Sketch]

따라서 사용자가 드로잉 인터랙션 시, 스마트폰 단일사용으로 인해 가지는 이러한

한계를 보완하고 사용자 경험을 향상시킬 수 있는 새로운 멀티디바이스

애플리케이션 디자인이 필요하다. 이를 위해 DUI(Distributed User Interface)

기반의 멀티디바이스(스마트폰과 스마트워치) 드로잉 애플리케이션 TakeOut 을

제안한다[20]. DUI 는 기존 스마트폰 단일 디바이스의 드로잉 애플리케이션

인터페이스와 달리 인터페이스를 스마트폰과 스마트워치에 분할하여 두 디바이스의

활용도를 높인다. 즉, 스마트폰은 캔버스로 스마트워치를 팔레트로 확장된

인터랙션을 하게 된다. 인터페이스가 분할되어있어 각 독립적인

task(스마트폰에서는 그리는 task, 스마트워치에서는 툴을 조작하는 task) 를

가지고 있고, 각 디바이스 별 명확한 사용이 가능하다. 이를 통해 드로잉

인터랙션에 대한 사용자 경험을 향상시킬 수 있을 것이라고 예상한다.

본 논문에서는 제안한 멀티디바이스 드로잉 애플리케이션 TakeOut 을

프로토타이핑(Prototyping)하여, 애플리케이션의 사용성을 검증하고, 사용자의

5

드로잉 인터랙션 경험에 미치는 영향을 실험을 통하여 알아보고자 한다. 드로잉

인터랙션은 글자쓰기와 그림그리기로 Task 를 나누어 분석한다. 이를 통해

멀티디바이스 드로잉 인터랙션의 활용 가능성을 파악한다.

따라서 본 연구에서는 두 가지 가능성을 예측할 수 있다. 첫째, 멀티디바이스를

활용한 드로잉 애플리케이션 TakeOut 은 사용성 면에서 좋은 평가를 받을 것이다.

둘째, 멀티디바이스 드로잉 애플리케이션은 드로잉 인터랙션에 대한 사용자 경험을

향상시켜 줄 수 있을 것이다.

본 연구에서 제안한 TakeOut 이 사용자 경험에 어떠한 영향을 미치는지

살펴보고자 다음과 같은 연구문제를 설정하였다.

연구문제 1. 멀티디바이스(스마트폰과 스마트워치)를 활용한 드로잉

애플리케이션이 드로잉 인터랙션 경험에 미치는 영향은 어떠한가?

연구문제 2. 사용자가 스마트폰 단일 디바이스 어플리케이션을 활용하여 드로잉

인터랙션을 할 때와 멀티디바이스(스마트폰과 스마트워치) 어플리케이션을

활용하여 드로잉 인터랙션을 할 때에 경험의 차이가 있는가?

6

제 2 장 Related Works

2-1 Cross-device Interaction

연구자들은 멀티디바이스 환경에 맞춰 디바이스들 간의 시너지 효과를 위한

새로운 Cross-device Interaction 을 제시해왔다. 기존연구에서는 두 디바이스의

연결을 중심으로 데이터 이동, 진동 피드백, 제스처 등을 활용하여 다양한 인터랙션

가이드라인을 제안한 반면, 본 연구에서는 드로잉 인터랙션에 초점을 맞춰

상용화된 두 디바이스의 터치 인터페이스와 컨트롤 인터페이스를 활용한

멀티디바이스 드로잉 애플리케이션을 디자인하였다.

Pick-and-Drop 은 디바이스 간의 조작과 데이터 전송 및 교환을 위한

인터랙션이다. 펜 인터페이스를 기반으로 사용자가 한 디스플레이에 있는 객체를

Pick up 한 후, 다른 디스플레이로 이동하여 놓게 되면 해당 데이터가 전달되게

된다 [7]. Robert Hardy 가 제안한 Touch & interact(2008)는 폴더폰의 뒷면을

활용하여 대형 디스플레이의 정보를 선택하고 인터랙션할 수 있다[8]. 이는 두

디스플레이를 온전히 활용할 수 있어 편의성을 확보하고 직관적인 인터랙션이

가능하다. Chen 은 디스플레이와 센서를 이용하여 스마트폰과 스마트워치의 새로운

인터랙션 Duet(2014)을 제안하고, 스마트워치 인터랙션에 관한 다양한

가이드라인을 제시하였다[9]. 그림 2.1 은 Duet 의 인터랙션을 보여준다. Duet 은

스마트폰과 연동하여 스마트워치를 확장된 디스플레이로써 사용함으로써

사용자에게 새로운 인터랙션 경험을 제공한다. 유저테스트결과 툴을 선택해서

스마트폰 화면을 온전히 사용하는 것에 대해 높은 만족감을 보였다.

SleeD(2014)는 그림 2.2 와 같이 소매형태(sleeve)의 디스플레이와 대형

7

디스플레이 벽 간에 원활한 인터랙션을 위해 팔-장착형 디바이스(arm-mounted

device)를 제안하였다[10].

Vi-Bros(2015)는 그림 2.3 과 같이 스마트워치와 스마트폰의 촉감 피드백을

이용한 실내 보행자 길 안내 시스템이다[11]. 스마트워치를 왼손 또는 오른손의

손목에 착용한 후, 보행자가 손목의 위치(왼쪽, 오른쪽)와 촉감피드백(진동)이 주는

방향정보를 직관적으로 연결하여 길 안내를 받을 수 있도록 하였다.

현재 상용화된 드로잉 애플리케이션 중 유일하게 멀티디바이스 경험을

제공하는 애플리케이션(Procreate Pocket for ios)이 있다[12]. 하지만 이

애플리케이션은 드로잉 인터랙션의 한계를 가지고 있다. Procreate Pocket 은

스마트워치 애플리케이션으로 스마트폰의 드로잉 애플리케이션을 컨트롤하고

도구를 선택할 수 있다. 하지만 디바이스간 인터페이스가 명확하게 분리되어 있지

8

않아 도구 선택만이 가능할 뿐, 툴의 속성(색, 굵기 등)을 변경하려면 다시

스마트폰 드로잉 어플리케이션으로 이동하여 작업해야 한다. 대조적으로,

TakeOut은 인터랙션 할 때 사용자의 디바이스간 혼란을 없애기 위해, 다바이스 간

분할된 작업영역과 task 를 갖도록 접근하였다.

2-2 Designing Multi-device Experience

구글 시니어 사용자경험(UX) 디자이너 미할 레빈 (Michal Levin)은

멀티디바이스 경험을 설계하는 원칙으로 3C 프레임워크를 제시했다.

일관성(Consistent), 연속성(Continuous) 상호보완성(Complementary)이다[13].

첫 번째로, 일관성은 여러 디바이스에서 동일한 경험을 제공 하는 것이다. 두

번째로 연속성은 멀티디바이스 간에 연속적인 경험을 제공 하는 것이다.

마지막으로 상호보완성은 디바이스 간에 보완적인 사용 경험을 제공 하는 것이다.

스마트폰은 핸드핼드(Hand-held) 디바이스로 드로잉 애플리케이션과 같은 복잡한

메뉴와 조작환경으로 작업을 수행하는데 제약이 있고, 스마트워치는 작은

디스플레이 크기로 인해 컨텐츠나 인터랙션을 활용하는데 제약을 가지고 있다.

따라서 본 연구에서 제안하는 멀티디바이스 드로잉 애플리케이션 TakeOut 를

설계할 때 스마트폰과 스마트워치 디바이스 간에 보완적인 사용 경험을 고려하여

설계하였다.

2-3 Distributed User Interface (DUI)

9

Elmqvist 는 Distributed User Interface 를 UI components 가 input, output,

platform, space, and time 중 하나 이상의 차원에 걸쳐 분산된 유저 인터페이스로

정의한다[14]. DUI 는 변화가 많은 HCI (Human-Computer Interaction)에서

하나의 눈에 띄는 연구 개발 분야가 되었다. 그림 2.2 는 DUI 의 transversal

model 이다[15].

각 차원은 정형화된 UI (한 User 가 고정 된 Concept 에서 하나의 Domain 으로

하나의 Task 를 수행하는 인터페이스)에 대한 한계를 극복하기 위해 설계 원칙을

정교화 할 수 있다. TakeOut 은 One-User, Multi-device, Multi-platform 의

차원에서 설계되었다. DUI 는 사용자가 Task 를 쉽게 수행할 수 있도록 서로

연결된 여러 디바이스로 이동 (migration)하여 분리할 수 있다[16]. 따라서 본

연구에서 드로잉 Task 를 쉽게 할 수 있도록 기존 스마트폰 드로잉 인터페이스를

연결된 스마트폰과 스마트워치 디바이스로 분리하는 DUI 기반의

TakeOut 어플리케이션을 제안한다.

10

제 3 장 프로토타이핑

3-1 Concept

TakeOut 애플리케이션은 DUI 기반으로 UI Migration 를 위한 원리인

DEMIPLAT[17]를 활용하여 스마트폰 드로잉 애플리케이션의 단일 인터페이스를

그림 3.1 과 같이 스마트폰, 스마트워치 두 디바이스로 분할하였다. 이는 Multi-

platform 으로 각각 터치인풋과 비주얼 아웃풋을 가진다. 표 3.2 은 DEMIPLAT 를

적용한 내용을 각 속성별로 설명한다.

스마트폰 인터페이스는, 전통적인 드로잉 캔버스와 같이, 그림을 그릴 수 있는

작업영역이 되고, 스마트워치 인터페이스는 스마트폰에 있던 많은 툴 메뉴들을

가져온 것으로 메뉴를 탐색하고 선택하는, 전통적인 드로잉 팔레트와 같은,

DEMIPLAT Description

Detach Detach tool palette on smartphone

Migrate Migrate to other areas

Plastify Plastify tool palette;

brush tool, color tool and eraser

Attach Attach palette on smartwatch

(other device)

11

작업영역이 된다. 두 디바이스로 인터페이스가 분리되어있어, 스마트폰 화면 전체

공간을 사용할 수 있다. 단일디바이스 드로잉 애플리케이션과 TakeOut 드로잉

애플리케이션의 차이점은 표 3.3 과 같다.

Normal drawing app TakeOut drawing app

차이점

디바이스 단일 디바이스 사용

(스마트폰)

멀티디바이스 사용

(스마트폰 + 스마트워치)

작업영역 통합된 드로잉 영역과

도구선택 영역(한 화면)

분리된 드로잉 영역과

도구선택 영역(두 화면)

스마트폰과 스마트워치 드로잉 인터랙션은 표 3.4 와 같이 기본적으로 2 가지

사용 시나리오를 가지고 있다. 스마트워치를 위로 찬 후, 스마트폰을 바닥에

내려두고 조작하는 방식과 스마트워치를 돌려 아래로 찬 후, 스마트폰을 들고 한

손으로 자유롭게 조작하는 방식이다.

Using case 1

: Putting down smartphone

Using case 2

: Holding smartphone

Tool

Selection

Drawing

a picture

12

3-2 Application Design

물리적인 드로잉 메타포를 대입하여 각 애플리케이션을 디자인하였다.

물리적인 드로잉 메타포는 사용자들이 경험적으로 가지고 있는 인지적 요소로

캔버스, 붓, 팔레트와 같은 드로잉 도구들을 말한다. TakeOut 은 이러한 친숙한

물리적인 드로잉 메타포를 기반으로 인터페이스를 분리하여 감성적으로

인게이지먼트 할 수 있도록 한다.

3-2-1 Smartphone Application

스마트폰 어플리케이션은 드로잉을 하는 작업영역으로 캔버스를 메타포로

활용하여 스타일을 디자인하였다. 그림 3.5 와 같이 메뉴 바의 크기를 최소한으로

배치하였다. 애플리케이션 화면에는 스마트워치 애플리케이션과 연결할 수 있는

온/오프 버튼과 드로잉 작업 내용을 지울 수 있는 clear 버튼만을 두어 화면을

온전히 쓸 수 있도록 하였다.

13

3-2-2 Smartwatch Application

스마트워치 어플리케이션은 드로잉 툴을 탐색하고 선택하는 작업영역으로

팔레트를 메타포로 사용하여 스타일을 디자인하였다. 그림 3.6 와 같이 스마트워치

어플리케이션의 메인 화면은 3 가지 도구로 구성되어있다.

기존의 스마트폰 드로잉 애플리케이션(Sketch, Autodesk SketchBook and Sketch

Kit)의 팔레트 도구 중에서 기본 적인 드로잉 테스크 수행 시 주로 사용하는

브러쉬와 색상, 지우개 툴을 선택하여 배치하였다. 그림 3.7 은 애플리케이션의

화면 구조를 나타낸다.

14

브러쉬 툴은 1~30px 로 사이즈를 조절하여 선택할 수 있다. 사이즈 조절에

따라 화면 그림 3.8 과 같이 외곽선의 굵기가 변하여 직관적으로 시각화한다. 또한

중앙에 브러쉬 사이즈에 대한 Text 정보를 제공하였다.

컬러 툴은 실제 환경에서 사용하는 색연필 24 색 컬러를 가져와 적용하였다.

선택된 컬러는 삼각형의 피커가 포인팅되고, 화면 중앙 컬러가 변화하며 정보를

직관적으로 전달하도록 하였다. 그림 3.9 는 컬러 선택 시에 변화하는 스마트워치

애플리케이션 화면이다. 추가적으로, 색의 명도 조절은 사용자가 가운데 화면을

스와이핑 하여 조작할 수 있다. 간단한 터치로 다양한 컬러를 만들어 낼 수 있도록

하였다. 지우개 툴은 터치를 통한 온 오프 방식으로 접근 및 선택의 단계를 줄였다.

15

3-3 Implementation

본 시스템을 구현하기 위해 그림 3.10 과 같이 삼성 갤럭시 S5 스마트폰과

삼성 기어 S2 스마트워치를 이용하였고, 블루투스(Bluetooth)를 통해 연결하였다.

스마트폰과 스마트워치의 디스플레이 크기는 각각 5 인치(1080 x 1920 pixel), 1.2

인치(360 x 360 pixel)이다. 삼성 기어 S2 는 원형 디스플레이와 로터리

베젤(rotary bezel)를 사용한다. 스마트폰 애플리케이션은 안드로이드(Android OS)

기반의 네이티브 애플리케이션으로 Java 언어로 작성되었고, SAP(Samsung

Accessory Protocol) API 를 통해 스마트워치 앱과 연동하였다. 스마트워치

애플리케이션은 타이젠(Tizen OS)기반의 웹 애플리케이션으로 HTML과 jQuery-

mobile library 를 활용하여 개발하였다. Device-to-Device Communication 은

타이젠 API 로 구현하였다.

16

3-4 User Test

3-4-1 Test Design

제안된 TakeOut 프로토타입 애플리케이션의 이용 행태와 사용성을 확인하고,

피드백을 얻기 위해서 User Test 를 실시하였다. 8 명(남자 4 명, 여자 4 명, 평균

나이: 25 살)이 참가하였으며, 모두 드로잉 애플리케이션과 스마트워치를 사용해본

경험이 있는 사용자들이다. 실험은 H-Lab 의 실험실(회의실)에서 약 30 분간

진행되었다. 사용된 두 디바이스는 삼성 갤럭시 S6(스마트폰)와 삼성

기어 S2(스마트워치)이다. 그림 3.11 은 User test 중인 참가자들의 모습이다.

연구자는 참가자에게 TakeOut 에 대해 간단히 설명을 한 뒤 애플리케이션이

가진 3 가지 기능(컬러 팔레트, 브러쉬 팔레트, 지우개)을 모두 사용하도록 하였다.

자연스러운 드로잉 애플리케이션 사용에서 데이터를 수집하기 위해서 화면에

스케치 이미지를 제공하였다. 프로토타입을 충분히 사용한 후 표 3.12 와 같이 각

평가항목에 5 점 리커트 척도(Likert scale, (5 점-매우 그렇다, 4 점-그렇다, 3 점-

보통, 2 점-그렇지 않다, 1 점-전혀 그렇지 않다)로 답하도록 요청하였다.

17

평가 항목 Questions

Perceived Usefulness

(유용성) 드로잉을 효과적으로 할 수 있도록 도움을 준다.

Perceived Playfulness

(즐거움) 드로잉을 할 때 재미있었다.

Perceived Ease of Use

(사용용이성) 애플리케이션을 쉽게 사용할 수 있었다.

User Satisfaction

(만족도) 드로잉을 할 때 만족스러웠다.

설문지 작성 후 사용 경험과 의견을 듣기 위해서 인터뷰를 진행하였으며, 본

연구에서 개발된 어플리케이션에 대해 참가자에게 한 주요 질문을 요약하면 다음과

같다. 전체 실험은 약 30 분 정도 소요되었다.

(1) 본 어플리케이션 사용의 장점은 무엇이라 생각하는가?

(2) 본 어플리케이션 사용의 단점은 무엇이라 생각하는가?

(3) 어플리케이션에 추가되었으면 하는 기능들은 무엇이 있는가?

3-4-1 Test Result

참가자들은 TakeOut애플리케이션에 대해 그림 3.13과 같이 모든 항목에 대해

긍정적으로 평가하였다. 또한 멀티디바이스를 활용하는 드로잉 인터랙션에 대해

신기하고, 재밌다는 피드백을 주었다. 각 평가 항목별 수치는 그림 3.14에 나타난다.

4 개의 항목의 평균점수는 4.5 로 높게 평가되어, TakeOut 애플리케이션의

사용성을 확인할 수 있었다. 가장 높은 점수를 받은 항목은 즐거움이다. 반면,

사용용이성(4.1)은 비교적 낮은 점수를 받았다.

18

평가 항목 P1 P2 P3 P4 P5 P6 P7 P8 Avg

유용성 5 4 4 4 5 5 5 4 4.5

즐거움 5 5 5 5 5 4 5 4 4.8

사용용이성 5 3 4 4 4 5 3 5 4.1

만족감 5 4 5 4 5 4 5 5 4.6

전체 문항 평균 점수 4.5

참가자들은 다양한 방식으로 스마트워치를 착용하여 애플리케이션을

사용하였다. 스마트워치를 착용하지 않고, 손으로 잡고서 조작하는 참가자도 있었다.

인터뷰 결과, P2 는 기존의 스마트폰 드로잉 애플리케이션과 비교하여 스마트폰

화면을 온전히 활용할 수 있는 것에 만족감을 드러냈다. 특히, P5 는 스마트워치를

팔레트를 잡는 것처럼 손에 들고 해보니, 실제 드로잉과 같이 색을 찍어 바르는 것

같아 몰입감이 있었다고 말했다. P3 은 스마트폰 애플리케이션보다 직관적이고

인터랙션이 참신하다는 이야기를 했다.

단점으로는 8 명 중 3 명의 참가자가 공통적으로 지우개 도구에 대해 말했다.

또한 P8 은 스마트워치 화면이 자동적으로 꺼지는 현상에 대해 불만을 드러냈다.

1

2

3

4

5유용성

즐거움

사용용이성

만족감

19

P4 는 지우개 도구를 선택하고 상태를 확인하는데 어려움을 느꼈고, 사이즈 조절이

되지 않아 불편했다고 언급했다. 그리고 P3 는 추가되었으면 하는 기능으로 시계를

흔들어서 색을 혼합할 수 있는 인터랙션을 제안했다. P1 은 스마트폰 드로잉

애플리케이션에 있는 색의 투명도 조절 기능이나, 이전단계로 돌아갈 수 있는

기능이 있었으면 좋겠다고 말했다. User test 후 드로잉 인터랙션을 효과적으로 할

수 있도록 일정 시간이 지나도 화면 이 꺼지지 않도록 프로토타입을 수정하였다.

20

제 4 장 Evaluation

4-1 Experiment Condition

실험의 목적은 본 연구에서 제안한 TakeOut 시스템의 전반적인 사용성을

System Usability Scale(SUS)를 통해 검증하고[18], 멀티디바이스(스마트폰과

스마트워치)를 활용한 TakeOut 애플리케이션이 사용자 경험에 미치는 영향을

확인하고자 User Experience Questionnaire(UEQ)[19]를 통해 평가하고자 하는

것이다. 또한 스마트폰 단일디바이스 애플리케이션 Sketch 와의 비교를 통해

드로잉 인터랙션에 대한 사용자 경험의 차이를 확인하고자 하고자 한다. 표 4.1 은

각 평가 요소와 측정 항목들을 나타낸다.

평가 요소 단위 대상 설명

사용자 경험

(UX) 점수

Condition 1 - Task 1, 2 UEQ 설문지(7점 척도)

-

Attractiveness(att, 매력성)

Perspicuity(per, 명확성)

Efficiency(eff, 효율성)

Dependability(dep, 신뢰성)

Stimulation(sit, 자극)

Novelty(nov, 참신함)

Condition 2 - Task 1, 2

시스템 사용성 점수 Condition 2 SUS 설문지(5점 척도)

실험은 표 4.2 과 같이 두 condition 을 피험자 내 비교(Within-subjects)를 통해

측정한다.

Condition 1 단일디바이스 Sketch 드로잉 애플리케이션

2 멀티디바이스 TakeOut 드로잉 애플리케이션

21

드로잉 인터랙션은 글자를 쓰는 Task, 그림을 그리는 Task 로 나누어 평가하였다.

TakeOut 어플리케이션과 동일한 기능을 제공하기 위해 기존의 스마트폰 드로잉

애플리케이션인 Sketch 의 추가적인 기능은 통제하였다.

실험 참가자 12 명은 6 명의 남성, 6 명의 여성으로 구성되어 있으며, 평균

나이는 26 세(나이 범위: 23-31 세)인 대학원생이다. 모든 참가자는 이전에

스마트워치와 드로잉 애플리케이션을 사용해본 경험이 있고, 5 명은 스마트워치를

보유하고 있다. 실험 디바이스는 갤럭시 S5 스마트폰과 갤럭시 S2 를 사용하였다.

실험 환경은 그림 4.3 과 같다.

22

실험참가자들은 실험을 시작하기 전, 연구자로부터 실험의 목적 및 지시사항을

구두로 전달받았다. 연구자는 실험 안내문을 기준으로 실험참가자에게 실험 진행

과정을 전달하였다. 전체적인 실험 절차는 그림 4.2 와 같다. 실험 안내 사항을

전달받은 실험참가자는 스마스폰 App과 스마트워치 App의 작동법을 익혔다. 실험

설명과 연습이 끝나면 참가자들은 연구원이 제공한 Task 안내문을 보며 실험을

진행하게 된다. 그림 4.4 와 같이 각 Condition 에 마다 글자쓰기 작업과

그림그리기 작업을 수행한 후에 UEQ 설문지를 작성하도록 요청하였다. 마지막으로

TakeOut 에 대한 시스템 사용성 평가를 위해 SUS 설문지를 작성하도록

요청하였다.

23

Task

1 글자쓰기

2016. 11. 7 과 Hello! 그리고 TakeOut 을

한 화면에 각각 다른 색으로 써주세요.

(굵기와 색을 자유 선택)

2015. 3. 15 과 Happy! 그리고 TakeOut 을

한 화면에 각각 다른 색으로 써주세요.

(굵기와 색을 자유 선택)

2 그림그리기

예시와 같이 그려주세요(굵기와 색을 자유

선택, 최소 5 가지 이상 색 사용).

예시와 같이 그려주세요(굵기와 색을 자유

선택, 최소 5 가지 이상 색 사용).

24

4-2 Result

4-2-1 System Usability Scale(SUS)

사용성 평가 결과, 평균 SUS 점수는 100 점 만점에 82 점, B 등급(Excellent)으로

높게 나타났다. 표 4.5 는 실험참가자 12 명의 각 평균점수와 전체 평균점수를

나타낸다. 사용자들은 대체로 TakeOut 애플리케이션을 이용하는 데에 있어서

긍정적인 반응을 보였다.

P1 P2 P3 P4 P5 P6 P7 P8 P9 P10 P11 P12 Avg

97.5 72.5 80 90 95 97.5 92.5 62.5 92.5 60 65 75 82

특히, 6 번 항목과 7 번 항목, 9 번 항목에 대한 결과가 우호적이었으며 이는

제안하는 시스템이 안정적이고, 인터페이스 학습이 쉬우며, 시스템에 대한 높은

만족감을 가진다고 판단한 결과이다. 따라서 TakeOut 은 사용성이 높은

멀티디바이스 드로잉 애플리케이션이라는 것을 확인할 수 있다. 또한 실험참가자에

따른 점수의 차이가 크게 나타났다. 이는 드로잉애플리케이션이라는 도메인의

특성상 개인적인 선호도가 높게 반영된 것으로 해석할 수 있다.

4-2-2 User Experience Questionnaire(UEQ)

가. Only-device condition Application

그림 4.6 과 4.7 은 기존의 단일디바이스 애플이케이션 ‘Sketch’로 드로잉

인터랙션을 한 경우로 각 Task1(글자쓰기), Task2(그림그리기)의 전반적인

UEQ 설문 결과를 보여준다. 해당 애플리케이션에 대한 사용자 경험은 두 Task

모두 6 가지 평가 척도에서 전반적으로 부정적인 평가를 받았다. Task1 에서 가장

25

낮은 평가를 받은 Novelty(-0.625)는 애플리케이션이 혁신적이고 창의적이다는

것을 확인하는 척도이다. Task2 에서는 Efficiency(-0.313)척도가 가장 낮은

평가를 받았다. 이는 효율적으로 작업을 수행할 수 있는 지를 확인하기 위한

척도이다. 두 Task 모두 공통적으로 제품에 익숙해지기 쉬운지를 확인하기 위한

Perspicuity(Task1: 0.979 , Task2: 0.875)척도가 가장 높은 평가를 받았다.

-3

-2

-1

0

1

2

3

-3

-2

-1

0

1

2

3

26

나. Multi-device condition Application

그림 4.8 과 4.9 는 본 연구에서 제안한 멀티디바이스 애플이케이션

‘TakeOut’으로 드로잉 인터랙션을 한 경우로 각 Task1(글자쓰기),

Task2(그림그리기)의 전반적인 UEQ 설문 결과를 보여준다. 해당 애플리케이션에

대한 사용자 경험은 두 Task 모두 6 가지 평가 척도에서 전반적으로 긍정적인

평가를 받았다. Task1 에서 가장 높은 평가를 받은 척도는 Novelty(1.688)이다.

Task2 는 애플리케이션을 사용하는 데 동기부여가 되고, 재미 있는지를 확인하는

척도인 Stimulation(1.917)에서 가장 높은 평가받았다. 또한 UEQ 를 활용한 기존

연구 데이터들과 비교하여 상대적인 UX quality 를 보여주는 Benchmark 에서는

Task1, 2 모두 거의 모든 척도가 상위 10%~25 수준으로 평가되었다. 특히,

Task2 에서 6 개의 척도 중 4 개가 최상의 결과 범위인 상위 10%로 평가되었다.

-3

-2

-1

0

1

2

3

27

다. Comparison of Scale Means

단일디바이스 어플리케이션(Sketch)에서의 드로잉 인터랙션 경험과

멀티디바이스 어플리케이션(TakeOut)에서의 드로잉 인터랙션 경험의 차이를

비교하기 위해, 각 Task 별로 T-test(Alpha-Level 0.05)를 실시하였다. 그 결과,

표 4.10 과 같이 UEQ 의 6 가지 평가 요소 중 5 개(Attractiveness, Efficiency,

Dependability, Stimulation, Novelty)에서 유의미한 차이를 나타냈다.

UEQ att per eff dep sti Nov

Task 1

Condition1 0.17 0.98 -0.08 0.79 -0.06 -0.63

Condition2 1.47 1.60 1.77 1.63 1.54 1.69

p-value 0.0031 0.1325 0.0008 0.0392 0.0002 0.0001

-3

-2

-1

0

1

2

3

28

Task 2

Condition1 0.46 0.88 -0.31 0.67 0.35 -0.29

Condition2 1.76 1.60 1.60 1.75 1.92 1.79

p-value 0.0032 0.1148 0.0001 0.0076 0.0012 0.0002

그림 4.11 과 4.12 은 각 Task1 과 Task2 의 Condition 별 차이를 비교한

그래프이다. 두 Task 모두 Perspicuity(p=0.1325, 0.1148)척도에서는 유의미한

차이가 없었다.

-2.00

-1.00

0.00

1.00

2.00

3.00

Attractiveness Perspicuity Efficiency Dependability Stimulation Novelty

-2.00

-1.00

0.00

1.00

2.00

3.00

Attractiveness Perspicuity Efficiency Dependability Stimulation Novelty

29

제 5 장 Conclusion and Discussion

본 연구는 DUI(Distributed User Interface) 기반의 멀티디바이스(스마트폰과

스마트워치) 드로잉 애플리케이션 TakeOut 을 제안하였다. 제안한 TakeOut

시스템의 전반적인 사용성을 확인하고, 스마트폰 단일디바이스 애플리케이션

‘Sketch’ 와 멀티디바이스 애플리케이션 ‘TakeOut’의 드로잉 인터랙션에 대한

사용자 경험을 비교하여 TakeOut 애플리케이션이 사용자 경험을 향상시키는지

검증하고자 실험을 진행하였다. TakeOut 애플리케이션의 시스템 사용성 평가 결과,

평균 82 점(SUS)으로 이는 사용성이 높은 멀티디바이스 드로잉

애플리케이션이라는 것을 보여 준다.

UEQ 결과는 단일디바이스 환경의 드로잉 애플리케이션 Sketch 보다

멀티디바이스 환경의 드로잉 애플리케이션 TakeOut 이 더 높은 평가를 받았다.

이는 멀티디바이스를 활용하는 드로잉 인터랙션이 사용자 경험에 긍정적인 영향을

미치는 것으로 해석할 수 있다.

기존의 단일디바이스 애플이케이션 ‘Sketch’로 드로잉 인터랙션을 한 경우는

각 Task1, 2 에서 모두 전반적으로 부정적인 평가를 받았다. 특히, Task2 는

Efficiency (효율성) 측면에서 가장 낮은 점수를 보였다. 이는 그림그리기 작업의

특성 상, 컬러 변경과 브러쉬 굵기 조절 등 많은 인터랙션이 동반됨으로 팔레트

조작시 비효율적인 인터랙션이 많았기 때문으로 예상할 수 있다. 반면, 이미 익숙한

인터페이스를 가진 애플리케이션이기 때문에 Perspicuity (명확성) 측면에서 두

Task 모두 비교적 높은 점수를 받았다.

30

본 연구에서 제안한 멀티디바이스 애플이케이션 ‘TakeOut’으로 드로잉

인터랙션을 한 경우는 각 Task1, 2 모두 긍정적인 평가를 받았다. 각 Task 에서

가장 높은 점수를 받은 평가요소는 Novelty (참신함), Stimulation (자극)으로

TakeOut 애플리케이션이 혁신적이고, 재미있는 드로잉 인터랙션 경험을

제공한다는 것을 알 수 있다. 또한 Task1 보다 Task2 가 전체적으로 더 높은

점수를 받았다. Task2 는 그림그리기로 글자쓰기 Task 보다 다양한 인터랙션이

있기 때문에 실험참가자가 더 높은 사용자 경험을 느낄 수 있었을 것이다.

Task 별로 두 Condition 을 T-test 를 통해 비교한 결과 6 개 중 5 개의

평가요소에서 유의한 차의를 보였다. 이는 디바이스 환경에 따른 경험의 차이가

있음을 알 수 있다. 결론적으로 드로잉 인터랙션에 있어서, 단일디바이스를

활용하는 Sketch애플리케이션보다 멀티디바이스를 활용하는TakeOut애플리이션이

더 긍정적인 사용자 경험을 제공함을 확인하였다. 따라서 멀티디바이스를 활용하는

TakeOut 이 드로잉 인터랙션에 대한 사용자 경험을 향상시킬 수 있는 가능성을

보여준다.

본 연구는 Cross-device Interaction 과 DUI 를 드로잉 인터랙션에 적용하여

스마트폰과 스마트워치를 활용하는 새로운 멀티 디바이스 드로잉 애플리케이션을

개발하고, 기존의 단일디바이스 애플리케이션과의 차이를 비교하여 UX 를

검증했다는 점에서 큰 의의를 두고 있다. 하지만 새로운 인터랙션을 가진

애플리케이션이기 때문에 두 Task 에서 모두 유의한 차이를 보이지 않았던

Perspicuity (명확성) 측면은 TakeOut 이 보완해야 할 점이다. 비록 SUS 를 통해

TakeOut 애플리케이션은 배우기 쉬운 시스템임을 확인했지만, 익숙하지 않은

31

인터페이스로 사용자 경험 측면에서는 어려움이 존재하여 비교적 낮은 평가를 받은

것으로 보인다.

본 연구의 한계점은 정성적 연구라는 특성상 다수를 대상으로 하지 않았고,

단일디바이스 드로잉 애플리케이션과 멀티디바이스 드로잉 애플리케이션은

근본적인 사용 형태가 다르기 때문에 일반화하기는 어렵다. 그리고 드로잉

애플리케이션은 전 연령층이 사용하지만 연구 대상이 20~30 대이고, 스마트워치

사용 경험이 있는 사람들로 국한되어 있기 때문에 결과가 모든 연령층에 적용되지

않을 수도 있다는 한계점을 가지고 있다. 또한, 실험에서 사용한 단일디바이스

Condition 의 Sketch 애플리케이션은 일반적인 드로잉 인터페이스를 가지고 있지만,

모든 스마트폰 드로잉 애플리케이션을 포괄하고 있지 않을 수도 있다는 한계점이

있다. Sketch 는 실제 배포되어있는 애플리케이션을 활용한 것으로 TkeOut 과

기능적 차이가 다소 있었다.

추후 연구로는 실험 결과에서 유의미한 차이를 보이지 않았던 Perspicuity

측면을 향상시키고 TakeOut 연구의 한계점들을 보완하고자 한다. 스마트폰과

스마트워치의 인터랙션을 일관되게 수정하고, 사용자가 스마트워치 애플리케이션의

사용법을 쉽게 인지할 수 있도록 가이드 페이지를 추가하여 개발할 것이다. 실험은

다양한 연령층과 더 많은 대상으로 진행할 계획이다. 또한 실험 시에 비교 대상인

단일디바이스 드로잉 애플리케이션을 TakeOut 과 유사한 기능으로 제작하여

실험의 오류를 최소화할 것이다.

32

References

[1] Google. “The New Multi-Screen World: Understanding Cross-platform

Consumer Behavior”, Think with Google United States pp.7 (2012)

[2] Gartner. http://www.gartner.com/technology/home.jsp

[3] 한국마이크로소프트. “한국 직장인 디바이스 사용 실태 조사” (2014)

[4] MIT Media Lab. http://www.media.mit.edu

[5] Business Intelligence. “전 세계 웨어러블 디바이스 생산량 예측” (2013)

[6] Bhawna Kohli. “Smartwatch Market by Type Product (Extension, Classic &

Standalone smartwatch) and Application (PA, Wellness, Medical/ Health, Sports)

- Global Opportunity Analysis and Industry Forecast, 2013 - 2020”, Allied

Market Researh (2015)

[7] Jun Rekimoto. “Pick-and-Drop: A direct Manipulation Technique for

Multiple Computer Environments”, In Proceedings of the 10th annual ACM

symposium on User interface software and technology pp.31-39 (1997)

[8] Robert Hardy, Enrico Rukzio. “Touch & interact: touch-based interaction

of mobile phones with displays”, In Proceedings of the 10th international

conference on Human computer interaction with mobile devices and services

pp.245-254 (2008)

[9] Xiang ‘Anthony’ Chen, Tovi Grossman, Daniel Wigdor. “Duet: exploring joint

interactions on a smart phone and a smart watch”, In Proceedings of the SIGCHI

Conference on Human Factors in Computing Systems pp.159-168 (2014)

[10] Ulrich von Zadow, Wolfgang Büschel, Ricardo sLangner, Raimund Dachselt.

“SleeD: Using a Sleeve Display to Interact with Touch-sensitive Display Walls”,

33

In Proceedings of the Ninth ACM International Conference on Interactive

Tabletops and Surfaces pp.129-138 (2014)

[11] Hyunchul Lim, YoonKyong Cho, Wonjong Rhee, Bongwon Suh. “Vi-Bros:

Tactile Feedback for Indoor Navigation with a Smartphone and a Smartwatch”,

Proceedings of the 33rd Annual ACM Conference Extended Abstracts on Human

Factors in Computing Systems pp.2115-2120 (2015)

[12] Procreate pocket App. Retrieved from http://procreate.si/pocket/

[13] Michal Levin. “Designing Multi-Device Experiences”, O'Reilly Media pp.

(2014)

[14] Niklas Elmqvist. “Distributed User Interfaces: State of the Art”, Springer

London pp.1-12 (2011)

[15] Jean Vanderdonckt. “Distributed User Interfaces: How to Distribute User

Interface Elements across Users, Platforms, and Environments”, Proc. of XIth

Congreso Internacional de Interacción Persona-Ordenador Interacción pp.3-14

(2010)

[16] Luyten, K. and Coninx, K. “Distributed User Interface Elements to support

Smart Interaction Spaces”, In Multimedia, Seventh IEEE International

Symposium on pp.277-286 (2005)

[17] Donatien Grolaux, Jean Vanderdonckt, Peter Van Roy. “Attach Me, Detach

Me, Assemble Me Like You Work”, IFIP Conference on Human-Computer

Interaction pp.198–212 (2005)

[18] J. Brooke. “SUS - A Quick and Dirty Usability Scale”, Usability Evaluation

in Industry pp.4–7 (1996)

http://dl.acm.org/author_page.cfm?id=99658707601&coll=DL&dl=ACM&trk=0&cfid=693240620&cftoken=21318190http://dl.acm.org/author_page.cfm?id=99658692045&coll=DL&dl=ACM&trk=0&cfid=693240620&cftoken=21318190http://dl.acm.org/author_page.cfm?id=81100623883&coll=DL&dl=ACM&trk=0&cfid=693240620&cftoken=21318190

34

Appendix

SUS Questionnaire

매우 동의하지 않는다 (1 점) – 보통 (3 점) – 매우 동의한다 (5 점)

평가 1 2 3 4 5

1. TakeOut을 자주 사용하게 될 것 같다.

2. TakeOut이 불필요하게 복잡하다고 생각한다.

3. TakeOut은 사용하기 쉽다고 생각한다.

4. TakeOut을 사용하려면 전문가의 도움이 필요할 것 같다.

5. TakeOut의 다양한 기능이 잘 통합되어 있다고 생각한다.

6. TakeOut은 매우 일관성이 없다고 생각한다.

7. 대부분의 사람들이 TakeOut을 쉽게 사용할 것이라고 생각한다.

8. TakeOut은 사용하기에 매우 귀찮다.

9. TakeOut을 사용하는데 매우 자신감을 느꼈다.

10. TakeOut을 사용하기 전에 많은 학습이 필요했다.

35

UEQ Questionnaire

1 2 3 4 5 6 7

짜증스러운 즐거운 1

이해 할 수 없는 이해할 수 있는 2

창의적인 따분한 3

배우기 쉬운 배우기 어려운 4

가치 있는 열등한 5

지루한 재미있는 6

흥미롭지 않은 흥미로운 7

예측할 수 없는 예측할 수 있는 8

빠른 느린 9

독창적인 평범한 10

방해하는 도와주는 11

좋은 나쁜 12

복잡한 쉬운 13

만족스럽지 않은 만족스러운 14

보통의 최첨단의 15

기분 나쁜 기분 좋은 16

안전한 안전하지 않은 17

동기부여 하는 의욕을 꺽는 18

기대에 미치는 기대에 미치지 않은 19

비효율적인 효율적인 20

명확한 혼란스러운 21

실용적이지 않은 실용적인 22

체계적인 어수선한 23

매력적인 매력적이지 않은 24

친절한 불친절한 25

보수적인 획기적인 26

36

Data M

ean

STD

NConfid

ence

Mean

STD

NConfid

ence

Attra

ctiveness

0.1

71.0

712

0.6

1-0

.44

0.7

71.4

70.8

212

0.4

61.0

11.9

4

Persp

icuity

0.9

80.9

412

0.5

30.4

51.5

11.6

01.0

212

0.5

81.0

32.1

8

Efficie

ncy

-0.0

81.2

812

0.7

2-0

.81

0.6

41.7

71.0

412

0.5

91.1

82.3

6

Dependability

0.7

91.1

112

0.6

30.1

61.4

21.6

30.6

712

0.3

81.2

52.0

0

Stim

ula

tion

-0.0

61.0

612

0.6

0-0

.66

0.5

31.5

40.4

712

0.2

71.2

71.8

1

Novelty

-0.6

31.3

412

0.7

6-1

.38

0.1

31.6

90.4

812

0.2

71.4

21.9

6

Mean

STD

NConfid

ence

Mean

STD

NConfid

ence

Attra

ctiveness

0.4

61.1

312

0.6

4-0

.18

1.1

01.7

60.7

212

0.4

11.3

62.1

7

Persp

icuity

0.8

81.1

512

0.6

50.2

21.5

31.6

01.0

212

0.5

81.0

32.1

8

Efficie

ncy

-0.3

11.1

212

0.6

4-0

.95

0.3

21.6

00.8

412

0.4

71.1

32.0

8

Dependability

0.6

71.0

612

0.6

00.0

71.2

71.7

50.6

712

0.3

81.3

72.1

3

Stim

ula

tion

0.3

51.1

412

0.6

5-0

.29

1.0

01.9

20.8

912

0.5

11.4

12.4

2

Novelty

-0.2

91.3

312

0.7

5-1

.04

0.4

61.7

90.6

112

0.3

51.4

52.1

4

Confid

ence

Inte

rval

Task

1 - C

onditio

n1

Confid

ence

Inte

rval

Task

1 - C

onditio

n2

Sca

le

Com

pariso

n o

f Sca

le M

eans

Show

s the sca

le m

eans a

nd th

e co

rresp

ondin

g 5

% co

nfid

ence

inte

rvals.

Confid

ence

Inte

rval

Task

2 - C

onditio

n1

Confid

ence

Inte

rval

Task

2 - C

onditio

n2

Sca

le

37

3-1 Task 1

3-2 Task 2

Alpha level: 0.05

Attractiveness 0.0031 Significant Difference

Perspicuity 0.1325 No Significant Difference

Efficiency 0.0008 Significant Difference

Dependability 0.0392 Significant Difference

Stimulation 0.0002 Significant Difference

Novelty 0.0001 Significant Difference

Two sample T-Test assuming unequal variancesThis sheet shows a simple T-Test to check if the scale means of two measured products

differ significantly. As default the Alpha-Level 0.05 is used, but you can simply change

this value in this sheet if you want to use a different level.

Alpha level: 0.05

Attractiveness 0.0032 Significant Difference

Perspicuity 0.1148 No Significant Difference

Efficiency 0.0001 Significant Difference

Dependability 0.0076 Significant Difference

Stimulation 0.0012 Significant Difference

Novelty 0.0002 Significant Difference

Two sample T-Test assuming unequal variancesThis sheet shows a simple T-Test to check if the scale means of two measured products

differ significantly. As default the Alpha-Level 0.05 is used, but you can simply change

this value in this sheet if you want to use a different level.

38

ABSTRACT

Designing Multi-device Drawing Application Based on

Distributed User Interface and Evaluating UX

Noh Woo Ri

Department of Human ICT Convergence

Sungkyunkwan University

As various smart devices emerge, it has become a multi-device age in which

individuals use multi-devices simultaneously such as smart phones, tablets, and

smart watches. This has been further extended by the spread of various

wearable devices such as smart watches. Such a multi-device environment is

an opportunity to expand the limited interaction to existing devices.

Smartphones are hand-held devices that have limitations in drawing

interactions that utilize many tools and menus in the display. Therefore, we

need a new multi-device application design that can complement the limitations

of a single use of a smartphone in a user's drawing interaction and improve the

user experience. To do this, we propose TakeOut, a multi-device (smartphone

and smart watch) drawing application based on DUI (Distributed User Interface).

TakeOut has enhanced the utilization of both devices by separating the

interface of existing smartphone drawing applications into smartphones and

39

smart watches. In other words, the smartphone will interact with the canvas

with a palette of smart watches. The interface is divided into two devices, each

having independent tasks, and each device can be used clearly. You can also use

the entire space of the smartphone screen, minimizing visual clutter.

In this paper, prototype of the proposed multi-device drawing application

TakeOut was created and experimented with 12 experiment participants. We

evaluated and compared the user experience of the TakeOut application and the

single-device drawing application; Sketch, and concluded that TakeOut is better.

Usability evaluation also confirmed the high usability of the TakeOut application.

Keywords: Multi-device UX, Cross-device interaction, Distributed User

Interface, Drawing application

(표지측면) 碩 士

學

位

請

求

論

文

Desig

nin

g M

ulti-

devic

e D

raw

ing A

pplic

atio

n B

ased o

n D

istrib

ute

d U

ser

Inte

rface a

nd E

valu

atin

g U

X

2

0

1

6

盧

우

리

제1장 Introduction제2장 Related Work2-1 Cross-device Interaction2-2 Designing Multi-device Experience2-3 Distributed User Interface

제3장 Prototyping3-1 Concept3-2 Application Design3-2-1 Smartphone Application3-2-2 Smartwatch Application

3-3 Implementation3-4 User Test3-4-1 Test Design3-4-2 Test Result

제4장 Evaluation4-1 Experiment Condition4-2 Result4-2-1 System Usability Scale(SUS)4-2-2 User Experience Questionnaire(UEQ)

제5장Conclusion and DiscussionReferencesAppendixAbstract

11제1장 Introduction 1제2장 Related Work 6 2-1 Cross-device Interaction 6 2-2 Designing Multi-device Experience 8 2-3 Distributed User Interface 8제3장 Prototyping 10 3-1 Concept 10 3-2 Application Design 12 3-2-1 Smartphone Application 12 3-2-2 Smartwatch Application 13 3-3 Implementation 15 3-4 User Test 16 3-4-1 Test Design 16 3-4-2 Test Result 17제4장 Evaluation 20 4-1 Experiment Condition 20 4-2 Result 24 4-2-1 System Usability Scale(SUS) 24 4-2-2 User Experience Questionnaire(UEQ) 24제5장Conclusion and Discussion 29References 32Appendix 34Abstract 38