Project epilogue : Swing H

2008년 늦여름부터 시작해서 그해 연말까지 정신없이 진행했던 회사 자체 R&D 프로젝트 였다. 시간이 많이 흐르긴했지만 아직도 그때의 기억은 생생하리만큼 또렷하다. 뭐하나 준비없이 시작했던 프로젝트였기에 두려움 반에 전혀새로운 무언가를 한다는 설레임과 기대감 반을 함께 한 채  그 해 하반기를 이것과 함께 했었다.
그 당시 회사(d’strict)는 본격적으로 UX 전문회사로 탈바꿈하기 위해 새로운 사업을 준비하는 중이였다. 그와중에 자체 기술없이는 새로운 UX도 없다는 신념아래 새로운 UX  solution 기술발굴에 온통 힘을 쏟았었다. 그때는 나를 포함한 대부분의 작업자들이 온라인 컨텐츠 제작에 익숙해져 있던터라 오프라인에서 돌아갈만한 재미난 무엇가를 생각하기가 쉽지가 않았었다. 더욱이 생소한 하드웨어를 다룰려다 보니 엄청난 시행착오를 거치지 않고서는 도저히 진행이 불가능했던 기억이 난다.

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

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

swing h

엄밀히 말하자면 완벽한 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

Why not change stage.quality in AIR ?

비트맵 연산이 많이 사용되는 컨텐츠를 제작할 시에  가변적인 stage.quality 조정은 상당한 performance 향상을 가져올 수 있어 즐겨 사용하는 팁중에 하나이다. 하지만 안타깝게도 아래와 같이 공식적으로 Adobe AIR 에서는 StageQuality.BEST 나 StageQuality.HIGH 만 지원할 뿐 StageQuality.MEDIUM 또는 StageQuality.LOW 를 지원하지 않는다.

AIR 에서 이 속성을 사용하게 되면 그냥 무시되어버린다.

For content running in Adobe AIR, quality can be set to StageQuality.BEST or StageQuality.HIGH (and the default value is StageQuality.HIGH). Attempting to set it to another value has no effect (and the property remains unchanged).

For content running in Adobe AIR, setting the quality property of one Stage object changes the rendering quality for all Stage objects (used by different NativeWindow objects).

- from  Flash CS4 Professional ActionScript 3.0 Language Reference

물론 AIR 사용 목적이 과도한 비트뱁 연산을 주로 사용한 비쥬얼적인 요소의 표현이 아닌 desktop application 의 목적이 강한지라 원래의 의도(?) 대로 사용한다면 별다른 아쉬움이 없을 것이다.

하지만, 나와 같이 actionscript 를 visualization 도구로 사용하는 개발자는 아쉬움이 상당히 클것이다.  플래시 컨텐츠를  desktop application 범위로서 좀더 다듬고 싶은 생각이 들어 AIR 로 접근했지만 위 문제로 접어야만 했다.

AIR 가 기본적으로 다중 window 를 지원하여 일괄적인 stage.quality 를 조정할려고 강제로 위 기능을 막아놓은것 같은 생각이 들지만 굳이 위 기능을 지원 안했어야만 했는지는 의문이 풀리진 않는다.

AIR 2.0 beta 도 지원하지 않는다..아쉽다.

How to reduce the complie time with Flash IDE

Actionscript 의 덩치가 커지면서 Flash IDE 를 기본 액션에디터로 사용하는 것보다 인텔리젼트 기능이 탑재된 외부 에디터를 이용해 프로그래밍하는 것이 작업의 효율성 측면에서 상당한 개선 얻어올 수 있다.  이 포스팅 내용은 compile 도구로 반드시 Flash IDE 를 사용한다는 것을 전제로 한 내용이다.

작업 환경 조합으로는  Flash IDE + Eclipse(FDT) , Flash IDE  + Flashdevelop 과 같은 경우의 조합으로 많이 사용하는데 이런 외부 에디터를 사용할 경우 자동으로 syntax 를 사전에 체크해줘 compile 타임에 발생할 수 있는 코드의 문제점을 알아차릴 수 있다. 하지만 compile 을 위해 Flash IDE 와 외부에디터의 창을 이러저리 왔다갔다 하거나 compile 을 기다리는 시간 등,  compile 전체에 소모되는 시간이 생각보다 길다라고 느껴질 때가 있을것이다. 특히 수많은 클래스의 사용으로 더욱 그 시간이 길어질 때 더할 것이다. 그래서 이럴경우 compile 시간을 대폭(?) 줄일 수 있는 간단한 tip 하나를 소개할까 한다.

