안녕하세요. 주인장입니다 ^^;;
요즘 글이 많이 뜸했죠? ㅎㅎ 역시 유령블로그라 주인장의 안부는 아무도 안물어주시고!! ㅎㅎ
사실, 웹엡스콘 행사때문에, 여러가지로 많이 피곤해서 어제까지 뻗어있었습니다.
이제서야 겨우 정신을 차렸네요 @.@
앞으로 제 블로그에서 FP10과 CS4와 관련된 정보도 자주 다룰테니 앞으로도 많이 찾아와주시구요!
특히 블로그 방문자수가 하루에 300~400명정도 되는데 아무도 댓글을 안달아주셔서 살짝 삐쳐있습니다 ㅠㅠ
많이많이 달아주세요! 팍팍달어! 막막 달어!!
본론으로 들어가서, 현재 많은곳에서 RIA로 프로젝트를 진행하고 있고, 이런 서비스들이 많은 곳에서 활약하고 있습니다.
이번 웹엡스콘 행사의 런치패드에서도 RIA 기술로 개발된 곳이 5개사중 3곳이나 될정도로 RIA에 대한 열기가 후끈한데요!
그래서, 오늘부터 '개발자의 눈으로 살펴본 RIA서비스'를 연재할려고 합니다.
제 글은 아마 기획이나, 디자인쪽 보다는 '개발자'의 시각으로 살펴보기 때문에, 약간 난해하실 부분도 있을수 있겠지만, 이 서비스에 어떤부분에 RIA Technology가 반영되었고 그 효과는 어떤지, 많은 개발자 분들이 자세히 살펴보고 또 정보를 공유할수 있었으면 합니다.
오늘 처음으로 살펴볼 서비스는 바로 픽짜(Piczza)입니다!
픽짜는 엠비안에서 진행중인 프로젝트로, 얼마전 어도비플렉스 공식홈페이지 "Flex 구축사이트, '우리가 최고야'"에 선정되기도 했는데요.
픽짜는 파일배달시스템으로 백앤드 쪽에서는 ROR과 Mysql로 구현되어있고, 클라이언트 프로그램은 Adobe AIR로 구현되어 있습니다.
그럼 픽짜에는 어떤 RIA기술들이 활용되었는지 한번 살펴볼까요?
Custom Chrome(Adobe AIR)
Adobe AIR에서는 윈도우 창을 일반적으로 Chrome라고 부르며, 개발할 수 있는 Chrome은 총 3가지 종류가 있습니다.
일반적으로, 각 시스템별 윈도우창 템플릿을 사용하는것을 System Chrome, Adobe에서 별도로 만든 Chrome를 사용하는것을 Flex Chrome, 그리고 서비스별로 직접 새롭게 만드는것을 Custom Chrome라고 합니다.
System Chrome는 각 시스템 별로 윈도우디자인은 바뀌지만, 사용자에게 가장 익숙하다는 장점이 있으며, Flex Chrome, Custom Chrome는 운영체제가 다르더라도 보이는 윈도우 디자인은 모두 같습니다. 다만 Custom Chrome는 윈도우의 모든 기능, 디자인을 모두 직접 개발하여야 한다는 번거로움이 있습니다.
 |  |
Piczza는 이런 Custom Chrome를 적절히 잘 활용하여 개발되었습니다. 사용자의 요구에 따라 창의 크기가 스르르 바뀌고, 또 윈도우의 오른쪽 공간을 넓혀 그 공간을 활용하여 회원가입을 할때도, 웹이 아니라 클라이언트에서도 바로 회원가입을 할 수 있습니다.
또 Piczza에서는 Custom Chrome에 들어가는 인터페이스들을 스킨화 해서 디자인을 바꿔볼수도 있고, 또 개발사가 아니더라도 사용자가 직접 스킨을 만들어 사용하고 배포할 수도 있습니다.
Native File Drag&Drop (Adobe AIR)
Flash/Flex의 AS3에는 DragManager라고 해서 각 UI객체들을 Drag&Drop하는것을 관리하는 API가 있습니다. Adobe AIR에서는 이 API를 좀더 확장하여 NativeDragManager가 추가되었습니다.
NativeDragManager은 DragManager과 마찬가지로, Drag&Drop을 제어하지만, Native Level의 Drag&Drop를 제어한다는 특징이 있습니다.
예를들어, 이 API를 활용하여 파일을 AIR 애플리케이션 내부로 드래그 할 수 있고, 또 AIR 애플리케이션 내부에서 애플리케이션 밖으로 내보낼 수 있습니다.
 |  |
보통 파일 업로더에서는 파일을 업로드 하기 전 우선 사용자가 업로드할 파일을 지정해서 업로드 하게 됩니다.
Piczza에서는 업로드될 파일을 추가할때, AIR의 NativeDragManager을 활용하여 사용자는 drag&drop로 간단히 추가할 수 있습니다.
Invoke Event (Adobe AIR)
여러 데스크탑 애플리케이션에서는 사용자의 편리성을 위해 .zip, .alz, .avi와 같이 특정 파일 확장자를 실행하게 되면, 연결프로그램 형식으로 해당 프로그램과 함께 실행됩니다.
Adobe AIR에서도 물론 연결프로그램 형태를 활용할 수 있습니다. 특정 파일을 애플리케이션과 함께 실행시킬때 발생하는 이벤트를 InvokeEvent라고 합니다. 이 이벤트를 걸어두면, 프로그램이 실행시 함께 Dispatch 됩니다.
 |  |
