인터랙티브 제품 프로토타이핑을 위한 디자인 프로그래밍 툴킷 ...cidr.kaist.ac.kr/mediawiki/images/5/59/2010_ms_thesis... · 2019-12-18 · MID 20063121 김주환

석 사 학 위 논 문

Master’s Thesis

인터랙티브 제품 프로토타이핑을 위한 디자인

프로그래밍 툴킷 개발

확장된 스테이트차트 요소 기반의 사고 기법과 도구를 중심으로

Developing a Design Programming Toolkit for Prototyping of Interactive Product:

with emphasis on a Thinking Technique and Tools based on Extended Statecharts' Elements

김주환(金周煥 Kim, Ju-Whan)

산업디자인학과 Department of Industrial Design

한국과학기술원 Korea Advanced Institute of Science and Technology

2010

인터랙티브 제품 프로토타이핑을 위한 디자인

프로그래밍 툴킷 개발


Developing a Design Programming Toolkit for Prototyping of Interactive Product:

with emphasis on a Thinking Technique and Tools based on Extended Statecharts' Elements

MID 20063121

김주환 Kim, Ju-Whan

Developing a Design Programming Toolkit for Prototyping of Interactive Product: with emphasis on a Thinking Technique and Tools based on Extended Statecharts' Elements

인터랙티브 제품 프로토타이핑을 위한 디자인 프로그래밍 툴킷 개발


Department of Industrial Design. 2010, 61p. Advisor: Prof. Nam, Tek-Jin

ABSTRACT

This research introduces the Design Programming Toolkit, a set of thinking techniques and software tools which facilitate designers to prototype through programming, more easily. Prototyping is an important process for designers as developing a prototype requires designers to deploy their ideas and represent them in some comprehensible way. Due to the recent trend of products becoming more intelligent and software based, designers are required to prototype not only objects but often, now, software too. However, designers tend to waste a lot of time trying to master programming skills. The objective of this research is to develop and evaluate a new toolkit with which designers can more easily learn to program for prototyping purposes.

By systematically surveying literature and other studies relating to programming tasks for designers and software engineers, it was found that several general requirements exist. A toolkit of this nature should; 1, provide designers with a range of levels of fidelity in prototypes, 2, support prototyping of software and embedded hardware systems, 3, utilize a development environment which extends design thoughts and tools, and 4, be based on a stepwise instruction set.

The Design Programming Toolkit enhances the elements of statechart-based programming. A statechart is one way to describe an interactive system using a simple diagram which includes states and transitions. The toolkit consists of three components; 1, the Object-Oriented State Transition Chart technique, an advanced and effective progvramming method based on statecharts, 2, an Event Code Generator, a program which produces source code for extending transition-events and, 3, a Dynamic State Code Generator, another program which generates source code for enhancing states in more dynamic ways.

Several case studies are included to show validity and utility of the Design Programming Toolkit. The code generating aspects of the toolkit were used to successfully replace textual programming and were identified as useful. Additionally, further revision of the software remains as a future for this work.

KEYWORDS

product design, interaction design, reflective prototyping, programming, statecharts

목차

1. 서론 .............................................................................................. 1

1.1. 연구 배경 .................................................................................................... 1

1.2. 연구 목표 .................................................................................................... 2

1.3. 연구 방법 .................................................................................................... 3

1.4. 논문 구성 .................................................................................................... 4

2. 기초 이론 및 관련연구 고찰 ............................................................. 6

2.1. 프로토타이핑의 이해 .................................................................................... 6

2.1.1. 프로토타이핑의 개념 ........................................................................ 6

2.1.2. 프로토타이핑의 기능에 따른 유형 분류 .............................................. 7

2.2. 디자인 프로그래밍 ....................................................................................... 8

2.3. 관련 연구 고찰 ............................................................................................ 9

2.3.1. 스테이트차트 기반 프로그래밍 연구 ................................................. 10

2.3.2. 기능 함수 라이브러리 연구 .............................................................. 12

2.3.3. 초보 프로그래머 훈련 연구 .............................................................. 14

2.3.4. 관련 연구 종합 분석 ....................................................................... 16

2.4. 디자인 프로그래밍과 소프트웨어 프로그래밍의 비교 연구 ........................... 16

2.4.1. 작업 관찰 목적 ............................................................................... 17

2.4.2. 작업 관찰 방법 ............................................................................... 17

2.4.3. 작업 관찰 결과 ............................................................................... 17

2.4.4. 작업 관찰 결과 분석 ....................................................................... 18

3. 디자인 프로그래밍 툴킷의 개발 및 활용 ............................................ 21

3.1. 디자인 프로그래밍 툴킷의 요구사항 도출 .................................................... 21

3.2. 디자인 프로그래밍 툴킷의 개발 방향 .......................................................... 22

3.3. 디자인 프로그래밍 툴킷 ............................................................................. 25

3.3.1. 객체 지향적 스테이트트랜지션차트 .................................................. 26

3.3.2. 이벤트 코드 생성기 ........................................................................ 30

3.3.3. 동적 스테이트 코드 생성기 ............................................................. 32

3.4. 디자인 프로그래밍 툴킷의 활용 .................................................................. 35

3.4.1. 디자인 프로그래밍 1 단계 ............................................................... 35

3.4.2. 디자인 프로그래밍 2단계 ............................................................... 37

3.4.3. 디자인 프로그래밍 3단계 ............................................................... 39

4. 인터랙티브 프로토타입 개발 사례 .................................................... 42

4.1. 소방 구조용 화상 이미지 카메라 사례 ......................................................... 43

4.2. 펜 글씨 기반의 문자 입력 인터페이스 사례 ................................................. 48

4.3. 거리 센서를 이용한 충돌 경보기 사례 ......................................................... 52

4.4. 개발 사례 종합 .......................................................................................... 57

5. 결 론 .......................................................................................... 59

5.1. 연구 결과 요약 및 기여 .............................................................................. 59

5.2. 논의점 및 향후 연구 과제 .......................................................................... 61

그림 목차

[그림 1-1] 디자인 프로세스에서 사용된 프로토타입과 디자인 결과물 .................... 1

[그림 1-2] 연구 방법 개요 .................................................................................. 3

[그림 2-1] 스테이트차트 다이어그램의 예(왼쪽)와 스테이트 차트 기반의

프로토타이핑(오른쪽)......................................................................................... 10

[그림 2-2] 작업 관찰 결과물 ............................................................................. 17

[그림 2-3] 소방·구조용 화상 이미지 카메라의 기능 기술서 ................................ 18

[그림 3-1] 전통적인 스테이트트랜지션차트와 객체 지향적 스테이트트랜지션차트

기법의 개념 ...................................................................................................... 23

[그림 3-2] 디자인 프로그래밍 툴킷과 디자인 프로그래밍의 3단계..................... 25

[그림 3-3] 제품 아이디어의 외형(상)과 객체 구성도(하)..................................... 27

[그림 3-4] 제품의 객체 지향적 스테이트트랜지션차트 ....................................... 27

[그림 3-5] 플래시 개발 환경(좌)과 인터페이스 구성(우) ..................................... 28

[그림 3-6] 이벤트 코드 생성기의 구현 원리 ...................................................... 30

[그림 3-7] 이벤트 코드 생성기의 인터페이스(좌)와 그 명칭(우).......................... 31

[그림 3-8] 동적 8스테이트 코드 생성기의 주화면(좌)과 인터페이스의 명칭(우) . 33

[그림 3-9] 툴킷을 활용하여 단계적으로 진화하는 프로토타입 ............................ 35

[그림 3-10] 모바일 기기의 객체 지향적 스테이트차트 ....................................... 36

[그림 3-11] 디자인 프로그래밍 툴킷이 적용된 1단계의 프로토타입 .................... 37

[그림 3-12] 모바일 기기 예제에 활용된 고급 트랜지션 이벤트 ........................... 37

[그림 3-13] 디자인 프로그래밍 툴킷이 적용된 2단계의 프로토타입 ................... 38

[그림 3-14] 동적 스테이트 함수 slideTo의 동적 스테이트 생성기 패널의 구성 ... 39

[그림 3-15] 디자인 프로그래밍 툴킷이 적용된 2단계의 프로토타입 ................... 40

[그림 4-1] 소방 구조용 화상 이미지 카메라 사례 레이아웃 ................................ 43

[그림 4-2] 소방 구조용 화상 이미지 카메라의 객체 지향적 STC ........................ 44

[그림 4-3] 소방 구조용 화상 이미지 카메라의 이벤트 편집 화면 ........................ 45

[그림 4-4] 소방 구조용 화상 이미지 카메라의 사용 화면 ................................... 47

[그림 4-5] 아라비아 숫자의 7-세그먼트 출력 방식 ........................................... 48

[그림 4-6] 이벤트 코드 생성기 인터페이스상에서 숫자 들의 이벤트를 저작하는

화면 .................................................................................................................. 49

[그림 4-7] 중복 숫자 이벤트와 이를 방지해주는 필터이벤트 .............................. 50

[그림 4-8] 사례로 개발된 구구단 퀴즈 프로그램 ............................................... 51

[그림 4-9] 충돌 경보기 사례의 작동 개념 ......................................................... 52

[그림 4-10] 충돌 경보기 사례의 하드웨어 구성 ................................................. 53

[그림 4-11] 충돌 경보기 사례에서 사용된 동적 스테이트 코드 생성기 ................ 54

[그림 4-12] 충돌 경보기 사례에서 이벤트 코드 재생기를 통한 이벤트 저작 ........ 55

표 목차

[표 2-1] 스테이트차트 기반 프로그래밍 연구 ...................................................... 11

[표 3-1] 트랜지션이벤트의 프로그래밍 형식 ...................................................... 28

[표 3-2] 플래시에서 제공하는 기본 이벤트 ....................................................... 29

[표 3-3] 프로그래밍에서 요구되는 지식의 연결성 .............................................. 29

[표 3-4] 데이터의 시각화를 위한 이벤트 코드 명령어 ....................................... 32

[표 3-5] 움직임 패널의 그래프 형태에 따른 실제 객체의 움직임과 그 인상 ........ 33

[표 3-6] 동적 스테이트 코드의 명령어 .............................................................. 35

[표 3-7] 디자인 프로그래밍 1 단계의 소스 코드 ................................................ 36

[표 3-8] 프로그래밍 2 단계의 소스 코드 ........................................................... 38

[표 3-9] 디자인 프로그래밍 3 단계에서 B 스테이트의 소스 코드 ..................... 40

[표 4-1] 소방 구조용 화상 이미지 카메라의 소스 코드 1 .................................... 44

[표 4-2] 소방 구조용 화상 이미지 카메라의 소스 코드 2 ................................... 45

[표 4-3] 소방 구조용 화상 이미지 카메라의 소스 코드 1 ................................... 46

[표 4-4] 펜 글씨 기반의 숫자 입력 인터페이스의 소스 코드 일부 ..................... 50

[표 4-5] 충돌 경보기 사례에서 Arduino의 소스 코드 ....................................... 54

[표 4-6] 충돌 경보기 사례의 소스 코드 ............................................................ 55

[표 4-7] 디자인 프로그래밍 툴킷의 논의점 ........................................................ 57

1 서 론

1.1. 연구 배경

1.2. 연구 목표

1.3. 연구 방법

1.4. 논문 구성

1. 서 론

1. 서론

1.1. 연구 배경

정보 처리 기능을 가지는 제품이 보편화된 유비쿼터스(Ubiquitous) 환경에서

인터랙티브(Interactive) 제품 및 시스템 디자인 프로세스는 전통적인 디자인 도구들과

차별화되는 도구가 요구되고 있다. 부체너와 수리(Buchenau and Suri, 2000)는 인터랙티브 시스템

디자인 프로세스에서 중요한 작업 활동의 하나로 프로토타이핑(Prototyping)을 들고 있다.

프로토타입(Prototype)은 디자인 분야에서 혁신(Innovation), 협동과 창의를 구성하는 중추적

매체로 인식되고 있으며(Schrage, 1996), 디자인 아이디어를 통해 디자인 문제를 새롭게

이해하고 발견하는 도구의 역할을 가지기도 한다(Lichter et al., 1993). 임윤경 등(Lim et al., 2008)은

프로토타입을 통해 디자이너가 디자인 공간을 횡단(Traverse)하며 디자인이 발전할 수 있다고

하였다.

[그림 1-1] 디자인 프로세스에서 사용된 프로토타입과 디자인 결과물

(좌) 데스크탑(desk-top)을 활용한 프로토타입 (Buchenau and Suri, 2000)과

(우) 코닥(Kodak)의 DC 210(1999)

한편, 디지털 시 에 소프트웨어 프로그래밍(Software Programming) 지식이 디자이너가 가져야

할 주요 전문성 중 하나로 부각되고 있다. 디자인 분야에 필요한 프로그래밍 전문성을 디자인

프로그래밍(Design programming)이라 정의한다면, 이러한 전문성은 특히 HCI(Human Computer

Interaction), 인터랙티브 제품 디자인과 같은 분야에서 활동하는 디자이너들이 성찰적

프로토타이핑을 자유롭게 수행하기 위해 필수적인 부분으로 인식되고 있다. 크로포드(Crawford,

2003)는 인터랙티비티를 다루는 디자이너에게 있어 프로그래밍 지식이 중요함을 강조 하였다.

1

1. 서 론

최신 디지털 제품이 고도로 지능화, 편재화 되면서 더 복잡한 수준의 디자인 프로그래밍이

함께 요구되고 있다. 초기 인터랙티브 제품 및 시스템의 기능이 단순하고 단속적인 입력에

신호에 반응하였던 반면에 최근 인터랙티브 제품은 여러 종류의 센서를 동시에

감지·처리·해석·식별하는 성능을 가지는 경향이 있다. 동시에 초기 인터랙티브 제품이

개발 단계에서 미리 정의되어 있는 단순한 시청각 정보를 제공하였던 것과 비교하여 최근

인터랙티브 제품은 정보를 실시간 가공하여 시각, 청각, 촉각 등의 정보가 섞인 다중감각적인

정보(Multisensory Information)로 변환해 제공한다. 이러한 인터랙티브 제품의 경향성 변화는

디자인 프로세스에서 프로토타이핑을 활용하는 디자이너에게 상당한 수준의 프로그래밍

능력을 요구하고 있다.

하지만 일반적으로 프로그래밍 전문성은 디자이너들이 습득하기 가장 어려운 전문성 중

하나로 간주된다. 전통적인 제품 개발 프로세스에서 디자이너에게 익숙한 스케치와 3D 모델링,

모형 제작 등의 방식들로는 상당한 프로그래밍 전문성이 요구되는 프로토타이핑을 수행하기

쉽지 않다(임지동, 2005). 우뇌적 사고(Sperry, 1975)를 주로 활용하는 디자이너들은 좌뇌가

주관하는 논리적 분석적 사고를 요구하는 프로그래밍 지식을 습득하는데 큰 어려움을 겪는다.

또한 프로그래밍 전문성을 습득하는 과정이 소프트웨어 엔지니어에게 조차 상당한 시간, 노력,

시행착오를 필요로 하는 점을 감안할 때, 다른 유형의 사고를 활용하는 디자이너가 단시간

안에 프로그래밍 지식을 습득하는데 큰 어려움이 있음은 자명하다. 디자이너가 단시간 안에

디자인 분야에서 가장 필요한 프로그래밍 지식을 선택적으로 습득하고 활용할 수 있도록

도와주는 도구의 도입이 절실하다.

1.2. 연구 목표

본 연구의 목표는 디자이너가 쉽게 배울 수 있고 다양한 유형의 프로토타이핑에 활용할 수

있는 디자인 프로그래밍 툴킷(Design Programming Toolkit)을 개발하여 디자인 과정에 실질적인

도움을 주는 것이다. 특히 디지털 시 에 주요 디자인 상이 되는 인터랙티브 제품 및 시스템,

웹사이트, 소프트웨어 등의 디자인 초기단계에 성찰적 프로토타이핑 (Reflective Prototyping)을

도와주는 프로그래밍 방식과 이를 보조해주는 도구를 개발하는데 초점을 두었다.

본 연구 목표를 달성하기 위한 세부 목표는 다음과 같이 설정되었다.

2

1. 서 론

첫째, 디자인 분야에 유용하고 디자이너가 쉽게 배울 수 있는 디자인 프로그래밍을 정의하고

디자인 프로그래밍이 디자인 프로세스에서 어떤 역할을 하는지를 설정한다.

둘째, 디자인 분야 및 HCI 관련 분야에서 이루어진 유사 연구들의 흐름과 한계점을 파악한다.

셋째, 상기와 같은 어려움을 해결해 줄 수 있도록 디자인 프로그래밍 툴킷의 요구사항 및 개발

방향을 설정하고 실제로 개발한다.

넷째, 연구에서 제안된 디자인 프로그래밍 툴킷을 활용하여 사례 개발을 해봄으로써 툴킷의

유용성을 평가한다.

1.3. 연구 방법

[그림 1-2] 연구 방법 개요

문헌 연구를 통해 디자인 분야에서 널리 받아들여지는 프로토타이핑의 개념과 역할이

조사되었다. 디자인 프로그래밍이 정의되었고 디자인 분야에서 프로토타입이 가지는 역할을

바탕으로 디자인 프로그래밍이 프로토타이핑에서 수행하는 역할이 설정 되었다.

디자인 분야 및 HCI 분야의 문헌 연구를 통해 프로그래밍 관련 연구들이 조사 되었다. 가장

현저한 연구들을 중심으로 이 분야의 연구 흐름이 분석 되었고 가장 최근 연구들의 한계점이

고찰 되었다. 그와 동시에 디자이너와 소프트웨어 엔지니어에 의한 프로그래밍 작업에 한

