커뮤니케이션하는 감정은행

이직한지 1주일만에 쓰는 블로깅입니다.
스마트플레이스의 팀블로그에도 지원을 하고, 주말을 쉬면서 보내고 있군요

예전에 우리 크리스마스카드를 300원,500원 주고서 사서 친구들에게 돌리고 하던 시절을 기억
하실련지 모르겠습니다.^^ 지금 그것을 다시하라고 하면 참 힘든일이지만, 그당시에는
연중행사임과 동시에 우리에게 따뜻한 감성을 느끼게 해주었던 일이었지요

디자인과에 들어와서는 입체카드를 만들어 보기도하고, 2000년대 초반에는 플래시카드도
나오기도 하면서 기업에서도 연하장을 온라인으로 보내는 시대가 되었습니다.
하지만, 디자인의 퀄리티 측면에서는 온라인은 많이 떨어지지 않나 생각이 드는군요

인쇄를 해서 나온 연하장은 금,은,동박 인쇄(별색인쇄)를 통해서 점점 고급화가 되어가는
추세이지만, 웹에서 보여지는 연하장은 그런 기교보다 플래시의 기교로 승부가 되는것 같군요

얼마전에 회사에서 맡은 업무가 연하장을 만들게 되었는데, 리서치를 하면서 최근의 트렌드를
보니, 예전에 그렇게 많았던 플래시 연하장 제작업체가 많이 사라진듯 했습니다.
바른손닷컴 ,레떼,카드카페 등이 주로 눈에 띄긴하는군요.

거슬러 올라가보면 1999년도쯤 제가 제대를 하고나서, 웹이란 문화를 제대로 접할무렵
샌드투유 였던가..아마도 서로에게 e메일을 통해서 플래시 e카드를 보내던일이
정말 재미있었던 시절이었죠^^ 이제는 그것이 문자로 많이 대체도 되긴 하더군요..

정리를 해보자면
A.돈주고 사서 크리스마스카드를 보낸다.(우편발송)
B.이메일로 플래시e카드를 보낸다(이메일..당시에는 그래도 직접써서 보내는게 꽤 만족스러웟습니다)
C.팝업북형태의 카드가 꾸준히 사랑받고 있고..(인쇄용이겠죠..웹에서도 받아보면 재미있을것 같네요)
D.현재는...아마 최근까지도 받아본적은 없습니다...ㅋ
   연인들사이에서는 서로 주고받기는 하지만...전 연인사이에서도 최근 2년간
   받지는 못한거 같고. 주지도 않은것 같습니다..풋

http://season.barunsoncard.com/display/prod_det.asp?card_seq=14425

요즘은 이런 연하장이 많더군요..

Trend
현재에는 기업에서도 연하장을 인쇄해서 보내던것이 비용절감 측면을 고려하여 웹쪽에서
보내려고 하는것 같습니다. 예전에 그런 감정은 느끼기 어렵겠지만, 웹에서도 충분히 그효과를
낼 수 도 있을것 같구요. 3D 연하장, 플래시연하장,등등의 약간의 기술이 가미된
따뜻한 연하장을 주변 지인들에게 나누어준다면 참 좋지 않을까 합니다.
아..동영상이 플레이되면 어떨까요?ㅋ 자신이 직접 동영상을 찍어서 첨부파일로해서
보내면..받는사람이 정말 색다르게 느낄것 같습니다^^...
그렇게 보낸다면 비용이 만만치 않겠지만, 1년에 한번인데..해보는것도 좋지 않을까하네요

이상 디자이너의 공상이었습니다.


현재 제작중인 연하장은 조만간...여러분께 공개를 하도록 하지요^^
살짝 말씀드리면...플래시일듯합니다..

주변 지인들에게 쓰셔도 좋지 않을까합니다..ㅋ
덕분에 빡센 2주가 될것 같구요

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

사이트 서치하다보면 가끔 중복되는 인물이 보입니다.
어디서 본거 같은데, 저 여자 어디서 봤는데..라고 하던
여자입니다. 분명..센스가 있으셨다면..ㅋ

여자보기

프리진이라는 사이트에서 제공하는 템플릿을 일종이었는데
이미지CD, 디자인템플릿, 아이콘, 일러스트등 여러가지를 제공해주는 곳입니다.
제가 보기엔 국내에서 그래도 상위급의 템플릿을 제공해주는 곳이죠
당시 디자이너들에게 2job을 제공해주면서 6:4, 7:3정도로 수익을 쉐어하는 프로모션을
통해서 계약을 했었습니다. 저는 하고싶어도 실력이 딸려서..ㅋ
그것도 있지만, 제것이 중복되어서 팔린다는게 기분이 조금 않좋았죠

그래도 레이아웃이나 색감, 플래시등이 잘 생각이 안날땐 자주 들르던 곳중의 하나죠
해외의 경우에는 css구조화, 블로그템플릿들을 모아서 파는 사이트가 있습니다
머, 트렌드를 반영한 결과이지만, 분명 프리진의 형태도 요즘 변화하는 추세입니다.
서체다운로드제공, 회원로그인시 포인트 제공을 하여 무료 템플릿들을 회원들끼리
공유하게 하고, ppt템플릿제공..까지 하고있죠. 조만간 웹2.0 디자인에 맞게
css구조화도 나올거라고 생각드네요. 시도를 조금만 더 빨리했다면, 블로그 템플릿도
현재 웹사이트들처럼 멋들어지게도 가능했을것이고, 선두업체로 도약하는 계기도
되지 않았을까합니다.

각설하고 저 여자모델은 제가 알기로는 알려지지 않은 병원, 건설업체등의 메인과
이벤트 페이지에서 10번이상은 본듯합니다. 귀여우면서도 저렴한 가격에..팔린(?)듯
한..ㅋ

솔직히 모델촬영해서 메인에 쓴다는 것 자체가 촬영 비용, 모델섭외, 인건비등을 포함하면
적어도 1000만원을 가까이 점령해버리기에...이런 템플릿은 저가격을 원하는 업체에서는
딱 안성맞춤이죠.
템플릿CD의 퀄리티도 최근2~3년간 장족의 발전이 있었습니다.
예전에는 직접 찾아가서 루뻬로 들여다보며 사진슬라이드를 대여하던 때가
엊그제 같은데.. 이제는 웹에서 직접결제하고 다운받거나, 시안샘플을 받아서
작업하고 대여하게 되는 ...정말 멋진 세상에 살고 계시다는거 알고계신가요?ㅋ

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

이제 곧 보드의 시즌이 시작되고 있습니다.
보드매니아 분들은 벌써부터 시즌권을 통해서
올해 어디에서 탈지 다들 계획을 잡으셨을텐데요

사이트 서치를 하다보니 스키장들이 매년 이맘때쯤 리뉴얼을 단행하는데
한번 쭉 봐보는 기회를 가져볼까합니다.

다들 비슷한 느낌이고, 어떤 차별성이 있는지는 각 스키장을 다녀오신분들만이
아실것이라 믿습니다. 올해는 강원랜드의 하이원 스키장을 한번 갔다와볼까하는데
싸게 갔다올수있는 방법이 있을거 같아서요

아래는 하이원 스키장입니다.
실제 경관을 내려다 보는듯한 비주얼이 마치 게임속의 주인공과 같은 느낌이 듭니다.
국내 최대라고 하는 넓은 스키장을 구경할 수 있는 UI를 제공해주고 있죠^^

강촌리조트의 화면입니다.
머..보드타는 사람의 플래시가 상당히...그렇군요..ㅋ
화면의 꽉 채우는 곡선을 통해서 보드를 타는 느낌을 강렬히 주는것 같습니다.
워낙 강촌리조트가 작다보니..ㅋ 그런것 같네요
웹캠을 통해서 보여주는 것은 좋은데 액티브를 설치하라는것은 보기 싫게 만듭니다..ㅋ



그나마 제대로 갖추어진 용평스키장
겨울애 화이트 스캔들이라는 카피가 엄청난 노고를 느끼게 해줍니다.
낮과 밤에 따라서 화면이 바뀌는 부분도 좋아보이구요
보드를 UI전면에 배치해서 컨텐츠를 넣은것도 좋아보입니다만
다른사이트도 이와 비슷하게 했군요..역시 보드가 대세입니다.
그런데..눈내리는건....더이상 말안하겠습니다..ㅋ
웹캠은 전경을 보여줌으로써 유저들에게 좋은 정보를 제공해주고있습니다.






현대성우 리조트
플래시가...OTL...
애가 막 굴러다녀요..
글씨체는 상당히 세련됨을 보이지만..
유지보수에서 신경을 덜 쓰는듯이 보입니다.




휘닉스파크
가장 세련되어 보이고 눈을 결정체로 형상화해서 내리게 만든 플래시
보드의 형태를 한번더 생각해서 라인처리를 한점은..디자이너의
고뇌를 엿볼수 있습니다.




마지막으로 지산 리조트 입니다.
메인의 복잡한 구성에 비해서 내부페이지 들이 더 잘되어 보이는군요
원으로 구성한 메인 레이아웃은 왜 그랬을까 한 번 더생각해 봐야겠습니다.

