[공지]이미지나 링크가 깨졌다면 댓글 부탁드립니다.

스타플(http://starpl.com)은 실제 별을 이용한 위치 기반 감성 SNS(Social Network Service) 이다.
수억개가 넘는 실제 별들 중에 자기만의 별을 받아갈 수 있으며
단순히 별을 받는 다는 것외에 SNS의 특성을 접목시켰다.

위치기반 SNS라서 어쨌든 기존 SNS와 다른 모습을 갖출 수 밖에 없게 되었다.
기존 SNS(싸이월드, MySpace, FaceBook등)와 크게 다른 점은 사람들의 관계를 2차원 이상으로 표현한다는 것이다. 관계의 매개체는 바로 별이 되며, 그것을 그래픽적으로 표현한다. 가상의 공간이 아니라 관측을 얻어진 결과물인 천체목록으로 부터 얻은 실제 별이기 때문에 그 의미가 더욱 크다고 생각된다.

별을 이용함으로써 사람들에게 감성적으로 다가간다는 장점이 있다.
게다가 우주를 배경으로 함으로써 그 안에 하나의 별에 내 인생을 담는다는 모토를 세울 수 있었다.

그렇게 해서 탄생한 웹서비스가 바로 스타플(http://starpl.com) 이다.

이러한 서비스가 가능하게 된 것은 바로 Adobe의 Flash/Flex 기술의 힘이 크다.

여기서는 스타플에서 Flex 기술을 활용해 만들어진 것을 소개하겠다.

1. 이미지 에디터

이미지 에디터는 이미 Flex/Flash를 이용해 많이 활용되었고 보편화 되어 있다.
크로스 브라우징에 대한 중요성이 확산되면서 ActiveX 기반 대신 Flash/Flex 기술을 이용해 많은 웹서비스에서 이미지 에디터를 만들어 서비스하고 있다. 이미지 에디터는 이미 웹서비스의 기본이 되기 때문에 스타플의 특징을 잘 살리지 못하지만 중요하게 다뤄져 제작되었다.

사용해보면 알겠지만 기존에 많이 나와있는 이미지 에디터와 크게 다른 것이 없다.
이미 언급했지만 그래도 필요한 것이기에....

개발기간은 약 1개월 소요되었다.
이미지 에디터를 상용으로 이용되어져야 하기 때문에 완성도 있게 만드는 것은 많이 어려운 편이였다. 특히 효과, 테두리, 서명, 말풍선, 스티커, 그리기 등의 여러가지 효과를 하나의 이미지에 일괄적으로 적용하기 위해 튼튼한 설계가 반드시 필요하다. 그렇게 안하면 서로 간섭이 일어나 의존적 관계로 프로그래밍이 복잡해진다.

개발의 편의성을 위해 되도록 MXML을 기반으로 만들어졌다.
기본 컴포넌트를 적극 활용했으며 CSS를 이용해 디자인을 입히도록 만들었다.
Drag&Drop도 Flex를 이용해서 쉽게 구현할 수 있었다.
또한 이벤트를 적극 활용해 컴포넌트간 의존도를 최소화 하였다.

보안정책상 로컬에 있는 이미지는 Flex의 FileReference를 이용해서 서버에 전송후 그 이미지를 다시 받아 사용하게 된다. (만약 AIR로 만들어진다면 이러한 작업은 필요없겠지만 ^^)

특징이 하나 있다면 사진의 EXIF정보를 뽑아내준다는 것이다. 물론 서버단에서 처리하도록 되어 있다.(A
IR라면 로컬이미지에서 직접 EXIF 정보를 뽑아낼 수 있을것이다.)

2. 타임라인

우주공간안에 있는 내 별에 내 인생을 담는다. 여기서 발상된 것이 바로 타임라인이다.
일반적인 블로그나 미니홈피 같은 경우 카테고리를 이용해서 글을 분류하는 반면
스타플은 글의 분류를 이 타임라인으로 한다.
그 뿐만 아니라 글을 시간단위(일,주,월,년)으로 관리가 쉽게 가능해졌다.
그래서 스타플의 타임라인은 "카테고리 + 시간" 역할을 하게 되었다.

이 타임라인도 Flex로 만들어졌다. 지금은 적용되어 있지 않지만 CSS기반으로 Skin을 입힐 수 있도록 만들어져 있으며 ActionScript3 컴포넌트를 만들어 구현했다.

타임라인을 처음 개발할때 어려웠던 점은 기본 컴포넌트를 전혀 사용하지 않고 거의 모든 컴포넌트를 UIComponent를 확장하는 형태로만 만들어 졌다는 것이다. 이때까지만 해도 거의 영문 Flex 라이브독에 의존하면서 개발했기 때문에 많이 힘들었던 것 같다. UIComponent를 확장해서 만들어 본 분들은 느끼는 것이겠지만 어떻게 해야 효율적으로 만드는 것인가 고민하는 시간이 많이 든다는 것이다. 특히나 CSS를 입혀야하는 상황이면 더 생각할게 많아진다.

타임라인은 뒤에서 설명한 별지도와 더불어 Javascript와 통신이 빈번하다.
그래서 ExternalInterface를 사용하게 되는데, 이것을 이용한 통신이 잘되면 상관없지만 페이지 로딩시점과 통신가능시점이 달라서 처음에 많이 애를 먹었다. 이 문제의 해결점은 ExternalInterface.callback()함수가 제대로 동작되는지 setTimeout()를 이용해 일정한 시간 간격으로 체크하면서 가능한 시점부터 Javscript와의 통신을 가능하게 하는 것이 기술이 핵심이다.

타임라인을 Javascript로 만든다고 생각하면 조금 끔찍해보인다.
Flex의 동적인 효과와 개발 환경의 편의성이 있기 때문에 타임라인 개발이 가능했다고 생각한다.

개발기간은 2개월이였다.

3. 별꾸미기

스타플의 또 하나의 특징은 자기별을 자유자제로 꾸밀 수 있다는 것이다. 물론 다른 웹서비스에도 이런 비슷한 것을 서비스하고 있지만, 스타플의 꾸미기 자유도가 훨씬 좋다. 아이템도 별가루라는 사이버머니(활동량에 따라 적립됨)를 이용하기 때문에 부담 없이 구입해서 꾸밀 수 있다.

위 화면은 스타플을 이용하는 한 네티즌이 꾸면 별을 캡쳐한 것이다.
나무, 무지개, 동물, 산, 행성, 태양등 다양한 아이템을 자유자제로 배치해서 놓을 수 있다.
또한 위젯(widget)을 올려놓을 수 있도록 만들어져 있는데, 지금은 말풍선위젯, 친구연결위젯만 서비스 하고 있다.

위 화면은 내 별을 꾸미는 모습이다. 위 패널은 HTML/JS로 만들어져 있으며 아래 별꾸미는 부분은 Flex로 제작되었다. 별스킨, 위젯, 아이템들을 변경하거나 배치할 수 있다. 크기조절, 레어어조절, 회전등이 가능하며 위젯의 경우 관련 설정이 가능하다. 그룹으로 지정해놓으면 한꺼번에 이동 및 회전등이 가능하겠다.

별꾸미기를 만들 수 있는 것은 Flex이기 때문에 가능한 것 같다. 같은 것은 Javascript로 구현할려고 하면 절대 쉽지 않을 일이다. 개발하고 나서도 아이템이 많이지는 경우 각 객체를 처리하는데 있어서 포퍼먼스 문제도 닥칠 것이다. 하지만 Flex로 개발하면 이러한 문제가 줄어든다.

위젯은 ModuleManager를 이용해서 Load할 수 있도록 만들어져 있다.

멀티그룹지정하는 부분과 위젯설정 부분만 빼놓고서 이 꾸미기를 만드는데는 2일 걸렸다. 물론 순수하게 Flex부분만 말하는 것이다. 멀티그룹지정, 위젯부분은 생각보다 어려워서 약 3주정도 소요되었다.

4. 위젯

스타플에서 제공하는 위젯은 총 3가지(메모장, 말풍선, 친구링크)이다. 앞으로 위젯은 계속 추가될 것이며 외부 블로그나 홈페이지에서도 적극적으로 활용할 수 있도록 제작될 예정이다.

스타플에서 사용되는 위젯은 Flex위에 모듈(Module)형태로 로드되어 운영된다.
Flex가 모듈화 프로그래밍이 가능하기 때문에 이러한 위젯을 만들 수 있었던 것이다.
모듈화를 하면 처음 프로그램을 실행한 시점에 로드되지 않고 원하는 시점에 로드할 수 있다는 장점이 있다.

개발상 어려운 점은 모든 위젯이 같은 Interface를 가지고 만들어져야 한다는 것이였다.
전혀 다른 위젯이더라도 통일된 통신방식을 취해야한다. 그리고 각각 위젯에 들어가는 내용이 서로 다르므로 관련된 정보를 자유롭게 적용할 수 있도록 만들어져야 한다. 이것은 ActionScript3의 Interface(자바의 그것과 동일)가 가능하게 했다.
Inferface를 이용해서 설계를 하면 많은 장점이 있다는 것을 개발자라면 느꼈을 것이다.

각 위젯은 Module 클래스를 확장해서 만들어지며 ModuleManager 클래스를 이용해 로드된다.

개발기간은 별꾸미기 업그레이드와 함께 2~3주 소요되었다.

5. 별지도

별지도는 스타플의 핵심 기능 중에 하나이다.
수억개의 별을 한번에 출력할 수 없다는 것은 누구나 잘 안다.
그렇기 때문에 Flex으로 표현되는 클라이언트 기술뿐 아니라
서버사이드 측 기술도 함께 고려된다.

처음 별지도를 개발을 한다는 것은 ActiveX로만 가능할 듯 싶었다.
그러다가 찾은 것이 바로 Flex!
2006년 11월경 처음으로 접한 Flex는 별지도 개발 가능성을 열었다.
별지도 개발을 위해 여러가지 시도를 했었다.

개발 첫단계에 만들어본 것이 바로 별자리판(Planisphere) 였다.

실행해보기 : http://astronote.org/Planisphere
 
에 들어가면 직접 확인해볼 수 있겠다.

스타플의 별지도는 2D로 표현되어야 하므로 아래와 같은 프로그램도 개발한 적이 있다.

실행해보기 : http://jidolstar.com/blog/web_example/105/

이러한 과정을 거쳐서 만들어진 것이 바로 스타플 별지도이다.

일반 지도와 마찬가지로 확대/축소, 이동이 가능하다. 특별히 좌측 미니맵을 이용해 별자리로 바로 이동할 수 있도록 만들어져 있다. Zoom 및 Move Effect를 적용했기 때문에 자연스럽게 별지도가 움직일 수 있도록 만들어 졌다.


별지도는 미니맵이 있어 자신의 별의 위치와 지금 보고 있는 화면의 위치를 볼 수 있고, 확대/축소가 될 수 있도록 만들어져 있다.


사용자들에게 주어진 별은 십자표시로 빛나며 그 아래는 가입시 설정한 별이름이 적혀진다.
활동량에 따라 별밝기가 주어져 별 주변에 후광이 밝아질 수 있다. 그리고 자신이 원하는 별 스킨으로 변경시킬 수도 있겠다. 이 별스킨은 평상시 18단계 이상부터 볼 수 있다.



별지도는 Javascript와 통신하여 이동/확대뿐 아니라 기록을 미리 쉽게 볼 수 있는 도구로도 사용이 된다.



스타플 SNS의 특징중에 하나로 별지도에서 친구들과의 관계를 한눈에 볼 수 있다.
건강한 관계일수록 녹색으로 표현하게 된다.

많은 지도 서비스에서 Javascript를 이용한다. Javascript 기반으로 만들어지면 공개 API 보급에 유리한 장점이 있다. Javascript의 이러한 장점이 있음에도 불구하고 스타플의 별지도는 Flex로 만들어졌다. Flex를 선택한 가장 큰 이유는 바로 Drawing 때문이다. 각각의 별을 자유롭게 그릴 수 있고 선,면등과 같은 표현이 자유롭다. 이동,확대/축소시에 Animation 표현이 Javascript보다는 쉽다. 게다가 개발 능률도 한몫한다. 나중에 실시간 통신도 할 수 있으므로 Flex 선택은 당연한 것이였다.

별지도는 생각외로 다양한 Flex 기술이 들어간다. RSL, Module, AMF통신, HttpService통신, UIComponent를 확장한 컴포넌트, 커스텀 이벤트 활용, Effect, ExternalInterface, CSS, Bitmap활용 등 전반적으로 쓰여졌다.

지금은 서비스 형태이므로 천문학적인 요소가 많이 배제되어 있지만 앞으로 행성, 위성, 소행성, 혜성등의 위치와 성운,성단,은하 위치도 함께 표현하도록 만들어질 것이다.

SNS적인 차원에서는 별방문에 대한 실시간 표현을 통해 좀더 게임적인 요소가 SNS와 더해질 수 있도록 개발될 것이다.

만약 Flash Player가 하드웨어 지원을 바탕으로 하는 3D 랜더링이 가능하게 될 때는 별지도가 3D로 변모될 것이다. 그럼 더 현실적인 우주의 모습을 볼 수 있을 것이다. 이 점은 상당히 기대된다.


관련글

Flex Camp 1st in seoul 동영상 및 질문/답변 : http://blog.jidolstar.com/354
발표자료 : adobe_corptemplate_flexcamp_지용호.ppt

정리하며...

정리한 내용은 Flex의 한가지 활용 예가 된다고 생각한다.

Flex는 클라이언트 프로그래밍을 위한 것이지만 동시에 서버사이드 프로그래밍도 수반된다.
그리고 함께 고려되어야 하는 것이 Flex는 웹에서 돌아가므로 몇가지 보안사항도 이해하고 고려해야한다.
마지막으로 Flex로 무엇을 만들 수 있는지 알아야 선택권이 자유로워진다고 본다.

개인적으로 우리나라에서 산업현장 또는 여러 서비스에서 Flex로 만들어 성공한 사례가 많이 나왔으면 한다.
스타플(http://starpl.com)이 바로 Adobe Flex를 이용한 성공 사례의 주인공으로 남길 바란다.


참고 : 스타플은 현재, 초대제로 운영되고 있습니다.
직접 사용해보시고 싶으시면 이메일을 비밀댓글로 달아주세요.
그럼 가입절차때 필요한 인증번호를 드리겠습니다.

스타플은 리뉴얼중입니다.
더욱 좋은 서비스를 위해 최선을 다하겠습니다.

글쓴이 : 지돌스타(http://blog.jidolstar.com/337)

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

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

Adobe Flash Platform Adobe, AIR, flex, module, RSL, SNS, Starpl, 꾸미기, 별꾸미기, 별지도, 스타플, 우주, 위젯, 이미지에디터, 천문학, 컴포넌트, 타임라인