62·공학교육

창의공학

Part‌1‌창의적‌종합설계‌경진대회‌우수작

현 동 민 국민대학교 컴퓨터공학부kkas6857@gmail.com

국민대학교 컴퓨터공학부관심분야: 데이터 마이닝, 인공지능

Art Box

(Digital drawing using spandex canvas)

1. 프로젝트 개요

우리가 현재 사는 이 세상은 IT 기술이 잘 발달하여

있는 시대이다. 별다른 도구 없이 IT기기만으로 스포츠

를 즐기고, 악기를 연주하고, 그림을 그린다. 이처럼 IT기

기를 통해 공간과 도구 등의 제약을 받지 않고 실제 예술

행위 환경을 대체 할 수 있다. 그러나 기존의 IT 기기들

은 딱딱한 터치스크린에만 의존하여, 실제의 예술활동을

하는 데에는 제한이 있다. 예를 들어, 브러쉬의 크기나

투명도를 변경하기 위해 메뉴를 매번 선택해야 하는 번거

로움이 있다.

이러한 제한을 해결하기 위해 Spandex Canvas라는

탄성을 가진 천과 깊이 인식 카메라인 Kinect, 결과를

보여주기 위한 Beam Projector를 사용한다. Spandex

Canvas의 눌러진 영역을 통해 Kinect가 깊이를 인식하

게 된다. 눌러진 깊이 정보를 통하여 기존의 스크린에 있

던 예술 도구들을 보다 직관적으로 접근할 수 있게 하고,

Canvas를 누르는 깊이의 강약과 면적을 통해 번거로운

도구기능의 선택을 최소화시킨다. 또한, 태블릿 PC나 스

마트폰의 작은 화면이 아닌, 실제 Canvas 크기의 스크

린을 통해, 사용자는 실제로 예술 행위를 하는듯한 느낌

을 받을 수 있다.

본 프로젝트에서는 수채화, 유화와 샌드아트를 할 수

있는 환경을 제공한다. 이 프로젝트를 담은 ‘Art Box’라

는 기구를 통해 사용자들은 IT기기의 장점과 실제 예술

행위를 하는 듯한 느낌을 동시에 누릴 수 있다. 추가로,

사용자가 작업한 작품이나 작업 중인 작품을 프린터로

출력할 수 있다.

2. ‘Art Box’ 프로젝트의 필요성

기존의 예술 행위를 할 수 있는 환경을 제공해 주는 프

로그램들이 많이 개발되어 왔다. 하지만 실제 Canvas보

다 크기가 작은 스크린 환경에서 예술 행위를 해야 하고,

표현하고자 하는 도구를 일일이 스크린에서 선택해야 하

는 불편함이 있으며, 색의 투명도, 브러시의 크기 등을

자유롭게 조절할 수 없어 제한적이며 비사실적이다.

그림에서 보는 바와 같이 브러쉬 크기선택, 투명도

등 기능 변경 시 매번 메뉴를 선택해야 하고, 기능의 값

(Brush Size, Transparency)이 단순화 되어 표현이 제

한적이다. 또한, 위의 프로그램들은 스마트폰, 태블릿 pc

등 작은 스크린에서 사용하기 때문에, 물리적 크기의 제

한이 있다. 따라서 사용자가 실제로 그림을 그리는 느낌

을 주는데 한계가 있다.

제22권 제1호·63

Art Box (Digital drawing using spandex canvas) - 국무총리상 수상작

‘Art Box’는 이러한 단점들을 보완하고, 80*60cm2의

실제 canvas크기로 예술 환경을 제공함으로써 사용자로

하여금 몰입도를 향상 시킨다. 또한, 사용자가 누르는 깊

이와 면적을 인식하여 사실적인 표현을 가능하게 하고,

기능들을 매번 선택해야 하는 번거로움을 해소시켜준다.

그리고 디지털이 아닌 아날로그로 수채화, 유화, 샌트

아트를 할 때 많은 물감들과 다양한 크기의 붓들, 자리

를 많이 차지하는 캔버스, 샌드아트를 위한 모래, 작지

않은 작업공간 등이 필요하다. 하지만 ‘Art Box’는 이 모

든 도구를 한정된 공간에서 자유자재로 사용 가능하다.

이처럼 ‘Art Box’는 실제로 예술 행위를 하는 듯한 사

실감을 제공하고, 디지털 예술행위의 간소함과 편리함을

함께 제공한다.

3. 개발 목표

깊이 정보를 이용하여 직관적인 기능 접근을 통해 메

뉴를 이용한 기능을 최소화한다.

기능의 값을 변경하기 위해 Spandex Canvas와

Kinect를 사용하여 깊이 정보를 실시간으로 인식하는

알고리즘을 구현한다.

누구나 쉽게 사용할 수 있는 사용자 중심의 직관적인

UI를 구성한다.

색 번짐과 붓의 질감, 모래알갱이 등을 사실적으로 표

현하는 알고리즘을 구현한다.

그림과 샌드아트를 하고 싶어하는 사람을 위해 시간,

공간, 비용의 제약에 구애 받지 않는 하드웨어와 프로그

램을 개발 한다.

4. 개발 내용

가. System configuration

기존의 터치스크린은 이차원 좌표 정보만을 사용하기

때문에 표현의 한계가 있다. 이를 해결하기 위해 본 프로

젝트에서는 기존의 이차원 좌표 정보에 깊이정보를 추가

하여, 그림을 그릴 때 크기와 농도를 직관적으로 변경할

수 있도록 하였다.

이를 위해 하드웨어로는 탄성을 가진 천인 Spandex

canvas, 깊이카메라인 Kinect, Beam projector를 사

용한다. 사용자가 Spandex canvas를 누르면 Kinect