이렇게 여러 스키장들을 한번 리뷰를 해본것은 매해마다 분명 리뉴얼들을 합니다.
하지만 내부페이지들은 그대로 두고 메인만 변경하는 일이 잦아 지고있는게 현실입니다.
많은 손님들을 끌어모으기 위해서, 흥미거리 유발, 식상해진 레이아웃, 변화무쌍한
트렌드로 인해서..바뀌기는 한데...

공통적인것은
1.눈내리는 화면이 어색함
2.플래시가 옛날 플래시같다
3.그래도 좋은곳은 잘 만들어 놨다
4.내부페이지를 예전것으로 쓰는곳이 있다.

컨셉 word
1.눈, 눈알갱이, 보드,스키장,스키복 등등...
2.재미,흥미,설레임,스피드,산,겨울산,등등..
3.막상 생각안남/...ㅋ

그런데 몇군데는 재미와 흥미..는 사이트에서 안느껴 지는군요..


소감
Rss를 통해서 시즌권, 요금안내, 등의 간략한 정보를 제공해주는 것은 어떨까합니다.
솔직히 찾아 다니기도 귀찮고, 현실상 친구들하고 갈때 어디의 숙박권, 리조트권이 있는곳을
가게되지, 홈페이지를 방문하지는 않나 싶습니다.. 좀 현실과 동떨어진게 있을거 같은데요
어떻게 해결하는게 좋을지는 많이 고민해봐야 할것같습니다.참..내부사진좀 많이...제공해주면
안되나요? 기왕이면 다홍치마라고...거기까지 신경쓰기는 힘들겠죠..

자 이번겨울에 어떤 스키장을 가실건가요?
홈페이지가 멋진곳을 찾아가지는 않겠지만
전 하이원을 한번 가볼까합니다.
디자이너로서 실제 전경과 메인플래시와의 거리감을 느껴볼렵니다^^

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

사이트 서치중 네이버의 비디오 로그가 오픈한 것을 지인을 통해..알게되었습니다.
보다 탄력적인 레이아웃 구성, 굉장히 깔끔해진 디자인

원래 제가 네이버 블로그는 잘 안써서..블로그 방문자가 2000명입니다..대략..ㅋ
그런데 저 비디오로그는 상당히 좋은 기능이 될 듯합니다.
동영상 편집기능도 제공이 되고, 스토리 동영상이라는 것도 가능한데

거기에 더 황당했던건 동영상의 사이즈 500*375라는거.. OTL
플레이어를 기존의 네이버 사이즈보다 크다는것은 한개를 더 만들었다는 것인데
역시 네이버의 기술력이란 ...대단하다는것을 느낍니다.

한번 보시죠-->보러가기

메인화면을 리스팅으로 꾸밀수있는데 리스팅까지...텍스트까지 플래시라는 것








제 블로그는 아닙니다만...메인오픈 이벤트 화면을 따라서 들어왔습니다.
이것을 보시는 순간 다들 먼가를 머리속에 그리고 있지 않을까 생각듭니다..큭

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

점심을 먹고 졸린 눈으로 서핑을 하던 중 재미있는 사이트를 발견했습니다.
심심풀이로 하고 지나갈 만한 사이트 인데요
일본의 펩시 사이트입니다만.
웹2.0의 참여형 사이트를 띠고 있는것도 같고
세컨드라이프 같은 사이트는 아닐까 하는 생각을 해보게 되더군요

PEPSI NEX

http://pepsinex-dance.jp/?pid=23110
마이크로 사이트의 성격을 띄고 있습니다.

궁금해서 들어가보았습니다.
처음부터 먼가 재미있는 것이 나타날듯이 보입니다.
삼디로 제작되었다는걸 알수있죠?


왼쪽 하단의 녹색 메뉴를 클릭해서 들어가 보았습니다.






자신의 그림으로 만들것이냐 기존의 캐릭터로 할것이냐를 묻는듯합니다.
그래서 전 직접 그리는 것으로 했죠






이렇게 테스트라고 하고 대충그리고나서
오른쪽 하단에 버튼을 클릭하면


이름을 적는 부분이 나옵니다.
그리고 오케이를 누르면



위처럼 팀으로 구성을 하게 해줍니다.
독단적으로 하고 싶을때는 상관없지만...
팀으로 하면 더 웃깁니다..ㅋ





이렇게 팀이름 까지 확정짓고 나서

다음단계로가면

사회자가 소개해줍니다..


황당한 넘들이 나오죠..종이 일러스트레이션같은 느낌입니다.




제 느낌상으로는 미취학아동들을 위한 그림 교육하는건 어떨까 했습니다.
어린이들을 참여형으로 웹2.0개념에 맞게 교육시킨다?ㅋ
좀 어려울듯하군요

이런 플래시 애니메이션으로 웹에 대한 이해도 높이고
그림 공부도 하면서 3D라는 공간의 특성도 이해해주고요...
이런점이라면 쉽게 접근 가능할듯 합니다만...

간만에 참 신기한걸 보았습니다만...
일본은 플래시 기술도 점차 그 습득속도가 엄청나지는게 아닐까하는
오묘한 생각도 들었습니다...

좀 뒤져본 결과 스크린세이버와 스크립트의 제공등의 기능외에는
아직 대화형의 참여가 안되는것 같고 이벤트성의 사이트느낌이었다는게
생각입니마나...여러분들은 서치하시면서 또 다른 기능을 발견하지 않을까합니다..^^;;


마지막으로
제가 만든 댄스를 감상하시죠..ㅋ

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

필자가 플래시로 제작하는 리치 인터넷 애플리케이션에 관심을 가지게 된 가장 큰 이유 중 하나는 2001년 미국의 포레스터에서 제안했던 차세대 인터넷인 ‘X인터넷’ 때문이었다. X인터넷 개념 중 eXecutable(실행가능한) 인터넷에 대한 개념을 바탕으로 만들었다고 해도 과언이 아닐 정도로 플래시가 제공하는 리치 인터넷 애플리케이션 개발 환경은 X인터넷 애플리케이션의 개발 환경과 비슷하다는 느낌을 받았다.

하지만 원래 디자인 저작도구로 출발한 플래시의 개발 환경에 개발자들이 적응하지 못해 리치 인터넷 애플리케이션 보급은 기대했던 만큼 활발하지는 못했다. 매크로미디어에서는 이런 상황에 대한 해결책으로 2003년 ‘로얄(Royale)’이라는 코드명의 새로운 프로젝트를 진행하게 된다. 그 목적은 개발자들에게 맞는 리치 인터넷 애플리케이션 개발 환경의 제공으로 그 결과는 ‘플렉스(Flex)’라는 서버 제품으로 우리 앞에 나타났다.

플렉스는 웹 애플리케이션 개발자들이나 기존의 플래시 개발자들에게도 매우 생소한 개념이다. 그러므로 여기서는 독자들이 플렉스와 플렉스 애플리케이션에 대한 이해도를 높일 수 있도록 플렉스 애플리케이션 제작 프로세스에 대해 간단히 살펴보고, 예제를 통해 플렉스에 대한 이해도를 높여보도록 하겠다. 또한 마지막 부분에서는 플렉스 애플리케이션을 과연 어떤 분야에 적용할 수 있을까에 대해 생각해 보도록 할 것이다.

플렉스 애플리케이션 제작 프로젝트 플렉스는 기존의 웹 애플리케이션 개발 환경이나 플래시 애플리케이션 개발 환경과는 분명히 다른 개발 환경을 제공한다. 그러므로 플렉스 애플리케이션 제작 프로젝트 역시 별도의 프로세스를 따르게 마련이다. 이번에는 플렉스 연구과제 프로젝트를 수행한 경험을 바탕으로 플렉스 애플리케이션 프로젝트 팀의 구성과 개발 프로세스에 대해 간단히 설명해 보겠다.

프로젝트 팀 구성 플렉스 애플리케이션 제작 프로젝트 팀은 프로젝트 매니저(PM)를 중심으로 디자인팀과 개발팀으로 구성된다. 디자인팀에는 디자이너와 정보 설계자(information architect)가 필요하며, 개발팀에는 클라이언트측 개발자와 서버측 개발자가 필요하다. 물론 프로젝트의 규모에 따라 디자이너와 개발자들의 수가 늘어날 수는 있지만 기본적인 팀 조직 자체가 변할 필요는 없다.

프로젝트 매니저 프로젝트 매니저의 가장 큰 역할은 프로젝트 기간 동안 개발자, 디자이너와 고객 사이의 원활한 커뮤니케이션이 이뤄질 수 있도록 하는 것이다. 또한 프로젝트의 자원 분배와 시간 배정, 비용 산정과 같은 업무도 병행하게 된다. 또한 고객과 실제 프로젝트 수행 팀간의 커뮤니케이션 통로가 되기도 한다. 다른 애플리케이션 개발에서도 마찬가지이지만, 프로젝트 매니저는 프로젝트 기간 내내 투입돼야 하지만 100% 프로젝트에 묶일 필요는 없다. 물론 프로젝트 매니저가 시스템 아키텍처 설계나 정보 설계와 같은 업무를 병행하는 경우가 있을 수도 있다.