비교 관찰이 수행되었고 그를 통해 분야 사이에서 나타나는 차이점에 해 논의가 이루어졌다.

3

1. 서 론

4

디자인 프로그래밍의 역할과 최근 연구의 동향, 디자인 분야의 프로그래밍 작업의 특징이

반영된 툴킷의 요구사항이 도출되었다. 도출된 요구사항을 바탕으로 디자인 프로그래밍

툴킷의 개발 방향이 설정되었고 실질적인 개발이 이루어졌다.

개발된 디자인 프로그래밍 툴킷을 직접 사용한 사례 연구를 통해 디자인 프로그래밍의

장·단점 등이 조사되었다. 조사된 논의점을 바탕으로 디자인 프로그래밍 툴킷의 유용성이

논의 되었다.

1.4. 논문 구성

본 논문은 서론을 포함한 5장으로 구성되어 있다.

1 장에서는 연구의 배경을 살펴 보고 연구의 목표와 연구 방법을 확인하였다. 연구 목표는

디자인 분야에 유용한 디자인 프로그래밍 툴킷을 개발하고 그 유용성을 평가하는 것이다.

2 장에서는 디자인 분야에서 프로토타이핑이 가지는 역할과 기능에 하여 알아보았다. 이를

바탕으로 디자인 프로그래밍을 정의하고 디자인 프로그래밍이 디자인 프로세스에서 수행하는

역할을 설정하였다. 마지막으로 HCI 및 디자인 분야의 관련 연구를 살펴봄으로써 연구의

경향성과 한계점을 파악하였다.

3장에서는 기초 연구를 바탕으로 디자인 프로그래밍 툴킷의 요구사항이 도출 되었다. 도출 된

요구사항을 충족 시키기 위한 개발 방향을 세우고 디자인 프로그래밍 툴킷이 개발되었다. 본

연구에서 제안하는 디자인 프로그래밍 툴킷은 기존 스테이트차트 기반의 인터랙션 구현

프로그래밍을 쉽고 확장 가능 하도록 하는 방법과 도구의 세트이다. 이 세트는 다양한

트랜지션을 쉽게 저작하도록 하는 도구와 스테이트를 역동적으로 변환하는 도구를 포함한다.

5 장은 디자인 프로그래밍 툴킷을 적용한 개발 사례를 소개하고 디자인 프로그래밍 툴킷이

구체적으로 어떤 도움이 되었는지를 논의한다.

6 장은 결론으로써 본 연구를 통해 디자인 실무와 디자인에 공헌하는 바를 논하고 향후 연구

과제를 나열하였다.

2 기초 이론 및 관련연구 고찰

2.1. 프로토타이핑의 이해

2.2. 디자인 프로그래밍

2.3. 관련 연구 고찰

2.4. 디자인 프로그래밍과 소프트웨어 프로그래밍의 비교 연구

2. 기초 이론 및 관련연구 고찰


본 장에서 먼저 디자인 프로세스 안에서 프로토타이핑이 수행하는 역할과 기능에 해 알아

본다. 이를 바탕으로 디자인 프로그래밍을 정의하고 디자인 프로그래밍이 디자인에서

수행하는 역할을 설정한다. 마지막으로 HCI 분야와 디자인 분야의 유사·관련 연구를

조사함으로써 디자인 프로그래밍 툴킷의 개발 방향에 한 단서를 얻는다.

2.1. 프로토타이핑의 이해

2.1.1. 프로토타이핑의 개념

프로토타입(Prototype)의 사전적 의미는 명사로써 원형, 견본, 전형, 선조, 원조의 의미와

동사로써 원형을 만들다의 의미를 가진다. 프로토타입이란 용어는 디자인 분야뿐 아니라

HCI 분야, 건축 분야, 소프트웨어 엔지니어링 분야 등 공학 분야의 전반에서 조금씩 다른

의미를 가지고 활용되고 있어 디자인 분야의 정의를 살펴 볼 필요가 있다. 디자인 분야에서

넓게 받아 들여지는 프로토타입의 정의로 IDEO의 부체너와 수리(2000)의 정의를 들 수 있다.

프로토타입:

최종 결과물 이전에 만들어 지는 디자인 표현물

Representations of a design made before final artifacts exist

프로토타입의 정의를 곱씹어 보면 디자이너의 생각 속에서 만들어진 디자인 아이디어의 외적

표현물, 예를 들어 아이디어 스케치, 도면, 실사 렌더링, 시나리오 보드, 찰흙 모형, 실측 모형,

2 차원 디지털 도면, 3 차원 디지털 모델링 등이 모두 프로토타입의 범주에 포함된다.

프로토타이핑은 다음과 같이 정의 될 수 있다.

프로토타이핑:

프로토타입을 구성 하는 행위

프로토타이핑의 정의는 프로토타입을 만드는 행위를 포함할 뿐 아니라 기존의 사물을

재구성함으로써 프로토타입을 얻는 방법을 포괄한다. 예를 들면 하워드와 힐(1997)의 논문에

6


인용된 애플(Apple)의 랩톱(Lap-Top) PC 프로젝트에서 빈 피자 상자를 재가공 없이

프로토타입으로 활용하고 있다.

반면에 인터랙티브 제품의 특성을 감안한 프로토타입의 정의도 널리 사용되고 있다.

임지동(2005)은 다음과 같이 정의하였다.

아직 실체화되지 않은 제품/시스템/서비스를 실제로 사용하는 것과 같이 경험할 수 있도록

하는 구체화된 결과물

좁은 의미의 프로토타입의 정의는 사용 경험 여부에 의해 넓은 의미의 프로토타입의 정의와

구분된다. 따라서 스케치나 도면, 실사 렌더링, 모형 등의 감각 정보의 전달을 기능으로 하는

매체들은 체로 좁은 의미의 프로토타입에 포함되지 않게 된다. 반면 단순한 모형이라

하더라도 예를 들어, 손에 쥐고 사용하는 제품의 모형은 손에 쥐는 감각 정보만으로도 사용

경험을 준다고도 볼 수 있다. 좁은 의미의 프로토타입 정의에 하여 다양한 디자인 분야와

HCI 분야의 연구가 진행되어 왔다.

2.1.2. 프로토타이핑의 기능에 따른 유형 분류

다수의 연구자들이 프로토타이핑의 기능이나 역할의 유형을 확인하고 이 들의

차원(Dimension)을 분석하고 분류하는 연구를 진행해 왔다.

임윤경 등(Lim et al., 2008)은 디자인 분야에서 일반적으로 받아들여지는 프로토타입의 역할을

평가와 테스트(Evaluation and Testing), 사용자 경험, 니즈, 가치의 이해(the Understanding of User

Experience, Needs, and Values), 아이디어 발상(Idea Generation), 디자이너간 커뮤니케이션

(Communication among Designers)의 4개 범주로 정리하였다. 아브라하미와 허드슨(Avrahami and

Hudson, 2002)은 아이디어 탐색(Idea Exploration), 문제의 발견(Finding Problems), 그리고

커뮤니케이션 (Communication)의 세 가지 역할로 구분 하였다.

하워드와 힐(Houde and Hill, 1997)은 다른 측면에서 개별 프로토타입의 성격을 측정할 수 있는

척도를 제공하였다. 프로토타입을 통해 표현되는 차원을 각각 역할(Role), 외형적 느낌(Look &

Feel), 그리고 구현도(Implementation)로 구분 지어 삼각형 모델 위에 위치시킬 수 있다는

제안을 하였다.

하트만 등(Hartmann et al., 2006)은 프로토타이핑 행위를 성찰적 수행(Reflective Practice; Schön,

1991)의 일환으로 바라보았다. 물리적 행동과 인지가 서로 연결 되어 있기 때문에(Klemmer et

7


al., 2006) 반복적인 프로토타이핑이 디자인 문제에 한 이해를 높일 수 있다고 하였다. 하트만

등은 이러한 측면이 강조된 프로토타이핑 행위를 성찰적 프로토타이핑이라고 하였다.

임윤경 등(Lim et al., 2008)은 프로토타입을 필터(Filter)와 발현(Manifestation)의 시각에서

해석하였다. 필터는 프로토타입을 통해 확인하고 걸러내고자 하는 디자인 아이디어의 측면을

말하며 외관(Appearance), 정보(Data), 기능 (Functionality), 상호 작용(Interactivity), 공간의 구조

(Spatial Structure)의 5 가지 차원이 있다. 발현은 아이디어를 어떻게 프로토타이핑으로 표현할

것인지의 측면을 말하며 매체(Material), 해상도(Resolution), 범위(Scope)의 3가지 차원이 있다.

그 밖에 아이디어 발상을 자극하는 역할의 프로토타입으로써 전통적인 프로토타입과 다른

기능을 수행하는 프로토타입의 유형이 있다. 예를 들면 경험 프로토타이핑 (Experience

Prototyping)은 디자이너가 평소에 쉽게 경험할 수 없는 사용자의 상황을 프로토타입을 통해

직접 경험 할 수 있도록 해준다(Buchenau and Suri, 2000). 한편 허친슨 등(Hutchinson et al., 2003)은

인터랙티브 프로토타입을 도구로써 활용한 프로브 (Probe; Gaver et al., 1999)기법을 제안하기도

하였다. 프로브는 사용자에게 제한된 정보만을 제공함으로써 동시에 의도된 모호함을 함께

전달하여 디자인의 영감을 얻는 기법이다. 또 사용자 참여 디자인(Participatory Design)에서

프로토타입을 도구로 활용하기도 하였다. (Muller, 2001, Brandt and Messeter, 2004, Svanaes and Seland, 2004).

앞서 살펴 본 것처럼 프로토타입은 디자인 분야나 HCI 분야에서 다양한 목적을 가지고

만들어지며 다양한 기능과 역할을 수행하고 있다. 관련 연구자들(Lim et al., 2008, Liu and

Khooshabeh, 2003)은 프로토타이핑에 앞서 만들고자 하는 프로토타입의 기능과 역할을

확인하고 이에 맞는 피델리티(Fidelity)나 완성도, 매체 등을 조심스럽게 선택해야 한다고

말한다.

2.2. 디자인 프로그래밍

프로그래밍 혹은 컴퓨터 프로그래밍(Computer Programming) 또는 코딩(Coding)은 하나 이상의

관련된 추상 알고리즘을 특정한 프로그래밍 언어를 이용해 구체적인 컴퓨터 프로그램으로

구현하는 기술을 말한다(Wikipedia, 2009a). 본 연구에서 다루고 있는 디자인 프로그래밍은

프로그래밍의 하위 개념으로 이해할 수 있다.

본 연구에서 연구자의 의도가 반영된 디자인 프로그래밍의 정의는 다음과 같다.

8


디자인 프로그래밍이란 디자인 분야에서 유용한 인터랙티브 제품·시스템·서비스의 자동화된

디지털 프로토타입의 구현에 활용되는 프로그래밍을 의미한다.

디자인 분야에서 유용한 프로토타입은 디자인 프로세스에서 유용한 역할을 하는

프로토타입이라고 할 수 있다. 즉, 디자인 아이디어의 평가와 테스트, 사용자

경험·니즈·가치의 이해, 아이디어 발상, 디자이너간 커뮤니케이션을 수행할 수 있는

프로그래밍이다. 또한 임윤경 등(Lim et al., 2008)이 말한 프로토타입의 필터 측면의 차원들 즉,

외관, 정보, 기능, 상호 작용, 공간의 구조를 필요에 따라 선택적으로 보여줄 수 있어야 하며

다양한 범위의 피델리티를 동시에 제공할 수 있어야 한다.

자동화된 프로토타입이란 프로그램 코드에 의해 스스로 연산하고 사용자에 반응하는

프로토타입을 의미한다. 이는 오즈의 마법사 기법(OZ Paradigm; Kelley, 1983) 처럼 스스로

연산하지 못하는 프로토타입이나 사용 시나리오 영상과 같은 반응하지 않는(Non-Interactive)

프로토타입은 범주에 포함되지 않는다.

또 디지털 프로토타입은 소프트웨어 프로토타입, 하드웨어 프로토타입, 그리고 소프트웨어와

하드웨어가 결합된 프로토타입을 모두 포함한다.

2.3. 관련 연구 고찰

HCI 학문의 여러 분야에서 디자이너의 프로토타이핑을 돕기 위한 많은 시도들이 이루어져

왔다. 뿐만 아니라 일반 사용자를 상으로 하는 프로그래밍(End-User Development)의 교육과

개발 환경(Platform)을 제공하려는 시도들도 본 연구와 직·간접적인 연관성을 가진다. 조사된

유사 연구는 세 가지 범주로 분류 및 정리 될 수 있다. 세 가지 범주는 다음과 같다. 1)

인터랙티브 제품의 기능을 스테이트차트(Statecharts; Harel, 1987)방식으로 모델링 하고

프로토타이핑 하는 방법에 관한 연구, 2) 디자인 분야에서 빈번히 사용되지만 디자이너가

다루기에 곤란한 기능 함수들을 모듈화하여 라이브러리(Library) 형태로 제공하는 연구, 3) 초보

프로그래머를 상으로 기존의 소프트웨어 엔지니어링중심 프로그래밍 훈련을 돕는 연구

등이다.

9


2.3.1. 스테이트차트 기반 프로그래밍 연구

스테이트차트(Harel, 1987)는 통합 모델링 언어(Unified Modeling Language; OMG, 2009)의 한

모델링 방식으로써 전산 과학(Computer Science) 분야에서 복잡하고 큰 반응 시스템(Reactive

System)의 흐름을 다이어그램으로 시각화 하기 위해 개발된 것이다. 스테이트차트는

스테이트(State; 시스템의 특정 상태)와 트랜지션(Transition; 스테이트 간의 변화)만으로

소프트웨어 또는 시스템을 모델링 한다.

[그림 2-1] 스테이트차트 다이어그램의 예(왼쪽)와 스테이트 차트 기반의 프로토타이핑(오른쪽)

(좌) 스테이트차트의 한 예제(Harel, 1987)와 (우) STCtools(Nam, 2005) 개발 환경

1) 스토리보드

디자인 분야에서 스테이트차트 아이디어를 활용한 초기의 프로토타입으로 스토리보드

(Storyboard; Houde and Hill, 1997) 기법을 들 수 있다. 스토리보드는 제품이나 시스템의 사용

시나리오를 기술하는 방법의 하나로써 사용자의 입력 조작에 따라 변하는 제품의 장면을 여러

장의 그림으로 표현한 것이다. 스토리보드 자체로는 사용하는 경험을 주지 못하므로 넓은

의미의 프로토타입에 해당한다. 인터랙티브 프로토타입은 아니지만 제품의 장면이 스테이트에

해당하며 사용자의 입력 조작이 트랜지션에 해당하므로 스테이트 차트 기반의 프로토타입으로

볼 수 있다.

2) DENIM, SILK

DENIM(Newman et al., 2003, Lin et al., 2000) 과 SILK(Landay, 1996, Landay and Myers, 1995)는

인터랙티브 제품, 시스템, 웹사이트 디자인 작업 초기 단계에서 활용 가능한 스케치 기반의

프로토타이핑 개발 환경이다. 스케치를 기반으로 하기 때문에 디자이너가 쉽고 빠르게 개발

가능하다. 협동 웹사이트 디자인 도구인 Designers’ Outpost(Klemmer et al., 2001)와 하나의

시스템으로 결합 되는 등 지속적인 개량을 통해 통합적인 프로젝트로 개량되고 있다. 하지만

10


프로토타입의 표현 범위가 소프트웨어 상의 시각 정보로 국한되어 있고 스케치를 기반으로 한

탓에 프로토타입의 정교함이 부족하다는 단점이 있다.

3)STCtools

STCtools(Nam, 2005)는 디자인 초기 단계에서 활용 가능한 스케치 기반의 프로토타이핑 개발

환경이다. DENIM, SILK 등과 구별되는 기능으로 탠저블 하드웨어 버튼(Button)과의 연결

기능과과 하드웨어 폼 모형 위에 디스플레이 스크린을 구현시켜주는 기능 등을 들 수 있다.

이를 통해 하드웨어 중심의 프로토타입의 구현이 가능하다.

4) D.Tools

D.Tools(Hartmann et al., 2006)는 스테이트차트 기반의 프로토타입 개발 환경이다. 먼저

디자이너가 하드웨어 센서나 액츄에이터(Actuator)등을 활용해 물리적인 탠저블 프로토타입을

구성한다. 완성된 탠저블 프로토타입의 전자 장치들을 PC 에 연결된 중계 장치(D.Tools

Hardware Interface)에 전자적으로 연결함으로써 D.Tools 시스템이 장치를 인식하도록 한 뒤,

인식된 전자 장치들을 기반으로 PC 에서 동일한 가상의 프로토타입을 구성한다. PC 상에서

완성된 가상의 프로토타입으로 스테이트차트 다이어그램을 그리면 탠저블 프로토타입이

연동되어 작동하는 방식으로 구현된다. D.Tools 는 다양한 하드웨어 센서나 액츄에이터와

연결이 가능하고 사용자 테스트 단계에서 녹화·분석 기능까지 갖춰진 포괄적인 시스템이다.

하지만 정교한 수준의 외형적 느낌(Look and Feel)의 구현이 어렵고, 다른 개발 시스템이 아닌

다른 시스템으로 이식하는 것이 어려워 커뮤니케이션에 불편함이 따른다.

[표 2-1] 스테이트차트 기반 프로그래밍 연구

개발 환경 스토리보드 DENIM/SILK STCtools D.Tools

인터랙티비티 없음 자동화된 프로토

타입 구현

자동화된 프로토

타입 구현

자동화된 프로토

타입 구현

매체 종이 소프트웨어 버튼과 디스플레

