위젯, 이젠 직접 만든다

[쇼핑저널 버즈]

최근 사용자들의 PC나 휴대폰을 잠식해 들어오고 있는 인터넷 기반의 소비자 소프트웨어가 있다. 많은 사람들이 매우 다양한 형태로 사용하고 있는 위젯이 바로 그것으로 게임과 퀴즈, 사진 보정 툴 및 뉴스 단신 자막 등이 포함돼 있다.

사용하기는 쉬워도 직접 제작하기는 어려워 보이는 위젯이지만 '위젯 메이킹툴'과 사용자의 약간의 수고로움을 거친다면 누구나 자신만의 위젯을 만들어 볼 수 있다.

위젯 (Widget)위젯이란 시계와 날씨 환율정보와 같은 특정 기능 또는 유용한 정보와 콘텐츠를 담고 있는 작은 크기의 애플리케이션(Application)으로 사용자가 요구하는 편리한 기능을 제공하는 유용한 유틸리티를 의미한다.

위젯 사용자는 별도의 프로그램 없이 위젯 설치를 통해 유용한 정보들을 블로그, 웹 페이지, PC, 휴대폰 등에서 손쉽게 볼 수 있다.

■ 위젯의 특징위젯은 일종의 모음 유틸리티 프로그램으로 사용자가 정보를 얻기 위해 매번 여러 곳의 페이지를 방문하지 않아도 된다는 큰 특징이 있다. 그리고 위젯에서 제공하는 UI를 통해 사용자와 상호작용하며 PC 또는 웹(Web)에서 독립적으로 구동이 가능하다.

또한, 사용자게 맞는 개인화된 정보를 제공 할 수 있으며 웹에 있는 다양한 정보들을 실시간으로 제공한다.

이런 위젯은 생활정보에서 부터 광고까지 모든 종류의 정보와 콘텐츠를 담아 사용자에게 전달 할 수 있기에 매우 뛰어난 확장성을 가지고 있다.

특히 위젯은"원 소스 멀티 유즈(One Source Multi Use)"로 한 번 제작된 위젯은 홈페이지, 카페, SNS, 모바일(Mobile), 디바이스(Device) 등에 맞게 다양한 매체로 담을 수 있다. 이런 위젯은 그 설치 환경에 따라 웹 위젯, 데스크톱 위젯, 모바일 위젯으로 나뉘게 된다.■ 웹 위젯웹 위젯은 HTML 기반의 웹 페이지나 블로그 내에서 단일 기능을 수행하는 삽입과 삭제가 가능한 한 단위의 코드 묶음으로 (by Wikipedia) 사용자가 원하는 기능을 웹 페이지로 쉽게 담아갈 수 있도록 개인화 채널(Contents On Demand)이 된다. 따라서 효과적인 정보전달이 가능하며 사용자의 만족도가 높은편이다.

또한 위젯이 설치된 블로그와 카페에 방문하는 사용자들에게 노출되어 '퍼가기'를 통해 자발적인 바이럴(Viral)이 이루어질 수 있도록 유도하며 플랫폼간 호환성이 높으며(Cross-Platform, 크로스 플랫폼), DB가 웹에 있어서 데이터 동기화가 필요 없다는 장점이 있다.

■ 데스크톱 위젯사용자의 PC에서 구동되는 위젯으로 웹 위젯과 비교해 시각적으로 미려하며 보다 다양한 기능의 실행이 가능하다는 장점이 있다.

특히 웹페이지 접속 없이 PC의 구동과 함께 원하는 정보를 실시간으로 구독 할 수 있다. 하지만 서비스 제공자 마다 고유의 위젯 엔진을 제공하므로 위젯 상호간의 호환이 불가능 하다는 단점이 있다. 데스크톱 위젯은 로그인 기반으로 제작이 가능하며 타겟팅(Targeting) 된 정보만을 수집하여 사용자에게 제공하고 있다.

특히 데스크톱 위젯의 경우 가젯(Gadget)이라고도 하는데 원래 위젯의 기본개념이다. 가젯은 사용자의 컴퓨터 바탕 화면에 놓거나 웹 페이지 위에 호스트할 수 있는 가벼운 단일 목적의 응용 프로그램을 말한다.

그런데 이 가젯과 유사한 기능을 인터넷 웹으로 제공하는 경우가 있는데 이렇게 자신의 블로그나 카페와 같은 커뮤니티 기타 웹에서 제공하는 경우 웹 가젯(Web Gadget) 줄여서 위젯이라고 한다. 따라서 위젯은 웹브라우저가 기동되어야 이용할 수 있기 때문에 윈도에서 바로 제공하는 가젯과 차이가 있다.■ 모바일 위젯마지막으로 모바일 위젯은 이동통신 단말기 대기화면에서 프로그램의 바로 가기 기능을 수행하며 시작 되었다. 특히 위치 기반 서비스(LBS), 멀티미디어 메시지(MMS) 연동 등 무선 환경에서 접근이 가능한 서비스를 매시 업(Mash-up) 할 수 있다.