팀장 디자인팀과 개발팀의 팀장으로 프로젝트 규모가 커 여러 명의 디자이너와 개발자가 참여하는 경우에 필요하다. 이들은 프로젝트 매니저를 대신해 각각의 팀원들의 업무 분장과 업무 진척도를 체크하고, 팀 생산물의 단위 테스트를 수행하게 된다. 또한 이들은 프로젝트 매니저의 자원 분배와 시간 배정, 비용 산정과 같은 업무를 도와주기도 하며, 실질적인 현상을 파악해 프로젝트 매니저와 프로젝트 중간에 생기는 위험요소를 관리하기도 한다.

디자이너 디자이너는 플렉스 애플리케이션의 전반적인 디자인을 제작한다. 또한 디자인과 관련된 폰트나 색상 선정, 브랜딩  업무 등 일반적인 애플리케이션 제작과 관련된 부분도 수행한다. 한편 플렉스 애플리케이션을 제작할 때 컴포넌트나 컨트롤, 아이콘과 같은 디자인은 플래시를 이용해 SWC 컴포넌트의 스킨을 변경하거나 사용자 정의 컴포넌트를 제작해야 한다. 플래시를 어느 정도 다룰 줄 아는 디자이너들은 간단하게 SWC 컴포넌트의 스킨을 변경할 수 있지만, 복잡한 SWC 컴포넌트의 스킨 변경이나 사용자 정의 컴포넌트의 제작과 같은 경우에는 컴포넌트 개발자와 함께 작업해야 한다. 이런 경우에는 개발자가 작업하기 전에 미리 컴포넌트의 외형을 디자인해 개발자가 개발할 수 있도록 지원해야 하며, 개발 과정 중에 필요한 디자인 요소들을 개발하기도 한다.

정보 설계자 플렉스 애플리케이션 개발을 위한 정보 설계자는 일반적인 웹 애플리케이션 정보 설계 경험보다는 데스크탑 애플리케이션 정보 설계 경험이 있는 사람이 적합하다. 실제로 플렉스 애플리케이션은 하나의 애플리케이션에서 다양한 상호작용과 빈번한 데이터 교환이 일어나기 때문에, 정보 설계의 측면에서는 데스크탑 애플리케이션과 유사하다.

플렉스 정보 설계자는 애플리케이션의 전체적인 레이아웃을 잡고, 스토리보드와 유즈케이스 작성도 하게 된다. 또한 고객과의 커뮤니케이션을 통해 프로젝트 요구사항을 정리해야 한다. 실제로 플렉스 애플리케이션 개발 과정에서 가장 중요한 역할은 바로 정보 설계자이다. 기존의 웹 애플리케이션과는 다른 형태의 애플리케이션을 제작하게 되므로 창의력과 다양한 데스크탑 애플리케이션 사용자 요구 분석의 경험이 있는 사람이 적합하다.

클라이언트 개발자 클라이언트 개발자는 클라이언트 애플리케이션의 코드를 작성하는 개발자이다. 이들은 주로 디자이너나 정보 설계자와 함께 컴포넌트 커스터마이징이나 사용자 정의 컴포넌트를 개발한다. 한편 서버 개발자와는 서버와 데이터를 주고받을 수 있는 API 등을 정의하기도 한다.

플렉스 애플리케이션에서 클라이언트 개발자의 특징적인 업무 중 하나는 사용자의 키보드 입력이나 마우스 클릭과 같은 이벤트를 처리하는 코드를 작성하는 것이다. 실제로 클라이언트 애플리케이션은 사용자와 상호작용이 많기 때문에 정보 설계자와 함께 편리한 사용자 환경을 제공하기 위한 다양한 컨트롤을 제작해야 한다.

클라이언트 개발자들은 대부분 MXML과 액션스크립트를 알고 있어야 하며, XML과 액티브X 컨트롤, 웹 서비스에 경험이 있으면 도움이 된다. 한편 컴포넌트를 제작하기 위해서는 플래시를 이용한 사용자 정의 컴포넌트 제작 경험도 있어야 한다.

서버 개발자 서버측 스크립트 개발 경험이 많은 개발자가 적합하다. 물론 MXML, 액션스크립트에도 익숙해야 하며, 애플리케이션의 데이터 송수신 부분에 경험도 있어야 한다. 이외에도 XML이나 SOAP 웹 서비스도 구축할 수 있어야 하며, 클라이언트 애플리케이션에서 외부와 데이터를 송수신할 수 있는 API들을 제작해 제공해야 한다. 또한 보안이나 플렉스 서버, 데이터베이스 서버 관리와 같은 업무들도 담당한다.

플렉스 애플리케이션 제작 프로세스 플렉스 애플리케이션 제작 프로세스는 다른 애플리케이션 제작 프로세스와 크게 다르지 않다. 일반적인 애플리케이션 제작 프로세스는 준비→분석→설계→개발 및 통합으로 이뤄진다. 다음에 나올 블로그 애플리케이션 제작 과정을 가정해 각각의 범위를 간단하게 설명해 보겠다.

준비 프로젝트란 특정 문제를 해결하는 것이다. 그러므로 문제의 원인을 파악해 그 문제를 해결할 수 있는 방안 제안이 바로 준비 단계에서 중요하게 수행돼야 한다. 또한 문제 해결 과정에서 비용과 기간 등도 검토돼야 하며, 문제를 해결하기 위해 필요한 솔루션들이 검증해야 한다. 기술적이고 비즈니스적인 제한사항들에 대해서도 검토가 이뤄져야 한다. 블로그 애플리케이션 구축 프로젝트에서 해결해야 할 가장 큰 문제점은 HTML 기반의 웹 애플리케이션 형태로 제작된 기존의 블로그가 사용자들에게 불편함을 준다는 점이다. 그 불편한 사항들은 다음과 같이 정리가 가능하다. ◆ 여러 블로그를 주기적으로 검색해야 하는 경우 블로그 별로 URL을 통해 방문해야 한다. ◆ 블로그의 제목 목록이 일목요연하게 보여지지 않는다. ◆ 블로그 내용 조회시 새로운 정보가 나오면 별도로 검색 사이트 창을 띄워 해당 내용을 검색해야 관련 정보를 찾을 수 있다. ◆ 사용자의 요청에 따라 화면이 갱신되므로 일관성있는 사용자 경험을 제공하지 못한다.

이번 프로젝트는 플렉스 애플리케이션의 특징과 제작 방법에 대해 알아보기 위한 프로젝트로 기본적으로 플렉스 서버를 이용해야 한다. 또한 기간과 비용도 최소한으로 설정했다.

분석 분석 단계에서는 프로젝트의 성공을 정의하는 것이 가장 중요하다. 또한 프로젝트의 범위를 선정하기도 하며, 비즈니스적인 측면과 기술적인 측면의 정보들을 모으고 해당 애플리케이션 담당자나 사용자들과 인터뷰를 하기도 한다. 한편 프로젝트 수행에 필요한 범위와 비용, 예산 등도 확정한다. 블로그 애플리케이션 제작 프로젝트의 성공 조건은 다음과 같다. 성공 조건이 도출되면 간단한 레이아웃 시안과 그와 관련된 간단한 스토리보드 초안, 시스템 구성도 등이 포함된 프로젝트 기획서가 나와야 한다. ◆ 블로그 목록과 해당 블로그의 글 제목 목록은 한 화면에서 볼 수 있을 것 ◆ 블로그의 내용을 조회할 때도 블로그의 목록과 글 제목 목록의 상태를 유지시켜 일관성있는 사용자 경험을 제공할 것 ◆ 블로그의 내용을 바탕으로 편리한 검색이 되도록 할 것 설계 설계 단계에서 가장 중요한 것은 개발팀과 디자인팀, 그리고 고객이 프로젝트를 통해 만들어질 결과물의 형태에 대해 같은 이해를 가지도록 하는 것이다. 이 단계에서는 정보 설계가 마무리되어 상세한 스토리보드가 작성돼야 하며, 레이아웃과 디자인 시안이 확정돼야 한다. 한편 개발팀에서는 마무리된 정보 설계를 바탕으로 컴포넌트의 기능 사양에 대해 정리해야 한다. 또한 플렉스 애플리케이션과 외부 서버와의 데이터 송수신 방식에 대한 사항들도 결정해야 한다. 블로그 애플리케이션의 설계 결과물은 다음과 같다. ◆ 레이아웃 시안, 디자인 시안, 스토리보드 ◆ 정보 설계서, 컴포넌트 기능 사양서 ◆ 데이터 송수신 API 목록, ERD 등 설계 단계에서는 개발팀, 디자인팀, 고객이 프로젝트의 결과물에 대한 같은 청사진을 가져야 한다. 또한 컴포넌트 기능 사양서와 정보 설계서의 완성을 위해서는 간단한 샘플을 제작해 보는 것도 효율적인 설계를 위해 필요하다. 특히 플렉스 애플리케이션의 경우 다양한 기능과 형태의 컴포넌트가 애플리케이션에서 사용되고, 컴포넌트간의 상호작용이 많으므로 정보 설계서와 스토리보드를 바탕으로 상세한 컴포넌트 기능 사양서를 제작해야 한다. 만약 개발자들이 컴포넌트의 기능 사양을 잘못 이해하고 본래의 의도에 벗어난 컴포넌트를 제작하는 경우가 발생하면 전체 프로젝트의 수행에 차질이 생길 수 있을 정도로 심각한 상황이 발생할 수 있다.

<화면 1> 플렉스 블로그 애플리케이션