이 스크린이 활용

다양한 하드웨어

센서와 액츄에이

터의 연결이 가능

피델리티

스케치 기반의 반

응 없는 프로토타

입

스케치 기반의 자

동화 프로토타입

스케치 기반의 자

동화 프로토타입

정교한 프로토타

이핑을 위해 프로

그래밍이 요구됨

이 범주의 연구는 인터랙티브 제품 시스템의 전체 또는 일부의 사용흐름을 구현함으로써

제품의 기능이 구체적으로 어떻게 사용되는지를 보여주는데 유용하다. 하지만 입력 장치의

종류가 매우 제한되어 있어 버튼의 클릭(Click)과 같은 제한된 입력 방식만이 제공되는데

11


그치고 있으며, 다수의 아날로그(Analog) 센서를 동시에 활용하기 위해서는 추가적인

프로그래밍이 요구되고 있다. 또한 이런 연구들을 통해 제공되는 개발 환경을 일정 수준으로

사용하기 위해 디자이너에게 요구되는 초기 비용이 크다. 디자이너가 전문성을 가지며

정교하게 다룰 수 있는 기존의 2D 또는 3D CAD(Computer-Aided Design) 도구 자원을 활용하지

못한다는 단점이 있다. 이러한 단점들로 인해 높은 피델리티의 프로토타입 구현에 활용하기에

어려움이 있다.

2.3.2. 기능 함수 라이브러리 연구

HCI 분야의 많은 연구들이 프로토타이핑에서 빈번하게 사용되는 함수나 명령어, 하드웨어와

소프트웨어 시스템을 모듈화여 제공하는 시도를 해왔다. 이러한 분류의 연구들은 기존의 개발

환경과 잘 융합될 수 있도록 하기 위해 소프트웨어 엔지니어링 분야에서는 주로 함수

라이브러리의 형태로 개발되었고, 소프트웨어 분야에서는 흔히 플러그인(Plug-in) 소프트웨어

형식으로 개발되었다.

1) Phidgets

Phidgets(Greenberg and Fitchett, 2001)는 다양한 하드웨어 센서와 액츄에이터를 PC 와 직접

연결하고 이를 비주얼 베이직(Visual Basic)에서 활용할 수 있도록 개발된 하드웨어 및

소프트웨어 통합 시스템이다. 초기에 하드웨어를 잘 다루지 못하는 컴퓨터 공학자를 위해

개발 되었으나 현재는 HCI 분야와 제품·시스템 디자인 분야에서도 널리 활용되고 있으며

비주얼 씨++(Visual C++), 자바(JAVA) 등의 개발자용 언어에서 플래시(Adobe Flash),

디렉터(Adobe Director) 등 디자이너에게 친숙한 언어까지 다양한 확장성을 제공한다.

디자이너가 기술적 어려움을 느끼는 하드웨어 장치와 프로토타이핑 소프트웨어의 결합 기능을

제공하는데 의의가 있다.

2) Buck

Buck(Pering, 2002)은 하드웨어 인풋을 키보드 입력 신호로 바꿔주는 중간 중계 장치의 하나로

볼 수 있다. 키보드 입력과 정확히 동일한 신호를 감지 처리하면 되기 때문에 프로토타입

구성을 위한 별도의 소프트웨어 시스템이 필요 없다는 장점이 있는 반면 단순히 여러 개의

버튼 입력 신호 외의 다른 기능을 제공하지 못하는 단점이 있다.

12


3) Switcharoo, Calder Toolkit

Switcharoo(Avrahami and Hudson, 2002)와 Calder Toolkit(Lee et al., 2004)은 라디오 주파수(Radio

Frequency)를 활용한 무선 입력 기기들을 쉽게 PC 와 함께 사용할 수 있는 프로토타이핑

환경을 제공한다. 기존의 개발 환경이 기술적 어려움으로 인해 주로 유선 중계 장치(Wired

Interface)를 활용해 PC 와 물리적으로 연결된 인터랙티브 프로토타입을 구현해 왔으나

Switcharoo 와 Calder Toolkit 을 이용함으로써 디자이너가 직접 무선 통신 시스템을 구축할 때

겪는 기술적 어려움을 해결한 것에 의의가 있다.

4) DART

DART(The Designer’s AR Toolkit; MacIntyre et al., 2004)는 디자이너들이 직접 구현하기 힘든 증강

현실 기능을 디렉터 내에서 구현 할 수 있도록 해주는 플러그인 소프트웨어와 함수

명령어이다. 시나리오 프로토타이핑을 위한 애니매틱스(Animatics) 증강 현실 기능, 네트워킹

구현 기능의 기술적 어려움을 해결한 것에 의의가 있다.

5) MIDAS

MIDAS(임지동, 2005) 는 인터랙션 디자이너가 기존에 친숙한 개발 환경과 하드웨어 장치를

연결하는 기능 및 카메라 화상 분석 기능을 구현할 수 있게 해주는 소프트웨어와 함수 명령어

세트이다. 디렉터와 플래시의 플러그인으로 개발되었고 K8000(Velleman, 2009), K8055,

Phidgets(Greenberg and Fitchett, 2001)등의 중계 장치(Hardware Interface) 를 이용하여 하드웨어

센서로부터 직접 데이터 값을 받고 액츄에이터를 조작하는 기능을 시스템의 구축 없이 짧은

프로그래밍 코드로 구현 가능하다. 또한 USB(Universal Serial Bus) 카메라를 활용하여 동화상

정보를 가져오고 색깔, 움직임, 화상 변화를 분석, 감지하는 기능 등의 기술적 어려움을 해결한

것에 의의가 있다.

6) Examplar

Examplar(Hartmann et al., 2007)는 하드웨어 아날로그 센서를 PC 와 연결하도록 해주고 그

데이터의 패턴을 분석하는 기능을 제공한다. 디자이너가 센서 데이터의 패턴을 설정하면 이와

유사한 패턴이 발생될 때, OSC(Open Sound Control)나 XML(Extensible Markup Language) 식별

신호를 발생시키고 이를 프로토타이핑에서 수신하는 방식으로 작동된다. 디자이너가 구현하기

힘들었던 아날로그 센서의 연결과 데이터 패턴 분석기능을 제공하는데 의의가 있다.

13


프로토타이핑 분야에서 기능 함수 라이브러리에 관련된 연구는 하드웨어 장치와 소프트웨어

프로토타입의 전자적 연결 기능과 이들 간의 신호 처리·분석을 간결화 해주는 연구가 많았다.

관련 연구들은 디자이너가 비전문 프로그래머로써 가지는 기술적 한계를 뛰어 넘어 다양한

하드웨어 장치를 활용할 수 있도록 도와주며, 센서의 데이터 값을 분석하여 사용자가 보내는

신호를 해석할 수 있도록 도와준다.

초기 기술에서 최근 기술에 이르기까지 두 가지 방향성이 발견되었다. 첫 번째 방향성은 기능

함수 라이브러리 기술이 개발자에게 친근한 개발 환경에서 디자이너에게 친근한 개발 환경을

중심으로 연구가 이동하고 있다는 점이다. Phidgets(Greenberg and Fitchett, 2001)의 초기 사용자가

컴퓨터 공학자였음에도 불구하고 현재 플래시, 디렉터 등 디자이너용 개발 환경의

라이브러리를 제공하고 있는 것이 표적이다. 두 번째 방향성은 초기에 연구들이 하드웨어

장치와의 연결 기능에 중점을 둔 반면, 최근의 연구들은 하드웨어 장치로부터 오는 신호를

처리하고 의미 있는 신호로 해석해주는 기능에 주목하고 있다는 점이다. 하지만 아직 2 개

이상의 아날로그 신호를 연계해서 해석해주는 도구가 부족한 실정이다. 최근 인터랙티브 제품

또는 시스템에서 터치 스크린(Touch Screen)이나 제스쳐(Gesture) 입력 기능이 보편화되었음에도

불구하고 이를 디자이너가 프로토타이핑에서 다루는데 어려움을 겪고 있는 이유 중 하나이다.

2.3.3. 초보 프로그래머 훈련 연구

이 범주의 연구는 초보 프로그래머를 상으로 소프트웨어 공학 지식의 습득을 촉진시켜 주는

연구들이 해당된다. 초기 소프트웨어 공학 분야에서는 전공 수업에 활용하기 위한 목적으로,

HCI 분야에서는 어린이나 아티스트 같은 특정 집단의 필요성을 충족 시켜주기 위한 목적으로

연구가 진행되어 왔다.

1) 교육 심리 기법의 적용

메이어와 동료 연구자들(Mayer et al., 1986, Bayman and Mayer, 1983, Mayer, 1981, Mayer, 1979)은 수

년에 걸친 연구를 통해 초보자를 상으로 다양한 프로그래밍 교육 실험을 실시하였다.

초기의 연구가 교육 심리학적 기법을 프로그래밍 교육에 적용하였을 때의 효과를 알아보는

실험이었다면 후기 연구에서는 생각하는 기술(Thinking Skill)과 프로그래밍의 시너지

효과(Synergy)에 관한 연구가 수행 되었다.

14


2) Alice

Alice(Conway et al., 2000)는 일반 사용자가 3 차원 그래픽 훈련 없이 3 차원 인터랙티브

컨텐츠를 제작할 수 있도록 고안된 개발 환경 시스템이다. 콘웨이 등은 Alice 를 위한 고유

프로그래밍 언어를 고안하였는데, 이 언어의 개발 과정에서 명령어의 선택이나, 매개 변수의

범위를 설정하는 등의 세부 사항에서 사용자 중심적 성찰이 잘 반영되어 있다.

3) Scratch

Scratch(Maloney et al., 2004)는 8세 이상의 어린이를 상으로 게임이나 스토리텔링 프로그램을

개발하는 놀이를 통해 프로그래밍 사고를 키우도록 개발 되었다. 스크래치의 프로그래밍

방식은 문자 기반의 코딩에서 탈피하여 퍼즐 조각을 맞추듯 단어를 조합하여 구문을 완성한다.

이 방식은 문법 오류를 사전에 방지하고 초보자에게 프로그래밍의 구조적 개념을 키워줄 수

있으면서 동시에 문자 기반의 코딩과 거의 유사한 결과물을 얻을 수 있다는 장점을 가진다.

4) Processing

Processing(Reas and Fry, 2005, Reas and Fry, 2004, Reas and Fry, 2003)은 아티스트나 디자이너가 전자

예술(Electric Art) 작품이나 그래픽 표현을 용이 하게 하도록 개발된 프로그래밍 언어이다. 자바

등의 개발자용 언어가 가지는 어려움을 해소하기 위해 문법적 부분이 상당히 간소화 되었으나

여전히 일반적인 프로그래밍의 형식과 절차를 요구한다.

초보 프로그래머 훈련과 관련된 연구들은 교육 심리학적인 기법의 유용성을 알아보는

연구에서 시작하여(Mayer, 1981) 생각하는 방식의 전환을 도와주는 연구(Mayer et al., 1986)로

변모해왔다. 하지만 아직 단시간에 극적인 프로그래밍 능력의 향상은 보고 되고 있지 않다. 또

자바(JAVA)나 비주얼 씨(Visual C) 등의 개발자용 언어가 비전문 프로그래머들에게 어렵게

느껴지는 요인 중 하나인 객체 지향적 프로그래밍(Object-Oriented Programming), 클래스와

인스턴스(Class-Instance)의 추상적 개념이나 복잡한 변수형(Variable Type)과 접근 권한 등의

이해를 요구한다는 점에서 착안하여 몇몇 연구들은 이러한 추상적 개념의 사용을 최소화 하고

단순하고 절차적인 명령어만으로 프로그래밍의 문제를 해결할 수 있도록 개발 환경을

제공하는 노력이 이루어졌다(Conway et al., 2000, Maloney et al., 2004, Reas and Fry, 2005).

디자이너에게 친숙한 개발 언어인 플래시의 액션스크립트 2.0(Actionscript 2.0)이나 디렉터의

링고 스크립트(Lingo Script) 등은 이러한 문법적 유연성을 허용하고 있다.

15


2.3.4. 관련 연구 종합 분석

디자인 분야나 HCI의 많은 분야에서 프로토타이핑을 돕는 도구가 개발되었다. 본 논문에서는

크게 3 가지 범주 즉, 1) 스테이트차트 기반 프로그래밍 연구, 2) 기능 함수 라이브러리 연구, 3)

초보 프로그래머 훈련 연구로 분류하여 분석되었다.

스테이트차트 기반의 프로그래밍 연구는 체로 하드웨어와의 통합성을 제공하고 개발 환경이

제공할 수 있는 프로토타입의 피델리티를 증진시키는 방향으로 진행 된 것으로 조사되었다.

하지만 높은 수준의 피델리티를 구현하기 위해서 추가적인 프로그래밍이 요구 되고 있다.

기능 함수 라이브러리 연구들은 개발자 중심의 개발 환경에서 점점 디자이너에게 친숙한 개발

환경을 중심으로 이동하고 있음을 알 수 있었고, 단순한 하드웨어와의 연결 기능 제공에서

하드웨어 신호를 분석하고 식별하는 기능을 제공하는 방향의 연구의 흐름이 발견되었다.

하지만 아직은 상용 제품의 기술을 프로토타이핑에 충분히 적용시킬 수 있는 기능 함수

라이브러리가 제공되지 못하고 있다.

초보 프로그래머 훈련 연구는 초기 소프트웨어 공학 분야에서 학생을 상으로 하는

프로그래밍 훈련을 많이 다루었던 반면 아직까지 단기간 안에 극적인 프로그래밍 능력의

향상이 보고 되지 않고 있다. 한편으로 예술가나 디자이너, 어린이 등을 상으로 하는 쉬운

프로그래밍 언어를 제공하는 연구들이 주목을 끌고 있다.

한편 서로 다른 분류 간의 연구 결과물은 서로 함께 사용될 때 상승 작용을 일으킨다. 예를

들면 D.Tools(스테이트차트 기반 프로그래밍 연구)와 Examplar(기능 함수 라이브러리)가 함께

사용되었을 효과적인 프로토타이핑의 개발이 가능하였다. 이는 디자인 프로그래밍 툴킷 또한

상호 보완적인 도구의 조합이 될 수 있음을 시사한다.

2.4. 디자인 프로그래밍과 소프트웨어 프로그래밍의 비교 연구

디자인 프로그래밍은 소프트웨어 공학 분야의 프로그래밍의 하위 개념임에도 불구하고 그

구현 범위와 지향점, 개발 과정에서 중 한 차이점을 가진다. 본 절에서는 소프트웨어 공학

분야의 전문가와 디자인 분야의 전문가가 수행한 소프트웨어 프로토타이핑의 프로그래밍

과정의 관찰이 이루어졌다. 그리고 관찰 결과를 비교·분석함으로써 디자인 프로그래밍의

범위가 설정되었다.

16


2.4.1. 작업 관찰 목적

디자이너가 프로토타입 제작을 위해 수행하는 프로그래밍 작업과 소프트웨어 공학 전공자의

프로그래밍 작업을 서로 비교 해봄으로써 디자인 프로그래밍 툴킷의 개발 범위에 한 단서를

얻기 위해 실시 되었다.

2.4.2. 작업 관찰 방법

디자인 전공 학원생과 소프트웨어 공학 전공 학원생을 상으로 소프트웨어 프로토타입

구현을 위한 프로그래밍 과제가 주어졌다. 참가자는 소방·구조용 화상 이미지 카메라(Thermal

Imaging Camera for Fire and Rescue Service)의 기능 기술서(Function Specification; [그림 2-3])를

기반으로 소프트웨어 중심의 프로토타이핑을 만들도록 요구 받았다. 과제 후 프로그래밍

과정에 해 인터뷰 하고, 소프트웨어 엔지니어링 분야의 일반적인 프로그래밍이 디자인

프로그래밍과 어떤 차이점을 띄는지 토의하였다.

2.4.3. 작업 관찰 결과

참가자들이 기능 기술서를 바탕으로 프로토타이핑 한 결과물은 [그림 2-2]과 같다. 두 분야의

참가자들이 보이는 프로그래밍 과정의 차이점을 중심으로 약 30 분씩의 인터뷰가 이루어졌다.

마찬가지로 디자인 프로그래밍과 소프트웨어 엔지니어링의 프로그래밍에 한 차이점에 해

한 시간 가량 토의가 진행되었다.

[그림 2-2] 작업 관찰 결과물

(좌) 디자이너에 의한 결과물과 (우) 소프트웨어 공학자에 의한 결과물

17


[그림 2-3] 소방·구조용 화상 이미지 카메라의 기능 기술서

본 기능 기술서가 묘사하는 화상 이미지 카메라는 실험 참가자가 아닌 디자인 전공 대학원생이

기존의 제품들을 분석한 뒤 1시간에 걸쳐 다시 디자인된 것이다.

2.4.4. 작업 관찰 결과 분석

관찰을 통해 발견된 디자인 프로그래밍과 소프트웨어 공학 분야 프로그래밍의 차이점은 크게

두 가지로 정리될 수 있다. 디자인 프로그래밍이 제품의 사용 경험 전달에 충실하며

프로그래밍 코드가 점진적으로 구현되는 반면 소프트웨어 공학 분야의 프로그래밍은 기능의

수행에 충실하고 프로그래밍의 설계를 중요시 한다.

첫째, 디자인 프로그래밍은 사용 경험 전달에 충실하다.

소프트웨어 공학자는 디자인 기술서에 드러난 기능의 수행에 충실한 프로토타이핑을

완성하였던 반면에 디자이너는 디자인 기술서에 드러난 정보를 바탕으로 해석하여 기능이나

사용 상황에 한 단서를 포함하는 프로토타이핑을 완성하였다. 디자이너에 의해 완성된 화상