가 깊이를 인식하게 된다. 인식한 깊이를 본 프로젝트

의 DMTD(Detecting Multi-Touch from Depth) 알고

리즘이 좌표와 눌러진 깊이 값을 추출한다. 추출한 2차

원 정보와 깊이정보를 사용하여 Drawing module이 그

림을 그린 후, 결과 화면을 beam projector를 사용하여

spandex canvas에 다시 투사하게 된다. 결과적으로 사

용자는 Spandex canvas에 그림을 그린다고 생각할 수

있다.

소프트웨어는 윈도우 7, 8 운영체제를 기반으로 개발되

었다. 소프트웨어를 개발하는데 사용된 툴은 unity3D라

는 게임 개발 툴이다. 이 툴 안에서 C#언어를 사용하여

기본적인 소프트웨어의 골격을 개발하였다. 그 외에 깊이

그림 1. ArtRAge, SketchBook, sandArt 프로그램의 그림 옵션 메뉴

그림 2. System configuration

64·공학교육

Part‌1‌창의적‌종합설계‌경진대회‌우수작

창의공학

와 좌표를 인식하는 알고리즘은 C++언어로, 그림을 그

리는 알고리즘은 C언어로 개발되었다.

나. H/W

목재 박스 안에는 컴퓨터 본체, Kinect(카메라), Beam

Projetor로 구성되어 있으며, Kinect가 인식하는 각도와

거리, Beam Projector의 투사 거리와 각도 등을 고려하

여 바닥의 크기(840*640mm2)와 부품들의 배치를 정하

였다. 또한 카메라가 정 중앙에 있는 이유는 카메라와 빔

프로젝터의 calibration을 용이하게 만들기 위함이다. 카

메라 위치를 고정시키고 Beam projector를 움직이는 게

calibration이 쉽기 때문이다.

하드웨어의 전체적인 외관이며, Beam Projector의 투

사거리(1m에서 77inch투사), Kinect의 최소 인식 거리

(80cm) 등을 고려하여, 같이 840*640*1040(mm3) 크

기의 목재 박스를 설계하였다. 박스 윗면에는 목재 틀에

Spandex Canvas를 둘러싸서 고정시킨다.

문고리를 이용하여 박스를 열어 내부를 볼 수 있도록

하여 Beam Projector와 키넥트의 calibration을 쉽게 할

수 있도록 하였다. 또한 박스 안에 필요한 모든 기구들을

배치할 수 있도록 하였다. 받침대 위에 Kinect와 Beam

Projector를 고정시킬 수 있으며, 환풍기를 설치하여 Beam

Projector가 발생시키는 열을 식히도록 구성하였다.

다. S/W

본 프로젝트에서는 깊이를 이용하여 붓터치의 농도

와 크기를 직관적으로 변경하는 것을 목표로 한다. 즉,

Spandex canvas를 깊게 눌렀을 때 진한 농도와 넓은

면적, 얕게 눌렀을 때 옅은 농도와 좁은 면적을 표현하게

된다. 이를 위해 DMTD(Detecting Multi-Touch from

그림 3. 하드웨어 배치 그림 4. 하드웨어 배치

그림 5. 하드웨어 전체구성 그림 6. 하드웨어 전체구성 그림 7. 완성된 하드웨어 그림 8. 완성된 하드웨어

제22권 제1호·65

Art Box (Digital drawing using spandex canvas) - 국무총리상 수상작

Depth) 알고리즘을 자체 개발하였다. 이 알고리즘은 깊

이 카메라인 Kinect로부터 수집한 깊이 데이터를 바탕으

로 Spandex canvas가 사용자에 의해 눌려진 위치좌표

와 어느정도로 눌려졌는지 깊이 정보를 추출한다. 두손

을 모두 사용하여 그림을 그리는 것을 목표로 했기 때문

에 최대 10손가락 지점을 인식할 수 있다.

DMTD 알고리즘은 깊이 카메라인 Kinect에서 얻어

진 깊이 데이터를 입력으로 사용한다. 출력은 사용자가

Spandex canvas를 누른 지점(x,y좌표)와 깊이 정보이

다. 최대 10개의 지점을 인식할 수 있도록 개발되었다.

구체적인 동작 방식은 다음과 같다. 먼저 깊이 데이터

가 있는 배열과 마킹에 필요한 배열이 있다.(두 배열은 행

과 열이 같다.) N x N 크기의 정사각 행렬을 깊이 데이터

배열에 적용시켜 Sliding window 기법을 사용한다. 정

사각 행렬이 이동할 때 마다 행렬안에 최고값이 있는 지

점을 마킹배열에 마킹한다. 정사각 행렬이 전부 지나간

후 마킹배열에서 N x N 번 마킹된 지점을 터치 포인트로

인식한다. 그리고 해당 지점의 깊이 정보를 깊이 데이터

배열에서 가져온다.

현재 개발된 알고리즘은 최대 10개의 포인트를 인식할

수 있다. 하지만 10개의 점을 모두 인식하게 되면 그려지

는 속도가 느려지게 되며, 인식 지점의 에러 발생률이 높

아져 현재 3개의 포인트만 사용 가능하게 제한을 걸어 두

었다. 추가적인 알고리즘 개선이 가능하다면 터치 포인트

검출 속도를 높여서 전체적인 성능 향상을 목표로 할 것

이다.

5. 시연동영상

ht t p s://w w w.yout ub e.c om/wat ch?v=

CXUsh4ZNCxY

6. 수상내용

‘창의적 종합설계 경진대회’ 대상

‘2014 공학교육페스티벌’ 국무총리상

그림 9. 한손가락으로 눌려진 깊이 정보 그림 10. 손가락 다섯 개의 깊이 데이터 그림 11. 깊이에 따른 붓터치의 변화

그림 12. DMTD 동작 방식