SK Telecom tstore Haptic Widget 개발기

우리 회사는 홈페이지 제작 및 유지 관리 밖에 하지 않는 곳이다.

그런데 갑자기 모바일 프로그램이라는 프로젝트가 하나 떨어졌다..

물론 웹 페이지 제작에 부수적으로 들어가는 것이긴 하지만...


코오롱 헤드 사이트에 부수적으로 들어가는 위젯 개발...

그런데 기획에서 이걸 제안할때 개발팀 협의가 없었다는 것이 문제였다.

누가 할수 있겠는가...  아니 시간은 촉박한데.. 그걸 배워서 언제 할수 있겠는가가 맞겠다..

다행이 모든 소스 코드는 자바스크립트로 되어 있어 내가 당첨아닌 당첨이 되어 버렸다..


일단 위젯 개발 프로그램을 다운받아 api 문서를 보기 시작 했다..

위젯 개발의 큰 그림은 다음과 같다..


SK Telelcom Widget Studio 로 개발 후 티스토어 인증 시스템을 통해 인증한 시스템 화일을 등록하여

검증을 통과하면 등록 및 판매가 되는 시스템이다..

말로는 쉽지만.. 이게 처음이라 말처럼 호락호락 하지 않았다..


일단 티스토어에 등록하기 위해서는 개발자 사이트 이외에 검증 시스템 사이트에도 접근을 하여야 한다.

캡쳐화면으로 살펴보겠다..


1. Widget Studio 다운 받기.
    http://dev.tstore.co.kr 로 들어가면 다운로드를 받는 곳이 있다..
    이 프로그램도 아직은 안정적이지가 못한것 같다..
   1월에 배포한 프로그램은 자바스크립트 코드를 이상하게 변경해 버리는 버그가 있어
    이게 버그인지 모르고 하루를 허비했었다.

해당 링크를 클릭하면 티스토어 검증 시스템으로 이동하여 다운로드를 받을수 있는 페이지로 이동한다.

해당 페이지에서 화일을 다운 받는다..

해당 프로그램은 추후 지속적인 업그레이드가 있을 것 같으므로
가급적 공지 사항을 확인하여 최신 버젼을 다운 받을 수 있도록 한다.

일반적인 프로그래밍 툴들과 별반 차이는 없다.

프로젝트 탐색기 : 현재 프로젝트에 대한 정보를 출력해준다.
개체보기 : 프로젝트 내부에 있는 각 개채에 대한 목록을 출력한다.
소스 편집 및 개체 편집 영역 : 개체들을 디자인 하고 소스를 입력하는 공간이다.
출력창 : 컴파일 내용 및 결과등을 표시한다.
속성창 : 개체들의 속성과 이벤트 들을 정의한다.
도구 상자 : 개체 도구를 모아 놓는다.

프로젝트를 생성하면 위의 화면처럼 나타난다...
( 원래는 연예인 사진이나 혹시라도 초상권 침해에 걸릴까봐 모자이크 처리..  - 소심...  -_-;;  )


최초 프로그램 구동시 main.xml 을 구동하여 다른 xml 폼 프로그램을 실행시키게 된다.

xml 이 form 디자이너 그리고 js 화일이 그에 따른 xml 에서 구동되는 프로그램을 작성되게 한다.

프로그램 작성에 대한 내용은 API 문서를 참고하면 될것이고..


프로그램 작성 완료 후 티스토어에 등록하는 방법에 대해서 알아보자.


티스토어에 등록할때는 dev.tstore.co.kr 을 이용하여 등록을 하게 된다..

그러기전 소스코드는 승인 시스템을 거친 화일로 생성이되어야 한다.

다음은 승인된 바이너리 화일을 만들어 주는 화면이다.

승인된 바이너리 생성을 클릭하면 해당 계정을 물어본다.

이 것은 승인 시스템에 해당 계정 사용자의 인증서를 만들어서 프로그램 생성시 유효성 확보 목적에 목적을 두는 듯 하다.

인증서가 없으면 인증서를 생성하라는 안내가 뜨며 인증서 비밀번호만 입력하면 자동으로 생성된다.

주의점 : 절대 인증서를 한번 등록하여 검수를 요청 한 후 검증이 완료될때 까지는 인증서를 파기 하거나 변경 해서는 안된다.

이제 티스토어에 올릴 화일을 만들어야 한다..

로그인을 하면 아래와 같은 창이 뜬다.

꼭 주의해야 할 부분만 설명을 한다.

Program Name : 프로그램 이름은 보통 어플리케이션 ID 를 넣어두었다.
                       이 값을 둘로 나눠 편의상 CID 와 SID 를 등록한다.
TItle : 프로그램 등록시 제목과 이 부분이 일치 하지 않으면 OMP 에러라고 검증이 반려된다.
         이 부분을 찾지 못해 검증 반려 4번정도 되었다.
Vendor : 제공자인데.. 그냥 일반적인 회사명을 입력하면 된다.  난 클라이언트 사명을 넣었다.
Version : 보통 1.0 버젼으로 한다.. 특별한 버젼업이 없는 이상은...

WAM UI ( Icon ) : MplayOn 목록에 보여질 BMP 화일 24 x 24 사이즈로 작성한다.
  Animation Icon : xaf 를 생성해서 등록한다..
 이걸 만들기 위해서는 WIPI 2.0 SDK   WIPI ResEditor 을 설치하여 생성 하여야 한다..
( 처음엔 무지 복잡했다... )

Output : 생성 완료후 생기는 화일 명이다..

자 그리고....

여기서 간과하면 안될것이 있다.. 바로 디자인들....

등록하기 위해서는 꽤 많은 디자인들이 필요로 한다.

현재 작업되어 있는 아이콘 화일들의 사이즈는 다음과 같다.
이미지는 모두 jpg 를 권장한다.

설명 이미지 화일 : 650 x 650 ( 이건 너무 큰걸 올려서 리사이즈 되어 버렸다.. 쩝. )
미리보기 이미지 : 권장 사이즈 158 x 212
상품 대표 아이콘 : 212 x 212 , 76 x 76

아이콘 화일 Mplayon 에서 보여질 아이콘 화일(24x24) - 핸드폰 위젯 목록에서 표현될 아이콘 화일
움직이는 gif 애니메이션 아이콘 화일(36x36) - 해당 위젯을 선택하면 크게 보여지는 화일


검증 시나리오 : ppt 던지 xls 던지 해당 프로그램에 대한 기능과 이상 없다는 테스트 보고서

저작권에 대한 문서 : 해당 컨텐츠나 이미지등에 저작권이 있을 경우 자신이 해당 저작원에 대한 사용을 허락 받았다라는 증거자료 첨부

위와 같은 화일들이 모두 갖춰져야지만 등록이 가능하다...

자 이것들이 모두 등록이 되어 있으면 이제 검증을 요청하면 된다.

 
p.s : 다음에 실수 하지 않기 위해 대략적으로 정리해 보았다..
 부족한 점도 있겠지만..  이렇게 블로그에 정리하는 것도 쉽지 않군.. 쩝..
 
암튼 또 다른 모바일 개발을 위하여...

티스토어에서 모토로이 어플 개발에 대한 공지가 나왔다..

아이폰을 제외한 나머지 모바일 운영체제들은 해상도 부터 차이가 나서 개발하기 너무 까칠 하다.. 쩝..