개발 및 통합 실제로 플렉스 애플리케이션을 개발하는 단계이다. 분석 설계 과정에서 만들어질 결과물에 대한 명확한 이해를 바탕으로 팀별로 개발해 나가면 된다. 블로그 애플리케이션의 경우 플렉스의 내장 컴포넌트를 그대로 사용하면서 외부와의 데이터 송수신은 블로그 사이트에서 제공하는 RSS(Rich Site Summary)나 RDF(Resource Description Framework)와 같은 XML 문서 양식을 이용했다.

개발 단계에서는 컴포넌트의 기능들을 구현하고 관련 디자인을 개발한다. 또한 서버와의 데이터 통신을 위한 웹 서비스나 자바 객체를 개발한다. 개발하면서 단위 테스트를 수행해 각각의 기능들을 테스트해 본다. 또한 통합 단계에서는 각각의 컴포넌트를 통합해 전체적인 애플리케이션 유즈케이스에 따라 통합 테스트를 수행한다.

블로그 애플리케이션 예제 개발자들 사이에서는 ‘백견이 불여일타’라는 말이 있다. 소스코드를 백 번 보는 것보다 직접 소스코드를 작성하면서 예제를 만들어 보는 것이 제작 과정을 이해하기 쉽다는 것이다. 플렉스 애플리케이션에 대해 이해하기 위해 직접 플렉스 애플리케이션을 만들어 보는 것은 매우 중요하다.

예제로는 플렉스에서 샘플로 제공하는 블로그 애플리케이션을 이용하기로 했다. 블로그를 예제로 선택한 이유는 블로그의 사용 방법을 알고 있는 사람들이 많다는 점이다. 그러므로 플렉스 블로그 애플리케이션을 만들어 보면 기존의 웹 애플리케이션과 플렉스 애플리케이션의 차이점을 쉽게 확인할 수 있을 것이다. 또한 대부분의 블로그들이 컨텐츠를 RSS나 RDF와 같은 XML 문서로 제공하고 있으므로 별도의 웹 서비스나 자바 객체와 같이 데이터 송수신을 위한 별도의 API를 작성하지 않고도 애플리케이션을 완성할 수 있다는 장점이 있다.

한편 블로그 외에 HTTP를 통해 XML 문서를 제공하는 뉴스 사이트들의 컨텐츠들도 예제에서 보여지도록 하겠다. 구글 검색 웹 서비스를 이용해 블로그 애플리케이션에 검색 기능도 추가해 보겠다. 기존의 블로그 애플리케이션들을 생각해 보자. 하나의 컨텐츠를 읽기 위해 컨텐츠의 제목을 클릭하면, 전체 화면이 서버로부터 HTML의 형태로 전송되어 클라이언트의 웹 브라우저에 렌더링된다. 그러므로 사용자들이 블로그의 컨텐츠를 읽을 때마다 HTML 문서가 전송되어 화면에 보여지게 될 때까지 시간이 걸리게 된다. 하지만 플렉스 애플리케이션의 경우 컨텐츠의 제목을 클릭하면 컨텐츠의 내용이 보여지는 화면만 변경할 수 있으므로 전체 화면의 데이터를 모두 받을 필요가 없으며, 서버로부터 해당 데이터가 전송되면 자동으로 화면을 변경해 주므로 사용자가 대기하는 시간이 줄어들게 된다.

<화면 2> 전형적인 블로그 웹 애플리케이션

컨테이너를 이용한 레이아웃 지금부터 플렉스 블로그 애플리케이션 예제를 제작해 보겠다. 먼저 애플리케이션의 레이아웃부터 시작하겠다. 플렉스 애플리케이션의 레이아웃은 레이아웃 컨테이너를 이용해 구성한다. 이때에는 VBox와 HBox 컨테이너를 사용한다. 다음 MXML 코드를 살펴보자. <?xml version = "1.0" encoding = "utf-8" ?> <mx:Application width="100%" height="100%" xmlns:mx="http://www.macromedia.com/2003/mxml">    <mx:HBox>       <mx:Tree />       <mx:VBox>          <mx:VBox />          <mx:DataGrid />          <mx:TextArea />       </mx:VBox>    </mx:HBox> </mx:Application> 기본적으로 플렉스 MXML 코드는 XML 마크업 언어이다. 맨 윗부분에 XML 문서 선언 부분을 참고하기 바란다. 그 다음 애플리케이션은 <mx:Application> 태그로 선언된다. 이 애플리케이션 내부에 HBox와 VBox 컨텐이너를 추가해 전체적인 레이아웃을 구성했다.

HBox 컨텐이너에는 Tree 컴포넌트와 VBox 컨테이너를 포함하고 있다. HBox 컨텐이너는 내부의 포함하는 요소들을 왼쪽에서 오른쪽으로 정렬해 준다. 그러므로 먼저 왼쪽에 Tree 컴포넌트가 위치하고 오른쪽에 VBox 컨테이너가 위치하게 된다. VBox 컨테이너에는 또 다른 VBox 컨테이너와 DataGrid 컴포넌트, 그 아래에 TextArea 컴포넌트가 포함되어 있다. HBox와 달리 VBox는 내부의 포함하는 요소들을 위에서 아래쪽으로 정렬해 준다. 그러므로 오른쪽 상단에는 VBox가, 중단에는 DataGrid가, 맨 하단에는 TextArea가 위치하게 된다. <화면 3>은 앞의 코드를 실행시킨 모습이다. 내부에 데이터가 없는 상태로 해당 구성 요소들의 모습은 파악할 수 없으나 전체적인 레이아웃의 모습은 파악할 수 있다.

<화면 3> 인터페이스 레이아웃

저장과 배포 플렉스 애플리케이션은 플렉스 서버를 통해 배포된다. 앞에서 작성한 MXML 문서를 플렉스 설치시 생성되는 flex 폴더 안에 blogReader라는 폴더를 만들고 BlogReader.mxml이라는 이름으로 저장한다. 필자의 경우 C:\Program Files\Macromedia\Flex\jrun4\servers\default\flex\BlogReader에 들어 있다.

이렇게 저장된 플렉스 애플리케이션은 웹 브라우저를 통해 배포할 수 있다. 웹 브라우저를 열고 해당 플렉스 애플리케이션의 경로를 입력하면 <화면 3>과 같이 플렉스 애플리케이션이 배포되어 실행되는 것을 확인할 수 있다. 필자의 시스템에서 플렉스 애플리케이션의 경로는 http://localhost:8700/flex/BlogReader/BlogReader.mxml이다. 필자의 경우 윈도우 XP에 별도의 J2EE 애플리케이션 서버를 설치하지 않고, 플렉스를 Integrated Flex Server 옵션으로 설치했다. Integrated Flex Server로 설치하면 J2EE 애플리케이션 서버인 JRun이 통합되어 설치되므로 별도로 애플리케이션 서버를 설치하지 않고도 플렉스 애플리케이션을 배포해 실행시킬 수 있어 플렉스 애플리케이션을 제작하거나 테스트할 때 매우 유용하다.

Tree 컨트롤 추가 먼저 왼쪽의 Tree 컴포넌트에 블로그 목록이 나타나도록 해보겠다. 앞에서 레이아웃을 구성할 때 추가했던 Tree 컴포넌트 부분을 다음과 같이 수정한다. <mx:Tree id="blogTree" width="250" heightFlex="1">    <mx:dataProvider>       {blogList}    </mx:dataProvider> </mx:Tree> 먼저 <mx:Tree> 태그를 살펴보자. Id 속성은 Tree 컴포넌트를 다른 컴포넌트나 액션스크립트에서 참조할 수 있도록 blogTree라고 정했다. width 속성은 Tree 컴포넌트의 넓이를 설정해 주는 속성으로 여기서는 Tree 컴포넌트의 넓이를 250픽셀로 정했다. 특이한 것은 heightFlex 속성인데, 여기서는 heightFlex 속성을 1이라고 설정했기 때문에 웹 브라우저의 윈도우 창의 크기가 변경되면 그에 따라 Tree 컴포넌트의 넓이도 변한다. 또한 <mx:dataProvider> 요소는 Tree 컴포넌트에 표시될 데이터를 변수 이름으로 지시하게 된다. 그러므로 앞의 코드는 blogList 변수에 저장된 데이터가 Tree 컴포넌트 안의 내용으로 보여주라는 의미를 가진다.

데이터 모델과 바인딩 앞의 코드에서 <mx:dataProvider> 요소를 이용해 컴포넌트에 데이터를 맵핑시켜 주는 것이 바로 데이터 바인딩 부분이다. 이제는 ‘blogList’ 변수를 선언하고 해당 데이터를 선언해 주는 것이 필요하다. <mx:Application> 태그의 자식 요소로 <mx:XML id=“blogList” source=“blogList.xml”/>과 같은 <mx:XML> 요소를 추가해 준다. <mx:XML>는 플렉스 애플리케이션의 데이터 모델을 선언할 때 사용하는 태그이다. 이때 선언할 데이터가 XML 형태인 경우에는 <mx:XML> 태그를 사용하고, 단순한 데이터 형인 경우에는 <mx:Model>을 사용한다. 물론 액션스크립트 클래스를 이용해 데이터 모델을 선언할 수도 있다. 앞과 같이 선언함으로써 blogList.xml에 있는 XML 데이터는 blogList 변수로 참조해 Tree 컴포넌트의 내용으로 보여주게 된다. blogList.xml 문서는 다음과 같다.