이미지 카메라는 제품이 활용되는 환경인 건물 내 화재 상황에 한 묘사가 포함 되었다. 이는

18


19

프로토타입과 사용자의 인터랙션이 단순한 제품 기능의 전달 뿐 사용 경험과 사용 상황을

동시에 전달하는 매체로 인식되고 있음을 시사한다.

둘째, 디자인 프로그래밍은 점진적으로 완성된다.

소프트웨어 공학자는 본격적인 프로그래밍에 앞서 기능 기술서를 철저히 분석하고

프로그래밍의 구조 설계를 마친 뒤 프로그래밍을 시작하였다. 반면에 디자이너는 제품을 세부

기능 별로 설계-구현-테스트함으로써 전체 프로토타입을 완성하였다. 이러한 차이점은 각

분야가 다루는 프로그래밍 코드의 규모와 유지 보수에서 기인한 것으로 보여진다. 소프트웨어

공학 분야에서 다루는 프로그래밍 코드의 규모가 일반적으로 크고 지속적인 유지 보수가

요구되기 때문에 코드의 초기 설계가 중요한 반면, 디자인 분야에서 활용되는 프로그래밍은

상 적으로 규모가 작고 코드의 유지 보수가 드물게 요구되어 프로그래밍의 단계적인 완성이

가능하다고 보여지며 경우에 따라 더 효율적이기까지 하다. 디자이너는 점진적인 기능 완성

과정에서 지속적인 성찰을 통해 제품 아이디어의 지속적인 수정을 가한다. 동시에 각

단계에서 발생하는 중간 결과물 들은 폐기 되지 않고 디자인 안으로써의 가치를 지닌다.

3 디자인 프로그래밍 툴킷의

개발 및 활용 3.1. 디자인 프로그래밍 툴킷의 요구사항 도출

3.2. 디자인 프로그래밍 툴킷의 개발 방향

3.3. 디자인 프로그래밍 툴킷

3.4. 디자인 프로그래밍 툴킷의 활용

3. 디자인 프로그래밍 툴킷의 개발 및 활용


3.1. 디자인 프로그래밍 툴킷의 요구사항 도출

1) 디자이너가 피델리티의 수준을 선택할 수 있어야 함

프로토타이핑이 수행하는 역할과 기능에 따라 프로토타입의 피델리티의 선택이 중요하고,

체로 프로토타입의 피델리티에 비례하여 개발에 소모되는 자원과 개발 기간이 증가한다는

점을 감안할 때, 디자인 프로그래밍 툴킷은 프로토타입의 수행자가 피델리티의 수준을 폭

넓게 선택·개발할 수 있도록 도와 주어야 한다.

2) 하드웨어와 소프트웨어가 결합된 프로토타입을 지원해야 함

디자인 프로그래밍 툴킷은 디자이너가 프로토타이핑을 통해 디자인 아이디어의 특정 차원을

필터링하고 디자인 공간을 횡단할 수 있도록 해야 한다. 필터의 차원으로 외관, 정보, 기능,

상호 작용, 공간 구조의 5 가지 차원이 존재한다(Lim et al., 2008). 외관, 상호 작용, 공간 등의

차원을 소프트웨어만으로 구현하는 것에 명확한 한계가 있으며, 따라서 디자인 프로그래밍

툴킷은 하드웨어 장치와의 결합을 지원해야 한다.

3) 기존의 디자인 사고 및 도구를 확장하는 프로토타이핑을 제공해야 함

디자이너들이 기존에 가지고 있는 디자인 개념, 사고, 절차적 지식 등이 프로그래밍에

반영되어야 한다. 디자이너가 프로그래밍 분야에서 비전문가임을 감안할 때, 기존의 디자인

사고를 확장하는 프로그래밍 방식을 통해 디자이너가 프로그래밍 툴킷을 쉽고 빠르게 배워

활용할 수 있을 것으로 예상된다. 동시에 2D 및 3D CAD 도구를 프로토타이핑에 직접적으로

활용할 수 있도록 해야 한다. 이러한 디지털 도구들은 디자이너가 기존에 능숙하게 다루고

있는 도구들로써 이를 직접적으로 프로토타이핑에 활용함으로써 능률적이고 정교한

프로토타이핑이 가능하기 때문이다.

21


4) 프로그래밍의 완성이 점진적으로 이루어져야 함

분야간 프로그래밍 작업의 비교 관찰을 통해 디자이너의 프로그래밍 진행 과정이 점진적인

특성이 발견되었다. 점진적으로 프로그래밍을 완성하는 방식은 개발 효율성이나 사후 유지

보수 측면에서 단점을 가지지만 프로그래밍 과정에서 단계적인 성찰과 다양한 디자인 안을

얻을 수 있는 긍정적인 측면을 가지고 있기도 하다.

3.2. 디자인 프로그래밍 툴킷의 개발 방향

1) 객체 지향적 스테이트트랜지션차트에 기반을 둠

객체 지향적 스테이트트랜지션차트(Object-Oriented State Transition Chart) 는 기존 스테이트차트에

기반을 둔 프로토타이핑 방식으로써 스테이트차트의 장점에 객체의 개념을 더하여 보다

체계적인 프로그래밍을 위해 도입되었다.

스테이트차트 기반의 프로그래밍은 디자인 작업과 깊은 연관성을 가지며 동시에 초보

프로그래머가 구현하기에 적합하다. 스테이트차트의 구성 요소는 디자인 행위와 많은 부분을

공유한다. 스케치는 스테이트에, 메뉴나 버튼을 누르는 것과 같은 조작 신호에 한 반응은

트랜지션에, 사용 시나리오는 일련의 스테이트간 트랜지션 흐름에 응된다. 한편,

스테이트차트 기반의 프로그래밍은 논리적 구조가 단순하여 프로그래밍, 오류 원인 분석 및

수정이 상 적으로 쉽다. 또 스테이트차트를 그려봄으로써 초보 프로그래머라도 제품의

기능과 사용 흐름을 명확히 이해할 수 있고, 완성된 스테이트차트는 그 자체로 프로그래밍의

청사진 역할을 한다. 하지만 기존의 스테이트차트 방식의 프로그래밍은 코드의 중복이 많고

스테이트가 쉽게 비 해지는 등의 단점이 있다.

이러한 단점의 극복을 위해 본 연구에서는 객체 지향적 스테이트트랜지션차트 기법을

활용한다. 객체(Object)는 프로그래밍에서 추상적으로 사용하는 상으로써 메모리상의 특정된

저장 공간으로 표현 된다(Wikipedia, 2009b). 디자인 프로그래밍에서는 객체를 인터페이스의

요소의 단위로 사용 한다. 예를 들어 조작 버튼이나 디스플레이 스크린을 개별적인 객체로

구성하고 각 객체 별로 독립된 스테이트를 가짐으로써 기존의 스테이트차트와 비교하여 많은

장점을 가진다. [그림 3-1]는 디스플레이 스크린과 빛이 점멸하는 2 개의 LED(Light Emitting

Diode)를 가진 가상의 제품을 두 가지 방법으로 기술한 것이다. 그림에서 나타나듯이 객체

22


지향적 STC 기법이 기존의 스테이트차트 방식과 비교하여 스테이트의 수가 적고 코드의 유지

관리가 용이하다.

전통적인스테이트트랜지션차트

객체 지향적스테이트트랜지션차트

S11 S12 S13 S14

S21 S22 S23 S24

S31 S32 S33 S34

S1 S2 S3 S4

[그림 3-1] 전통적인 스테이트트랜지션차트와 객체 지향적 스테이트트랜지션차트 기법의 개념

2) 프로그래밍을 단계적으로 완성 하도록 함

디자인 프로그래밍 툴킷은 단계적인 프로그래밍을 통해 스테이트차트의 구성 요소를

확장시키고 피델리티를 증가시키는 방식으로 구성되었다. 즉, 첫 번째 단계에서는 낮은 수준의

피델리티를 가지는 프로토타입이 결과물로 얻어지고 매 단계를 반복할수록 피델리티가

단계적으로 증가하는 방식이다. 이러한 개발 방식을 통해 디자이너가 프로토타입의

피델리티를 능동적으로 선택할 수 있고, 프로그래밍에 투입되는 자원과 노력을 효과적으로

관리 할 수 있도록 해준다. 동시에 프로그래밍 과정에서 다수의 프로토타입 결과물을 얻을 수

있으며 디자인에 한 성찰을 얻을 수 있도록 해준다.

한편, 기존의 스테이트차트 기반의 프로토타이핑 연구에서 가지는 단점은 높은 피델리티의

프로토타입을 개발하기 위해서는 결국 높은 수준의 추가적인 프로그래밍이 요구된다는 점이다.

스테이트차트의 구성요소는 스테이트와 트랜지션이다. 일반적으로 정적인 스테이트를

역동적으로 만들기 위해서, 단순한 트랜지션을 다양한 방식으로 일어나게 하기 위해서는

추가적인 프로그래밍 또는 그에 응하는 기능 함수 라이브러리가 필요하다. 디자인

프로그래밍 툴킷은 스테이트차트의 구성요소를 단계적으로 확장시킴으로써 단점을

보완하게끔 개발 되었다.

23


3) 디자이너가 기존에 친숙한 개발 환경을 활용함

디자인 프로그래밍 툴킷은 디자이너가 기존에 사용하고 있는 개발 환경을 활용하도록 구성

되었다. 디자이너가 많이 활용하는 표적인 개발 환경으로 플래시를 들 수 있다. 기존의 개발

환경을 활용함으로써 얻는 장점은 크게 세가지를 들 수 있다.

디자이너가 기존에 사용하고 있는 개발 환경을 활용함으로써 기존 디자인 작업의 연속선

상에서 프로그래밍을 수행하도록 하며 개발 환경에 한 진입 장벽이 거의 없다는 점이 큰

장점이다.

두 번째 장점으로는 다른 CAD 도구의 데이터를 2 차 가공하여 프로토타이핑에 활용할 수

있다는 점이다. 디자이너가 다루는 디지털 도구는 디자이너가 처음부터 배울 필요 없이 높은

수준의 결과물을 바로 활용 가능하다.

또 다른 장점은 기존의 개발 환경을 활용함으로써 하드웨어와의 연결성을 확보할 수 있다는

장점이 있다. 본 논문의 2 장에서 조사된 기능 함수 라이브러리 연구들 중 상당수의 연구가

기존의 개발환경과 하드웨어 장치의 연결 기능을 제공하고 있다. 관련 연구들을 적극적으로

활용함으로써 중복 연구 없이 훌륭한 하드웨어 연결성을 확보할 수 있다.

그 밖의 장점으로는 D.Tools(Hartmann et al., 2006)와 같은 고유 개발 환경과 비교하여

네트워크를 통해 쉽게 정보를 얻거나 다른 사람의 프로그래밍 코드를 참고할 수 있다는 점,

네트워크를 통해 개발된 프로토타입을 게시하고 공유하기 쉽다는 점, 일반적인 다른 PC

환경에서도 원활히 실행될 수 있음을 담보하고 있다는 점 등을 들 수 있다.

24


3.3. 디자인 프로그래밍 툴킷

본 연구에서 제안하는 디자인 프로그래밍 툴킷은 객체 지향적 스테이트트랜지션차트를

프로그래밍에 활용하는 사고방법과 인터랙션의 구체화를 단계적으로 도와주는 도구들의

조합이다. [그림 3-2]은 디자인 프로그래밍 툴킷의 구성 요소들을 보여주고 각 요소가 적용됨에

따라 단계적으로 발전하는 디자인프로그래밍을 보여준다.

[그림 3-2] 디자인 프로그래밍 툴킷과 디자인 프로그래밍의 3단계

첫 번째 구성 요소인 객체 지향적 스테이트트랜지션차트 기법이란 인터랙티브 제품을

스테이트차트로 해석하고, 완성된 차트를 기반으로 프로그래밍함으로써 프로토타입을

구현하는 기법이다. 이 기법을 적용함으로써 1 차 프로그래밍이 완성될 수 있다. 1 차 디자인

25


프로그래밍은 정적인 스테이트와 기본 트랜지션 이벤트만으로 구성된 낮은 피델리티의

프로토타입이다.

두 번째 구성 요소는 이벤트 코드 생성기(Event Code Generator)로써 디자이너가 필요로 하는

고급 트랜지션 이벤트의 프로그래밍 코드를 자동으로 생성해주는 프로그램이다. 이벤트 코드

생성기를 통해 만들어진 이벤트 코드를 1 차 디자인 프로그래밍에 포함시킴으로써 기존

프로토타입의 피델리티를 증가 시킨다. 2 차 디자인 프로그래밍은 정적인 스테이트와 고급

트랜지션 이벤트로 구성되는 중간 피델리티의 프로토타입이다.

디자인 프로그래밍 툴킷의 세 번째 구성 요소는 동적 스테이트 코드 생성기(Dynamic State Code

Generator)로써 스테이트의 시각 요소를 동적으로 증강시켜주는 프로그래밍 코드를 자동으로

생성해주는 프로그램이다. 동적 스테이트 코드 생성기를 통해 만들어진 동적 스테이트 코드를

2 차 디자인 프로그래밍에 포함시킴으로써 기존 프로토타입의 피델리티를 증가 시킨다. 3 차

디자인 프로그래밍은 동적인 스테이트와 고급 트랜지션 이벤트로 구성되는 높은 피델리티의

프로토타입이다.

현재 디자인 프로그래밍 툴킷은 플래시 액션스크립트 2.0 을 기반으로 하여 프로토타이핑

환경을 제공하고 있으며 추가적인 연구를 통해 다른 개발환경으로 확장되고 있다.

3.3.1. 객체 지향적 스테이트트랜지션차트

디자인 프로그래밍 툴킷의 첫 구성 요소인 객체 지향적 스테이트트랜지션차트 기법은

인터랙티브 제품을 인터페이스의 요소로 분해하고 객체 구성도를 그리고, 이를 바탕으로 객체

지향적 스테이트트랜지션차트를 작성하고, 작성된 차트를 기반을 프로그래밍 하는 방법을

의미한다. 이 기법은 남택진(2004)의 STC기법에 기반을 두고 있다.

1) 객체 구성도 그리기

먼저 디자이너가 가지고 있는 인터랙티브 제품의 디자인 아이디어를 인터페이스의 요소로

분해하고 그 구성도를 그려야 한다. 제품의 스케치를 완성한 뒤, 스케치에서 드러난

인터페이스 요소들의 이름을 짓는다. 인터페이스 요소는 버튼이나 조그 다이얼, 휠 인터페이스

등과 같은 입력 장치와 디스플레이 스크린, LED(Light Emitting Diode)와 같은 출력 장치를

의미한다. 여기서 명명된 인터페이스 요소의 이름은 프로그래밍에서 객체의 이름으로 사용될

것이므로 액션스크립트의 변수 명명 규칙을 따르도록 한다. [그림 3-3]은 디지털 카메라

디자인의 객체 구조도를 보여준다.

26


[그림 3-3] 제품 아이디어의 외형(상)과 객체 구성도(하)

2) 객체 지향적 스테이트트랜지션차트 그리기

다음 단계에서는 인터페이스 요소 중 출력 장치의 감각 정보의 변화를 기준으로 객체의

스테이트를 구분 짓고 이들 사이의 트랜지션 이벤트(Transition-Event)를 정의한다. 트랜지션

이벤트는 4개의 구성 요소 1) 입력 장치, 2) 조작, 3) 출발 스테이트, 4) 도착 스테이트를 가진다.

예를 들어, 전원 버튼을 눌려 LED에 불을 켜는 트랜지션이벤트의 경우, 전원버튼이 입력장치,

누름이 조작, LED의 OFF 스테이트가 출발 스테이트, LED의 ON 스테이트가 도착 스테이트가

된다.

[그림 3-4] 제품의 객체 지향적 스테이트트랜지션차트

27


3) 객체 지향적 스테이트트랜지션차트 기반의 프로그래밍

[그림 3-5] 플래시 개발 환경(좌)과 인터페이스 구성(우)

먼저 차트에서 정의된 객체를 프로그래밍 환경에서 새로운 심볼(Symbol)로 생성하고 정의한다.

생성된 심볼에 시각 요소를 배치한다. 개발 환경의 그리기 도구를 활용하거나 다른 CAD

도구를 통해 만들어진 이미지를 포함 시킬 수 있다. 다음으로 심볼에 프레임(Frame)을

추가함으로써 객체가 가지는 스테이트를 정의 한다. 각 프레임 별로 서로 다른 시각 요소를

배치하거나 변경함으로써 스테이트를 구분 짓는다. 마지막으로 각 스테이트를 출발

스테이트로 가지는 트랜지션이벤트를 스테이트내에 프로그래밍 한다. 여기에서 사용되는

프로그래밍 형식은 [표 3-1]과 같다.

[표 3-1] 트랜지션이벤트의 프로그래밍 형식

[입력 요소].[이벤트 명] = function() {

[출력 요소].gotoAndStop("[스테이트]");

}

이는 “[입력 요소]에서 [이벤트 명]이 발생할 경우, [출력 요소]의 [스테이트]로 트랜지션하라”

는 의미이다. 플래시 개발 환경은 제한된 수의 기본 이벤트를 제공한다. [표 3-2]는 플래시가

제공하는 기본 이벤트들 중 디자인 프로그래밍에 활용될 수 있는 이벤트를 나열한 것이다.

28


[표 3-2] 플래시에서 제공하는 기본 이벤트

이벤트 명 이벤트의 발생 조작

onData 입력 요소가 데이터를 받았을 때

onDragOut 입력 요소가 클릭된 채로 드래그하여 커서가 밖으로 나갔을 때

