2008 베이징 올림픽 스포츠 화면페이지

날아라응가 — Mon, 18 Aug 2008 18:18:00 +0900

네이버, 네이트, 다음, 야후의 올림픽관련 페이지입니다.
어느 사이트가 한눈에 그리고 유용한 정보를 보기좋게(?) 디자인 했을까요?

[AIR]UCC Player_NIKE onAIR

날아라응가 — Mon, 31 Mar 2008 09:53:16 +0900

얼마전 어도비사에서 가끔 날라오는 메일을 확인하던중 역시 우리나라는 IT강국이구나!!라는 생각이 들었다.
내가 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만 하면 된다. 이로 인해 보다 많은 쉽고 다양한 산출물을 보다 쉽게 제작할 수 있어 올 해 연말까지 이모션 이노베이션 랩은 다양한 경험을 할 계획이다.
=========================================================

[글로벌코리아사이트_2탄]포털사이트의 디자인

날아라응가 — Fri, 22 Feb 2008 14:29:21 +0900

여러분의 인터넷 첫 화면은 어느 포털사이트입니까?
대부분은 "네이버"라고 생각이 드는데요... (아니면...말구요~ㅋ )

우리나라의 대표 포털사이트인 네이버는 사회적으로나 그 외적으로나 영향력이 대단하다는데 있습니다.
그래서 네이버를 멘토로 하고 있는 기타 포털들이 네이버의 디자인과 검색 그리고 마케팅을 벤치마킹하는 경향이 강하다고 생각이 듭니다.

네이버

우선 제가 말씀 드리고자 하는 것은 (디자이너의 입장에서...)
너무 일률적인 디자인이 대한민국의 포털을 장식하고 있는것 같아 아쉽다는 겁니다.

야후코리아

엠파스

외국의 포털(검색사이트)의 대표주자인 구글은 우리나라에서는 당연한 뉴스, 광고를 메인에 보여주지 않고 검색창만 보여주는 디자인을 택했슴돠. 왜 그랬을까요?
그리고 몇몇 국내 사이트 중에서도 이와 유사한 UI를 사용하는 것을 볼수있슴돠.

구글

고

어느것이 좋고 나쁨은 유저들의 선택이지만
나는 좀더 포털의 개성을 살린 디자인과 UI가 필요하다고 생각됨돠.

파란닷컴

파란닷컴리뉼

*더하는 말 : 저는 포털에서 보여지는 한정된 뉴스리스트가 어쩌면 정부의 음모론이 아닐까 하는 생각이 듭니다. 무섭죠? ㅡㅡ;

[두마리 토끼 잡기]Flex 와 SliverLight 세미나①

날아라응가 — Thu, 21 Feb 2008 21:43:54 +0900

[두마리 토끼 잡기]Flex 와 SliverLight ①
정글 아카데미 "정직한 세미나-Flex" (2007.09.15)

- RIA : 매출증가, 차별화,이해도 향상, support 비용감축, 네트워크비용감축,개발비용 감축
- 웹어플리케이션 필요없이 플레이
ㆍ웹어플리케이션의 문제점 : 복잡성,큰 규모,피드백의 어려움
ㆍRIA웹어플리케이션 : 유비쿼터스 클리이언트 활용, 여러 하드웨어 플랫폼에서 인터넷 변함없이 적용,
안정된서비스, 클라이언트 환경에 맞춰서개발가능
- Flex는 태그기반
- 한 화면에서 모든 서비스 구현이 가능
- 유비쿼터스
- 이벤트지향 언어
- 클라이언트에서 기존폼 재활용 가능
- Flex 작업시 유의 : event, 클래스기반=package, 바인딩(Binding), State{}, Stack(변수지정시삽입), GatData(자룔를저장), Bindable(액션스크립트3.0지원)
- For design : 스킨작업, cs3의 연동성

- 참고사이트(도움):http://flexdocs.kr/

- 개발사이트:아시아나항공,아이리버nv,두산인프랔어,굿모닝신한증권 기타등등

=================================================================
위 내용은 세미나를 청강하면서 노트에 적은 것을 정리한 내용입니다.
분명히 이쁘게 라인을 맞춰서 잘~ 적었는데...
지금보니깐 무슨 글씬지 하나도 못 알아봐서 빠진 내용이 많습니다.
휴~ 꼭 이런다니깐요. ㅡㅡ;

002.웹 유저빌리티

날아라응가 — Tue, 19 Feb 2008 14:44:13 +0900

002.웹 유저빌리티

어휘는 보통 사람들에게 다소 낯설지만 그 의미는 웹사이트의 사용편리성이란 뜻으로 웹사이트를 사용하면서 모두들 일상적으로 체험하고 있는 부분이다.