<리스트 1> blogList.xml

<?xml version="1.0" encoding="euc-kr"?> <node>      <node label="매크로미디어">      <node label="Christophe Coenraets" url="http://www.markme.com/cc/index.rdf"/>      <node label="Christian Cantrell" url="http://www.markme.com/cantrell/index.rdf"/>      <node label="Kevin Lynch" url="http://www.klynch.com/index.rdf"/>      <node label="Mike Chambers" url="http://www.markme.com/mesh/index.rdf"/>      <node label="John Dowdell" url="http://www.markme.com/jd/index.rdf"/>    </node>    <node label="자바 커뮤니티">       <node label="James Gosling" url="http://today.java.net/jag/blog.rss"/>       <node label="TheServerSide" url="http://theserverside.com/rss/theserverside-1.0.rdf"/>    </node>    ...중략 </node>

blogList.xml 문서는 앞에서 제작한 MXML 문서와 같은 폴더에 저장한다. 이제 다시 웹 브라우저를 통해 플렉스 애플리케이션을 실행해 보자. <화면 4>와 같은 결과를 볼 수 있다. 웹 브라우저 창의 크기를 조절하면 Tree 컴포넌트의 높이가 자동으로 웹 브라우저 창 높이에 맞게끔 변하는 것을 확인할 수 있다. 또한 Tree 컴포넌트의 폴더 앞에 있는 화살표를 클릭하면 해당 폴더 안에 저장되어 있는 블로그의 목록들을 확인할 수 있다. HTML 기반의 웹 애플리케이션에 Tree 컴포넌트와 같은 기능을 추가하기 위해서는 상당히 많은 노력과 시간이 필요하게 될 것이다. 하지만 플렉스에서는 컴포넌트의 형식으로 제공하기 때문에 몇 줄의 코드로 Tree 컴포넌트의 다양하고 복잡한 기능을 활용할 수 있다.

<화면 4> 블로그 목록을 보여주는 Tree 컴포넌트

블로그 제목을 보여주기 위한 DataGrid 컨트롤 추가 이제 Tree 컴포넌트의 블로그 이름을 클릭하면 오른쪽의 DataGrid 컴포넌트에 해당 블로그의 글 제목이 나타나도록 해보자. 먼저 <mx:Tree id=“blogTree” width=“250” heightFlex=“1” change=“fetchBlogEntries(event);”>과 같이 Tree 컴포넌트의 태그를 수정해 준다.

진하게 표시된 부분은 Tree 컴포넌트에 변화가 일어나는 이벤트가 발생하면 fetchBlogEntries(event) 함수가 호출되도록 선언한 것이다. 플렉스 애플리케이션에서는 이벤트 처리가 가능하므로 사용자의 특정 행동을 감지해 처리할 수 있다. 여기서는 사용자가 Tree 컴포넌트 안에 있는 블로그 목록을 선택하는 이벤트를 포착해 fetchBlogEntries 함수를 실행시키고 있다.

<mx:Scirpt> 태그를 이용한 액션스크립트 입력 fetchBlogEntries 함수를 선언해 보자. 플렉스 애플리케이션에서 함수를 선언할 때는 대체로 액션스크립트 2.0을 사용한다. MXML 문서 안에서는 <mx:Script> 태그 안에 액션스크립트를 입력하 된다. 다음은 MXML 문서 안에 액션스크립트로 fechBlogEntries 함수를 선언하는 코드이다. 이 코드는 <mx:Application>의 자식 요소로 입력하면 된다. fetchBlogEntries 함수를 살펴보자. 먼저 블로그의 URL 정보를 blogURL 속성에 저장하고, blogViewHelper 클래스의 setSelectedBlog 메쏘드를 실행한다. <mx:Script>    function fetchBlogEntries(event)    {       var blogURL = event.target.selectedItem.attributes.url;       if(blogURL != null)       {          blogViewHelper.setSelectedBlog(blogURL);          feed.send();       }    } </mx:Script> 액션스크립트 클래스 선언과 인스턴스화 blogViewHelper 클래스는 blogViewHelper.as라는 별도의 액션스크립트 파일에 입력하고 BlogReader.mxml를 저장한 폴더에 저장한다. 다음은 blogViewHelper 클래스를 선언하는 액션스크립트 코드이다. class BlogViewHelper {    function setSelectedBlog( blogURL : String )    {       selectedBlog = blogURL;    }    function getSelectedBlog() : String    {       return selectedBlog;    }    public var selectedBlog:String; } BlogViewHelper 클래스에는 selectedBlog 속성이 있으며, 이 속성과 관련된 set/get 메쏘드도 작성했다. 앞의 액션스크립트에서 setSelectedBlog 메쏘드를 호출했는데, 이렇게 setSelectedBlog 메쏘드를 호출해 주면 selectedBlog 속성에 선택한 블로그의 URL 정보가 저장된다. 외부에 작성한 액션스크립트 클래스 파일을 MXML 내부에서 사용하기 위해서는 인스턴스화시켜야 한다. <BlogViewHelper id=“blogViewHelper”/>과 같은 코드를 <mx:Application>의 자식 요소로 추가시키면 외부의 액션스크립트 클래스 파일을 인스턴스화시킨다.

앞의 태그의 이름은 BlogViewHelper.as 파일 이름과 같으며, id 속성은 MXML 내부에서 해당 클래스를 참조하기 위한 이름이 저장되어 있다. 이렇게 새로운 태그가 추가되면 새로운 네임 스페이스를 추가해야 한다. 그러므로 <mx:Application> 태그 부분을 <mx:Application width=“100%” height=“100%” xmlns=“*” xmlns:mx=“http://www.macromedia.com/2003/mxml”>과 같이 수정한다. 그림과 같이 진한 부분을 추가시켜 주면 태그의 네임스페이스로 모든 이름을 사용할 수 있다. 액션스크립트 클래스 파일을 추가해 인스턴스화시킬 때는 반드시 네임스페이스를 추가하자.

HTTP를 이용한 데이터 송수신 이제 Tree 컴포넌트에서 선택한 블로그의 데이터를 가져오는 일만 남았다. 플렉스 애플리케이션의 경우 외부의 XML 문서를 HTTP 프로토콜을 이용해 가져올 수 있는데, 이 때 사용할 수 있는 것이 바로 <mx:HTTPService>이다. 역시 <mx:HTTPService id=“feed” url=“{blogViewHelper.selectedBlog}”/>과 같은 코드를 <mx:Application>의 자식 요소로 추가시킨다. 앞의 fetchBlogEntries 함수에서는 feed.send()를 호출했다. 이는 해당 URL을 HTTP POST 방식으로 호출하게 된다. 여기서는 해당 URL로부터 XML 데이터를 결과 값으로 받아오게 되는데, 이 결과는 feed.result에 저장된다.

액션스크립트 클래스 파일의 확장 먼저 BlogViewHelper.as 파일에 feed.result에 저장된 XML 데이터로부터 블로그의 제목, URL 정보, 내용과 같은 데이터를 추출하는데 필요한 메쏘드를 추가해 BlogViewHelper 클래스를 확장한다. class BlogViewHelper {    function getTitle( feedResult : Object ) : String    {       var isRSS = ( feedResult.rss != null );

      if ( isRSS ) return feedResult.rss.channel.title       else return feedResult.RDF.channel.title;    }    function getDate( feedResult : Object ) : String    {       var isRSS = ( feedResult.rss != null );

      if ( isRSS ) return feedResult.rss.channel.lastBuildDate       else return feedResult.RDF.channel.date;    } ...중략    function getSelectedBlog() : String    {       return selectedBlog;    }    public var selectedEntry;    public var selectedBlog:String; } 앞서 설명한 바와 같이 블로그는 다른 애플리케이션에서 데이터를 사용할 수 있도록 RDF 포맷이나 RSS 포맷의 형태로 데이터를 제공한다. 그러므로 XML 문서가 RDF인지 RSS인지를 판단해 각각 별도의 데이터를 추출하는 것을 눈여겨보기 바란다. 확장된 클래스 파일에는 RDF나 RSS로부터 각각의 데이터를 반환하는 메쏘드가 추가됐다.

블로그 정보 보여주기 블로그 목록에서 블로그를 클릭하는 경우 오른쪽 상단에 블로그의 기본 정보가 보여지도록 VBox 컴포넌트를 다음과 같이 수정한다. <mx:VBox verticalGap="0" backgroundColor="#EEF5EE" borderStyle="outset" widthFlex="1"> <mx:Label styleName="title" showEffect="Fade" text="{blogViewHelper.getTitle( feed.result )}" /> <mx:Label text="{blogViewHelper.getDate( feed.result )}" /> <mx:Link click="getUrl('mailto:'+event.target.label)" label="{blogViewHelper.getURL( feed.result )}" /> <mx:Label>은 레이블을 보여주는 태그이며, <mx:Link>는 링크를 설정하는 태그이다. styleName은 CSS 스타일 시트를 적용시키는 부분이다. 여기서는 BlogReader.css라는 스타일시트 파일을 다음과 같이 만든다. 이 스타일시트 파일 역시 BlogReader.mxml 파일과 같은 폴더에 저장한다. .title {                font-family: Verdana;                font-weight: bold;                font-size: 18;                color: gray;             } 다음 작성한 스타일 시트 파일을 적용하기 위해 <mx:Style source=“BlogReader.css”/>과 같은 코드를 <mx:Application>의 요소로 추가해 준다. 이제 다시 플렉스 애플리케이션을 실행시켜 보자. Tree 컴포넌트에서 블로그 목록을 선택하면 <화면 5>와 같이 오른쪽 상단에 블로그의 기본 정보들이 화면에 표시되는 것을 확인할 수 있다.