모바일 위젯은 데이터 통신 요금 등 위젯 이용에 대한 과금 체계가 매우 간편하여 유료화에도 유리하며 해외에서는 iPod, iPhone용 앱스를 제작하여 공급 할 수 있는 애플(Apple)의 앱스토어(Appstore)가 가장 독보적인 위치를 차지하고 있다.

국내의 경우, SK텔레콤이 티스토어(Tstore)를 오픈 하였으며 KT가 지난해 11월 'KT 앱스토어'를 런칭했다. 이에 따라 국내 위젯 기업들도 SKT 티스토어용 위젯 및 KT, LGT용 위젯 개발을 완료했거나 진행 중에 있다.

■ WZDAPI (위자드 API)국내의 위젯 기술 전문업체인 위자드웍스가 지난 1월 중 런칭한 'WZDAPI(위자드API) 개발자센터' 는 외부 개발자의 위젯 개발을 지원하기 위한 사이트로 어느 정도의 지식만 가지고 있는 유저라면 누구나 자신이 꿈꾸던 위젯을 직접 제작해 볼 수 있는 사이트이다.

이를 위해 WZDAPI 개발자센터에서는 개인 개발자는 물론 기업에서도 누구나 편리하게 위젯을 만들 수 있도록 상세한 개발환경 문서와 튜토리얼, 포럼 등 개발자 편의를 위한 각종 기능들을 무료로 제공하고 있다.

해당 사이트에서 제공되는 위젯 에디터를 실행하면 웹상에서 편리하게 위젯을 개발할 수 있으며 개발중인 위젯의 간단한 버전 관리도 가능하다. 위젯 개발이 모두 끝나면 클릭 한 번에 관리자에게 검수를 요청해 편리하게 실 서비스로 전환할 수도 있다.