onDragOver 드래그하여 나갔던 커서가 드래그가 유지된 채로 입력 요소위로 돌아왔을 때

onEnterFrame 플래시파일의 프레임 주기로 자동적으로 발생

onKeyDown 입력 포커스를 가진 상태로 키를 눌렀을 경우

onKeyUp 눌러진 키를 놓을 경우

onMouseDown 마우스 버튼을 누를 경우

onMouseMove 마우스 커서가 움직였을 때

onMouseUp 마우스 버튼을 눌렀다가 놓았을 때

onPress 마우스 포인터를 입력 요소에 놓은 채로 마우스 버튼을 눌렀을 때

onRelease onPress이후 포인터가 입력 요소 위에 있는 상태에서 마우스 버튼을 놓았을 때

onReleaseOutside onPress이후 포인터가 입력 요소 밖에 있는 상태에서 마우스 버튼을 놓았을 때,

onRollOut 사용자가 마우스 포인터를 입력 요소의 영역 밖으로 움직일 때

onRollOver 사용자가 마우스 포인터를 입력 요소의 영역 위로 올렸을 때

객체의 스테이트와 트랜지션 이벤트의 정의가 끝나면 마지막으로 완성된 심볼을 작업 창에

배치하고 객체를 명명함으로써 프로그래밍이 완성된다.

프로그래밍 작업 작업을 수행하기 위해서 제품 아이디어에서 출발하여 스테이트트랜지션차트,

개발 환경의 인터페이스로 연결되는 개념의 이해가 요구된다. [표 3-3]는 이들 개념간의

연속성을 보여준다.

[표 3-3] 프로그래밍에서 요구되는 지식의 연결성

디자인 아이디어 측면 객체 지향적 STC 측면 프로그래밍 환경 측면

인터페이스 요소 객체 심볼과 무비 클립

출력 정보 스테이트 프레임

출력 정보의 변화 트랜지션 gotoAndStop 구문

사용자의 조작 트랜지션이벤트 이벤트

인터페이스 요소의 위치 객체의 위치 무비 클립의 위치

인터페이스 요소의 종속 관계 객체의 계층 구조 무비 클립의 계층 구조

29


3.3.2. 이벤트 코드 생성기

1) 구현 원리

디자인 프로그래밍 툴킷의 두 번째 요소인 이벤트 코드 생성기는 2 차원 아날로그 데이터를

분석하고 일정한 조건을 만족시켰을 때, 이벤트를 발생시키는 프로그래밍 코드를 생성한다.

[그림 3-6] 이벤트 코드 생성기의 구현 원리

2차원의 데이터가 만들어내는 공간상의 궤적(좌)과 궤적을 추적하기 위한 트랙(우)

이벤트 코드 생성기는 먼저 2차원 아날로그 데이터를 시각화하여 하나의 점으로 표현하고 그

점의 궤적을 일련의 게이트(Gate)로 분석한다. 예를 들어, 데이터의 궤적(e.g. 터치 스크린에서

드래그 행위)을 분석하여 [그림 3-6]의 좌측과 유사한 궤적만을 이벤트로 발생시키고자 한다면

우측과 같이 설정된 6 개의 게이트를 설정하고 데이터의 궤적이 이를 차례로 통과하는지

여부를 검사하는 것으로 가능하다. 이벤트 코드 생성기를 통해 생성된 코드는 이를 수행

하도록 설계되었다.

2) 인터페이스 구성

이벤트 코드 생성기는 [그림 3-7]과 같은 인터페이스로 구성되어 있어 디자이너가 원하는 로

자유롭게 게이트를 구성하고 배치할 수 있도록 디자인되었다.

• 이벤트 조정 윈도우: 디자이너가 자유롭게 게이트를 배치시킬 수 있는 주 작업 공간이다.

• 게이트: 빈 공간에 드래그앤드롭 함으로써 생성하고 기존의 게이트의 위치를 조정할 수

있다.

• 좌표계 선택 윈도우: 크게 상 좌표계와 절 좌표계 중 하나를 선택할 수 있다.

상 좌표계는 처음 데이터가 시작한 점을 기준점으로 삼아 이벤트를 검사하는 반면

30


절 좌표계는 데이터의 시작점과 관계 없이 정해진 위치를 2 차원 데이터가 순차적으로

통과해야만 이벤트가 발생한다.

• 이벤트명: 이벤트 이름 없이 이벤트를 생성할 수 없다. 여기서 명명된 이벤트 이름이

액션스크립트에서 직접 사용된다.

• 데모 버튼: 데모 모드로 들어가 디자이너가 저작한 이벤트 코드를 마우스로 신 테스트

해볼 수 있다.

• 생성 버튼: 디자이너가 배치한 게이트와 명명된 이벤트 이름을 바탕으로 이벤트 코드를

생성한다. 여기서 생성된 코드는 플래시에서 직접 수정 없이 활용 가능한 액션스크립트 2.0

코드이다.

[그림 3-7] 이벤트 코드 생성기의 인터페이스(좌)와 그 명칭(우)

3) 코드 생성

게이트의 구성·배치가 완성된 이벤트는 그 이름을 명명하고 생성 버튼을 누름으로써 이벤트

코드로 생성된다. 여기서 생성된 이벤트 코드를 심볼의 첫 번째 프레임에 붙여 넣음으로써

해당 심볼은 확장된 이벤트를 가지게 된다. 사용자가 새롭게 정의한 이벤트를 사용하는

방법은 [표 3-1]에서 기본적인 이벤트에 적용되었던 문법과 동일한 방법이다. 또한 확장된

이벤트를 2 개 이상 가지는 심볼의 경우, 이벤트 코드의 마지막 4 줄을 제외한 나머지 코드는

중복이므로 마지막 4 줄만을 추가로 복사해 넣음으로써 2 개 이상의 이벤트를 가질 수 있게

된다.

31


4) 데이터의 시각화

이벤트 코드 생성기를 통해 생성되는 이벤트 코드는 기본적으로 마우스의 조작에 연동되도록

설계되었다. 이를 사용자가 원하는 데이터와 연동시키기 위해서는 프로그래밍 코드를 통한

조작이 요구된다. [표 3-4]에 제시된 명령어들은 이벤트 코드에 적용됨으로써 디자이너가

원하는 형태로 가공된 데이터를 다룰 수 있도록 한다.

[표 3-4] 데이터의 시각화를 위한 이벤트 코드 명령어

코드 데이터 형 기능

tracker.followMouse True / False 데이터와 마우스 좌표간의 연동 여부 설정

tracker._visible True / False 데이터의 좌표 점 표시 여부 설정

tracker._x Number 데이터의 x 좌표

tracker._y Number 데이터의 y 좌표

tracker.startCapture() Void 모션 인식 시작 명령 함수

tracker.stopCapture() Void 모션 인식 중지 명령 함수

3.3.3. 동적 스테이트 코드 생성기

1) 구현 원리

동적 스테이트 코드 생성기는 시간의 흐름에 따른 시각 속성(Visual Attributes)의 변화를

그래프로 조작하고 이를 프로그래밍 코드로 생성할 수 있게 만들어진 소프트웨어 도구이다.

동적 스테이트 코드 생성기가 다룰 수 있는 시각 속성은 움직임(Movement), 불투명도(Opacity),

각도(Angle), 크기(Scale)의 4가지 이다.

동적 스테이트 코드 생성기는 시각 속성의 값을 세로 축으로 시간의 흐름을 가로축으로 하여

그래프를 조작함으로써 디자이너가 동적 스테이트 코드를 저작하도록 한다. [표 3-5]는 시각

속성 중 움직임을 조작하여 만들 수 있는 그래프와 그 그래프를 통해 만들어지는 동적

스테이트 코드의 움직임을 설명하고 그 인상을 기술한 것이다.

32


[표 3-5] 움직임 패널의 그래프 형태에 따른 실제 객체의 움직임과 그 인상

패널 위의 움직임 그래프 움직임 / 감성적 인상

일정한 속도로 움직인다.

기계적인 인상을 준다.

튕겨 나가듯 출발하여 점점 느려지며 멈춰 선다.

안정적인 인상을 준다.

처음엔 느리다가 점점 빨라져 충돌하듯 멈춰 선다.

묵직하게 부딪히는 인상을 준다.

느리다가 빨라졌다가 다시 느려지며 멈춰 선다.

세련되고 깔끔한 인상을 준다.

앞뒤로 진동하며 전체적으로 천천히 전진한다.

용수철의 진동 같은 기계적인 인상을 준다.

[표 3-5]는 같은 움직임이라 할지라도 그래프의 형태에 따라 동적 스테이트의 인상을 달리 할

수 있음을 보여준다.

2) 인터페이스 구성

[그림 3-8] 동적 8스테이트 코드 생성기의 주화면(좌)과 인터페이스의 명칭(우)

33


[그림 3-8]에서 볼 수 있는 동적 스테이트 코드 생성기의 인터페이스는 다음의 요소들로

이루어져 있다.

• 패널: 한 개의 패널이 한 개의 속성을 컨트롤 한다. 활성화된 패널만 조작이 가능하고 동적

스테이트 코드에 반영 된다. 반 로 비활성화된 패널은 동적 스테이트 코드에 영향을 미치지

않는다. 가로축은 프레임, 세로축은 시각 속성 값이다.

• 그래프선: 그래프 선은 시각 속성의 값을 시간에 한 함수로 표현해준다.

• 조정점: 디자이너가 조정점을 생성하고 조정함으로써 부드러운 형태의 그래프 선이

생성된다.

• 활성/비활성화 토글 버튼: 토글 버튼을 위/아래로 어 활성/비활성화 상태를 설정한다.

• 함수 길이: 동적 스테이트 코드가 만드는 함수의 길이를 프레임 단위로 설정한다.

• 함수 이름: 액션스크립트에서 쓰일 함수의 이름이다.

• 데모 버튼: 테스트모드로 이동하여 작업 중인 동적 스테이트 코드를 테스트하도록 한다.

• 생성 버튼: 동적 스테이트 코드를 생성하여 클립보드로 복사함으로써 디자이너가 붙여

넣기를 통해 코드를 얻을 수 있도록 한다.

3) 코드 생성

그래프의 조작이 완성되면 동적 스테이트 코드의 이름을 명명하고 생성 버튼을 누름으로써

동적 스테이트 코드가 생성되고 자동으로 클립 보드(Clip Board)로 복사 된다. 생성된 동적

스테이트 코드를 심볼의 첫 번째 프레임에 붙여 넣음으로써 해당 심볼은 동적 스테이트

함수를 가지게 된다. 사용자가 새롭게 정의한 동적 스테이트 함수를 이벤트 코드의 괄호 내에

“[객체 이름].[함수 이름](x 좌표, y 좌표)”의 형식으로 프로그래밍함으로써 트랜지션이벤트가

발생할 때 동적 스테이트 함수 또한 실행 된다. 만약 하나의 심볼이 2 개 이상의 동적

스테이트 함수를 가지는 경우, 기존의 코드 뒤에 새로운 동적 스테이트 코드를 붙여 넣기만

하면 2 개 이상의 함수를 가질 수 있게 된다.

4) 함수 제어

동적 스테이트 코드 생성기를 통해 만들어진 동적 스테이트 함수는 동적 스테이트 함수 명령

외에도 이를 제어하기 위해 준비된 몇 가지 명령어가 있다. [표 3-6]은 동적 스테이트 함수에

포함된 명령어를 보여준다.

34


[표 3-6] 동적 스테이트 코드의 명령어

코드 데이터 형 기능

[함수 이름].stop() True 동적 스테이트 함수를 마지막 프레임으로 강제 이

동 후 종료한다.

[함수 이름].stop(x) True / False 동적 스테이트 함수를 x 프레임으로 강제 이동 후

종료한다.

[함수 이름].count Number 동적 스테이트 함수의 프레임 위치를 반환하거나

강제로 설정한다.

[함수 이름].over Function 동적 스테이트 함수가 종료되는 트랜지션이벤트

3.4. 디자인 프로그래밍 툴킷의 활용

[그림 3-9] 툴킷을 활용하여 단계적으로 진화하는 프로토타입

[그림 3-9]는 디자인 프로그래밍 툴킷의 구성요소를 단계적으로 적용함으로써, 발전하는

프로토타입의 다이어그램을 보여준다. 2 단계에서 기본 트랜지션이벤트에서 고급

트랜지션이벤트로 체되고 3 단계에서 정적 스테이트가 동적 스테이트로 확장된다. 본

절에서는 툴킷의 사례로서 터치 스크린 기반의 지능화 모바일 기기의 프로토타이핑 개발

사례가 설명되었다. 디자인 프로그래밍 툴킷의 구성요소가 각 단계에서 어떻게 적용되며,

프로토타입의 스테이트와 트랜지션이 어떻게 발전, 확장하는지 설명한다. 본 논문에서는

모바일 기기의 배경 화면이 전환 되는 기능 범위만을 소개한다.

3.4.1. 디자인 프로그래밍 1단계

가장 먼저 제품의 인터페이스 요소를 구분 짓는다. 모바일 기기의 디스플레이 화면이 출력

장치로, 터치해야 하는 좌·우의 화면 영역이 입력 장치로 구분되었다. 다음 단계로 출력

35


장치의 스테이트를 구분한다. 출력 장치인 디스플레이 객체는 3 개의 스테이트를 갖는다.

그리고 좌우 영역을 각각 클릭했을 때 발생하는 트랜지션이벤트를 고려하여 스테이트차트로

그려보면 [그림 3-10]과 같다.

[그림 3-10] 모바일 기기의 객체 지향적 스테이트차트

완성된 스테이트트랜지션차트를 바탕으로 프로그래밍이 완성되었다. 디스플레이 요소의

심볼이 만들어졌고 플래시 작업 윈도우에 제품 본체 위에 배치되어 Display_Screen 라

명명되었다. 디스플레이 심볼은 A, B, C의 3 개 프레임을 가지고 각각은 [표 3-7]의 액션

스크립트를 갖는다. 투명한 무비클립인 Left_Area와 Right_Area도 함께 배치되었다.

[표 3-7] 디자인 프로그래밍 1 단계의 소스 코드

Display_Screen: A 프레임 Display_Screen: B 프레임 Display_Screen: C 프레임

Left_Area.onPress = function()

{

}

Right_Area.onPress = function()

{

gotoAndStop("B");

}


{

gotoAndStop("A");

}


{

gotoAndStop("C");

}


{

gotoAndStop("B");

}


{

}

[그림 3-11]은 디자인 프로그래밍 1 단계에서 완성된 모바일 기기의 화면과 클릭 이벤트를

지면상에 표현한 것이다.

36


[그림 3-11] 디자인 프로그래밍 툴킷이 적용된 1단계의 프로토타입


디자인 프로그래밍의 두 번째 단계에서는 클릭과 같은 기본 이벤트를 터치 기반의 고급

트랜지션 이벤트로 재구성한다. 이벤트 코드 생성기를 활용하여 [그림 3-12]의 왼쪽과 같은

이벤트가 구성되고 onDragtoLeft로 명명되었다. 이 이벤트는 터치 스크린 디스플레이를

왼쪽으로 드래그하는 터치 제스처 이벤트를 발생시키기 위해 만들어 졌다. 생성된 코드는

디스플레이 심볼의 1 프레임에 삽입되었다. [그림 3-12]의 오른쪽과 같은 방식으로

onDragotoRight라는 이벤트 코드도 동시에 만들어져 디스플레이 객체에 삽입되었다.

[그림 3-12] 모바일 기기 예제에 활용된 고급 트랜지션 이벤트

37


기존의 기본 이벤트들은 새롭게 추가된 고급 이벤트로 대체되었다.

[표 3-8]는 디자인 프로그래밍 2 단계에서 Display_Screen 심볼의 B 프레임 프로그래밍 코드가

디자인 프로그래밍 1 단계의 프로그래밍 코드와 어떻게 다른지를 보여준다.

[표 3-8] 프로그래밍 2 단계의 소스 코드

디자인 프로그래밍 1 단계

Display_Screen: B 프레임




{

gotoAndStop("A");

}


{

gotoAndStop("C");

}

onDragtoRight = function()

{

gotoAndStop("A");

}

onDragtoLeft = function()

{

gotoAndStop("C");

}

[그림 3-13]은 디자인 프로그래밍 2단계에서 트랜지션 이벤트가 확장된 모바일 기기의 화면과

트랜지션이벤트를 지면상에 표현한 것이다.


38



디자인 프로그래밍의 마지막 단계에서는 정적인 스테이트를 동적으로 구성하여 트랜지션이

발생되기 전에 화면이 전환되는 시각적 효과를 구성한다. 동적 스테이트 코드 생성기를

이용하여 [그림 3-14]와 같은 함수가 구성되었다.

[그림 3-14] 동적 스테이트 함수 slideTo의 동적 스테이트 생성기 패널의 구성

[그림 3-14]에서 구성된 동적 스테이트 함수는 객체가 부드럽게 흘러가는 듯한 동적 표현이다.

동적 테이트 함수의 이름은 slideTo로 명명되었다. 여기서 생성된 함수 코드는 Display_Screen

심볼 1프레임의 다른 액션스크립트 코드 뒤에 붙여 넣어졌다.

스

[표 3-9]는 디자인 프로그래밍 3

단계에서 Display_Screen 심볼 B 프레임의 액션스크립트 코드가 어떻게 디자인 프로그래밍 2

단계와 다른지 보여준다. 기존의 gotoAndStop 명령이 slideTo 함수로 체되었고, slideTo가

끝나는 시점에서 gotoAndStop이 실행된다.

39


40

[표 3-9] 디자인 프로그래밍 3 단계에서 B 스테이트의 소스 코드





onDragtoRight = function()

{

gotoAndStop("A");

}

onDragtoLeft = function()