Flash IDE 에서 File -publish Settings… – Flash Tab – Settings…  를 실행하면 위와 같은 화면을 볼 수 있을것이다. 위 radio button 중 Warnings Mode 가 기본적으로는 체크되어있는데 이를 해제하자. Warnings Mode 는 As2.0 코드에서 As3.0 코드로 업데이트할때 발생할 수도 있는 Migration issue 를 리포팅해주는 기능이다.

따라서 체크를 해제하더라도 특별히 문제될건 없다. 이 기능을 해제하게 되면 컴파일 시간이 몰라볼 정도로 빨라지게 된다. 물론 영상이나 폰트를 임베드해서 컴파일이 오래걸리는 경우는 해당사항이 없다.  많은  클래스 파일을 사용하는 컨텐츠일 수록 효과가 크다.

quad core  , ram 4 GB , AS file 60개 정도의 환경으로 테스트 해본 결과 Warnings  Mode 를 체크를 했을 경우 16 sec 정도 걸리던 시간이 해제했을 경우에는 4 sec 정도로 4배이상 시간이 빨라졌다. 특별히 compile 안정성에 문제가 되는것이 아닌것 같으니 Flash IDE 를 사용하면서 class 를 많이 구성하여 사용하는 사람이라면 compile 에 걸리는 시간을 많이 줄일 수 있을 것이다.

WordPress Blog : Kimkijeung.com

기존에 사용하던 태터툴즈 설치형 블로그에서 wordpress 로의 이전 작업이 대부분 끝났다.

스킨을 나름대로 편집하여 사용하는 바람에 이전에는 버전업이 될때 적절하게 이전할 수 없어 도저히 기존상태에서는 업그레이드를 할 수 없었다.  기존 호스팅 서비스도 불안하여 이번기회에 도메인 기관이전 하였고, 호스팅업체도 wordpress 를 지원하는 곳으로 옮겼다.

전세계 설치형 블로그의 90% 이상을 점유한 블로그답게 수많은 플러그인과 스킨들이 참 맘에 들었다.

자료는 대부분 기존 블로그 내용을 살려 옮겨왔고 기존 링크는 아마 상당히 바뀌었을 것이다.

새롭게 블로그를 구성한 만큼 알찬내용으로 채워나갈 생각이다.

Game Development Tool : Unity3D

Integrated Editor Everything is done through Unity’s simple user interface. Thousands of hours of thought and spit-polish have gone into it. Read more

Graphical Power Unity has a highly optimized graphics pipeline for both DirectX and OpenGL. Read more

Asset Importing All major file formats are supported, and almost any art application can be used with Unity. Read more

One-Click Deployment Unity supports a wide range of platforms when you release your work to the come alive. Read more

Wii Publishing The industry’s most popular console just got a lot easier to develop for… Read more

iPhone Publishing Revolutionary game development comes to a revolutionary device. Read more

Shaders Unity’s shader system combines ease of use, flexibility and performance. Read more

Terrains Vast, densely foliaged landscapes that run smoothly on low-end hardware. Read more

Networking Go from single-player to full realtime multiplayer games. Read more

Physics Bring your interactions to life with the built-in Ageia PhysX™ physics engine. Read more

Audio & Video Mix realtime 3D graphics with streamed audio and video. Read more

Scripting Blazing fast .NET-based JavaScript and C#, with rich libraries and great documentation. Read more

Unity Asset Server The Unity Asset Server is an add-on product which adds version control to Unity. Read more

Shadow & Light Realtime soft-shadows and baked lightmaps, spiced up with halos and lens flares. Read more

Documentation We provide you with step by step tutorials, documentation and example projects. Read more

from http://unity3d.com

3D game 개발 툴로 많이 사용되고 있으며 인터페이스가 3D 모델링 툴과 비슷하여 모델링툴을 다뤄봤던 경험이 있다면 쉽게 접근할 수 있다.
특히 하드웨어 가속을 지원하고 있고 Flash 플레이어의 미미한 하드웨어 가속 기능과 비교했을때 엄청난(?) 성능을 보여주고 있어 인스톨레이션과 같은 웹이 아닌 다른 플랫폼의 컨텐츠를 제작할 때 상당한 힘을 발휘 할 것으로 보인다.
3D 게임 개발용도로 쓰이기 때문에 물리엔진이 탑재되어 있으며 각  오브젝트를 제어할 수 있는 스크립트 언어를 제공하여 궁극의 방향이라고 할 수 있는 3D 게임을 생각보다 쉽게 구현할 수 있는 환경을 제공해준다. 스크립트 언어는 자바스크립트와 C# 이 주로 사용되고 액션스크립트에 익숙한 플래시 개발자라면 쉽게 배울수 있다.

지원하는 플랫폼은 데스크탑,Wii 콘솔게임,i-phone 게임 뿐만아니라 Web 도 플래시 플레이어와 같이 플러그인 방식으로 지원한다.

