A study on Interactive-type Exhibition Using Fractal Images

http://dx.doi.org/10.7236/JIIBC.2015.15.5.163

JIIBC 2015-5-20

프랙탈 이미지를 활용한 쌍방향 실감형 전시에 관한 연구

A study on Interactive-type Exhibition Using Fractal Images

임미정

, 조형제

, 최규석

Mi-Jeong Lim

, Hyong-Je Cho

, Gyoo-Seok Choi

요 약 최근의 전시형태는 기존의 관람위주 단방향 전시형태에서 전시물을 직접 체험하면서 다양한 정보를 얻을 수 있는 쌍방향 실감형 전시형태로 패러다임이 바뀌고 있다. 이러한 인터랙티브 형태의 전시에서는 보통 시공간에 빛, 소 리, 압력 등을 활용하여 전시물에 대한 휴먼인터페이스를 구현한다. 본 논문은 다양한 형태의 체험형 전시에 대해서 알 아 본 후 프랙탈로 생성된 이미지를 이미지 필터링 기법을 통하여 여러 가지 형태로 변환되는 방법에 대한 연구로, 관 람자가 프랙탈 이미지의 어느 위치에서 마우스를 클릭하느냐에 따라서 수채화 효과, 판화 효과, 스케치 효과, 팝아트 효과 등의 다양한 이미지 변형이 일어나는 것을 체험할 수 있다. 이러한 연구결과는 향후 전시회, 제품 프로모션, 미디 어 아트 디자인 등에 활용될 수 있을 것으로 기대된다.

Abstract Recent exhibition's paradigm is changing from the existing unidirectional oriented exhibition form to a form of interactive hands-on exhibits that viewers can get and realistically feel a variety of information. Hands-on exhibit embodies the human interface by utilizing light, sound, pressure, etc. in time and space. In this paper, we have studied the creation of fractal image by the Mandelbrot technique and proposed the interaction method for it to be converted into a variety of forms. By using the proposed method, a variety of image transformation such as printmaking effect, sketch effect, Pop Art effect can be performed, according to clicking a certain fraction on the created fractal image screen by a user mouse. Interactive image generated in this study are expected to be used for trade shows, promotional products, media art design.

Key Words : Interactive, Participatory exhibit, Fractal images, Images filtering

*정회원, 유니디자인경영연구소(교신저자)

**정회원, 동국대학교 영상대학원 멀티미디어학과

***정회원, 청운대학교 컴퓨터학과접수일자 2015년 9월 8일, 수정완료 2015년 10월 7일 게재확정일자 2015년 10월 9일

Received: 8 September, 2015 / Revised: 7 October, 2015 / Accepted: 9 October, 2015

*Corresponding Author: [email protected] Uni Design Management Institute, Korea

Ⅰ. 서 론

과학기술이 발전함에 따라 기존의 관람위주의 단방향 전시형태에서 관람자와 전시물간의 인터랙션을 이용한 쌍방향 체험형 전시가 새로운 전시형태로 영역을 넓혀 가고 있는 추세이다.

전시의 구성 요소는 전시물(object), 공간(Space), 관 람객(person), 시간(time) 등이다. 체험형 전시는 수동적

인 전시에서 벗어나 관람객 개인이 전시공간에 들어서면

서부터 여러 가지 기술과 어우러져 스스로 전시물을 직

접 만져보고 조작해 보는 체험을 하면서 전시 주제에 대

하여 인식하고 이해하며 직접적이고 능동적으로 할 수

있도록 연출하는 전시방법으로 이러한 체험형 전시를 인

터랙티브(Interactive)전시라고 부른다. 이러한 전시형태

는 기술과 맞물려 공간의 한계를 벗어나고, 관람객이 어

떠한 행위를 하느냐에 따라 표현하고자 하는 전시물의

그림 1. 3D 텍스쳐 페인팅 Fig. 1. 3D Texture Painting

기 술 내 용 특 징

인식 기술

인간의 특성을 생리학적 특징 또는 행동적 특성을 기반으로 디지털 정보화 하여 인증하거나 인식하 는 자동화된 방법

지문인식, 홍체인식, 음성인식, DNA인식

사용자의 신원을 확인하 여 개개인이 원하는 전시 정보를 전달하거나 저장 하는데 사용되는 기술.