{

gotoAndStop("C");

}

onDragtoRight = function() {

slideTo(180,0);

slideTo.over = function() {

gotoAndStop("A");

}

}

onDragtoLeft = function() {

slideTo(-180,0);

slideTo.over = function() {

gotoAndStop("C");

}

}

[그림 3-15]는 디자인 프로그래밍 3단계에서 정적 스테이트가 동적으로 변한 차이를 지면상에

표현한 것이다.


4 인터랙티브 프로토타입

개발 사례

4.1. 소방 구조용 화상 이미지 카메라 사례

4.2. 펜 글씨 기반의 문자 입력 인터페이스 사례

4.3. 거리 센서를 이용한 충돌 경보기 사례

4.4. 개발 사례 종합

4. 인터랙티브 프로토타입 개발 사례


본 장에서 디자인 프로그래밍 툴킷이 활용된 개발 사례가 소개되고, 각 사례를 통해 드러난

디자인 프로그래밍 툴킷의 유용성에 해 논의 되었다. 툴킷의 논의점은 장점과 단점,

기 효과, 고려점의 4가지 측면으로 나뉘어 다시 정리 되었다.

개발된 사례는 최근 디자인 수요가 증가하고 있는 휴 용 정보화 기기를 중심으로 선정되었다.

첫 번째 사례인 소방 구조용 화상 이미지 카메라는 기능 측면에서 기존의 디지털 카메라에

특수 기능이 부가된 제품이다. 두 번째 사례는 펜 글씨 기반 문자 입력 인터페이스로써

터치스크린 입력장치를 활용하는 휴 용 기기기의 입력 장치의 구현에 중점을 두었으며,

마지막 사례는 거리 센서를 이용한 충돌 경보기로써 휴 용 정보화 기기에 포함되는 가속도

센서나 기울기 센서와 같은 입력 장치와의 연계성을 고려하여 선정되었다. 세 가지 사례

개발을 통해 디자이너가 실무에서 많이 다루고 있는 휴 용 정보화 기기, 그 중에서도 특히

터치 스크린 기반의 기기와 다양한 센서가 내장된 기능의 구현이 용이함을 확인하였다.

화상 이미지 카메라는 기존의 디자인 상물인 디지털 카메라의 기능을 부분 공유하면서

동시에 특유의 사용 환경으로 인해 가지는 디자인의 특성이 두드러지는 제품이다. 이 개발

사례를 통해 일반적인 제품의 기능 구현뿐 아니라 특화된 제품의 기능 구현에도 활용될 수

있었다.

펜 글씨 기반 문자 입력 인터페이스는 휴 용 정보화 기기 등에서 입력 방식으로써 많이

사용되고 있는 기능이다. 하지만 디자이너가 쉽게 구현하기 힘든 기능이기도 하다. 펜 글씨

기반 문자 입력 인터페이스를 개발 해봄으로써 디자인 프로그래밍 툴킷이 상당한 수준의 문자

기반 프로그래밍을 체할 수 있음을 알 수 있었다.

마지막으로 거리 센서를 이용한 충돌 경보기는 적외선 하드웨어와 소프트웨어가 결합된 개발

사례이다. 이벤트 코드 생성기를 통해 만들어진 이벤트 코드가 하드웨어로부터 입력되는

정보의 분석에 효과적으로 활용 될 수 있음을 확인하였다.

42


4.1. 소방 구조용 화상 이미지 카메라 사례

1) 제품 개요

제품 디자이너가 자주 다루는 제품의 하나인 카메라를 표하는 제품의 사례로써 소방 구조용

화상 이미지 카메라가 개발 되었다. 이를 통해 디자이너가 능동적으로 프로토타입의

피델리티의 수준을 선택 할 수 있는지, 기존의 디자인 사고 및 도구의 연장선상에서 작업이

가능한지 검증되었다.

소방 구조용 화상 이미지 카메라는 적외선 영상 정보를 시각화하여 어두운 환경이나 연기가

많은 상황에서도 건물의 열의 분포나 생존자를 탐색하도록 하여 소방·구조 활동을 지원 하는

도구이다. 소방·구조 활동에서 중요한 장면을 촬영하여 기록으로 남기고 활동 중에도 다시

확인 해 볼 수 있는 기능을 제공한다. 본 연구에서 사례로 개발된 소방 구조용 화상 이미지

카메라는 기존 제품들이 버튼에 기반한 인터페이스를 활용하였던 것에서 탈피하여 큰

디스플레이 장치와 터치 스크린을 활용한 자연스러운 인터페이스를 적용함으로써 긴급

상황에서 신속하게 조작 할 수 있도록 디자인 되었다. 또한 촬영된 사진의 썸네일

이미지(Thumbnail Image)가 스크린 위에 지속적으로 표시되고 썸네일을 터치함으로써 이미지를

다시 볼 수 있는 기능이 포함되어 있다.

[그림 4-1] 소방 구조용 화상 이미지 카메라 사례 레이아웃

(좌) 사진을 촬영할 때마다 썸네일이 하나씩 활성화 된다. (우) 좌/우로 드래그 하면 이전/다음 사진을 보여준다.

2) 세부 개발 과정

소방 구조용 화상 이미지 카메라의 객체 지향적 스테이트트랜지션차트가 [그림 4-2]와 같이

만들어 졌다. 촬영 되는 이미지는 미리 준비 되어 있는 4 장의 이미지를 신 보여주도록

하였다. 그리고 이들의 다시 보기 이미지를 각각 스테이트 S1, S2, S3, S4 로 하고, 비어 있는

투명한 화면을 S0 스테이트로 하여 이들을 하나의 객체로 디자인 하였다. 첫 번째 썸네일

이미지를 보여주는 객체를 A로 설정하고, 사진이 촬영되기 전에 비어 있는 투명한 스테이트

43


A0와 촬영 후 썸네일 이미지를 보여줄 A1 스테이트로 구성하였다. 같은 방식으로 B, C, D 등

4개의 객체를 완성하여 객체 지향적 STC를 그려보면 [그림 4-2]와 같다.

[그림 4-2] 소방 구조용 화상 이미지 카메라의 객체 지향적 STC

[그림 4-2]의 STC를 바탕으로 프로그래밍 코드가 작성 되었다. 촬영 버튼을 누름으로써 썸네일

이미지가 나타나는 기능이 가장 먼저 프로그래밍 되었다. 사용자가 처음 촬영 버튼을

클릭했을 때, 썸네일 객체 A를 A0 에서 A1 으로 트랜지션 시킨다. 촬영 버튼을 두 번째 클릭

했을 때는 썸네일 객체 B를 B0 에서 B1 으로 트랜지션 시키도록 해야 한다. 마찬가지

방법으로 썸네일 객체C와 D를 차례로 트랜지션 시키도록 프로그래밍 되어야 한다. 이처럼 매

단계마다 다른 트랜지션을 구현하기 위해 thumb이라는 변수가 사용 되었다. thumb 변수의 초기

값을 0 으로 설정한다. 촬영 버튼이 눌렸을 때, thumb의 변수 값이 0 일 경우 썸네일 객체A를

트랜지션하고 thumb 변수 값을 1 로 재설정한다. 만약 thumb변수 값이 1 일 때에는 B 객체를

트랜지션 하고 thumb 변수 값을 2 로 재설정 한다. 동일한 방법으로 썸네일 객체 C와 D를

차례로 제어하 프로 래밍 코드도 완성되었다. 여기서 프로그래밍된 액션스크립트

코드는

는 그

[표 4-1]과 같다.

[표 4-1] 소방 구조용 화상 이미지 카메라의 소스 코드 1

var thumb = 0;

shutter.onPress = function(){

if(thumb == 0){

A.gotoAndStop(“A1”);

thumb = 1;

}

if(thumb == 1){

B.gotoAndStop(“B1”);

thumb = 2;

}

if(thumb == 2){

44


C.gotoAndStop(“A1”);

thumb = 3;

}

if(thumb == 3){

D.gotoAndStop(“D1”);

thumb = 4;

}

}

다음으로 완성된 프로그래밍은 썸네일 이미지를 클릭 했을 때 다시 보기 모드로 바뀌는

기능이다. 이는 각각 썸네일 객체 A를 클릭하면 화면 객체 S를 S1으로 트랜지션, 썸네일 객체

B를 클릭하면 화면 객체 S를 S2 로 트랜지션, 썸네일 객체 C를 클릭하면 화면 객체 S를

S3으로 트랜지션, 썸네일 객체 D를 클릭하면 화면 객체 S를 S4로 트랜지션 시키는 방식으로

프로그래밍 되었다. 이를 프로그래밍한 액션스크립트 코드는 [표 4-2]와 같다.


A.onPress = function() {

S.gotoAndStop(“S1”);

}

B.onPress = function() {


}

C.onPress = function() {


}

D.onPress = function() {


}

다시 보기 모드에서는 촬영된 다른 3 장의 이미지를 보기 위한 조작 기능이 필요하다.

왼쪽으로 드래그를 함으로써 다음 이미지로 이동하고 오른쪽으로 드래그를 함으로써 이전

이미지로 이동하는 조작이 있어 이를 구현하기 위해 이벤트 코드 생성기가 활용되었다.

[그림 4-3] 소방 구조용 화상 이미지 카메라의 이벤트 편집 화면

45


[그림 4-3]의 이벤트 코드 3 개가 생성되었다. 왼쪽으로 드래그하는 이벤트는 onDragtoLeft로,

오른쪽으로 드래그하는 이벤트는 onDragtoRight로, 위로 드래그 하는 이벤트는 onDragOut으로

명명되었다. 생성된 코드는 다시 보기 객체S에 포함되었다. 이를 프로그래밍으로 옮길 경우,

예를 들어 스테이트S2 서 오른쪽으로 드래그 할 경우 S1 으로 트랜지션이 일어나도록,

왼쪽으로 드래그 할 경우 S3 으로 트랜지션이 일어나도록, 위로 드래그 할 경우 S0 으로

트랜지션이 일어나도록 프로그래밍 되어야 한다. 모든 스테이트에 해 프로그래밍 한

것이

에

. [표 4-3]이다


S1의 액션스크립트 코드 S2의 액션스크립트 코드

S.onDragtoRight = function(){

}

S.onDragtoLeft = function(){


}

S.onDragOut = function(){


}



}



}



}

S3의 액션스크립트 코드 S4의 액션스크립트 코드



}



}



}



}


}



}

완성된 프로토타입은 터치스크린 모니터에서 실행되었다. 본 개발 사례의 테스트에서 활용된

모니터는 7 인치 크기의 800 480 의 해상도 디스플레이 영역과 터치 스크린 영역을 가지며

USB인터페이스로 컴퓨터에 연결된다. 드라이버를 설치하고 모니터를 연결하는 것만으로 PC의

모니터 화면 출력이 터치스크린 모니터로 전환되고 터치 스크린의 접촉이 마우스 입력으로

전환되는 방식이다. 따라서 소프트웨어 프로토타입에 수정을 거치지 않고도 바로 적용이

가능하다. [그림 4-4]는 완성된 소방 구조용 화상 이미지 카메라의 소프트웨어의 캡쳐 화면과

터치 스크린 모니터를 활용한 테스트 장면이다.

46


[그림 4-4] 소방 구조용 화상 이미지 카메라의 사용 화면

A: 다시 보기 화면, B: 대기 화면, C: 터치스크린 인터페이스를 사용하는 화면

3) 개발 사례 고찰

디자인 프로그래밍 툴킷을 활용하여 소방 구조용 화상 이미지 카메라의 프로토타입이 개발

되었다. 객체 지향적 스테이트트랜지션차트를 프로그래밍에 바로 작용하여 10 여 개의

스테이트만으로 제품의 기능을 충실히 보여주는 프로토타입이 완성되었다. 기존의

스테이트차트 방식과 비교하여 최소 15 개 더 적은 수의 스테이트만으로 완성되었기 때문에

프로그래밍 코드가 더 효율적이라는 장점이 부각 되었다. 효율적인 코드를 가진 프로토타입은

코드의 유지·보수가 용이한 탓에 점진적인 프로그래밍의 완성에도 효율적이라는 장점을

가진다. 하지만 개발 환경 자체가 STC를 지원하지 않고 프로그래밍 코드가 서로 흩어져 있기

때문에 프로그래밍의 큰 흐름을 잃기 쉬웠다. 한편, 터치 스크린 모니터에서 프로토타입을

실행함으로써 소스 코드에 추가적인 수정 없이 바로 탠저블 프로토타입을 구현할 수 있었지만,

객체 지향적 스테이트트랜지션차트 기법 자체가 프로그래밍 지식을 부분적으로 요구하기

때문에 일반 디자이너들에게 다소 어렵게 다가갈 수 있을 것이라는 점이 제기되었다.

47


4.2. 펜 글씨 기반의 문자 입력 인터페이스 사례

1) 제품 개요

디자이너가 직접 수행하기에 다소 복잡한 프로그래밍의 하나인 펜 글씨 기반의 문자 입력

인터페이스의 사례가 개발되었다. 사례로 개발된 펜 글씨 기반의 문자 입력 인터페이스는

다양한 휴 용 정보 기기 및 게임 기기에서 보편적으로 활용되고 있는 인터페이스이다. 제품

기능의 일부를 부분적으로 구현함으로써 제품의 프로토타입을 점진적으로 완성해 나갈 수

있음이 확인되었다. 또한 문자 기반 프로그래밍의 많은 부분을 시각화된 프로그래밍으로

체할 수 있음을 보여줌으로써 디자이너가 가지는 프로그래밍 기술의 한계를 넓힐 수 있음을

보였다.


펜 글씨 기반 문자 입력 인터페이스 사례는 아라비아 숫자를 입력 받도록 개발 되었으며 기본

원리는 디지털 시계나 전자 계산기와 디지털 장치들에서 흔히 사용되는 7-세그먼트(7-Segment)

출력 방식에서 착안 되었다.

[그림 4-5] 아라비아 숫자의 7-세그먼트 출력 방식

이벤트 코드 생성기에서 절 좌표계를 기반으로 200 300 픽셀의 공간이 구성되었다. 설명의

편이상 공간을 다시 좌·우와 상·중·하 6개의 100 100 픽셀의 개념적 공간으로 나누고 각

공간을 차례 로 좌상, 우상, 좌중, 우중, 좌하, 우하라고 부른다. 예를 들어 아라비아 숫자 1을

입력하는 이벤트는 우상 공간에서 우중, 우하 공간을 차례로 지나가는 이벤트이다. 마찬가지

방식으로 아라비아 숫자 2 를 입력하는 이벤트는 좌상, 우상, 우중, 좌중, 좌하, 우하 공간을

차례 로 지나가는 이벤트이다. 같은 방식으로 다른 숫자 들에 해서도 어떤 공간을 어떤

차례로 지나 가는지를 체크함으로써 이벤트를 구성할 수 있다. [그림 4-6]은 숫자 0에서 9까지

아라비아 숫자의 트랜지션이벤트를 이벤트 코드 생성기에서 어떻게 저작 되었는지를 보여준다.

48


[그림 4-6] 이벤트 코드 생성기 인터페이스상에서 숫자 들의 이벤트를 저작하는 화면

여기서 생성된 이벤트 코드를 객체에 삽입함으로써 0 에서 9 까지 펜글씨 입력 인터페이스가

구성되었다. 여기서 한가지 문제점이 발생하게 되는데 아라비아 숫자 9 의 입력을 시도하면

숫자 1 과 숫자 7 의 이벤트가 함께 발생한다는 문제점이 있다. 여기서 올바른 입력을 위해

숫자 1 과 숫자 7 을 걸러주는 필터이벤트(Filter-Event)가 함께 디자인 되었다. 예를 들어 숫자

1 의 입력을 숫자 7 이나 9 의 입력과 구분시켜 주기 위한 필터이벤트로 좌상에서 우상

공간으로 넘어가는 필터이벤트를 설정하였다. 좌상에서 우상 공간으로 넘어가는 이벤트는

숫자 7 과 숫자 9 의 입력을 위해 반드시 통과해야 하지만 숫자 1 을 입력하기 위해서는 필요

없는 이벤트이다. 따라서 1의 필터이벤트가 먼저 발생한 뒤 숫자 1의 이벤트가 발생하였다면,

이는 숫자 7 이나 숫자 9 의 입력 과정에서 부수적으로 발생하는 숫자 1 의 이벤트라고 볼 수

있다. 이와 같은 방식으로 숫자 7 의 입력을 숫자 9 의 입력과 구분하기 위한 필터이벤트로

우중에서 좌중 공간으로 넘어가는 필터이벤트가 설정되었다. [그림 4-7]은 이들 이벤트와

필터이벤트가 어떻게 이벤트 코드 생성기에서 저작 되었는지를 보여준다.

49


[그림 4-7] 중복 숫자 이벤트와 이를 방지해주는 필터이벤트

숫자 1 의 이벤트 명은 on1, 숫자 7 의 이벤트 명은 on7, 숫자 9 의 이벤트 명은 on9 로 명명

되었고, 숫자 1 의 필터이벤트는 not1, 숫자 7 의 필터이벤트는 not7 로 명명되었다. 그리고

글씨를 입력 받는 객체의 이름이 receiver라고 할 때, 이를 구현한 액션스크립트 코드는 [표

4-4]와 같다.

[표 4-4] 펜 글씨 기반의 숫자 입력 인터페이스의 소스 코드 일부

var is_not_1, is_not_7

onMouseDown = function() {

is_not_1 = false;

is_not_7 = false;

}

receiver.not1 = function() {

is_not_1 = true;

}

receiver.not7 = function() {

is_not_7 = true;

}

receiver.on1 = function() {

if(is_not_1 == false){

trace(“received 1”);

}

}