웹의 발전함에 따라서 웹 디자인에서 중요하게 부각되는 이슈가 변화해 왔는데, 초기에는 그냥 홈페이지를 제작하기만 하면 되었고 점차 프로그래밍, 디자인, 컨텐트 개발, 커뮤니티 구축 등과 같은 이슈들이 중요 이슈로 등장해왔다.웹 유저빌러티는 웹의 등장 초기에는 등한시되었지만 이제 웹사이트들이 넘쳐나는 시대가 도래하자 그 중요성이 날로 부각되고 있다.

001.데이터마이닝(Datamining)

날아라응가 — Tue, 19 Feb 2008 14:39:37 +0900

001.데이터마이닝(Datamining)

많은 데이터 가운데 숨겨져 있는 유용한 상관관계를 발견하는 것.

대학의 마케팅 관련 수업에서 이런 얘기를 자주 듣게 된다. 미국의 대형 쇼핑몰에서 한가지 조사를 했다. ‘아기 기저귀와 함께 가장 잘 팔린 제품은 무엇일까’라는 것이다. 아기들이 먹는 분유나 우유, 장난감일까? 아니다. 기저귀의 가장 좋은 짝은 바로 맥주다. 아내의 부탁으로 기저귀를 사러 간 남편들이 지나가는 길에 맥주를 사기 때문이다. 실제로 미국의 쇼핑몰 회사인 월마트에서 맥주와 기저귀를 나란히 진열하자 맥주 매출이 크게 늘어났다고 한다. 수학의 한 분야인 ‘데이터마이닝’(Datamining)은 이처럼 다양한 사물들이 서로 맺고 있는 관계를 밝혀내는 데 사용하는 기술이다.

[글로벌코리아사이트_1탄]우리의 사이트는 안녕하십니까?

날아라응가 — Tue, 19 Feb 2008 14:30:52 +0900

내가 웹2.0을 접한지도 오래되었다. ㅡㅡ;
하지만 아직도 웹2.0에 대한 이해와 홍보(?)가 없어서 인지 정부나 행정지역 사이트에는 아직도 익스플로러 외엔 제대로 보이지가 않는게 현실이다.

그래서 이런 현실을 조금이나마 반성하고 나 또한 많이 발전하고 공부해야겠다는 생각에서 이렇게 글을 적게 되었다. 절대 특정 사이트를 비판하고자 올린 글은 아니라는거.... ㅡ0ㅡ 알아주십쇼~

얼마전에 여수엑스포가 유치되었다고 해서 여수시의 홈페이지를 찾아갔다.
음... 사실은 어느 일본인에 의해서 사이트를 들어갔는데 너무 오래된 사이트 주소였기에
(설마 아직도 리뉼을 안했나? 엑스포개최한다면서...아직 예산이 없나?라는 생각이 들게 하는 사이트였다.)
http://yeosu.go.kr/jp/03about/03about01.html

혹시나해서 korean버튼을 눌렀는데 알록달록 이쁜 사이트가 열렸다.
다행이라는 생각이 들었다. ㅋㅋㅋ
그 사이트를 통해서 엑스포사이트를 들어갈 수 있었다.

-여수엑스포 영문사이트

그런데... ㅡㅡa
보면 아시겠지만
하나는 익스플로러에서 띄운 화면이고 하나는 모질라 파이어폭스에서 열어본 화면이다.
네비게이션이 플래쉬로 작동되어서 아마도 기본적인 css를 불러와 형태를 갖추는것 같지만
아쉽게도 원래의 디자인을 벗어나고 있었다.

그리고 아래 이미지는 깐깐한 응가가 발견한 것!ㅋㅋㅋ

-여수엑스포 영문사이트

유치위원장의 인사말을 구경할려치면 네비게이션이 없어진다.
뭘 눌러서 다른 페이지를 이동하라는건가요?
풋! 실수겠지만 이 실수로 한국의 이미지가 나빠질지도 모를일이다.

다른 언어사이트도 둘러보았다.
아랍어 사이트에서는 서브페이지 이동시 아예 다른 언어로의 이동이 사라짐과 동시에 디자인도 틀려져버린다.
요래요래 해서 깐깐한 응가에게 딱! 걸린겁니다...

조금더 신경써주고 관심을 가지고 확인한다면
여수엑스포의 성공개최로 IT강국의 위상도 보여주지 않을까 싶다.

나도 이제 두세번 확인하고 또 확인하는 자세를 가질랍니다.
또 다른 사이트를 구경해볼까요?

*ps: koyangi04님 관련 주소 감솨~ ^___________^