표 2. 전시매체에 응용되고 있는 기술

Table 2. Technology that is applied to the display medium

센싱 기술

사용자나 상황을 감지하 는 기술.

반도체센싱, 광적외선 센 싱, 비젼센싱, 나노센싱, 전자센싱

체험전시에서 가장 중요 한 기술이며 이 기술을 이 용하여 관람자의 몸동작 이나 상황을 인식.

디스플레이 기술

정보를 가시화시켜 사용 자에게 보여줄 수 있는 표시장치로 소형화면에 서 대형스크린까지 매우 다양화되고 있음.

LCD, LED, PDP, 프로젝션, 홀로그램, 전자종이, 전자패드.

전시매체 정보를 시각화 하는 기술이며 전시 공간 의 디자인과 직결됨. 특히 관람자의 체험전시 경험 이나 전시 매체의 효율을 극대화함.

저장 기술

정보 저장을 위한 기술로 대용량의 데이터를 소형 기록 매체에 휴대하여 언 제 어디서든 정보를 꺼내 어 사용할 수 있는 기술.

전시정보의 저장기술은 관람자에게 대용량의 정 보교류를 가능케 하며 모 빌리티를 증가시켜주는 역할을 함.

엑세스 기술

연결된 여러 종류의 장치 간에 엑세스 하는 기술.

유무선 네트워크, 디바이스엑세스, 제어네트워크, 브로드밴드.

전시매체와 관람자, 전시 공간을 연결해주는 중요 한 인프라로써 시공간을 초월한 전시를 가능케 함.

모바일 기술

휴대하기 편하여 어디든 지 가지고 다닐 수 있는 컴퓨터

휴대폰, 태블릿 PDA, 디카 등.

모바일 기기를 통하여 보 다 인터랙티브한 체험이 언제 어디서든 가능하며 정보의 휴대성을 높여줌.

형태도 달라진다.

관람자는 디지털 기술을 기반으로 하여 손, 발, 또는 온몸을 이용한 입력정보를 가지고 빛, 소리, 압력, 위치 값들을 이용하여 사용자가 행하는 액션에 반응하여 실시 간으로 다르게 나타나는 결과(이벤트) 값을 경험할 수 있 다. 관람자의 오감을 자극하여, 물리적인 환경뿐만 아니 라 심리적인 요소의 변화까지 느끼게 할 수 있다. 이러한 체험형 전시는 예술적인 요소, 유희적인 요소, 교육적인 요소, 상업적인 요소 등을 포함하고 있다.

최근에는 미디어 아트전 외에도 박람회의 기업홍보관, 박물관, 교육장 뿐만 아니라 인터랙티브 스트리트 등 도 시·환경 디자인에도 인터랙션의 영역이 확장되고 있다.

인터랙션을 이용한 전시 프로세스는 표 1과 같다.

구분 항 목 내 용

기획

전시콘텐츠 목적

예술적 상업적, 광고적 교육적, 계몽적 유희적, 감상적 체험 방식

분석.설계

빛, 소리, 압력, 온도, 위치 등 입출력 구조 센서 공간 및 기술 설계 공간, 전시물, 체험자 간의

액션과 이벤트

구현 전시물의 기술

구현

공간, 전시물, 체험자 간의 인터랙션

자료처리 휘발성

비휘발성

1회성 또는 DB축적을 통한 자료 재사용 표 1. 인터랙티브 전시 프로세스

Table 1. Process of Interactive-type Exhibition

체험형 전시에서는 관람자가 전시공간에 들어설 때 장비가 인식할 수 있는 기술부터 설정해 놓은 반응을 거 쳐 디스플레이에 나타나기 까지 여러 가지 기술을 필요 로 한다. 인터랙티브형 전시매체에 응용되고 있는 기술 은 표 2와 같다.

Ⅱ. 체험형 전시 사례

그림 1은 제품 프로모션을 위해 상업적으로 사용된 체 험형 전시 사례이다. 중국 상하이에서 열린 모터쇼

‘AUTO SHANGHAI 2015’에서 ‘스파비아 R5’를 홍보하 는 이벤트로, 적외선 트레킹을 이용한 3D 텍스쳐 페인팅을 하 는 모습이다. 전시 관 람자가 모형 스프레 이를 들고 레버를 당 겨 분사하는 동작을 하면 영상 안에 있는 3D 모형 자동차에 원하는 색상을 칠하게 된다.