50



if(is_not_7 == false){


}

}



}

< 후략 >

이와 동일한 충돌 현상이 숫자 2 와 숫자 8 의 입력에서도 발생한다. 동일한 방식으로

필터이벤트를 저작하여 해결 되었다.

여기서 만들어진 인터페이스는 다양한 인터랙티브 제품·시스템·서비스에 활용이 가능하다.

본 연구에서는 간단한 교육용 구구단 퀴즈 프로그램의 프로토타이핑에 활용 되었다.

[그림 4-8] 사례로 개발된 구구단 퀴즈 프로그램

설명의 이해를 돕기 위해 펜의 이미지와 손 글씨의 궤적을 이미지에 포함시켰음.


펜 글씨 기반의 문자 입력 인터페이스가 개발되었고 이를 적용한 교육용 구구단 퀴즈

프로그램이 개발 되었다. 이벤트 코드 생성기를 활용하여 프로그래밍을 수행함으로써 문법

오류로부터 자유로웠고 시각적인 인터페이스를 이용한 저작을 통해 신속하고 쉬운

프로그래밍이 가능한 점 등이 장점으로 부각되었다. 하지만 숫자 9 를 입력할 때, 숫자 1 과

7 의 이벤트가 동시에 발생하는 문제점을 드러냈다. 이러한 문제점을 필터이벤트를 저작하는

방법으로 해결하였으나 일반적인 디자이너가 이를 자유자재로 사용할 수 있으려면 다소

노력이 필요할 것으로 예상되고 있다. 그럼에도 불구하고 손 글씨 기반의 문자 입력

인터페이스가 유용하였으며 더 복잡한 문자의 입력도 구현 가능할 것으로 예상 된다. 또한

필터이벤트를 확장시켜 더 복잡하고 다양한 이벤트의 구현이 가능할 것으로 보인다.

51


4.3. 거리 센서를 이용한 충돌 경보기 사례

1) 제품 개요

본 절에서는 거리를 감지해 경고 신호를 보내는 충돌 경보기의 프로토타입이 개발 되었다.

디자인 프로그래밍 툴킷을 활용해 하드웨어 장치를 통해 실제로 수집되는 거리 정보와

PC 에서 구동 되는 소프트웨어를 결합함으로써 하드웨어와 소프트웨어가 결합된 형태의

프로토타입이 만들어 졌다. 프로토타이핑 과정에서 발견된 장·단점이 함께 논의되었다.


충돌 경보기는 후진 하는 차량의 후미에서 장애물이나 사람에 한 거리 정보를 수집하고 이

거리를 바탕으로 사용자에게 충돌 위험을 경고하는 제품이다. 장애물이 없거나 충분히 먼

거리에 위치할 때에는 아무 반응이 없지만 일정 거리 안으로 다가오면 붉은색 빛을

깜빡임으로써 사용자에게 경고를 전달한다. 위험 거리 안에서는 거리가 가까우면 가까울수록

경고등의 깜빡이는 주기가 점점 빨라지게 된다.

[그림 4-9] 충돌 경보기 사례의 작동 개념

충돌 경보기를 구현시키기 위한 기본 아이디어는 [그림 4-9]와 같다. 이벤트 코드 생성기를

통해 생성된 코드 내부에 내장되어 있는 트래커([표 3-4] 참조) 객체가 활용되었다. 본 사례의

프로토타입에서 트래커는 [그림 4-9]의 사각 공간을 지속적으로 오른쪽으로 조금씩 움직인다.

만약 트래커의 Y좌표를 장애물과의 거리와 연동 시킨다면, 가까운 거리에서 물체가 감지될

52


경우 트래커는 아래 공간에서 움직이고, 장애물이 없거나 거리가 충분히 멀다면 트래커는

위로 올라가 회색 영역에 머무르게 된다. 만약 트래커가 오른쪽으로 충분히 움직여 far

이벤트에 닿으면 트래커는 다시 화면의 왼쪽 끝에서부터 오른쪽으로 움직이기 시작한다.

반면에 close 이벤트에 닿으면 화면 왼쪽 끝으로 이동함과 동시에 화면에 경고등이 한번

깜빡인다. 이 규칙을 바탕으로 충돌 경보기가 구성될 경우, 장애물이 없거나 장애물까지

거리가 충분히 멀면 트래커가 회색 영역에서 머물게 되므로, 경고 없이 트래커가 왼쪽에서

오른쪽으로 반복적인 움직임을 보이게 된다. 반면 장애물까지 거리가 일정 거리 이상

가까우면 트래커가 회색 영역에서 벗어나 아래 공간으로 이동하게 되므로 경고음이

정기적으로 발생한다. 장애물로부터 거리가 가까울수록 트래커가 아래에 있으므로 경고음의

주기가 짧아지고, 거리가 멀수록 경고음의 주기는 길어진다.

하드웨어 프로토타입 구성을 위해 거리 센서가 사용되었다. 실제 충돌 경보기는 정 한

초음파 거리 센서를 활용하지만 프로토타입의 목적에 크게 반하지 않는 적외선 거리 센서가

활용되었다. 적외선 거리 센서는 적외선을 발산하는 발광부와 적외선을 수광 하면 저항이

변하는 수광부가 조합된 센서이다. 센서로부터 가까이 있는 물체는 적외선을 더 밝게

반사하는 반면 멀리 있는 물체에 반사되는 적외선이 흐리다는 점을 이용한 센서이다. PC에서

가변저항의 값을 입력 받는 방법으로 Arduino(Banzi et al., 2009)가 활용되었다. [그림 4-10]와

같이 회로가 구성되면 물체의 거리가 가까울수록 더 높은 전압 값이 Arduino로 전달되며,

거리가 멀어질수록 더 낮은 전압 값이 Arduino로 전달 된다. Arduino에 포함된 소스코드는 [표

4-5]와 같다.

[그림 4-10] 충돌 경보기 사례의 하드웨어 구성

53


[표 4-5] 충돌 경보기 사례에서 Arduino의 소스 코드

void setup(){

Serial.begin(9600);

}

void loop(){

Serial.println(analogRead(5));

}

[표 4-5]의 소스 코드는 적외선 거리 센서로부터 전달되는 전압 값을 USB 시리얼 통신 (Serial

Communication)을 통해 PC로 전달해주는 역할을 수행 한다. 장애물로부터 거리가 멀수록 전압

값이 작아져 0으로 수렴하고, 거리가 가까울수록 전압 값이 략 500까지 증가하게 된다.

[그림 4-11] 충돌 경보기 사례에서 사용된 동적 스테이트 코드 생성기

[그림 4-11]과 같은 동적 스테이트 코드를 저작하고 fadeOut으로 명명되었다. 동적 스테이트

코드 fadeOut은 불투명도 패널만을 활용하여 0.4 초 안에 객체가 불투명에서 투명 상태로

빠르게 전환되는 시각적 효과를 가진다. 이 코드가 적용된 객체는 순간적으로 깜빡이듯

보인다. 이 동적 스테이트 코드는 red객체에 삽입되었다. red객체는 경고등 객체로써

붉은색으로 채워져 있다.

54


[그림 4-12] 충돌 경보기 사례에서 이벤트 코드 재생기를 통한 이벤트 저작

이벤트 코드 생성기를 통해 [그림 4-11]과 같은 far 이벤트와 close 이벤트가 저작되고 소스

코드가 생성 되었다. 생성된 소스 코드는 receiver객체에 삽입되었다.

하드웨어 거리 센서로부터 PC에게 전달된 거리 값은 MIDAS(임지동, 2005)를 통해 트래커와

연동되었다. [표 4-6]은 본 프로토타입의 프로그래밍 소스 코드로써 트래커를 외부 입력과 연동

시키고 이벤트를 처리하는 코드를 포함한다.

[표 4-6] 충돌 경보기 사례의 소스 코드

receiver.close = function(){ // close 이벤트

receiver.tracker._x = 0;

red.fadeOut(); // red 객체 깜빡임

}

receiver.far = function(){ // far 이벤트

receiver.tracker._x = 0;

}

onLoad = function(){ // 트래커를 하드웨어와 연결하기 위한 초기설정

receiver.tracker.followMouse = false;

receiver.startCapture();

}

onEnterFrame = function(){ // 트래커를 오른쪽으로 조금씩 이동

receiver.tracker._x = receiver.tracker._x + 1;

}

onData = function(aData){ // MIDAS와 트래커 Y좌표의 연동

receiver.tracker._y = aData;

}

55



하드웨어 센서와 Arduino, MIDAS 와 결합하여 성공적으로 하드웨어와 소프트웨어가 결합된

프로토타입이 완성되었다. 기존의 구현 방식과 비교하여 조건문이나 복잡한 명령어 없이

프로토타입이 완성된 점과 문자 기반의 코드 수정 없이 이벤트 코드 생성기의 인터페이스를

통해 코드의 수정이 이루어져 문법 지식이 필요 없고 오류로부터 안전하다는 점이 장점으로

부각 되었다. 하지만 하드웨어 정보와 이벤트 코드를 연동시키기 위해 추가적인 프로그래밍이

요구되고 있고 이벤트 코드 생성기에서 하드웨어와 연동된 데이터를 직접 테스트 해보지

못하는 단점이 남아 있다. 한편, 트래커를 디자이너가 직접 설정할 수 있도록 해줌으로써

시각화 가능한 거의 모든 종류의 정보를 분석할 수 있을 것으로 기 된다. 예를 들어 마이크,

중력 센서, 가속도 센서, 기울기 센서 등을 활용하여 다양한 응용프로그램을 개발 할 수 있을

것으로 기 된다. 하지만 하드웨어 센서로부터 오는 데이터를 분석 하는데 툴킷이 유용했던

반면 동적 스테이트로써 액츄에이터를 다루지 못한다는 한계점을 드러냈다.

56


57

4.4. 개발 사례 종합

디자인 프로그래밍 툴킷을 활용하여 소방 구조용 화상 이미지 카메라, 펜 글씨 기반 문자 입력

인터페이스, 거리 센서를 이용한 충돌 경보기 등 3 개의 프로토타입 사례가 개발 되었다. 각

사례의 개발과정에서 디자인 프로그래밍 툴킷이 활용되었으며 그 유용성을 확인할 수 있었다.

개발 사례를 통해 제기된 디자인 프로그래밍 툴킷의 논의점은 다음과 같다.

[표 4-7] 디자인 프로그래밍 툴킷의 논의점

구분 논의점

장점

기존의 스테이트차트 기법과 비교하여 프로그래밍 코드의 관리가 효율적임.

점진적인 프로토타입 개발에 적합함.

문자 기반의 프로그래밍을 일부 대체함으로써 오류가 상대적으로 적고, 시각적인 인터페이스를

이용한 저작으로 쉽고 빠른 프로그래밍이 가능함.

단점

개발 환경에서 STC가 겉으로 드러나지 않기 때문에 프로그래밍 과정에서 혼동을 초래하기도

하였음.

이벤트 코드의 경우 원하지 않는 이벤트가 함께 발생하기도 하였음.

하드웨어 정보와 이벤트 코드를 연동시키기 위해 추가적인 프로그래밍이 요구되고 있음

이벤트 코드 생성기에서 하드웨어 데이터를 직접 테스트 해보지 못하는 한계점이 있음.

동적 스테이트 코드를 활용하여 하드웨어 액츄에이터를 다루지 못함.

기대

효과

터치스크린 모니터를 활용하여 다양한 휴대용 지능화 기기의 프로토타입을 구현할 수 있음.

숫자 입력 보다 복잡한 손 글씨 기반의 문자 입력 인터페이스의 구현도 가능할 것임.

필터이벤트를 확장시켜서 더 복잡한 이벤트의 구현이 가능할 것임.

트래커를 직접 설정할 수 있게 됨으로써, 시각화 가능한 거의 모든 정보의 패턴을 분석할 수 있

을 것임.

고려

점

객체 지향적 스테이트트랜지션차트 기법이 프로그래밍 지식을 일부 요구하기 때문에 일반 디자

이너들에게 어려울 수도 있을 것임.

일부 이벤트 코드의 오류는 필터이벤트를 저작해야 해결될 수 있으나 초보 사용자에게 어렵게

느껴질 수도 있을 것임.

사례 개발을 통해 디자인 프로그래밍 툴킷이 디자인 분야의 프로그래밍을 쉽고 효율적으로

도와주는 도구로 평가 될 수 있었다. 특히 문자 기반의 프로그래밍의 상당 부분을 시각적인

인터페이스를 통해 저작 할 수 있도록 하는 장점을 가진다. 단점으로 이벤트 코드 생성기와

동적 스테이트 코드 생성기의 저작 환경이 가지는 불편함과 두 코드 생성기를 통해

만들어지는 코드의 기능 한계가 논의 되었다. 한편 기 효과로는 이벤트 코드 생성기의 열린

가능성에 한 논의가 많이 이루어졌으며 프로그래밍 툴킷이 실무 및 교육에 적용되었을 경우

우려되는 기능 전달의 오류나 시행 착오에 한 우려도 동시에 제기되었다.

5 결 론 5.1. 연구 결과 요약 및 기여

5.2. 논의점 및 향후 연구 과제

5. 결 론

5. 결 론

5.1. 연구 결과 요약 및 기여

본 연구는 디자이너가 쉽게 배울 수 있고 다양한 유형의 프로토타이핑에 활용할 수 있는

디자인 프로그래밍 툴킷의 개발을 목표로 진행되었다. 연구의 결과와 그 기여는 다음과 같다.

(1) 문헌 조사를 통한 프로토타이핑 연구 동향 및 한계점 파악

기초 이론 및 관련 연구에 한 체계적인 조사가 이루어졌다. 인터랙티브 제품 디자인

분야에서 프로토타이핑의 역할과 기능에 한 논문이 정리 되었다. 또한 HCI 나 디자인 관련

분야에서 이루어진 관련 연구는 스테이트차트 기반 프로그래밍 연구, 기능 함수 라이브러리

연구, 초보 프로그래머 훈련 연구의 세 범주로 나누어 각 범주에서 가장 탁월환 연구들을

중심으로 조사되고 분석되었다.

본 연구에서 이루어진 문헌 조사는 연구를 세 범주로 나눔으로써 기존에 별개 연구로

인식되던 연구들을 다른 시각에서 분석 되도록 하였다. 각 범주의 연구 발전 동향이나 범주간

연구들의 상호작용에 한 고찰이 디자인 프로그래밍 툴킷의 구성에 반영되었다.

본 연구를 통해 구축된 성찰적 프로토타이핑에 한 기초 이론은 추후 유사한 연구를

진행하는 연구자나 관련 연구자들에게 도움이 되는 참고 자료가 될 것으로 기 된다.

(2) 디자인 프로그래밍 툴킷의 요구사항 도출

기초 이론 및 관련 연구에 한 조사와 디자이너와 프로그래머를 상으로 하는 작업 관찰 및

토의를 바탕으로 디자인 분야에서 개발되는 디자인 프로그래밍 툴킷의 요구사항이 4 가지로

도출되었다. 최종적으로 도출된 요구사항은 다음과 같다. 1) 디자이너가 피델리티의 수준을

선택할 수 있어야 한다. 2) 하드웨어와 소프트웨어가 결합된 프로토타입을 지원해야 한다. 3)

기존의 디자인 사고 및 도구를 확장하는 프로토타이핑을 제공해야 한다. 4) 프로그래밍의

완성이 점진적으로 이루어져야 한다.

기존의 연구들이 주로 프로토타이핑 기법의 요구사항을 도출해왔던 것과 비교하여 본

연구에서 도출된 요구사항은 디자인 분야에서 활용되는 프로그래밍에 중점을 두고 있다.

59

5. 결 론

본 연구를 통해 도출 된 네 가지 요구사항을 기반으로 본 연구를 통해 제안된 디자인

프로그래밍 툴킷과 다른 결과물이 개발 될 수 있을 것이다. 관련 분야의 연구자들이 후속

연구를 진행함에 있어 본 연구에서 도출된 요구사항이 참고될 것으로 기 된다.

(3) 객체 지향적 STC를 활용한 디자인 프로그래밍 툴킷의 제안

연구에서 제안된 디자인 프로그래밍 툴킷은 객체 지향적 스테이트트랜지션차트에 기반하여

프로그래밍 하는 사고기법과 스테이트차트의 요소인 스테이트와 트랜지션이벤트를

확장시켜주는 도구의 조합이다. 디자인 프로그래밍 툴킷은 단계적인 프로그래밍을 도와줄 수

있는 3개의 구성 요소로 구성되었다. 구성 요소는 객체 지향적 스테이트트랜지션 차트, 이벤트

코드 생성기, 동적 스테이트 코드 생성기 등이다. 객체 지향적 스테이트트랜지션차트는 객체

수준에서 이루어지는 스테이트 트랜지션 차트를 그리고 이 것을 프로그래밍으로 옮기는

테크닉을 의미한다. 이벤트 코드 생성기는 소프트웨어로써 사용자가 디자이너가 복잡한 센서

데이터를 동시에 처리하여 의미 있는 입력 조작으로 식별해내는 프로그래밍을 신 해준다.

동적 스테이트 코드 생성기는 스테이트차트 기반의 프로그래밍이 가지는 정적 스테이트의

한계를 극복하기 위해 제시된 소프트웨어로써 스테이트를 감성적이고 동적으로 변화시켜주는

프로그래밍 코드를 디자이너 신 만들어 준다.

연구에서 제안된 디자인 프로그래밍 툴킷은 기존의 프로토타이핑 연구와 차별화되는 단계적인

프로토타입의 구현을 통해 능동적인 피델리티 선택을 가능케 한다. 또한 최종 단계의

프로토타입은 기존 관련 연구들 보다 상 적으로 높은 피델리티의 구현이 가능하다. 이벤트

