내가 AIR에 관한 프로그램설명을 들은지 한두달 정도였는데 벌써 저걸루 프로토타입의 작업물을 내놓았으니 말이다.
우선은 나의 얼렁뚱땅 내용보다 메일을 통해 가져온 글을 보는것이 더 유용한것 같아 스크랩을 한다.
나도 좀더 분발해야겠다~!!! ㅋㅋㅋ
=========================================================
제작사/지역 : 이모션 이노베이션 랩/대한민국
관련URL : http://lab.emotion.co.kr/nikeonair
=========================================================
이모션은 오랫동안 나이키와 함께 많은 캠페인을 진행하였다. 때문에 외국에 있는 AP 업체들과의 협업관계에서 쌓여온 노하우를 바탕으로 AIR라는 기술이 줄 수 있는 새로운 접근이 어떤 것이 있을지 고민하였다. 그러던 중 eBay의 산출물을 접하고서 나이키의 훌륭한 영상을 통해 eBay가 접근한 것처럼 무엇인가 새로운 것이 있을 것이다라는 판단 하에 고민을 하게 되었고 그로써 나온 것이 NIKE onAIR이다.
NIKE onAIR는 오랜 기억 속에 남아있는 멋진 나이키 CF를 ‘동영상을 꺼내어 본다’가 아니라 ‘추억을 꺼내어 본다’는 즉, 나이키를 ‘경험한다’는 아이디어가 나오게 되면서 개발되었다.
프로토 타입 작업
여러 가지 현대 트렌드에 맞는 새로운 접근 하던 중 우리는 디자인적으로 다음과 같은 프로토 타입을 고민하였다.
NIKE onAIR 시안
NIKE onAIR 시안은 UCC Player로 테마는 나이키로 잡았기에 무엇인가 스포츠 느낌이 나오는 디자인을 활용하기로 했다. 기본 메뉴를 선택하는데 있어서 stopwatch 형태의 디자인이 반영이 되었다. 기본적으로 우리가 이용하는 애플리케이션의 형태를 사각형이 아닌 stopwatch 형태의 디자인을 할 수 있었던 것은 Adobe AIR이기에 가능했다. 예전에도 플래시로 개발된 산출물을 데스크톱에서 실행을 한다거나 정사각형이 아닌 원하는 디자인으로 만드는 기술이 있었지만 문제가 많아 일반적인 서비스로 자리 잡지 못했던 기억이 난다. 하지만 AIR는 그러한 부분의 가능성을 현실로 가능케 하였다.
Tee V
NIKE onAIR 서비스로는 먼저 나이키에서 직접 제작한 멋진 영상을 고화질로 볼 수 있는 것에 초점을 맞추었다. 이를 위해서는 어느 정도 동영상의 원래 크기대로 플레이어가 늘어나는 것에 주안점을 두었다. 사용자가 마음대로 늘려서 이용할 수도 있겠지만 영상의 최적화된 사이즈로 볼 수 있는 것이 더욱 중요하다라는 판단 하에 이를 진행하였다.
Storage
다음으로는 Youtube 데이터를 키워드를 통해서 사용자가 검색할 수 있는 접근이 필요하였다. 전세계에 있는 또한 우리 기억 속에 있는 멋진 나이키 영상을 검색하고 찾아볼 수 있는 방식으로 단어대로 Nike Storage에서 영상을 볼 수 있는 환경을 제시한 것이다.
UCC
마지막으로 사용자들이 직접 제작하여서 공유할 수 있는 나이키 영상 즉 UCC 기능을 탑재 하였다. 스포츠 선수도 아니고 실력도 부족한 사용자들이 나눌 수 있는 공간이 바로 이곳이다. 또한 이 부분에서 가장 주목해야 할 부분은 바로 업로드이다. Adobe AIR는 사용자 PC에 있는 데이터를 액세스 할 수 있다. 우리는 그 동안 파일 찾기 버튼을 클릭해서 첨부할 파일을 찾곤 했다. 그것이 아니라면 액티브엑스를 설치하여서 드래그앤드롭을 통해서 파일을 첨부하곤 하였다. 하지만 Adobe AIR에서는 이 부분에 대해서 활용이 쉽고 기능도 강력하다.
Photoshop CS3 Extended 활용
디자인에 활용된 Photoshop CS3 Extended는 PSD를 손쉽게 Flash CS3 Professional로 컨버팅할 수 있는 막강한 기능을 가지고 있어 기존에 비효율적이던 PSD -> FLA 작업을 보다 손쉽게 할 수 있다.
Flex 코드
사용자는 업로드 할 영상을 선택하여서 Drag Here 부분에 드래그를 하게 되면 파일 첨부가 완료되게 된다. 또한 별 다른 인증 없이 바로 Youtube에 업로드 되게 되어서 전 세계 모든 사용자가 함께 정보를 공유 할 수 있다.
Nike onAIR는 실제로 Nike에서 요청 하에 제작된 산출물이 아니다. Innovation LAB에서 자체적으로 AIR를 통한 사용자 경험을 R&D한 산출물이다. 우리는 분명 이 R&D를 통해 많은 것을 배우고 얻었다.
그간 우리는 웹 브라우저에 의존하여서 서비스를 기획하고 개발하였다. 이제는 새로운 접근으로 더욱 풍부한 사용자 환경에서 보다 낳은 서비스를 기획만 하면 된다. 나머지는 AIR에서 모든 것을 지원한다.
Adobe AIR에서의 transparent 설정
[ 2. Rich Finance Experience ]
요즘은 은행에 직접 가지 않아도 앉아 있는 자리에서 얼마든지 금융 서비스를 이용할 수 있는 시대에 살고 있다. 모든 은행 서비스나 카드 서비스에서도 다양한 UI로 사용자는 몇 번의 클릭을 통해서 이를 활용할 수 있지만 HTML에서의 경험이란 익숙하지만 사용자에게 더 나은 환경을 제공하긴 쉽지 않다. 이에 대해서 Innovation LAB에서는 차세대 인터넷 뱅킹 R&D를 진행하였고 Adobe AIR를 통해 연구 산출물을 산하였다.
<실행화면>
인터넷 뱅킹 서비스는 10대부터 많게는 60~70대까지 다양한 연령대가 사용을 한다. 하지만 기존 웹 페이지 방식에서의 서비스는 다양한 사용자가 활용하기에는 어려움이 많다. 이런 이유로 ‘어떤 것이 가장 편한 인터넷 뱅킹 환경일까?’를 고민하면서 나온 아이디어가 바로 ATM 기계였다.
<ATM>
예금 조회, 예금 이체, 송금 등 많은 사람들이 안내를 크게 받지 않더라도 몇 번의 학습으로 쉽게 서비스를 이용하게 되는 ATM 기계에서 모티브를 얻어 리모콘 인터페이스를 착안하고 복잡하고 다량의 업무를 요하는 성격의 사용자를 위해 탭코디언 방식의 인터페이스를 함께 제공해서 사용자의 성향에 따라서 서비스에 접근 할 수 있도록 하였다.
리모콘 인터페이스에서는 사용자가 즐겨 찾는 메뉴 구성을 선택해서 관리하는 것을 그렸으며 최근 이용한 서비스에 대해서 쉽게 찾을 수 있는 경로를 노출해주므로 복잡한 콘텐츠를 이동하다 가 이탈하는 경우를 막을 수 있게 방법적인 제시를 하였다.
콘텐츠 별로 탭 코디언에 대한 아이콘을 통해 즐겨찾기 추가, 프린터, 엑셀로 저장 등을 할 수 있는 콘텐츠 유틸리티를 제공하므로 각기 다른 콘텐츠를 보다 쉽고 편리하게 이용할 수 있는 방법도 도출 할 수 있었다.
일반적으로 어디서 어디로 출금이 되었는지 역시 파악 할 수 있는 Gird를 통해서 HTML기반에서 할 수 없었던 경험을 Adobe AIR를 통해서 할 수 있었다.
무엇보다 가장 개발 시 중요하게 바라봐야 하는 것은 데이터와 비주얼 영역을 분리해서 서버는 해당 데이터만 전송을 해주고 연산 및 디스플레이는 클라이언트 PC에서 하는 방식으로 진행할 경우 패킷 데이터 양도 줄 것이며 그에 따른 서버 부하도 줄이고 사용자 역시 여러 각도로 데이터를 분석할 수 있는 방식도 Adobe 기술로 가능해졌다.
Rich Finance Experience를 진행하면서 단순히 HTML 베이스의 인터넷 뱅킹 서비스를 HTML스럽게 Flex로 만드는 것이 중요한 것이 아니라 종전에 이뤄지지 않았던 기술 베이스로 사용자 경험을 줄 수 있도록 연구하는 것이 오늘 날 AIR를 바라보며 열심히 이를 이끌어야 우리의 몫이 아닌가 하는 생각을 갖게 되었다.
아쉬움과 또 다른 도전
개발을 진행하면서 우선 AS3.0에 대한 어려움이 가장 많았다. 현재 개발된 산출물들은 AS1.0부터 AS3.0까지 사용이 되었고 Flash 뿐만 아니라 Flex도 함께 사용되었다. 이들의 통신은 전부 AS3.0으로 개발이 될 수 없었기에 로컬커넥션으로 해결하였다.
AIR가 베타를 시작으로 지난 3월 18일 Adobe RIA World 2008에서 정식 버전인 1.0 런칭까지 몇 차례 베타 버전을 지나오면서 변화를 따라가는 것도 힘든 일 중에 하나였다.
기존에 베타 1 버전에서 작동이 되던 것이 베타 2에서 작동이 되지 않아 찾았던 자료들과 베타 2와 베타 3에서의 변화 그리고 정식 1.0까지 그에 따른 수정을 통해 따라오는 것도 쉽지만은 않았던 게 사실이다. 하지만 그 환경을 보면서 여러 가지로 얻은 것도 많이 있다.
우선 onAIR Player 개발을 진행 했을 때 FLV의 코덱 문제도 분명 있겠지만 더 이상 사각형의 애플리케이션이 아니라 stopwatch 디자인을 AIR를 통해 퍼블리싱을 하는데 있어서 퍼포먼스 문제가 크게 대두 되었다.
AIR의 transparent 값이 적용이 되면 뒤에 있는 스테이지가 투명처리가 되어서 재미난 요소를 많이 추가 할 수 있었다. 하지만, 그런 상황에서는 HTML 베이스에서 SWF의 transparent를 적용했을 때와 같이 퍼포먼스가 현저하게 떨어졌다. 심지어 FLV의 고화질 영상이 재생 될 때는 사양이 아무리 좋은 컴퓨터도 힘들어하는 상황을 봤을 때 실망했다기 보단 앞으로 해결해야 하는 과제가 많겠다라는 생각이 들었다.
또한 기존의 강력한 AIR의 기술에 대한 샘플 예제 및 tutorial 이 다양하지 않으므로 온라인의 힘들 빌리거나 직접 시행착오를 겪으면 진행했는데 정말 답이 없어서 힘들었다.
가능성을 분명히 확인하였다
다양한 요구사항을 반영하면서 데스크톱 PC 환경에서 웹 서비스를 한다라는 접근에 두 가지 프로젝트 모두 그 맥락을 함께하고 있다.
eBay가 준 충격은 웹 서비스를 단순히 웹 페이지에서 그것도 모든 서비스를 담당하는 네스케이프(Netscape), 익스플로러(Explorer), 오페라(Opera), 모질라(Mozilla) 등 서비스 업체는 해당 플랫폼을 따라가야 하지만 AIR는 그러한 크로스 플랫폼을 제공하기에 보다 그 프로젝트와 그 서비스에 맞는 핵심 요소를 보다 더욱 편리하고 쉽게 부여할 수 있다. 예를 들어 옥션(Auction), 예스24(Yes24), 나이키(Nike), 네이버(Naver) 등 업체들이 자신들이 서비스를 하는데 최적화된 X-Internet 환경을 제공하고 가장 최적화된 자신들의 환경에서 서비스를 제공할 수 있다는 것은 상상만 해도 너무나 벅차 오르는 감동이 아닐 수 없다.
또한 OS 플랫폼에 대한 지원도 AIR는 완벽히 지원하기에 윈도우에서 개발하나 맥에서 개발하나 모두 정상적으로 작동이 된다. 실제로 onAIR 개발 시에 동영상 파일을 드래그앤드롭을 통해서 UCC 콘텐츠를 업데이트 하는데 있어서 윈도우와 맥 두 개의 OS 모두 한번에 성공하여서 놀라움을 금치 못했던 기억이 난다.
또한 다른 개발하는 작업자의 관점에서 본다면 막강한 기능을 가지고 있는 Adobe AIR를 통한 개발 방법은 별도의 큰 학습은 필요하지 않다. HTML, JAVASCRIPT, FLASH, FLEX 등 어떤 도구더라도 Adobe AIR 기술로 publishing 이 가능하다. Flash, Dreamweaver, Flex 등 우리가 기존에 작업하던 데로 작업을 진행하고 publishing 을 하는 부분에서 HTML 기반인지, AIR 기반인지를 선택하여서 publishing만 하면 된다. 이로 인해 보다 많은 쉽고 다양한 산출물을 보다 쉽게 제작할 수 있어 올 해 연말까지 이모션 이노베이션 랩은 다양한 경험을 할 계획이다.
=========================================================
