시스템 자체에 여러기술들이 한꺼번에 사용되어있어 정확하게 정의하기에 좀 복잡하기는 하지만 한마디로 사용자가 마음대로 조종할 수 있는 3D 입체영상이라고 생각하면 쉬울 것이다. 올해 초에 아바타라는 영화로 인해 3D 입체 영상이 엄청난 이슈가 되고 있고 현재도 많은 컨텐츠들이 3D 입체로 제작되고 있다.

이 솔루션은 이런 입체영상에서 한단계 더 나아가 사용자가 직접 참여해서 즐길 수 있는 인터랙티브한 요소를 첨가한 플랫폼이다.

Circle display

반경 3m 지름 약 6m 를 기준으로 120도 정도의 곡률을 가진 원형 스크린으로 구성되어있으며 이로 인해 일반적인 평면 스크린보다 사용자에게 상당한 몰입감을 주게 된다. 원래는 360도 형태의 완전한 원형스크린으로 구성하려 했지만 공간상의 제약으로 인해 일부분만 구현하게 되었다. 사람눈이 한번에 볼수 있는 각도가 120도 내외 인점에서 어찌 보면 부담스럽지 않은 곡률이라고 판단이 든다.

3D Stereoscopic movie

현재 가정용 3D TV 에서 사용하는 shutter glass 방식이 아닌 원편광방식으로 구현되었다. 일반적으로 극장에서 구현되는 방식과 같은것으로 현재의 비싼 3d 안경의 가격이 내려가지 않는 이상은 편광방식이 고수될 것 같다. 가장 이상적인것은 무안경식 3D 화면을 만드는 것이지만 현재까진 기술적인 한계로 인해 한동안은 답답한 안경을 쓰고 입체 컨텐츠를 즐겨야할 것이다.

Realtime Motion Controller

이전 프로젝트에서 사용했던 TOF(time of flight) 카메라인 Mesa 제품을 사용하여 사용자의 full body gesture 를 잡아낼 수 있는 동작 인식 시스템이다. 원리나 작동방식은 MS Kinect 와 흡사하다. 3d 카메라를 통해 촬영된 영상을 통해 사람 신체 관절을 인식하여 사용자의 움짐임을 파악하여 컨텐츠를 컨트롤 할 수 있다. 사용자가 카메라 앞에서 제자릴 걸음을 하게 되면 실제로 걷는 것과 같이 컨텐츠가 앞으로 진행하게 되고 몸을 좌우로 움직이게 되면 해당 방향으로 화면시점을 변경시킬 수 있다. 또한 양팔을 앞으로 뻗게 되면 공중을 날아올라 bird view 를 체험 할 수 있다.

Unity 3D

모든 컨텐츠 구성이 3d 형태로 일반적인 2D 개발 툴로는 구현에 한계가 있다. 이번 프로젝트에  본격적으로 Unity 를 개발툴로 사용하여 3d 비쥬얼을 제작하였다. 개발생산성은 기존에 사용했던 Adobe Flash 와 비교했을때 오히려 더 뛰어난것 같다. 다만 구현하는 범위가 3d로 확장된 만큼 훨씬 더 비쥬얼 표현이 자유로워졌기 때문에 발생하는 개발 범위 제한이 고민거리였다. 이 툴로 인해 비교적 하드웨어의 성능의 제약을 덜 받는 오프라인 인터랙티브 컨텐츠 제작에 상당한 힘을 실어줄 수 있을 것 같다.

2010.07.08~07.11 4D Art Performance 고궁박물관

2010.10.12~10.14  제 11회 세계 지식 포럼

Related articles

문화재와 첨단의 만남…”3D·4D로 더 생생하게”

신체 컨트롤러의 진화, 3D와 만나다

하지만 위 기능을 위해서는 손의 제스처를 인지하고 처리할 수 있는  별도의 처리가 필요했는데 이를 위해 카메라 영상을 통해 공간좌표까지 얻어올 수 있는 3D  Depth camera 인 TOF(time of flight) camera 를 사용하여 이미지 처리를 하였다.

FOTONIC-B70 by Fotonic

SwissRanger 4000 by MESA Imaging

PMD CamCube by PMDTechnologies

.

.

.

.

.

.

from Wikidipedia