코드 생성기를 통해 기존의 연구들이 해결하기 힘들었던 2 차원 아날로그 정보의 분석이

가능해졌으며 동적 스테이트 코드 생성기를 활용 함으로써 기존의 스테이트차트기반

프로그래밍이 보여주던 정적인 스테이트의 한계를 넘을 수 있게 되었다.

본 연구에서 제안된 디자인 프로그래밍 툴킷은 인터랙티브 제품 및 시스템 디자인, 인터랙션

디자인, 웹사이트 디자인 등의 분야에서 교육과 실무에 폭 넓게 활용될 수 있을 것으로

기 된다. 특히 터치스크린 인터페이스 기반의 휴 용 정보 기기 및 키오스크(Kiosk)제품을

중심으로 다양한 유형의 제품 프로토타이핑에 활용될 수 있을 것이다.

60

5. 결 론

61

5.2. 논의점 및 향후 연구 과제

툴킷을 활용한 사례 개발 과정과 디자인 전문가를 상으로 실시된 약식 시연을 통해 디자인

프로그래밍 툴킷에 한 논의가 이루어 졌다.

연구에서 제안된 단계적인 프로그래밍 방식이 디자인 실무와 교육에서도 유용한지를 평가하는

작업이 요구 되고 있다. 프로그램의 구조 면에서 각 단계의 결과물 간의 연속성이 떨어진다는

의견이 제기되었고 3 단계의 프로그래밍 결과물이 반드시 1, 2 단계를 거쳐야 얻을 수 있는

결과물이 아니기 때문이다. 실무와 교육에서 디자인 프로그래밍 툴킷을 적용해봄으로써

단계적인 프로그램 방식의 개선이 있을 수도 있을 것이다.

객체 지향적 스테이트트랜지션차트 기반의 프로그래밍이 실질적으로 디자이너가 쉽게 익혀

유용하게 사용할 수 있을 지에 한 연구가 병행되어야 할 것이다. 디자인 작업과 연속성을

가지기 위해 스테이트트랜지션차트 방식이 선택되었지만 객체 지향적 개념은 여전히

디자이너에게 생소한 개념으로 남아 있기 때문이다.

이벤트 코드 생성기의 경우 필터이벤트를 저작하는 기능과 트래커를 더욱 쉽게 사용 할 수

있도록 하는 프로그램의 개선이 요구되고 있다. 사례 개발 과정을 통해 예기치 않는

이벤트들이 동시에 발생하는 문제점이 발견 되었으므로 필터이벤트의 저작 기능은 후속

연구를 통해 포함 되어야 할 것이다

동적 스테이트 코드 생성기는 현재 버전에서 다루는 시각 속성의 종류가 4 개로써 너무

제한적이고 이를 하드웨어 장치와 연결하기 힘들다는 의견이 제기되었다. 후속 연구를 통해

이에 한 개선이 필요한 시점이다.

마지막으로 두 코드 생성 프로그램의 인터페이스가 직관적이지 않아 개선이 요구되고 그에

맞는 사용 설명서가 필요하다는 의견이 함께 제기되고 있다.

A 참고문헌

A. 참고문헌

A-1

A. 참고문헌

남택진 2004. 하드웨어와 소프트웨어가 통합된 제품개발을 위한 스케치기반 디자인 프로토타이핑 도구. 2004 한국디자인학회 봄 학술발표대회 논문집, pp 290-291.

임지동. 2005. 디자이너를 위한 인터랙티브 제품 프로로타이핑 시스템의 개발 및 평가에 관한 연구. 석사, 한국과학기술원.

AVRAHAMI, D. & HUDSON, S. E. 2002. Forming interactivity: a tool for rapid prototyping of physical interactive products. Proceedings of the 4th conference on Designing interactive systems: processes, practices, methods, and techniques. London, England: ACM.

BANZI, M., CUARTIELLES, D., IGOE, T., MARTINO, G. & MELLIS, D. 2009. Arduino [Online]. Available: http://www.arduino.cc/ [Accessed 2009].

BAYMAN, P. & MAYER, R. E. 1983. A diagnosis of beginning programmers' misconceptions of BASIC programming statements. Commun. ACM, 26, 677-679.

BRANDT, E. & MESSETER, J. 2004. Facilitating collaboration through design games. Proceedings of the eighth conference on Participatory design: Artful integration: interweaving media, materials and practices - Volume 1. Toronto, Ontario, Canada: ACM.

BUCHENAU, M. & SURI, J. F. 2000. Experience prototyping. Proceedings of the 3rd conference on Designing interactive systems: processes, practices, methods, and techniques. New York City, New York, United States: ACM.

CONWAY, M., AUDIA, S., BURNETTE, T., COSGROVE, D. & CHRISTIANSEN, K. 2000. Alice: lessons learned from building a 3D system for novices. Proceedings of the SIGCHI conference on Human factors in computing systems. The Hague, The Netherlands: ACM.

CRAWFORD, C. 2003. The art of interactive design : a euphonious and illuminating guide to building successful software, San Francisco, No Starch Press.

GAVER, B., DUNNE, T. & PACENTI, E. 1999. Design: Cultural probes. interactions, 6, 21-29.

GREENBERG, S. & FITCHETT, C. 2001. Phidgets: easy development of physical interfaces through physical widgets. Proceedings of the 14th annual ACM symposium on User interface software and technology. Orlando, Florida: ACM.

A. 참고문헌

A-2

HAREL, D. 1987. Statecharts: A visual formalism for complex systems. Sci. Comput. Program., 8, 231-274.

HARTMANN, B., ABDULLA, L., MITTAL, M. & KLEMMER, S. R. 2007. Authoring sensor-based interactions by demonstration with direct manipulation and pattern recognition. Proceedings of the SIGCHI conference on Human factors in computing systems. San Jose, California, USA: ACM.

HARTMANN, B., KLEMMER, S. R., BERNSTEIN, M., ABDULLA, L., BURR, B., ROBINSON-MOSHER, A. & GEE, J. 2006. Reflective physical prototyping through integrated design, test, and analysis. Proceedings of the 19th annual ACM symposium on User interface software and technology. Montreux, Switzerland: ACM.

HOUDE, S. & HILL, C. 1997. What Do Prototypes Prototype? In: HELANDER, M. A. L., T. AND PRABHU, P. (ed.) Handbook of Human-Computer Interaction. Amsterdam: Elsevier Science.

HUTCHINSON, H., MACKAY, W., WESTERLUND, B., BEDERSON, B. B., DRUIN, A., PLAISANT, C., BEAUDOUIN-LAFON, M., CONVERSY, S., EVANS, H., HANSEN, H., ROUSSEL, N. & EIDERB CK, B. 2003. Technology probes: inspiring design for and with families. Proceedings of the SIGCHI conference on Human factors in computing systems. Ft. Lauderdale, Florida, USA: ACM.

KELLEY, J. F. 1983. An empirical methodology for writing user-friendly natural language computer applications. Proceedings of the SIGCHI conference on Human Factors in Computing Systems. Boston, Massachusetts, United States: ACM.

KLEMMER, S. R., HARTMANN, B. & TAKAYAMA, L. 2006. How bodies matter: five themes for interaction design. Proceedings of the 6th conference on Designing Interactive systems. University Park, PA, USA: ACM.

KLEMMER, S. R., NEWMAN, M. W., FARRELL, R., BILEZIKJIAN, M. & LANDAY, J. A. 2001. The designers' outpost: a tangible interface for collaborative web site. Proceedings of the 14th annual ACM symposium on User interface software and technology. Orlando, Florida: ACM.

LANDAY, J. A. 1996. SILK: sketching interfaces like krazy. Conference companion on Human factors in computing systems: common ground. Vancouver, British Columbia, Canada: ACM.

LANDAY, J. A. & MYERS, B. A. 1995. Interactive sketching for the early stages of user interface design. Proceedings of the SIGCHI conference on Human factors in computing systems. Denver, Colorado, United States: ACM Press/Addison-Wesley Publishing Co.

A. 참고문헌

A-3

LEE, J. C., AVRAHAMI, D., HUDSON, S. E., FORLIZZI, J., DIETZ, P. H. & LEIGH, D. 2004. The calder toolkit: wired and wireless components for rapidly prototyping interactive devices. Proceedings of the 5th conference on Designing interactive systems: processes, practices, methods, and techniques. Cambridge, MA, USA: ACM.

LICHTER, H., SCHNEIDER-HUFSCHMIDT, M. & ZULLIGHOVEN, H. 1993. Prototyping in industrial software projects-bridging the gap between theory and practice. Proceedings of the 15th international conference on Software Engineering. Baltimore, Maryland, United States: IEEE Computer Society Press.

LIM, Y.-K., STOLTERMAN, E. & TENENBERG, J. 2008. The anatomy of prototypes: Prototypes as filters, prototypes as manifestations of design ideas. ACM Trans. Comput.-Hum. Interact., 15, 1-27.

LIN, J., NEWMAN, M. W., HONG, J. I. & LANDAY, J. A. 2000. DENIM: finding a tighter fit between tools and practice for Web site design. Proceedings of the SIGCHI conference on Human factors in computing systems. The Hague, The Netherlands: ACM.

LIU, L. & KHOOSHABEH, P. 2003. Paper or interactive?: a study of prototyping techniques for ubiquitous computing environments. CHI '03 extended abstracts on Human factors in computing systems. Ft. Lauderdale, Florida, USA: ACM.

MACINTYRE, B., GANDY, M., DOW, S. & BOLTER, J. D. 2004. DART: a toolkit for rapid design exploration of augmented reality experiences. Proceedings of the 17th annual ACM symposium on User interface software and technology. Santa Fe, NM, USA: ACM.

MALONEY, J., BURD, L., KAFAI, Y., RUSK, N., SILVERMAN, B. & RESNICK, M. Year. Scratch: A Sneak Preview. In: Second International Conference on Creating, Connecting and Collaborating through Computing, 2004 Kyoto, Japan. IEEE, 104-109.

MAYER, R. E. 1979. A psychology of learning BASIC. Commun. ACM, 22, 589-593.

MAYER, R. E. 1981. The Psychology of How Novices Learn Computer Programming. ACM Comput. Surv., 13, 121-141.

MAYER, R. E., DYCK, J. L. & VILBERG, W. 1986. Learning to program and learning to think: what's the connection? Commun. ACM, 29, 605-610.

MULLER, M. J. 2001. Layered participatory analysis: new developments in the CARD technique. Proceedings of the SIGCHI conference on Human factors in computing systems. Seattle, Washington, United States: ACM.

NAM, T.-J. 2005. Sketch-based rapid prototyping platform for hardware-software integrated interactive products. CHI '05 extended abstracts on Human factors in computing systems. Portland, OR, USA: ACM.

A. 참고문헌

A-4

NEWMAN, M. W., LIN, J., HONG, J. I. & LANDAY, J. A. 2003. DENIM: an informal web site design tool inspired by observations of practice. Hum.-Comput. Interact., 18, 259-324.

OMG. 2009. Object Management Group [Online]. OMG. Available: http://omg.org/ [Accessed 2009].

PERING, C. 2002. Interaction design prototyping of communicator devices: towards meeting the hardware-software challenge. interactions, 9, 36-46.

REAS, C. & FRY, B. 2003. Processing: a learning environment for creating interactive Web graphics. ACM SIGGRAPH 2003 Web Graphics. San Diego, California: ACM.

REAS, C. & FRY, B. 2004. Processing.org: programming for artists and designers. ACM SIGGRAPH 2004 Web graphics. Los Angeles, California: ACM.

REAS, C. & FRY, B. 2005. Processing.org: a networked context for learning computer programming. ACM SIGGRAPH 2005 Web program. Los Angeles, California: ACM.

SCHÖN, D. A. 1991. The reflective practitioner : how professionals think in action, Aldershot, Ashgate.

SCHRAGE, M. 1996. Cultures of prototyping. Bringing design to software. ACM.

SPERRY, R. W. 1975. Left-Brain, Right-Brain. Saturday Review 2, 30-33.

SVANAES, D. & SELAND, G. 2004. Putting the users center stage: role playing and low-fi prototyping enable end users to design mobile systems. Proceedings of the SIGCHI conference on Human factors in computing systems. Vienna, Austria: ACM.

VELLEMAN. 2009. Velleman nv [Online]. Available: http://www.velleman.eu/distributor/home/ [Accessed 2009].

WIKIPEDIA. 2009a. 컴퓨터 프로그래밍 [Online]. Available: http://ko.wikipedia.org/wiki/%EC%BB%B4%ED%93%A8%ED%84%B0_%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D [Accessed 2009].

WIKIPEDIA. 2009b. Object (computer science) [Online]. Available: http://en.wikipedia.org/wiki/Object_(computer_science) [Accessed 2009].

B 부록

B.1. 감사의 글

B.2. 이력서

B. 부록

B. 부록

B.1. 감사의 글

항상 존경하는 남택진 교수님, 4 년에 걸친 석사 생활을 열정과 정성으로 돌봐 주셔서

감사합니다. 저에게 디자인 연구라는 새로운 즐거움을 주셨습니다. 임윤경 교수님, 바쁘신

와중에도 제 논문의 고비마다 천금 같은 조언을 해주셔서 늘 감사합니다. 남기영 교수님,

꼼꼼히 논문 지도를 해주셔서 감사합니다. 2005년 가구 디자인 박람회를 함께 하셨던 김명석

교수님, 항상 마음속에서 존경하는 정경원 교수님, 산업디자인 학과의 발전에 힘쓰시는

이건표 교수님, 저의 성 모사를 너그럽게 받아주시는 이우훈 교수님, 관심 가져주시고

응원해주시는 배상민 교수님, 수업을 들을 기회를 놓쳐서 아쉽게 생각 하는 석현정 교수님,

항상 따뜻한 말씀 해주시는 김현정 교수님 진심으로 감사합니다.

항상 어려운 부탁만 드려서 죄송하지만 언제나 너그럽게 저를 도와 주셨던 이재규 선생님과

어리바리한 저 때문에 골치 아프셨을 유동순 선생님께도 깊은 감사를 드립니다.

지난 1 년 반 동안 석사의 단맛과 쓴맛을 함께 본 창원이형, 함께 졸업하진 못했지만 함께

즐거웠던 진영이 누나, 배려심 깊은 우리 랩의 보배 윤정이, 부족한 저를 항상 챙겨주시고

많은 조언을 해주시는 박사 1 호 민정이 누나, 제 학위 논문의 바이블 선영이 누나, 박사

캔디의 달콤함에 빠져 있을 (박)영우 형, 논문의 영어 요약 작성에 도움을 준 마크, 랩에서 첫

학기를 폭풍처럼 보내고 계신 준구 형, 델프트에서 곧 돌아올 연구실의 기 주 문환이,

그리고 제가 처음 연구실에 들어 왔을 때 환영해주셨던 지동이형, 종훈이 형, 경이 누나,

정아 누나, (김)영우 형 모두 진심으로 감사합니다.

석사 08학번 보아 누나, 진하, 주현이, 지훈이 형, 성종이 형, 효정이 누나, 승아, 호원이, 다미

모두 함께 졸업하게 되어 기쁩니다. 그리고 저 보다 일찍 졸업한 석사 06학번 동기들 민식이,

성기, 보민이, 석태형, 은미 누나, 진희 누나 모두 감사합니다. 박사 공부하고 계신 승우 형,

진영이 형, 종민이 형에게도 감사 드립니다.

지난 10 년간 나의 친구였던 천재 일우, 룸메이트 민준이, 믿음직한 박지, 웅섭이, 세영이 이

친구들과 졸업의 기쁨을 함께 나누고 싶습니다. 또 논문 쓰는 동안 함께 고생해준 지희씨가

있어 졸업을 할 수 있었던 것 같습니다.

마지막으로 항상 큰 사랑 주시는 아버지, 어머니와 하나뿐인 형과 배려심 깊은 형수님,

그리고 사랑하는 조카 소율이 모두 고맙습니다.

B-1

B. 부록

B.2. 이력서

김주환 (金周煥, Kim, Ju-Whan)

충북 영동군 심천면 각계리 384번지

E-mail: [email protected]

학력 EDUCATION

2006.03 ~ 2010.02 한국과학기술원 산업디자인학과 공학석사 과정

Master of Science, Dept. of Industrial Design, KAIST

2002.03 ~ 2006.02 한국과학기술원 산업디자인학과 공학사 과정

Bachelor of Science, Dept. of Industrial Design, KAIST

2000.03 ~ 2002.02 충북과학고등학교

Graduation, Chungbuk Science High School

프로젝트 PROJECTS

2009. LG 전자 | 미래 TV 디자인의 기술 기반 혁신

LG Electronics | Technology Driven Design Innovation for the Future TV

2004. 삼성 전자 | 소프트웨어 인터페이스 표준화를 위한 정보 구조 생성 툴 개발

Samsung Electronics | Information Architecture Generation Tool for Software

Interface Standards.

학회 전시 CONFERENCE EXHIBITION

2009 CHI 2009 | 테네레; 에너지 친화적 행위를 도와주는 디자인

CHI ’09 Design Vignette | The Ténéré: Design for Supporting Energy Conservation Behaviors.

수상 경력 AWARD

2004 제6회 스틸 가구 디자인 공모전 금상 | 학생을 위한 교실 책걸상 디자인

2004 Steel Furniture Design Competition Gold Prize | Desk and Chair Designs for

Students in the Classroom

B-2

Documents

인터랙티브 제품 프로토타이핑을 위한 디자인 프로그래밍 툴킷 ...cidr.kaist.ac.kr/mediawiki/images/5/59/2010_ms_thesis... · 2019-12-18 · MID 20063121 김주환