디자인하는 감정은행

이직한지 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