이 장비는 고유의 illumination wave 를 송출하여 반사되어 나오는 파장의 시간을 계산하여 정확하게 거리를 측정할 수 있다. 고유의 주파수를 사용하기 때문에 할로겐 조명과 같은 외부광원의 영향이 거의  없는 것과 빠른 FPS  지원이  장점이다. 하지만 상대적으로 2D camera 에 비해 상당히 고가인점이 단점으로 작용한다. 이런 TOF camera 로 부터 depth 정보가 담겨져 있는 영상을 이용해 CV(computer vision) 처리를 하여 특정 제스쳐를 검출하거나 추적할 수 있다.

이 솔루션이 검출할 수 있는 제스쳐는 기본적으로 주먹(Rock),가위(Sissors),보(Paper) 의 형태를 기본으로 한다. 손을 이용하는 제스쳐일 경우 이 세가지 형태의 제스쳐 사인이 가장 사용자가 이용하기에 편하고 인지하기 쉽기 때문에 모든 제스쳐의 구성은 이 세가지를 기반으로 설계되었다.

처음부터 이전 버전의 문제점에 대해 파악하고 같은 문제점을 일으키지 않기 위해 다각도로 고민하고 노력했지만 어느 프로젝트와 마찬가지로 결과물 그자체로서는 참 아쉬움이 많이 남았다. 아직까지 사용자가 제스쳐로 무언가를 조절한다는 생각이 조성되지 않았을 뿐더러 아무리 센서 작동이 정밀하더라도 컴퓨터는 사람만큼 인지능력이 뛰어나진 않다. 누구나 다 아는 직관적인 제스쳐 하나를 구현할려고 하더라도 절대 그것이 생각만큼 제작이 쉽지 않을 뿐더러 단지 개발자의 룰에 갇혀 간과하는 점이 무척 많다는 점이다.

사용자를 고려해 쓰기쉽게 제작하면 이 솔루션의 장점인 다양한 제스쳐를 보여줄수 없고, 그렇다고 다양한 제스쳐를 적용할려고 하니 사용자는 무엇을 어떻게 작동시켜야 할 지 모르는 상황이 반복되는 것이다.

참 어려운 문제였다. 어쩌면 영원히 풀 수 없는 문제일 수도라는 생각도 들었다. 단지 재미있고 신기한것은 기술이 발전하면 만들 수가 있다. 하지만 그것이 돈이 될 수 있는냐는 질문에는 항상 머뭇거리게 만든다.

3d sensing hologram installation from vkimone on Vimeo.

2009.3 ~ 2009.7

R&D Project – 3D Sensing Hologram Installation  (J4 ver 2.0)

Project manager : 김기정,김정헌
Planning : 김정헌,양희수,김기정,김정빈
Visual / UI Design : 김기정,김정빈
Interaction Design : 김기정,김정빈
Product Design : 박진이
3D Modeling : 신백호

view detail

거의 4개월동안 정말 미친듯이 만들고 부수기를 반복하고 수많은 시행착오를 거쳐 만들어진 Swing H…결국은 단지 R&D 성과물로서 의미를 부여할 수 밖에는 없었다. 상업적인 용도로는 이용하지 못했고 그럴만한 하드웨어및 소프트웨어 기술적인 완성도가 부족했었다. 그래도 나름대로 첫 R&D 성과물로서 그당시에는 사람들의 눈을 한번쯤은 돌아보게 만들만한 것이였으니 개인적으로 많이 의미를 둘 수 있었다.

위 타이틀에서도 알 수 있듯이 이 솔루션은 hologram 과 interaction 을 결합한 매장설치물로 만들어진 것이였다. 그 당시 hologram 이라는 디스플레이는 많이 있었다. 또한, reflection 원리의 hologram 은 그리 어려운 기술은 아니였고  단순히 2D 동영상 플레이어로만 작동되는 것이 대부분의 결과물이였다. 반면 Swing H 는 hologram 의 특징을 최대한 살릴 수 있는 3D 컨텐츠로, 그것을 또한 사용자가 원하는 대로 제어할 수 있게 User interaction 을 추가한 형태로 제작이 되었다.

엄밀히 말하자면 완벽한 hologram 이 아니기 때문에 느껴지는 이질감을 최대한 없애기 위해  컨텐츠 뿐만아니라 여러가지 하드웨어적인 설정이 골치아팠다. 기존에 익숙한 마우스와 키보드 인터페이스에서 벗어나 제스쳐를 이용한다는 점도 미쳐 생각치도 못했던 큰 벽으로 다가왔었다. 비록 마우스 형태를 대신한 반지형태의 인터페이스 였지만 그걸 사용하는 사용자는 그 차이를 전혀 인지하지 못했고, 당황하는 경우가 적지 않아 최대한 간단한 형태로 인터랙션 모델을 수정하는걸로 개선하였었다.