<화면 5> 블로그 정보가 보여지는 모습

서버 환경 설정 플렉스 애플리케이션이 외부와 데이터를 주고받기 위해서는 서버의 기본 환경 설정을 변경해야 한다. 서버의 환경설정 파일은 flex-config.xml 파일에 저장되어 있다. 필자의 경우 C:\Program Files\Macromedia\Flex\jrun4\servers\default\flex\WEB-INF\flex과 같은 경로에 환경 설정 파일이 있다. 환경 설정 파일을 살펴보면 웹 서비스를 이용한 데이터 교환과 관련된 환경 설정 정보가 들어 있는 <web-service-proxy> 태그와 HTTP를 이용한 데이터 교환과 관련된 환경 설정 정보가 들어 있는 <http-service-proxy> 태그가 있는 것을 확인할 수 있다. 각각의 태그에는 <url> 태그가 존재한다. 여기에 데이터를 주고받을 외부 서버의 URL 경로를 입력해 주면 된다. 여기서는 편의를 위해 다음과 같이 URL 정보를 입력해주었다. <whitelist>    <unnamed>       <url>http://*</url>       <url>https://*</url> </unnamed> 앞과 같이 환경 설정 정보를 저장하면 HTTP나 HTTPS를 통해 접근하는 외부의 서버와 데이터 교환이 가능하다. 변경된 환경 설정 정보 파일을 저장해 주면 서버를 다시 시작하지 않아도 변경된 환경이 적용된다. 이렇게 하면 외부의 XML 문서를 이용한 데이터 수신과 웹 서비스를 이용한 데이터 교환이 가능하다.

DataGrid 컴포넌트에 제목 보여주기 이제 DataGrid 컴포넌트에 글 제목과 작성날짜를 보여주는 코드를 제작해 보겠다. DataGrid 컴포넌트를 다음과 같이 수정해 준다. <mx:DataGrid widthFlex="1" height="220" change="blogViewHelper.setSelectedEntry(event)"> <mx:dataProvider> {blogViewHelper.getItem(feed.result)} </mx:dataProvider>                 <mx:columnNames> {blogViewHelper.getColumnNames(feed.result)} </mx:columnNames>                 </mx:DataGrid> DataGrid 컴포넌트에는 blogViewHelper.getItem(feed.result) 메쏘드의 결과 값들이, 컬럼에는 getColumnNames(feed.result) 메쏘드의 결과 값들이 보여진다. 한편 DataGrid 컴포넌트에서 블로그 글 제목을 클릭했을 경우 하단에 텍스트의 내용을 보여주는 setSelectedEntry(event) 메쏘드가 호출되도록 change 속성을 설정했다. 제작된 플렉스 애플리케이션을 실행하면 <화면 6>과 같이 제목과 날짜가 나타나는 것을 확인할 수 있다.

<화면 6> DataGrid 컴포넌트에 제목과 날짜가 보여지는 모습

블로그 내용 보여주기 이제 블로그의 내용을 보여줄 차례이다. TextArea 컴포넌트를 다음과 같이 수정한다. <mx:TextArea id="description" widthFlex="1" heightFlex="1" html="true" wordWrap="true"    editable="false" text="{blogViewHelper.selectedEntry.description }" /> <mx:Link id="itemLink" click="getUrl(event.target.label, '_blank')"    label="{ blogViewHelper.selectedEntry.link}" /> TextArea 컴포넌트에는 블로그의 내용이 보여지게 된다. 하지만 이번 예제의 블로그 내용은 글자들만 보이고, 링크나 그림 같은 것들은 지원되지 않는다. 그러므로 원본 블로그를 볼 수 있는 URL을 <mx:Link>를 이용해 제공하고 있다. 앞에서 살펴본 바와 같이 DataGrid의 글 제목을 클릭하면 blogViewHelper.setSelectedEntry(event) 메쏘드가 실행되어 blogViewHelper.selectedEntry.description의 내용이 변하게 된다. TextArea 컴포넌트에서는 text 속성이 변할 경우 이를 바로 보여주므로 DataGrid의 글 제목을 클릭하면 자동으로 해당 글 제목의 내용이 보여진다. 다시 플렉스 애플리케이션을 실행시키면 <화면 7>과 같이 블로그의 내용이 나타나며, 그 아래에는 해당 블로그 내용이 담긴 원래 사이트의 링크도 나타나는 것을 확인할 수 있다.

<화면 7> TextArea 컴포넌트에 블로그 내용이 보여지는 모습

TabNavigator 컴포넌트 마지막으로 블로그 애플리케이션에 구글 검색엔진과 관련된 부분을 추가해 보겠다. 먼저 화면에서 블로그의 내용이 나오는 부분을 TabNavigator 컴포넌트를 이용해 탭을 이용하는 인터페이스 변화를 구현해 보겠다. TextArea 컴포넌트 부분을 다음과 같은 코드로 수정한다. <mx:TabNavigator>    <mx:VBox label="Blog 내용">    <mx:TextArea id="description" widthFlex="1" heightFlex="1" html="true"       wordWrap="true" editable="false" text="{blogViewHelper.selectedEntry.description }" />    </mx:VBox>    <mx:VBox label="Google 검색">       <GoogleSearch searchTerm="{ blogViewHelper.selectedEntry.title }"/>    </mx:VBox> </mx:TabNavigator> TabNavigator 컴포넌트 안에는 여러 개의 VBox 컨테이너들이 존재할 수 있다. 이 때 VBox의 숫자만큼 탭의 숫자가 생기게 된다. 한편 VBox 컨테이너의 label 속성은 바로 탭의 레이블이 된다. 앞의 코드로 생성되는 첫 번째 탭의 레이블은 “Blog 내용”이며, 두 번째 탭의 레이블은 “Google 검색”이 된다. 한편 두 번째 탭에는 GoogleSearch라는 별도의 네임스페이스가 존재하게 된다. 이는 GoogleSerarch라는 새로운 컴포넌트를 인스턴스화해주는 것으로 여기서는 GoogleSearch 컴포넌트를 별도의 MXML 컴포넌트로 만들어 BlogReader.mxml 파일과 같은 폴더에 위치시켜주도록 하겠다.

GoogleSearch 사용자 정의 컴포넌트 플렉스에서 사용자 정의 컴포넌트를 제작하는 방법은 앞에서 살펴본 별도의 액션스크립트 클래스 파일을 이용하는 방법과 별도의 MXML 파일을 이용하는 방법이 있다. 다음은 GoogleSearch.mxml 파일의 내용이다. 이 파일은 BlogReader.mxml에 포함되는 파일로 별도의 <mx:Application> 태그를 가지지 않는다. 전체적인 레이아웃은 하나의 VBox 컨테이너 안에 위에서부터 아래로 Button 컴포넌트, DataGrid 컴포넌트, Link 컴포넌트들이 위치해 있다.

<리스트 2> GoogleSearch.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.macromedia.com/2003/mxml">    <mx:Script>       var searchTerm;       var selectedItem;    </mx:Script>    <mx:WebService id="ws" wsdl="http://api.google.com/GoogleSearch.wsdl">       <mx:operation name="doGoogleSearch">          <mx:request>              <key>********************************</key>              <start>0</start>              <maxResults>10</maxResults>              <filter>true</filter>              <safeSearch>true</safeSearch>              <q>{searchTerm}</q>          </mx:request>       </mx:operation>    </mx:WebService>    <mx:HBox>       <mx:Button label="Search" click="ws.doGoogleSearch.send()"/>    </mx:HBox>    <mx:DataGrid id="resultsGrid" change="selectedItem=event.target.selectedItem"       dataProvider="{ws.doGoogleSearch.result.resultElements}"       columnNames="{['URL', 'title']}" widthFlex="1" heightFlex="1"/>    <mx:Link label="{selectedItem.URL}" click="getURL(event.target.label, '_blank')"/> </mx:VBox>

<mx:WebService> 부분은 구글에서 제공하는 검색 웹 서비스를 이용하는 부분이다. <mx:operand> 태그 부분에는 구글 검색 웹 서비스 실행시 필요한 정보들이 담겨 있다. <key> 태그에는 구글 검색 웹 서비스를 사용하기 위한 인증 키 정보를 입력하면 된다. 이 인증 키는 구글 사이트에서 발급받을 수 있다.

Button 컴포넌트를 클릭하면 ws.doGoogleSearch.send()가 실행되면서 구글 사이트에 검색어가 전달된다. 이 때 검색어는 블로그 글 제목이 된다. 실행된 웹 서비스의 결과는 ws.doGoogleSearch.result.resultElements로 반환되는데, DataGrid는 dataProvider로 이 결과를 등록해 놓고 있으므로 결과가 반환되면 DataGrid 컴포넌트에 바로 보여지게 된다.