아래 링크에 데모버전이 있는데 웹플러그인 방식이라 플레이어를 설치한 후에 확인하면 된다.

Demo site
http://unity3d.com/gallery/live-demos/tropical-par

Code sharing using svn:externals property

서브버전으로 각종 프로젝트를 진행하다보면 여러가지의 오픈소스들을 활용해야 할 때가 있는데 그럴때 외부 저장소에 있는 오픈소스 프로젝트를 현재 작업하고 있는 저장소에 포함시키면 상당히 효율적으로 외부라이브러리를 관리할 수 있다.

다시말해 진행하려는 프로젝트 저장소를 생성하고 그 저장소에 Papervision 이라든지 Away3D 와 같은 외부 저장소의 소스를 연결할 수 있다는 의미이다. 이렇게 되면 현재 저장소에 외부 오픈소스가 귀속되어 실제 버전관리가 이루어지지 않는 맹점을 해결할 수 있다.

서브버전 디렉토리 속성중에 svn:externals 이라는 것이 있는데 이것을 이용하면 현재 저장소에 다른 저장소의 내용을 포함시킬 수가 있다.
svn_repository
위와 같이 외부저장소에서 가져온 라이브러리는 독립적인 버전관리가 이루어지며 한 저장소 안에서 여러개의 서로다른 저장소의 라이브러리를 가져와 연결할 수 있다.

아래 설명은 eclipse 기반의 서브버전 플러그인인 Subclipse 를 작업기준으로 한다.
우선 SVN 프로젝트를 생성하고 속성을 설정하고자 하는 폴더에서 마우스 우클릭을 하여
아래와 같이 Team –> Set Property… 메뉴를 클릭한다.

svn_property1

그러면 다음과 같은 svn 속성 설정창이 뜨는데  Property name 으로 svn:externals 을 선택하고  Property content (value)값을 다음과 같은 정의로 입력해준다.

svn:externals [저장할 디렉토리](-r 리비전번호)[외부저장소의 URL]

lib/pv -r 873 http://papervision3d.googlecode.com/svn/trunk/as3/turnk/src

Property content (value) 정의는 크게 두부분으로 구성되는데 처음부분은 외부저장소 파일이 저장될 프로젝트의 디렉토리 이름이고 두번째는 외부저장소의 URL 로 이루어진다. 그리고 외부저장소에서 원하는 리비전번호의 파일을 제한적으로 연결할 수 있는데 이는 외부저장소의 뜻하지 않은 변경사항에 현재 적용하고 있는 프로젝트와의 충돌이나 오류를 막아준다. 이는 옵션사항이니 항상 최신버전을 가져오려면 생략하면 된다. 또한 여러개의 저장소를 가져올 경우 위와 같은 형식으로 각각의 다른 라인으로 작성하면 현재 프로젝트에서 여러개의 서로다른 외부저장소를 연결하여 사용할 수 있다.

입력이 끝났으면 업데이트를 실행해보자. 그러면 외부저장소의 파일들을 프로젝트내로 가져올것이다. 그리고 변경사항에 대해 커밋을 한다.
여기서 중요한 사실은, 커밋한다고 해서 현재 프로젝트에서 업데이트 되었던 외부저장소의 파일들이 저장소에 모두 커밋되는것이 아니다. 저장소를 확인해보면 알 수 있듯이 서버상에는 svn 속성값만 변경되었을 뿐 어떠한 외부저장소의 폴더가 반영된 것을 볼 수 없을 것이다.

또한, 현재 프로젝트에서 외부저장소를 포함한 모든 작업파일에 대한 변경사항을 커밋할 때 만약 외부 저장소의 파일을 직접 변경했다고 하더라도 자동으로 외부저장소의 파일을 커밋하지 않는다는 것이다. 외부저장소의 변경을 커밋하고 싶으면 해당 외부디렉토리로 직접가서 커밋을 직접해줘야한다.

Project epilogue : Ultra Platform

정리한다 하면서도 미루고 있었는데 지금보니 시간이 1년이 훌쩍 지나서 그런지 런칭되었던 사이트의 링크들이 많이 깨져있었다.
요즘에는 쉽게 쓸 수있는 3D Engine 이 있어서 흔히 볼 수 있는 인터랙션이지만 그때만 해도 이런 형태로 구현하기가 쉽지 않았던 기억이 난다.
물론 이 당시에도 papervision3D 초기버전이 나와있었긴 했지만 AS2.0 버전이여서 성능상의 문제로 사용하지 못했다.

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

ultra1

ultra2

ultra3

2007.6

Samsung Mobile – Ultra Platform

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

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

Problems of AVM1 loaded by AVM2