위 순서는 개략적인 컨텐츠 구동방식인데 최종결과물로서 보여지는 컨텐츠가 Flash 의 형태로 작업이 되었다. 필자의 주업무가 플래시 개발자이다보니 당연하겠지만 Flash 가 이러한 형태로까지 쓰일 수 있다는 점에 상당히 놀라웠었다.

개발초기에는 Processing 과 같은 인터랙티브 개발툴도 고려했었지만 그 당시에 Flash 만큼의 인터랙티브한 개발 편의성을 제공해 주는 툴도  없다는 판단하에 Flash 로 작업하게 되었다. 3D 오브젝트는 Maya 를 이용하여 제작한 후 Papervision3D 를 사용하여 구현하였다. 지금보면 어려운 구현이 아닐 수 있지만 2년전만해도 실무에서 사용하기란 쉽지 않았기에 그냥 만든것을 바라보는 것만으로도 기분이 좋았던 기억이 난다.

되돌아 보면 내가 진행했던 프로젝트중에서 가장 재미있었고 스릴넘치게 진행했던 것 같다. 마우스와 키보드에서 벗어나 새로운 인터페이스로 컨텐츠를 만든다는 것 …. 내가 늘 고민하던 것에서 벗어나 새로운 것에 눈 돌린다는 것…..이런것들이  내 가슴을 뛰게 만들었던 것 같다.

Swing H from d’strict on Vimeo.

2008.7 ~ 2008.11

R&D Project – Swing H (J4)

Project manager : 김기정
Planning : 김기정,김정빈,김주희
Visual / UI Design : 김기정,김정빈
Interaction Design : 김기정,김정빈
Product Design : 남성규
3D Modeling : 전인규

View detail

기존 Samsung Mobile Ultra 시리즈의 통합 플랫폼사이트로 여러개의 사이트를 통합할 수 있는 사이트의 구조가 필요했다. 각기 다른 나라 다른회사에서 제작한 사이트를 통합한다는 것이 여간 힘든게 아니였다. 또한 플랫폼인 만큼 모든 이미지나 텍스트 정보를 모듈화 시켜야하는 것도 상당한 부담이였다. 각 오브젝트간의 연관성있는 움직임, 그리고 유기체적인 움직임을 표현하고자 최대한 공을 들였다. 개인적으로 가장 애착이 가는 프로젝트 중 하나이다.

2007.6

Samsung Mobile – Ultra Platform

Project manager : 김희선
Planning : 김희선,김상미
Visual / UI Design : 박미연,이정인
Interaction Design : 김기정, 김대우,김정빈

http://samsungmobile.dstrict.com/test_site/platform/en/platform/

상대적으로 대역폭이 좋지않은 해외런칭을 기준으로 작업하다보니 어쩔수 없는  비디오압축으로 인해 영상의 화질이 저하되는 것이 상당히 아쉬운 부분이였다.

시간이 지날수록 점점 더 웹 시장이 변화하는 것 같다.
대부분의 글로벌 기업들이 단발성 온라인 프로모션이 아닌 전체적인 큰 틀을 가지고 온라인 마케팅을 진행하는 방향으로 움직여가고 있다.

온라인이 이젠 단지 웹사이트 제작에서 그치는 것이 아니라 앞으로는 디지털 브랜딩 컨텐츠로서 보다 적극적으로 온라인을 활용할 것 같다.
적어도 오프라인 컨텐츠와  온라인 컨텐츠를 같은 맥락으로 이해해야 하는데……
세상이 너무 빨리 변한다.
과연 내가 제대로 따라가고 있는건지 모르겠다.

Samsung Mobile – Your music

Project manager : 김희선
Planning : 김희선,김상미
Visual / UI Design : 박미연,변수웅, 김기한,이정인,이지혜
Interaction Design : 김기정, 김대우,김정빈
Movie : 박상화, 이동진, 곽재도,백수진
Illustration : 김요한, 문도영

http://www.samsungmobile.com/promotion/yourmusic/

*Award

FWA site of the day (2008.1.16)