모형 스프레이의 레버는 메인 서버와 블루투스로 연

동되어 레버를 당기는 액션의 정보 값을 전달하고 받을

수 있게 된다.

그림 2는 2014년 서울숲 갤러리아포레 전시장에서 ‘체 험형 미디어아트展 <빛의 정원>’에서 전시한 모리와키 히로유키 작가의 ‘Lake Awareness’ 작품이다.

그림 2. 모리와키 히로유키‘Lake Awareness’

Fig. 2. Hiroyuki Moriwaki‘Lake Awareness’

작은 삼각형의 회로보드 중심에 반응형 조명이 있는, 각각의 얇은 기판 수천 개를 이어 붙여 중앙이 뚫린 반구 형의 조형물을 만들고, 천정에 매달아 설치하였다. 관람 자가 기판 가까이에 손을 대면, 조명의 색상이 변화하여 관람자가 조형물의 내· 외부로 움직이며 조명을 변화시 킬 수 있는 작품이다.

그림 3은 광주광역시 농업기술센터 전시관에 설치되 어 있는 인포메이션 키오스크(information kiosk)의 디지 털 방명록이다. 관람자가 사진을 찍고 남기고 싶은 내용 을 입력하면 화면에 관람자가 남긴 방명록과 사진이 나 타난다. 일정한 시간이 지나면 다시 안내 화면으로 돌아 간다.

그림 3. 디지털 방명록

Fig. 3. Digital Visitor's Book

Ⅲ. 연구 내용

1. 만델브로 프랙탈 이미지 생성

수학의 단순한 개념에서 출발하여 공학자와 건축가 및 많은 예술가들에게 영감을 준 브누아 만델브로 (Benoit Mandelbrot)의 프랙탈(fractal) 이론은 어느 한

부분을 확대하면 전체와 닮은 형태가 무한히 반복되어 있는 모양을 의미한다.

그림 4의 만델브로 집합은 복소수 평면에서 점화식 z=z

+c(z=x+yi, c=c1+c2i)를 기본 알고리즘으로 한다. z의 초기값을 z=a+bi로 하여 점화식을 계속 반복하여 계산했 을 때 z=z

+c를 발산시키지 않는 복소수 c들의 모임이다.

최대 반복횟수(iteration count)를 정하고 그 이전에 발산 할 때는 그때까지의 반복회수에 상응하는 컬러를 지정하 면 다양한 형태의 컬러이미지를 생성할 수 있다.

(a) w idth= 3 (b) w idth= 0.2

(c) w idth= 0.00002 (d) w idth= 0.00000002 그림 4. 만델브로 프랙탈 이미지 생성

Fig. 4. Generation of Mandelbrot Fractal Images

2. 이미지 필터링

그림 5는 만델브로 프랙탈로 생성된 이미지를 필터링 을 통하여 여러 가지 효과로 변환한 것이다. 그림 5(b)는 (a)의 샘플이미지를 Open CV 프로그램에서 제공하는 모폴로지 변환(morphological transfor- mation)을 통하 여 수채화 같은 효과를 적용한 것이다.

kernel = cvCreateStructuringElementEx(2,2,1,1,CV_SHAPE_RECT);

in = cvLoadImage("sample.jpg");

out = cvCreateImage(cvGetSize(in),in->depth,in->nChannels);

temp = cvCreateImage(cvGetSize(in),in->depth,in->nChannels);

cvMorphologyEx(in,out,temp,kernel,CV_MOP_CLOSE,8);

(a) sam ple (b) 수 채 화 효 과

(c) 흑 백 효 과 (d) 판 화 효 과

(e) 스 케 치 효 과 (f) 팝 아 트 효 과

그림 5. 이미지 필터링을 통한 효과 Fig. 5. Effects of Image filtering

그림 5(c)는 (d)와 같이 판화 효과를 내기 위해 캐니 엣지 검출을 하기 전에 먼저 RGB이미지를 그레이 이미 지로 변환한 것이다.