다만 아쉬운점은 해당 플러그인이 윈도우 기반으로 개발되었기 때문에, 윈도우환경에서만 작동을 한다는 점입니다.
대용량 파일의 안정적 전송
Flash/Flex에서 파일을 전송할 때엔, 파일 업로드와, 다운로드와 관련된 Filerefrence API를 활용합니다. 다만, 이 API는 HTTP로 전송되기 때문에, 대용량 파일을 전송할경우 Back-end계열에서 해당 파일의 데이터를 모두 받을때 까지 계속 실행되게 되어 부하를 주게 되기 때문에 대용량 파일의 안정적인 전송이 힘들다는 점이 있습니다.
하지만 Piczza에서는, 이런 대용량 파일을 전송하는데 있어서, Filerefrence를 활용하지 않고, 별도의 소켓통신을 활용하여, 파일을 전송하고 있습니다. (레퍼런스 참고)
Piczza의 사례와 같이, HTTP는 비동기적 전송 방식으로 한번에 모든 데이터를 전송해야 한다는 단점이 있지만, 소켓으로 데이터를 전송하게 될경우 동기적으로 서버와 연결을 할 수 있으며, 파일을 나눠서 전송할 수 있기 때문에, 보다 안정적으로 고속의 전송이 가능하다는 장점이 있습니다.
이런 대용량 파일의 안정적 전송을 Adobe AIR를 활용해서 구현했다는 점이 흥미로운데, Adobe AIR는 기존 FP9와 달리, 로컬 파일의 ByteArray를 읽어 올 수 있습니다. 따라서, 대용량 파일을 전송할때 기존과 달리 파일의 ByteArray를 나눠서 읽어오고, 동기적으로 서버에 보낼수 있었기 때문에 안정적 파일 전송이 가능했습니다.
지금까지 Piczza에서 사용중인 RIA Technology를 알아 보았습니다. 픽짜는 국내 대스크탑 상용 애플리케이션 중 최초로 멀티플랫폼을 지원하고 Adobe AIR 기반을 통해 개발되었습니다. 또, 애플리케이션 내에서도 AIR의 기능들이 속속 잘 어울러져 있습니다. 리눅스, 맥, 윈도우환경에서도 Piczza를 통해서 파일을 간단히 배달할수있다는점! 정말 매력적이지 않나요? ㅋㅋ
Piczza는 앞으로 오픈소스로도 진행될 예정이라고 하니, 저도 긴장 가득 하고 있겠습니다! 또 외국어 서비스로 오픈될 예정이라고도 하니, 외국시장에서도 한국 IT의 진면모를 보여주시길 바랍니다!!!
마지막으로 제가 Piczza에 제안하는 서비스를 하나 말씀드리면서, 이만 물러가겠습니다 (__)
그럼 이런서비스는 어떨까요? Piczza on Web
Piczza는 대용량 파일도 안정적으로 전송해야하기 때문에, Filerefrence를 사용하지 않고, 별도의 네트워크 기능들을 구현하여 사용하였습니다. 무엇보다 이 Filerefrence가 '파일 선택, 파일 업로드, 파일 다운로드'등의 제한적 기능만을 지원하기 때문에 Adobe AIR의 사용이 필수적이었을 것입니다.
그리고, 얼마전(10월 16일) Flash Player10이 출시되었습니다. 물론 갑자기 바뀐 보안 샌드박스 때문에 많은 개발자와 사용자들에게 원성을 사고 있지만, 3D이펙트 추가, 커스텀 필터, FTE, 사운드 제어 등 강력한 기능들이 추가되었습니다.
그중 Filerefrence API에서도, 변화가 있었는데 load()와 save() 메서드가 추가되었습니다.
(참고자료 - [FP10] Filerefrence는 어떻게 달라졌을까?)
이 메서드들은 그간 Filerefrence는 클라이언트의 파일은 선택하고, 업로드, 다운로드하는데 국한되었지만, Adobe AIR와 마찬가지로, 파일의 Bytearray를 불러오고, 또 파일을 저장할 수 도 있습니다.
Piczza에서는 별도의 소켓통신을 이용해, 파일을 ByteArray를 나눠서 동기적으로 전송하여, 대용량 파일에서도 안정적 전송이 가능했는데, 이젠 웹기반인 Flash Player 10에서도 파일의 ByteArray를 불러올수 있고, 위와 같은방법으로 안정적 전송이 가능해졌습니다.
따라서, Piczza에서도 기존 AIR에서 활용했던 네트워크 업로드 기술을 활용하여, 웹으로도 크로싱플랫폼 기반 안정적인 파일 전송 시스템을 구현해본다면!!! 크아! 정말 멋지겠죠? ㅎㅎ