또한 일반적이 웹사이트가 아닌 블로그 형태의 데이타를 이용해 로컬데이터와 같이 다루는 면도 쉽지만은 않았다. 사이트 구조설계 및  최적화 그리고 그에 맞는 부드러운 인터랙션 모션을 구현하는데 있어서도 가장 많은 시간을 할애해서 작업을 진행하였다.
특히 고민을 많이 했던 부분은 사이트 구조설계였는데 이번 프로젝트만을 위해 새로 구성한 Class 파일만도 50여개나 달했다. 산술적으로 계산해 본결과 코딩라인만 해도…..10000 라인은 족히 될듯싶다….RIA 가 아닌 웹사이트에서 이정도 양은 정말….내가 생각해도 많다…
물론 다음 프로젝트가 현재 사이트에서 디자인만 바뀐다는 계획을 염두에 두고 체계적으로 개발을 했기 때문에 코딩라인이 자연스럽게 늘어날수는 있다고는 생각했는데 이정도일 줄은 몰랐다.

최대한 코드 재사용성을 중심으로 코딩을 하였고 상속과 인터페이스를 적극활용하여 지금까지의 프로젝트 중에서 가장 구조적으로 완성도 있게 작업된거 같다.

또한 싱글턴, Command 패턴, Iterator , Factory method 패턴 과 같은 다양한 디자인 패턴(Design Pattern)도 상당히 많이 활용하였는데 책에서 볼때와 실무에서 적용할때와는 좀 다른 면이 있는거 같다. 한가지 패턴이 사용되었다기 보다는 여러가지 패턴이 조합되어 새로운 방식의 패턴을 활용했던거 같다. 늘 사용하면서 느끼는 거지만 일반 application 과는 달리 플래시는 Timeline 기반의 프로그램이다. 다시말해 사용자의 단한번의 마우스 클릭으로 바로바로 화면이 구성되는것 보다 어떤 인터랙션을 통해 스크립트 에니메이션이 가능하다는 말이다. 이런 점이 플래시의 가장 큰 장점일 수도 있고 개발자의 입장에서는 어려움이 될수도 있다고 생각한다.
따라서 일반적인 프록그램밍 언어에서 사용하는 패턴들을 완전히 똑같이 적용하는것에 있어서 좀 고민할 여지가 있었다.

* Samsung Exhibition ICES2007 Microsite

사이트 보기

* Award

iF communication design award 2007  winner
http://www.ifdesign.de/beitragsdetails_e.html?offset=19&sprache=1&award_id=132&beitrag_id=33209

—

* 네트워크 지연률 –> 네트워크의 반응속도가 느려지게 되면 로딩없는 transition 무비 구성 자체가 불가능하게 된다. 로딩타임이 생긴다는 것이 아니라 서버와의 반응이 완료될때까지의 시간 지연으로 인해 딜레이가 생기게 된다.
영상자체를 transition movie 로 구성할 경우 반드시 체크해야할 사항이다.

* 영상 Layer 위치와 performance 관계 —> 영상재생시 하위 Layer 에 복잡한 이미지가 있을경우 performance 가 올라가게 된다. 알파 채널을 사용한 영상도 아닌데 이러현상이 발생한다. 반드시 wmode 를 opaque 로 설정하거나 영상재생시 반드시 하위 Layer 에 있는 객체들은 모두 clear 하고 사용하는것이 원할한 영상재생에 있어 도움이 될것이다.

추석연휴도 반납한체 작업한 사이트가 드디어 끝났다.
사흘 밤낮으로 일한 모든 피곤이 별탈없이 사이트를 오픈 했다는 것만으로도 풀리는것 같다.
트래픽이 높아서 그런지 현대쪽의 네트워크가 불안정해 바로바로 사이트가 접속되지 않아 좀 아쉽다.

크기가 큰 동영상과 큰 이미지가 스크롤되는 형태라서 사이트 최적화에 많은 신경을 썼지만 그래도 모든 유저가 보기엔 무리일듯 싶다.

현대자동차 LUV 베라크루즈 온라인 카탈로그
http://ad.hyundai-motor.com/catalog/veracruz/index.html

*Award

FWA  site of the day (2006.11.13)

코리아 디자인 어워드 2006  디지털 미디어 부분
http://news.mk.co.kr/newsRead.php?no=554678&year=2006
http://mdesign.design.co.kr/in_magazine/sub.html?at=view&p_no=1&info_id=39376&c_id=00010001