그림 5(d)는 캐니 엣지 검출기(Canny edge detector) 를 통하여 이미지에서 x방향과 y방향으로의 1차 미분을 구하여 각각의 엣지 후보 픽셀들을 외곽선(contour) 형태 로 모으는 연산을 수행한 결과이다. 이러한 외곽선은 해 당 픽셀에 이중 임계값(hysteresis threshold)을 적용하여 구할 수 있다.

img = cvLoadImage("sample.jpg");

gray = cvCreateImage(cvGetSize(img),IPL_DEPTH_8U,1);

canny = cvCreateImage(cvGetSize(img),IPL_DEPTH_8U,1);

cvCvtColor(img,gray, CV_BGR2GRAY);

cvCanny(gray, canny, 100, 150, 3);

그림 5(e)는 스케치 효과를 내기 위해서 샘플이미지를 먼저 흑백으로 변환하고 스무딩(블러링) 연산을 적용한 결과이다. 스무딩 기법은 주로 영상의 잡음(noise) 또는 손상을 완화시키기 위해 사용하는데, 함수의 인자에 의

해 연산 방법이 결정된다.

그림 5(e)에서 매개변수의 세 번째 인자인 smooth- type을 단순 블러인 CV_BLUR로 하여 결과 영상의 픽셀 값이 입력 영상에서 주변 픽셀들의 평균값으로 결정된 다.

img = cvLoadImage( "sample.jpg");

img1 = cvCreateImage( cvSize( img->width,img->height ), img->depth, img->nChannels);

img2 = cvCreateImage( cvSize( img->width,img->height ), img->depth, img->nChannels);

dst = cvCreateImage( cvSize( img->width,img->height ), img->depth, img->nChannels);

gray= cvCreateImage(cvGetSize(img), img->depth, 1);

cvNot(img, img1);

cvSmooth( img1, img2, CV_BLUR, 25, 25, 0, 0);

생략

cvCvtColor(dst, gray, CV_BGR2GRAY);

그림 5(f)는 팝아트 효과를 내기 위해 샘플 이미지에 블러와 캐니앳지 검출을 적용한 결과이다.

threshold = 5;

src = imread("sample.jpg");

cvtColor(src, gray, CV_BGR2GRAY);

blur(gray, gray, Size(3, 3));

Canny(gray, edge, threshold, threshold * 2, 5, 3);

dst.create(src.size(), src.type());

dst = Scalar::all(128);

src.copyTo(dst, edge);

3. 인터랙션 방법

관람자의 몰입도를 높이고 인테랙티브형 전시를 구현 하기 위해 본 연구에서 제안하는 방법 및 컴퓨터를 통한 실행 결과는 다음과 같다.

관람자는 디스플레이에 나타난 이미지에서 그림 6과

같이 화면의 어느 영역을 클릭하게 되면 화면 전체가 이

미지 필터링이 일어나 다른 효과의 이미지로 바뀌게 된

다. 관람자가 모니터의 1 영역에서 마우스를 클릭하면 수

채화 효과, 2 영역을 클릭하면 스케치 효과, 3 영역을 클

릭하면 판화 효과, 4 영역을 클릭하면 팝아트 효과로 변

한다. 각 영역 안에서도 어느 지점을 클릭하느냐에 따라

해당 효과에서도 디테일의 정도가 다르게 나타난다. 예

를 들면 1 영역에서 (가) 지점을 클릭하면 그림 6(a)처럼 수채화 형태의 이미지로 변환되는데 픽셀의 크기가 상대 적으로 크게 나타나고, (나) 지점을 클릭하면 그림 6(b)처 럼 수채화형태 이미지의 디테일 정도가 더욱 정교하여 샘플이미지에 가깝게 된다.

(a) iterations = 10 (b) iterations = 4 그림 6. 인터랙션을 통한 이미지 변환 효과

Fig. 6. Image Conversion effects through interactions

Ⅳ. 결 론

현재 프랙탈 이미지는 다양함과 정교함, 독특한 패턴 의 성질을 이용하여 패션, 건축, 인테리어, 주얼리 디자인 등 여러 분야의 산업디자인에 응용되고 있다.