특히, 검수가 통과돼 실 서비스로 전환된 위젯은 현재 네이버, 다음, 싸이월드 등 국내 3대 포털에 위젯을 제공하고 있는 위젯 갤러리 서비스인 위자드팩토리( http://wzdfactory.com)에 자동으로 등록된다. 특히 네이버의 경우는 등록과 동시에 위젯 배포가 가능해지기 때문에 네이버 사용자에게 자신의 위젯을 제공하기 위한 가장 빠른 방법으로 각광받고 있다.

또한 이미 외부 개발자들이 만든 위젯들은 제휴 포털에서 큰 인기를 끌고 있다. 대표적으로 대학생들이 개발한 관상용 물고기 위젯인 '블루씨'는 네이버 제휴 이후 가장 큰 수혜를 입어 지금까지 25만 개 이상의 블로그에 설치돼 2억 페이지 뷰를 기록했다.

서울시가 만든 광고 위젯인 '서울문화꽃' 역시 네이버 유저들의 폭넓은 사랑을 받아 12만 개 이상 블로그에 설치돼 1억 5천만 페이지 뷰를 달성했다.

이처럼 위젯이 웹사이트의 트래픽 확보에 큰 도움이 되고 있음에도 불구하고 그 동안 위젯 개발이 주로 기업 간의 제휴로 진행되거나 난이도가 높아 개발자들의 참여가 극히 미미했다. 이 같은 상황에 WZDAPI 개발자센터가 오픈돼 누구나 자신이 가진 콘텐츠를 손쉽게 포털에 올릴 수 있는 길이 마련된 것이다.■ WZDAPI 기본 스펙WZDAPI를 통해 위젯을 제작하기 위해서는 WZDAPI가 제시하는 스펙을 따라야 하며 WZDAPI는 기본적으로 한 개의 XHTML 파일과 한 개의 아이콘 파일로 구성된다.

XHTML 파일 아래에서 일반적인 XHTML 문서를 만드는 방법과 거의 동일한 방법으로 만들어져 기본적인 HTML 규칙은 알아야 한다. WZDAPI를 따르는 위젯이 만족시켜야 하는 조건은 아래와 같다.

▲ 위젯은 XHTML 형식의 파일 하나로 구성된다 ▲ 이 파일은 UTF-8 문자 셋으로 작성되어야 한다 ▲ 이 파일의 XML 네임스페이스(namespace)로 http://wzdapi.com/widget/을 포함해야 한다 ▲ 이 파일에 주어진 외부 CSS나 외부 자바스크립트 파일은 위자드팩토리와 위자드닷컴에 등록할 때 자동으로 제외된다.

그리고 개발 및 테스트를 마친 후 위자드팩토리와 위자드닷컴에 등록하실 때는 반드시 필요한 외부 CSS나 외부 자바스크립트 파일을 XHTML 문서 안에 포함시켜 등록을 해야만 정상적인 등록이 가능하다.■ 위젯 제작하기 : '실시간 검색어 위젯'WZDAPI 사이트 접속 및 가이드 페이지WZDAPI의 초기 화면에서는 전반적인 위젯 제작 프로세스와 WZDAPI 등록 시 장점 등에 대한 설명을 해주고 있다.

'위젯 제작 가이드' 설명 페이지에서는 제작자 정보를 입력하는 기본정보 입력 및 제약사항과 위젯 설정 창을 어떻게 구성하는지에 대해서 설명하고 있으며 자바스크립트(Javascript) 구성을 어떻게 해야하는지와 확장된 기능으로 현재는 플래시 위젯을 어떻게 등록하는지에 대한 설명이 있다.

쉽게 따라 해보는 '튜토리얼'이미 제작된 위젯을 모델로 삼아 실제 제작 과정을 단계별로 보여주는 페이지로 현재 실시간검색어, 올블로그, 환율, RSS, 플래시 위젯 등의 샘플 예제가 있다.

우선 여기서는 코드와 제작이 간단한 편인 실시간 검색어 위젯을 예로 확인해 보도록 하자.-STEP 1 - 필수사항/위젯정보 입력 및 제약사항'위젯제작가이드'에서 설명한 프로세스대로 소스코드와 함께 설명하고 있으며 페이지 상단에는 구체적인 설명 하단에는 실제 코딩 정보를 제공하고 있다.

제약사항 페이지에서는 실제 위젯 제작 시 제약사항에 대해서 설명을 하고 있으며 CSS 제약사항과 XHTML 제약사항 등 2가지의 제약 사향을 설명해 주고 있다.

-STEP 2 - 설정창 및 자바스크립트 구성위젯 제작에 필요한 기본정보를 알려주고 있으며 다수의 프리퍼런스(preference) 태그를 포함한 속성 목록을 나열하고 있다.

XHTML에서는 스크립트 태그 안에서도 < , > , & 등의 문자를 반드시 이스케이핑 해야 하므로 자바스크립트 코드를 쓰기에는 불편한데 이를 해결하기 위해 사용하는 XML의 CDATA 기능의 주의점 등도 설명하고 있다.

실제로 해당 페이지에서 위젯에 필요한 거의 모든 객체 및 메서드에 대해 설명하고 있으며 앞서 언급한 페이지들과 마찬가지로 스텝 바이 스텝(Step-By-Step) 으로 설명한 코드를 통합하여 확인해 볼 수 있는 미리보기 버튼을 지원해 제작에 사용된 코드들이 실제 어떤 식으로 보이는 지를 실시간으로 확인할 수 있다.

내 위젯 관리메인 페이지의 '내 위젯 관리' 메뉴를 통해서 사용자가 제작한 위젯을 관리할 수 있다. 해당 페이지의 '위젯만들기' 메뉴를 클릭해 '위젯의 이름'을 입력하는 팝업에서 시작해 실제 위젯 제작에 돌입하게 되며 제작 이후 해당 페이지의 메뉴를 통해서 위젯도 등록할 수 있다.

미리보기를 통해서 확인해보면 앞에서 바꾼 위젯 기본 정보가 반영된걸 확인할 수 있다

앞에서 작성한 코드를 이름/수정 및 변경내용과 함께 저장됨

다른 이름으로 저장 버튼을 통해서 변경 이력들을 작성해서 버전관리를 할 수 있다

위젯 등록 상태 확인위젯의 개발 진행 상태에 따라서 여러 단계로 나뉘어져 손쉽게 파악할 수 있다.- 보관중인 위젯 : 개발 테스트를 계속 하고 있는 상태 (등록요청 하기 전)- 심사 중인 위젯 : 등록요청을 하여 위자드웍스에서 문제가 없는지 테스트 하는 상태- 등록 보류된 위젯 : 개발 및 기획 상의 문제로 등록을 보류한 상태- 등록 완료된 위젯 : 개발 및 기획 상의 문제가 없어 등록을 완료한 상태이며 등록을 완료된 뒤에 개발자 및 위자드웍스 최종 테스트 후 위자드팩토리에 등록이 된다.

[ 관련기사 ]▶ 네이버에서도 '다음 위젯뱅크' 쓴다▶ 오페라 위젯, 이젠 데스크톱에서 즐긴다▶ 웹페이지가 위젯으로 변신한다?▶ 위젯으로 블로그끼리 고해상도 이미지 공유한다이버즈 트위터에 추가하기pc라인 박창근 기자(zzadoc@pcline.co.kr)'IT 제품의 모든것'-Copyright ⓒ ebuzz.co.kr, 무단전재 및 재배포 금지