이제 GoogleSearch.mxml이라는 이름으로 <리스트 2>를 저장해 BlogReader.mxml과 같은 폴더에 저장한다. 그리고 나서 BlogReader.mxml을 실행시켜 구글 검색이 제대로 되는지 확인해 보자.

<화면 8> 구글 검색 기능이 추가된 BlogReader 애플리케이션

최종 소스 정리 완성된 BlogReader.mxml 예제 소스 파일은 지면 제약상 ‘이달의 디스켓’으로 제공한다. 앞서 언급한 바와 같이 플렉스 애플리케이션 역시 별도의 애플리케이션이므로 MVC 패턴과 같은 디자인 패턴을 적용시킬 수 있다. 정리된 소스파일은 MVC 패턴에 따라 각각 Model, View, Control 부분으로 나누어 정리했다.

이렇게 해서 블로그 애플리케이션을 제작해 보았다. 플렉스가 생소한 만큼 가급적 전체적으로 제작해가는 과정을 통해 플렉스 애플리케이션의 제작 방법을 설명했다. 이제 완성된 블로그 애플리케이션을 실행해 테스트해 보자. 왼쪽의 트리에서 원하는 블로그를 선택하면 해당 블로의 정보가 오른쪽 상단에 나타나게 된다. 오른쪽 중단에는 해당 블로그에 등록된 글 제목들이 보여지게 된다. 이 중에서 원하는 글 제목을 클릭하면 블로그의 내용이 화면 오른쪽 하단에 나타나게 된다. 또한 새로운 정보를 검색해 구글을 통한 추가 정보를 원하는 경우에는 탭을 이용해 관련 정보를 담고 있는 사이트를 검색할 수 있다.

플렉스 애플리케이션 사용 소감이 어떠한가? 기존의 HTML 기반의 애플리케이션보다 훨씬 편리하지 않은가? 특히 내용을 하나씩 조회할 때마다 페이지 리로딩이 일어나지 않고, 변경돼야 할 내용만 변경되어 좀더 직관적인 UI를 제공하고 있다. 물론 플래시를 이용하면 앞서 제작한 플렉스 애플리케이션과 동일한 기능을 가진 플래시 애플리케이션을 제작할 수 있다. 하지만 플래시는 개발자들에게 익숙하지 않은 개발 환경으로 개발자들에 의한 플래시 애플리케이션의 개발을 기대하기 어렵다. 플렉스는 개발자들에게 친숙한 개발 환경에서 애플리케이션을 개발할 수 있어 개발자들에 의한 다양한 플렉스 애플리케이션이 제작될 것으로 기대된다.

구축 사례 및 적용 분야 플렉스 애플리케이션은 기존의 인터넷 애플리케이션보다 다양한 기능과 사용하기 편리하고 직관적인 인터페이스를 제공하고, 대부분 인터넷 애플리케이션을 대체할 수 있다. 하지만 플렉스가 시장에 보급되기 위해서는 좀더 많은 사람들이 플렉스를 이해해야 하고, 특히 플렉스 애플리케이션을 개발할 수 있는 회사나 개발자들이 많이 등장해야 할 것이다.

이번에는 플렉스 애플리케이션의 구축 사례를 살펴보고, 플렉스 애플리케이션이 우선적으로 적용될 수 있는 분야들에 대해 살펴보겠다. 플렉스의 구축사례와 적용 분야에 대한 고찰은 분명 플렉스에 관심을 가지는 기획자나 개발자들에게 플렉스를 이해하고 공부하는 데 좋은 지침이 될 것이다.

플렉스가 출시된 지 얼마되지 않았기 때문에 플렉스 애플리케이션의 도입 사례는 그다지 많지 않다. 특히 국내에는 알려진 구축 사례가 없으며, 개발자들이나 몇몇 회사에서 연구개발 프로젝트 차원에서 만들어진 플렉스 애플리케이션이 있는 것으로 알고 있다. ◆ Phoenix : Phoenix 애플리케이션은 매크로미디어의 전략적인 제휴사인 Optimal Payments의 제품수명 주기관리 시스템(Product Life-Cycle Management System)이다. Optimal Payments는 원래 JSP를 이용해 Phoenix 애플리케이션을 제작하다가 플렉스 베타 테스트를 통해 플렉스 애플리케이션으로 변환했다.

<화면 9> Phoenix 애플리케이션의 화면

◆ DreamMail : DreamMail은 매크로미디어 한국지사의 파트너사인 드림헌터에서 필자가 개발에 참여한 플렉스 애플리케이션이다. 드림헌터서는 웹메일 애플리케이션의 제한적인 사용 환경을 개선하고자 플래시를 이용해 플래시 웹메일 애플리케이션을 개발 중에 플렉스 베타 테스트에 참여해 플렉스를 이용한 웹메일 애플리케이션을 개발했다. 현재 개발된 DreamMail은 일본의 포털 사이트에 도입을 추진 중이다. 구축 사례가 많지 않으므로 매크로미디어 사이트와 플렉스에서 제공하는 간단한 샘플들을 살펴보는 것도 플렉스의 이해를 높이는데 도움이 될 것이다. ◆ UNC Healthcare : 건강관리 프로그램의 사용성을 높이기 위해 플렉스를 이용했다. 다양한 측정치의 선택과 데이터 입력에 따라 실시간으로 변화하는 그래프를 제공해 사용자들의 만족도를 높이고 있다. 플렉스를 이용해 인터넷 애플리케이션 상호작용성을 높이고, 데이터 전송과 수신에 따른 대기 시간을 단축시킨 사례이다. ◆ Brocade Sales Dashboard : 영업 관련 데이터를 계기판의 형태로 일목요연하게 보여주는 애플리케이션이다. 영업 관련 데이터를 바탕으로 향후의 영업 정책을 정하는데, 다양한 형태로 데이터를 보여줘 업무의 효율성 및 의사결정 기간을 단축시켜 준다. 플래시를 이용해 컴포넌트 그래프를 만들고, 플렉스에서 만들어진 컴포넌트를 이용하는 방식으로 구현됐다. ◆ WHITTMANHART EIS Application : WHITTMANHART의 기업 정보 애플리케이션을 마이크로소프트의 엑셀 기반 시스템에서 플렉스로 대체해 실시간으로 사용자의 조작에 따라 조건에 맞는 데이터를 보여주게 된다. 기존의 데스크탑 애플리케이션의 기능을 플렉스 애플리케이션을 이용해 구현한 대표적인 사례이다. ◆ FlexStore : 플렉스로 만든 쇼핑몰이다. 상품 목록과 선택 상품의 상세 정보, 장바구니 결제 정보 입력과 같은 기능들이 모두 한 화면에 구현되어 있으며, 마우스 드래그앤드롭과 같은 기능을 제공해 편리한 쇼핑 환경을 제공한다. 플렉스 애플리케이션은 편리한 사용 환경을 제공하며, 빠른 개발과 개발자들에게 편리한 개발 과정을 제공해 기존의 HTML 기반의 웹 애플리케이션을 대체할 만하다. 특히 사용자의 입력이 많은 웹 애플리케이션이나 데이터를 사용자가 원하는 다양한 형태로 보여줘야 하는 웹 애플리케이션 등을 플렉스로 구현하면 좋을 것이다. 특히 플렉스 애플리케이션은 별도의 다운로드 없이 다양한 기능을 가진 애플리케이션을 웹 브라우저를 통해 배포할 수 있으므로 EIS나 BI와 같은 웹 기반 기업용 애플리케이션 구축에 적용할 수 있을 것이라고 여겨진다.

차세대 인터넷 애플리케이션을 향해 플렉스는 개발자들에게는 편리하고 빠른 개발을 가능하게 해주고, 사용자들에게는 좀더 다양한 기능과 편리한 배포 환경을 제공한다. 기존의 플래시 애플리케이션 역시 사용자들을 위한 다양한 기능과 편리한 배포 환경을 제공했지만 개발자들에게 접근하기 어려운 개발 환경으로 인해 활성화되지 못했다. 하지만 플렉스는 개발자들의 적극적인 참여의 장을 열어 매크로미디어의 리치 인터넷 애플리케이션 보급에 큰 역할을 담당할 것으로 보인다.

다른 X인터넷 애플리케이션 개발 환경보다 플래시와 플렉스가 유리한 가장 큰 이유는 광범위하게 배포되어 있는 플래시 플레이어 때문이다. 전 세계 인터넷에 연결된 컴퓨터의 98%에 설치되어 있는 플래시 플레이어에서 실행되는 플래시와 플렉스 애플리케이션은 HTML 기반의 웹 애플리케이션을 대체할 만한 명실상부한 차세대 인터넷 애플리케이션의 대표주자가 될 것이다. @

▶ 전체 소스 다운로드
조성주 (이랜서) ( ZDNet Korea )

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

웹서치하던중
sigistory.com 에서 발췌

기획과 마케팅에 종사하는 분들이라면 항상 PPT와 엑셀로 참 많고 다양한 문서들을 만들어내고 계시리라 생각된다. 더군다나 어느 정도 숙달만 되면 워드와 엑셀의 기능을 포함해서 제안용 프리젠테이션까지 거의 모든 문서를 PPT를 통해서 제작하게 된다.