flash 개발환경이 AS3.0 대체되고 있는 상황에서 기존에 개발되어 있던 AS1.0 또는 AS2.0 으로 개발된 컨텐츠의 병행사용은 어느정도 같이 가져가여 할 부분이다.
여기서 약간 문제가 되는 부분은 AS3.0 으로 제작된 부분에서  AS1.0 또는 AS2.0 제작된 부분을 로드할 경우 발생하는 이슈이다.

AS3.0 부터는 AVM2 라고 하는 성능이 대폭개선된 가상머신을 도입했다. 이전의 가상머신은 AVM1 이라고 하여 AS1.0 또는 AS2.0 이 실행될 수 있는 환경을 말한다.
이런 기본적인 환경의 차이로 인해 기본적으로 AVM1 과 AVM2 무비사이간의 어떠한 커뮤니케이션이 가능하지 않다. 물론 LocalConnection 을 사용하면 가능하다.

단지, AVM2 에서 AVM1 을 로드하여 어떠한 cross-scripting 없이 사용한다면 로드한다는 것 자체에 별다는 이슈가 없어야 할텐데 실제적으로는 몇가지 문제가 발행한다.

만약에 AVM2 기반에서 AVM1 의 파일을 로드해서 사용했을 경우 일반적으로는 별 이상없이 작동한다. 하지만 AVM1 파일의 depth 가 커지면 커질수록 다시말해 AVM1 파일의 구조가 서로다른 로더에 의해 여러개의 구조로 이루어졌을경우  이상하게도 이 AVM1 파일들간의 인스턴스 구조가 변경되는 문제가 발생한다. 이는 여러 다른 플래시 개발자에게도 발생한 현상이다.

이러한 결과로  로드한 무비가 제대로 제어가 되지않거나 unload 가 되지 않는 현상이 발생한다.

아직까지 원인이 무엇인지는 찾지는 못했지만 약간의 팁으로 이런 위기상황를 극복할 수 있다.

첫째로, AVM1 컨텐츠들 간에서 다른 AVM1 컨텐츠를 로드해서 제어할때는 반드시 새로운 무비클립을 동적으로 생성하여 로드를 하고 언로드할 경우에는 remove 를 한다.

둘째로, 로드를 하는 AVM2 에서는 로더를 DisplayContainer 에 직접 붙이지 말고 로더의 컨텐츠(loader.content)를 사용하여 추가한다.

Project epilogue : Your music

오픈한지 3개월이 지나서야 프로젝트 정리를 하는것 같다. 전반적으로 개발에서 많은 부분을 담당하진 않았지만 워낙 사이트의 양이 방대(?)해서 이것저것 관리해야할 것이 생각보다 상당히 많았던 프로젝트였다. 진행기간만 거의 반년이였던것 같다.

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

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

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


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)

Project epilogue : CYON idea house

오랜만에 포트폴리오를 정리하면서 이전 프로젝트를 한번 되뇌어 보았다. 개인블로그를 만들기 이전의 사이트들이라 따로 기록이 남아있지 않았지만 그래도 그당시 가장 힘들었고  기억이 남는 사이트가 눈에 띄었다.

CYON idea house ……… 벌써 3년전의 프로젝트다. 당시에 팝업창을 이용한 사이트가 눈에 많이 띄었지만 아마 그 당시에 가장 많은 팝업창을 띄운걸로 기억난다.
웹환경에 바뀌었는지 지금 다시 보니깐 제대로 작동이 안되는 부분이 보인다.
멋도 모르는 신입시절에 되는지 안되는지도 모르고 시작했던 프로젝트였는데….지금와서 생각해보면 모르면 겁이 없다는 말이 새삼 떠오른다… 물론 지금의 내 모습을 있게한 소중한 프로젝트라고 생각한다. 그때는 몰랐는데 지금보니 이런저런 수상을 많이 한것 같다. ^^


2005.6

http://www.cyon.co.kr/good/popup/cyonidea/index.jsp (korean)
http://www.cyon.co.kr/good/popup/cyonidea/en/index.jsp (english)

*Award

FWA site of the day (2005.8.3)

2005 New York festivals : Interactive & Alternative Media Portable Electronics
뉴욕광고제 인터랙티브 어워드 휴대용전자기기부분 동상
http://www.newyorkfestivals.com/main.taf?erube_fh=nyf&nyf.submit.WinnerDetail=true&nyf.WinnerItemID=264031

2005 London International Awards : Interactive Media Electronics Finalists
런던 국제광고제 인터랙티브부분 입선
http://www.liaawards.com/2005liaa/finalists/finalists/interactive/i10.html

*Articles
http://www.breaknews.com/new/sub_read.html?uid=28487&section=section5