오페라 위젯 SDK
Translated by Jin-Young Jang · 17 Nov, 2009
Opera Widgets SDK, written by Opera Software.
- 다음 글—첫 위젯 만들기
- Article last updated: 28th July 2009 - minor typo fix
목차
오페라 위젯 SDK가 버전 0.3으로 업데이트 되었습니다! 오페라 위젯 SDK 0.3 패키지 다운로드 (ZIP 파일, 12.9MB)하고, 이 기사에서 링크된 문서를 통해 확인하십시오.
소개
오페라 위젯은 웹 기술로 만들어진 교차-플랫폼 및 교차-장치 응용프로그램입니다; 따라서, 오페라 위젯은 빠르고 쉽게 개발하고 최소량의 적응으로 다른 장치에 배포할 수 있습니다. 그림 1은 핸드헬드 장치용 오페라 위젯의 예를 보여줍니다.
오페라 위젯 소프트웨어 개발 키트 (SDK)는 도구, 라이브러리, 문서, 그리고 다른 장치용 오페라 위젯을 어떻게 만드는지에 대한 예제로 이루어져 있습니다. 이 문서는 오페라 위젯을 만드는데 도움이 되는 다양한 리소스를 가리킵니다. 또한 주요 기능과 기본적인 위젯을 만드는 법을 배우기 위해 위젯 SDK 가이드 투어 동영상 보기를 할 수도 있습니다.
아래의 모든 자원을 사용할 뿐만 아니라, 도움을 받기 위해 오페라 위젯 포럼을 방문할 수도 있습니다.
그림 1: 핸드헬드 장치용 위젯.
전제조건
오페라 위젯 개발과 리소스를 만드는 전제조건으로서, HTML, CSS, DOM, 자바스크립트, 그리고 다른 오페라9 플랫폼이 지원하는 웹 기술을 사용해 웹 페이지를 개발하는 방법을 이미 알고 있다고 가정합니다.
시작하기
위젯 개발을 빠르게 시작하기 위해, 우리는 위젯 개발 속도를 빠르게 올리는데 도움이 되는 패스트-트랙 가이드를 제공했습니다; 도움을 얻기 위해 오페라 위젯 포럼을 방문할 수도 있습니다.
오페라 위젯 런타임은 오페라 브라우저에 기반합니다; 따라서, 모든 표준 웹 기술을 브라우저에 의해 지원하는 위젯 개발자를 위해 사용할 수있습니다. 오페라 위젯은 zip 아카이브로서 배포되고 사용자의 컴퓨터 또는 장치에 다운로드되어 실행됩니다.
이 섹션에 있는 문서는 오페라 위젯을 만드는 세계를 향한 초보자를 위한 것입니다. 더욱 일관적인 리소스를 만드는 몇 가지 힌트와 팁과 오페라 위젯 개발 속도를 높이는데 도움이 될 코드 리소스를 제공함으로서, 위젯 만들기의 기본과 패키지와 배포하는 법을 가르쳐 줄 것입니다.
- 첫 위젯 만들기
- 오페라 데스크톱 브라우저용 위젯 만들기 소개; 모바일 위젯을 만들기 원하는 누군가에게 유용한 시작점이기도 합니다.
- 위젯 패키징과 배포
- 배포 형식은 .wgt으로 끝나는 zip 파일이고 예비 MIME 형식은 application/x-opera-widgets입니다.
- 오페라 위젯 스타일 가이드
- 위젯을 일관적인 그래픽으로 만드는 법에 대한 힌트. 이 버전의 문서는 데스크톱 위젯에 집중합니다.
- 오페라 위젯 리소스
- 오페라 위젯의 개발 속도를 높이는데 도움이 되는 그래픽과 코드.
오페라 위젯 관리자 응용프로그램
오페라 위젯 관리자는 브라우저 독립적으로 위젯을 정리하고 실행하는 응용프로그램입니다. 오페라의 위젯 배포 채널과 통합되있고 - widgets.opera.com – .wgt 확장자 파일을 받습니다.
오페라 위젯 SDK (util/manager/ 폴더 안)에 두 가지 버전의 위젯 관리자 응용프로그램이 있습니다:
- 윈도우 모바일용 오페라 위젯 관리자
- S60 플랫폼용 오페라 위젯 관리자 개발자 버전
그림 2: 다른 플랫폼에서의 오페라 위젯 관리자 응용프로그램
문서
이 섹션에서는 공식 오페라 위젯 사양, 오페라 위젯 핵심 DOM 레퍼런스, 그리고 다른 모드 (예 도크 및 전체 화면)에서 화면에 표시하는 법, 위젯에서 여러 서버에 접속하는 법, 오페라 위젯 설정 저장소에 위젯 데이터를 저장하는 법, 그리고 오페라 위젯 보안 모델에 대한 정보를 포함하는, 다양한 출처의 문서로 구성되어 있습니다.
- 오페라 위젯 사양 1.0, 3판
- 사양은 기존의 웹 문서와 위젯간 차이점을 설명하고 있습니다.
- 오페라 위젯 코어 DOM 레퍼런스
- 이 문서는 오페라 위젯을 조작하는 자바스크립트를 위한 위젯 코어 DOM API에서 사용가능한 것에 대해 다룹니다. 또한 JavaDoc 스타일 레퍼런스 섹션도 같은 내용을 다룹니다.
- Support notes
- 다른 플랫폼에서 지원되는 오페라 위젯 기능의 개요
- 위젯 모드 - 도크, 위젯 등
- 위젯은 한 모드 이상, 예를 들면 전체화면 또는 도크에 표시하는 위젯 런타임에 의해 요청될 수 있습니다.
- 오페라 위젯과 Ajax: 여러 서버에 접속하기
- 이 문서는 매시업 위젯을 만들기 위해 Ajax를 사용하는 법을 설명합니다.
- 오페라 위젯 설정 저장소
- 키/값 쌍을 저장하고 위젯 재시작 후에도 사용가능하게 합니다.
- 오페라 위젯 보안 모델
- 이 문서는 오페라 위젯 내부 운영 보안 모델을 설명합니다.
모바일 및 교차 장치 개발
오페라 소프트웨어의 목표는 어디서 누구나 장치/플랫폼에 관계없이 같은 정보에 접근할 수 있는, 하나의 웹입니다. 오페라 위젯 기술은 휴대 전화, TV, 데스크톱 컴퓨터, 게임 콘솔, 그리고 웹에 접근할 수 있는 다른 장치들을 통해 작동하도록 설계되었습니다. 이 섹션은 다른 장치에서 위젯을 작동하게 하는 문제에 대한 논의를 포함합니다.
- 교차-플랫폼 응용프로그램으로서의 오페라 위젯
- 크로스 플랫폼 위젯을 만드는 것과 관련된 몇 가지 기본적인 문제에 대한 소개입니다.
- 모바일 특성
- 이 문서는 어떤 종류의 모바일이, 개발에 어떤 영향을 미치는지 토의합니다.
- 위젯을 위한 교차 장치 개발 테크닉
- 모바일 응용프로그램을 설계하고 성능을 향상시키는 테크닉.
- 모바일 개발 프로세스에 대한 조언
- 이곳에서 모바일 개발에 대한 일반적인 팁을 찾을 수 있습니다.
- 위젯에 도크 모드 추가하기
- 이 기사는 위젯에 도크 또는 마이크로 위젯 모드를 추가하는 법을 가르칠 것입니다.
- 모바일과 장치에 오페라 위젯 그래픽 최적화하기
- 모바일과 장치에 사용하기 위한 위젯 그래픽 최적화에 대한 몇 가지 도움말을 제공합니다.
- 다양한 해상도를 위한 커스텀 오페라 위젯 아이콘
- 이 튜토리얼은 다양한 해상도의 교차 장치에서 작동하는 효과적인 위젯 아이콘 모음을 만드는 법을 보여줍니다.
- 오페라 드래곤플라이로 원격 디버깅하기
- 이 문서에서, 오페라 드래곤플라이를 사용하여, 웹 사이트와 모바일 장치상 위젯을 디버그하는 법을 설명합니다.
자원
도구
오페라 소프트웨어는 위젯 개발에 도움이 될 수 있는 몇 가지 도구를 공급합니다.
- 위젯 에뮬레이터
- 저 대역폭 장치를 포함한, 다른 장치에 위젯을 나타내는 방법을 에뮬레이트합니다.
- 오페라 드래곤플라이(개발자 도구)
- 자바스크립트를 디버그하고 CSS와 HTML DOM을 검사하는 오페라 소프트웨어의 개발 도구. 휴대 전화로 원격 디버깅에 대한 지원이 계획되어 있습니다.
- DOM 검사기
- 검사기는 Ajax와 자바스크립트에 의해 수정되는 대로 동적으로 변하는 DOM의 현재 상태를 보여줍니다. 드래곤플라이보다 오래된 도구지만, 드래곤플라이 (9.5 베타 2 이전)를 지원하지 않는 오래된 버전을 사용하는 개발자들의 편의를 위해 여전히 포함했습니다.
- 오페라 드래곤플라이와 위젯 에뮬레이터를 사용해서 위젯 디버깅하기
- 오페라 드래곤플라이와 위젯 에뮬레이터를 함께 사용하여 효과적으로 위젯을 디버그하는 방법을 보여주는 문서.
라이브러리
오페라 소프트웨어는 더 쉽게 개발하도록 돕는 여러 개의 자바스크립트를 만들었습니다 - 아래는 위젯 제작에 가장 관련이 있는 것들입니다. 더 자세한 내용은 dev.opera.com의 라이브러리 섹션을 방문하십시오.
- 애니메이션.
- 오페라 애니메이션 라이브러리에 대한 튜토리얼. 위젯에 효과와 눈요기를 추가합니다.
- 테스트 미디어 쿼리.
- 자바스크립트로 미디어 쿼리를 시험하는 라이브러리 함수. 현재 장치의 미디어 유형을 감지하는데 사용할 수 있습니다.
자산
오페라 소프트웨어는 자산, 예를 들면 위젯에 사용될 수 있는 그래픽을 제공합니다.
- 위젯 아이콘 템플릿
- 포토샵 템플릿은 위젯 아이콘의 기본으로서 사용될 수 있고 위젯 아이콘 튜토리얼에서 특집으로 다룹니다. 아이콘 템플릿을 얻으려면, SDK 패키지
resources/widget-icon-templates/폴더를 보거나 또는 dev.opera.com에서 다운로드합니다.
웹 기술로 작업하기
오페라 위젯이 오페라 브라우저와 동일한 코어를 사용하는 것은 웹 페이지에 사용되는 모든 웹 기술이 위젯에도 사용될 수 있음을 뜻합니다. 여기에는 HTML5, SVG, Canvas, XHTML+음성, XSLT 등이 포함되어 있습니다..
- 위젯이 말하게 하자: 위젯과 XHTML+음성.
- 이 기사는 위젯에서 XHTML+음성을 사용하는 법을 설명합니다.
- 확장가능한 서버 Sent 이벤트.
- 이 블로그 게시물은 HTML 5 서버-sent 이벤트를 확장가능하게 하는 법과, 위젯에서 이상적인 사용을 설명합니다.
dev.opera.com에서 웹 표준을 사용하는 더 많은 기사를 참조하십시오.
웹 사이트
이 섹션은 위젯을 만들때 유용할 웹 사이트를 포함합니다.
- widgets.opera.com.
- 최종 사용자에게 사용가능하도록 오페라 위젯 저장소에 위젯을 게시하십시오. 누구나 위젯을 업로드할 수 있지만, 최종 사용자가 사용가능하기 전에 오페라 소프트웨어가 시험합니다.
- 오페라 위젯 포럼.
- 오페라 커뮤니티 포럼에서 오페라 위젯에 대해 토론하는 곳.
- 오페라 XML 저장소 홈페이지.
- Experimental! 오페라 XML 저장소는 범용의 서버측 데이터 저장소를 제공합니다. 사용자와 사용자 그룹의 데이터 접근 권한을 정의할 수 있고, 위젯은 저장소를 사용할 수 있습니다.
- dev.opera.com.
- 오페라의 웹 개발자 교육 사이트 - 이곳에서 문서, 튜토리얼 그리고 전문가의 조언뿐만 아니라, 동료 웹 개발자들과 주제를 토론하는 포럼을 찾을 수 있습니다.