그런데, 보통 챠트를 만들게 되면 챠트의 배경을 포함해서 항목별 그래프를 일일이 그려내는 일이 여간 힘든게 아니다. 해보신 분들이야 너무나 잘 아시겠지만, 단순하게 제공되는 챠트마법사 만으로는 구미에 맞는 디자인과 스타일이 나오지 않아, 늘 챠트에 상당한 시간과 공을 들일 수 밖에 없다. 어떤 경우에는 챠트 마법사를 아예 배제하고 그냥 쌩으로 챠트를 그려야 할 경우도 있다.

보통 2D의 형태로 나오는 일반적인 그래프는 위와 같은 다소 평면적인 형태를 많이들 사용하고 있다. 또한 시간에 대한 문제도 있기 때문에 그래프를 통해서 전달하고자 하는 목적을 더욱 중요시하다 보니 실상 그래프 자체에 힘을 쏟기란 여간 쉽지가 않다.

But!
얼마전 THIRDTYPE님의 블로그를 통해서 썩 괜찮은 프로그램 하나를 발견했다.
바로 Swiff Chart이다.

올블로그를 통해서 관련 리뷰를 한번 검색해 보았더니, 역시 예상대로 이미 몇몇 분들이 이 프로그램을 사용하고 리뷰도 올려놓은 것을 확인할 수 있었다.


2D와 3D의 오묘한 결합, 깔끔한 스타일과 자동 컬러 구현, PPT와 대부분 유사한 기능 구조. 그리고, 무엇보다 챠트 역시 화려하지는 않지만, 적당히 포인트를 가할 수 있도록 삽입된 애니메이션이 Swiff Chart만의 독특한 매력이 아닌가 생각된다.

간단하게나마 Swiff Chart 3 Pro의 사용법을 살펴보면,


앞서 언급한대로 대부분의 기능은 파워포인트의 챠트 마법사의 기능과 거의 흡사하다. 물론 영어로 되어있어서 다소간의 언어장벽이 느껴질 수도 있으나, 한 두번 클릭해서 사용해 보면 그다지 어려운 기능들은 없는 것으로 보인다.

일단, 프로그램을 실행하면 위와 같은 실행화면이 나타난다. 중간에 보이는 두개의 큰 메뉴는 기존에 제작해 둔 파일을 열거나, 새로운 차트 마법사를 실행할 수 있는 메뉴 버튼이다.


New Chart Wizard를 선택해서 새로운 챠트 만들기를 실행해 보자.
(이미지가 찌그러져 보일 경우에는 클릭해서 보시길~)


어라? 상당히 반갑고 익숙한 메뉴 구조가 아닌가? 실제로 대부분의 기능들이 PPT의 챠트 마법사와 동일하게 구성해서 PPT 사용자에게 어떤 기능과 구조인지 쉽게 알 수 있도록 제작이 된 듯 하다.

1. 먼저 챠트의 타입을 선택한다.
세로 막대 그래프형, 가로 막대 그래프형, 꺽은선형, 원형, 분산형, 영역형, 도넛형, 거품형, 혼합형, 주식형까지 거의 모든 종류의 챠트 형태를 제공한다. 또한 각 타입은 2개 부터 6개까지 서브 타입을 추가로 제공하고 있다.

2. 챠트의 소스 데이터를 삽입한다.
챠트 소스 데이터 역시 ppt에서 제공하는 것과 동일하게 프로그램 내에서 간단한 스프레드시트를 제공하며(Enter Data manually), 기존에 작성된 엑셀 문서를 import 할 수 있는 기능도 제공(Import Data from File)한다.


기본적으로 임시 데이터가 저장되어 있는 상태를 그대로 해서 Finish 버튼을 클릭하면 아래와 같은 실제 챠트와 데이터를 수정 및 편집할 수 있는 화면이 나타난다.
(역시 클릭해서 보시길~)

3. 삽입된 챠트 편집하기
1) Data


몇 번 실행해 보시면 아시겠지만, 초반에 데이터만 확실하게 잡아 넣기만 한다면 보시다싶이 더 이상의 Detail한 수정은 필요가 없다. 디자인 쏘옥 맘에 든다..-_-V

각 부분의 메뉴들을 살짝 들여다 보면,

Start는 이미 앞 단계에서 진행했던 버튼이고, Data 이미지가 눌러진 현 상태가 바로 보시는 바와 같이 아주 기본적인 스프레드시트의 기능이다. Data 버튼 아래에 있는 Edit Sheet를 눌러보면 자르기, 붙여넣기, 되돌리기, 삭제하기 등의 메뉴들이 포함되어 있다.

'어? 혹시 엑셀 데이터를 붙여넣기가 될까?'

정답은 '된다'이다. 셀 서식 자체는 지원이 되지는 않으나, 엑셀에 삽입되어 있는 데이터 자체는 지금 보이는 화면으로 직접 자르기, 붙여넣기, 복사하기 등의 기능들이 고스란히 구현된다. (쵝오!)

2) Styles

앞서 2개에서 6개까지의 타입별 챠트를 제공한다고 했었지만, 상단의 Styles 버튼을 눌러 보면, 사실 각 챠트별로 또 상당히 많은 스타일들을 제공한다. (또 쵝오!)

그림에서 보는 바와 같이 기본 스타일부터 배경이 다른 버젼, 각 항목별 컬러가 다른 버젼 등의 또다른 스타일들을 망라되어 있다.

그냥 차려진 밥상에 밥 숟가락만 들면 된다..-_-;;

3) Series

Series 기능은 ppt 챠트로 치자면 챠트 옵션에 해당되는 부분이다. 각 항목별 컬러를 별도로 지정하거나, 라인 굵기/색상, 그래프 효과, 데이터의 라벨, 데이터 수치, 항목의 위치변경, 기타 그래프 크기 조절 등의 챠트에 대한 상세 항목들을 변경할 수 있는 기능들이다.

또한 폰트 변경, 엑셀에서 지원하던 셀(항목) 표현 스타일-각 셀이 날짜를 지정할 것이냐, 숫자냐, 시간이냐, %냐 등을 지정해 주듯이-을 지원해 주기도 한다.(Number Format)
(클릭해서 보시길~)




4) Options

챠트를 완성하는 후반 단계인 Chart Options 메뉴이다. 여기서는 챠트 타입을 다시금 변경할 수 있는 Change Chart Tyle과 애니메이션 스타일을 지정할 수 있는 Animation, 그리고 챠트의 크기를 지정해 주는 Resize Chart 메뉴로 구성되어 있다.

하단의 Layout Options의 메뉴는 챠트의 배경, 챠트 타이틀, 계열별 서식 등의 매우(!) detail한 부분까지도-역시 ppt 챠트 마법사에서 제공하고 있는 거의 모든 기능이-꼼꼼하게, 그리고 미리보기를 통해서 아주 쉽게 제작이 가능하도록 마련되어 있는 기능들이다.

자, 그럼 지금 현재까지 임의로 설정한 챠트의 미리 보기 화면을 보면 다음과 같다.


글을 쓰면서 테스트로 눌러본 시간을 제외하면 정말, 5분도 안걸렸다.. (제길슨 대단타!)
어라? 그런데, 자세히 보니까 사실 어디선가 많이 본 듯한 챠트의 모양새였다. 어디서 봤더라..

아! 맞다! 코리안클릭이다! 2004년도 모 화장품 회사 제안PT에 참여하면서 인터넷 이용자 현황을 수치화하기 위해서 코리안클릭의 데이터를 차용해서 삽입한 적이 있었다. THIRDTYPE님의 블로그에도 같은 코멘트를 남겼지만, 코리안클릭에서 위의 프로그램을 웹솔루션으로 구매해서 활용하고 있는게 아닌가 하는 조심스러운 추측을 해본다.

아래 그림은 당시 활용했던 코리안클릭의 표본 데이터이다.



뭐, 코리안클릭이 중요한건 아니니까 이만 생략하고. 그리고, 마지막 단계인 Animation을 지정해 주고 Export 메뉴를 통해서 사이즈와 몇가지 옵션만 지정하면 swf 플래쉬 파일로 최종 제작이 완료가 된다. 아래는 최종 완료되서 현재 이 블로그 스킨에 맞는 사이즈로 지정된 플래쉬 챠트의 완성된 모습이다.

5) 완성 챠트

")

아.. 이 프로그램을 모르고 살았던 지난 세월들이 허망하기만 할 따름이다..ㅠ.ㅠ 특히 제안서에서 챠트의 각 항목들에 일일이 애니메이션을 넣어서 강조할 부분을 따로 지정할 수 있다는 메리트가 있긴 했지만, 이처럼 시간과 노력을 단축시켜서 그에 대비해서 최적의 showing이 가능하다는 점에 찬사를 보내지 않을 수 없다.

사실 조금 더 상세하게 들여다 보면, 역시 PPT 처럼 현재 챠트 안에다가 별도의 객체를 더 삽입할 수도 있다. 포인트를 주어야 하는 부분을 박스로 처리한다든지, 추가 설명을 위한 텍스트를 입력한다든지의 부가적인 기능 역시 충실하게 제공하고 있어서 챠트에 대한 비주얼적인 고민은 더 이상 하지 않아도 좋을듯.

그럼, 이제부터 PPT에 플래쉬로 날개를 달자! ^^
-----------------------------------------------------------------------------------------
먼가...그래도 2%의 부족함..

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.