본 논문에서는 다양한 형태의 체험형 전시에 대해서 알아보고, 이러한 체험형 전시를 실현하는 하나의 방법 으로서 만델브로트 프랙탈이론을 이용하여 프랙탈 이미 지를 생성하고 생성된 프랙탈 이미지를 이미지 필터링 기법을 이용하여 다양한 순수 회화의 이미지 효과가 나 타나도록 하였다. 그 결과를 이용하여 (x, y)의 좌표 값에 따라서도 파라미터를 사용하여 이미지가 다 조금씩 달라 져 관람자가 지루하지 않도록 하고, 인터랙션 방법을 통 하여 여러 가지 형태로 변환되는 방법에 대해서 연구하 였다.

이러한 연구를 활용하면 전시회에서 컴퓨터 프로그래 밍을 통하여 관람자가 원하는 색깔과 패턴이 다양하게 나올 수 있도록 프랙탈 이미지를 생성하고, 생성된 이미 지를 가지고 인터랙션을 통하여 회화적인 이미지의 효 과를 즐길 수 있다. 이렇게 생성된 여러 가지 효과의 이 미지들은 패브릭의 패턴 디자인, 주얼리 디자인, 인테리 어 디자인 등 여러 분야의 디자이너들에게 새로운 소재 로 활용할 수 있으며, 다양하게 산업디자인에 활용될 것 으로 기대된다.

향후 연구과제로서 인터랙션의 편의성을 증대시키기 위해 관람자의 손을 입력장치로 하여 마우스를 클릭하는 대신 관람자의 손을 자동으로 인식하여 손이 가리키는 위치 점에 따라 각각 다르게 인터랙션 이미지 효과가 나 타나도록 구현할 예정이다.

References

[1] Kim Mi Yun, Kim Jung Hyun, Choi Jin Won

“Analyzing the case studies of interactive exhibition for space design”, The Journal of the Architectural Institute of Korea , Vol 231, 2008 [2] Kim Hyeong Jun, "A study on the museums that

utilize a method using experienceable exhibits", Gachon University Master's Thesis, 2013 [3] Gang Sung Nam, “Media and interactive, AUTO

SHANGHAI 2015”, 2015

http://blog.naver.com/kkang8946/220368068152 [4] "AliceOn" Website, 2014

http://aliceon.tistory.com/2317

[5] Participatory media art exhibition "Light Garden" Blog, 2014

http://blog.naver.com/light_garden?Redirect=Log

&logNo=40201628198

[6] Itech co, “Meet a large TV with digital guest book”, 2015

http://blog.naver.com/itech_co/220302664700 [7] Lim Mi Jeong, Cho Hyong Je, “A study on

generation and types of mandelbrot fractal

images”, The Journal of Institute of Internet,

Broadcasting and Communication, Vol. 15, No. 1,

2015

[8] Gary Rost Bradski, Adrian Kaehler, (Hwang Sun Kyu, trans.) “Learning OpenCV”, O'REILLY, Hanbit Media, 2013

[9] Kim Jin Mo, Cho Hyung Je, "Real-time Rendering of Realistic Grasses Using Fractal and Shader Instancing," Journal of Korea Multimedia Society, Vol. 13, 2010

[10] "Real Story" Blog, 2014 http://vision0814.tistory.com/118

저자 소개

임 미 정(정회원)

∙2004년 : 동국대 영상대학원 멀티미디 어학과 석사

∙2012년 : 동국대 영상대학원 멀티미디 어학과 박사 수료

∙2004년 ～ 현재 : 유니디자인경영연구 소 소장

∙2011년 ～ 현재 : (사)한국디자인기업협회인천지회 사무국장

∙2010년 ～ 현재 : (사)한국인터넷방송통신학회 이사

<관심분야 : 디지털콘텐츠, 디지털디자인>

조 형 제(정회원)

∙1973년 : 부산대학교 전자공학과(학사)

∙1975년 : 한국과학기술원 전기․전자공 학과(공학석사)

∙1986년 : 한국과학기술원 전기․전자공 학과(공학박사)

∙1986년 ～ 2015년 : 동국대학교 멀티미 디어학과 교수

<관심분야 : 컴퓨터 그래픽스, 게임공학, 디지털사운드처리, 컴퓨터 비전>

최 규 석(종신회원)

∙제9권 6호 참조

∙1991년 ～ 1996년 : (주)SK텔레콤 중 앙연구원 책임연구원

∙1997년 ～ 현재 : 청운대학교 컴퓨터학 과 교수

<관심분야 : 인공지능, ITS, 이동컴퓨팅>