Junios World :: 가젯이라

Windows Live 가젯 디자인 가이드

Windows Live 가젯이란?
주 인터페이스 디자인 지침
가젯 모드
웹 페이지 탐색
속성 지정 지침
데이터 공급자
가젯 작동 해제

Windows Live 가젯이란?

가젯이란 단일 작업과 관련된 서비스 및 정보를 단순하고 간결한 인터페이스를 통해 사용자에게 제공하는 간단한 소형 응용 프로그램입니다.

가젯은 다음 특징을 갖습니다.

단일 작업 또는 사용자 목표에 중점을 둡니다.
소형이고 간단하며 의도적으로 기능상에 제약을 두었습니다.
필수 정보와 기능을 제공합니다.
사용자가 쉽게 이해할 수 있는 정보를 제공합니다.
주변 환경에 잘 어울리지만 모양, 느낌 및 동작은 독특합니다.
사용자를 이끄는 매력적인 작업 환경을 만듭니다.
응용 프로그램을 대신하지 않습니다.

가젯은 여러 다양한 기능의 컨테이너가 아닙니다. 가젯을 설명하는 지침 텍스트를 추가한 경우에는 가젯이 좀 더 복잡해질 수 있습니다.

예:

깔끔한 UI
직관적인 구성
간결함
단일 작업이나 목표에 중점을 둠

주 인터페이스 디자인지침

가젯을 디자인할 때는 다음 지침을 따르십시오.

가젯의 디자인은 기본 목적을 벗어나지 않아야 합니다.
사용자는 최소한의 설명이나 구성으로 가젯을 쉽게 사용할 수 있어야 합니다.
가젯은 공간을 효과적으로 사용해야 합니다. 가젯의 높이가 400픽셀 이상 증가하지 않도록 옵션을 지정할 경우 기본 상태에서 가젯은 200픽셀(높이)보다 작거나 같아야 합니다.
가젯은 단일 작업에 주안점을 두어야 합니다. 가젯은 응용 프로그램을 대신하지 않습니다. 실제로는 기존 응용 프로그램이나 기능을 보완해야 합니다. 가젯을 사용하면 사용자의 홈 페이지에 제품/서비스 또는 기능을 제공할 기회를 줍니다.
빠르게 반응하며 정보를 즉시 표시합니다. 사용자가 콘텐츠가 나타날 때가지 기다리게 해서는 안 됩니다 사용자가 콘텐츠를 기다려야 할 경우 가젯은 사용자에게 적절한 피드백을 제공해야 합니다.

가젯 모드

시작
이 모드에서는 가젯의 아이콘과 이름이 표시됩니다. 이 모드는 “my stuff”와 “my stuff”로 표시됩니다. 또한 사용자가 어떤 가젯인지 알 수 있도록 최대한 설명적이어야 합니다.

Launch Mode

축소
이 모드는 가젯의 이름과 아이콘으로 구성되며, 경우에 따라 아래에 표시된 날씨 가젯처럼 특정 정보를 제공할 수도 있습니다.

Collapsed Mode

확장
가장 일반적인 표준 가젯 보기입니다. 이 상태에서 가젯은 200픽셀(높이)보다 작거나 같아야 합니다.

Expanded Mode

웹 페이지 탐색

가젯의 제목 사용
가젯 제목에 URL을 설정할 수 있습니다. 이 URL을 클릭하면 새 브라우저 창이 열리고 링크를 따라 이동됩니다.

Using Tile of the Gadget

데이터 공급자

대부분의 가젯은 매시업으로, 기존 데이터 피드를 활용합니다. 외부 데이터에 액세스할 때 다음과 같은 몇 가지 사항에 유의해야 합니다.

정보가 정확한지 확인합니다.
해당 데이터가 사용되는 방식을 알리기 위해 데이터 공급자에게 연락하는 데 필요한 몇 가지 단계를 수행합니다.
가젯의 속성 지정 섹션을 사용하여 데이터 공급자를 승인합니다.
데이터 피드가 갑자기 변경되거나 사용할 수 없게 될 때 가젯은 적절히 응답해야 합니다.
데이터 공급자의 콘텐츠를 사용할 수 있는 권한이 있어야 합니다.

인증
가젯이 제공되는 것 이상의 인증을 요구할 경우 다음 지침이 권장됩니다.

사용자에게 알립니다. 인증을 받기 위해 다른 서버에 ping해야 할 경우 진행률, 상태 등을 나타내는 피드백을 사용자에게 제공합니다. 가젯은 중단되었거나 응답하지 않는 것처럼 보이면 안 됩니다.
반드시 필요할 때 인증을 요구합니다. 결과 정보가 가치있는 사용자별 정보를 제공하지 못한다면 사용자 인증 과정을 진행하지 마십시오.

가젯 작동 해제

일부 가젯의 수명은 제한되어 있습니다. 예를 들어, 어떤 팀에서 슈퍼볼 가젯을 만들었는데 몇 주 후에 이 가젯이 더 이상 작동하지 않을 수 있습니다. 가젯은 작동이 중지되거나 오래된 콘텐츠를 제공해서는 안 됩니다. 이러한 경우 가젯은 사용자에게 해당 가젯을 제거할 것을 알리는 특정 형식의 RSS 서비스를 포함해야 합니다.

Windows Live 가젯 개발자 가이드

Windows Live Gadget Development Resources 자료 다운로드

소개
- 가젯 개발을 위한 요구 사항
- 샘플 다운로드
가젯 작성
- 환경 설정
- Internet Explorer에서 캐시 비활성화
- ASP.net을 사용하여 가젯 작성
- Hello World 샘플로 작업 시작
- 가젯 분석
- 콘텐츠 정의
- 테스트 및 디버깅
- 유용한 정보 출처
고급 가젯 기술
- 네트워크 스택에서 XML 이용
- XML을 소스로 이용
- 기본 설정 저장
- 제목 표시줄 아이콘 사용
- iframe 보안 무시
- 웹 페이지를 가젯으로 포함
- 고급 가젯을 위한 추가 기능
바인딩 기본 사항
- 바인딩이란?
- 바인딩 작업
최상의 방법 및 성능
- 메모리 누수 피하기
- 네임스페이스 지정 규칙

Windows Live 가젯 개발 리소스

Windows Live 가젯 개발 리소스
여기에서는 Windows Live 가젯 SDK 외에, 멋진 가젯을 성공적으로 만드는 데 도움이 되는 추가 리소스 목록을 제공합니다. Windows Live 가젯을 개발하기 위해서는 HTML, DOM, CSS 및 JavaScript 개념을 잘 이해해야 합니다.
참조용 웹 사이트

Microsoft Gadgets - 가젯 개발을 중점적으로 다루는 커뮤니티 사이트입니다. 다양한 가젯을 다운로드할 수 있는 가젯 갤러리도 제공됩니다.
Windows Live Developer Center - Windows Live 플랫폼 및 서비스 개발을 중점적으로 다루는 개발자 대상 사이트입니다.
Visual Studio 2005 Home - Visual Studio 2005의 이점과 구매 방법을 소개합니다.
Visual Web Developer Express Home - Visual Studio 2005가 없는 경우 이 무료 IDE를 다운로드하십시오.

ASP.net Atlas 프레임워크

Atlas 설명서와 리소스
Creating an 'Atlas' Gadget for Live.com - ASP.net을 사용하여 Windows Live Gadget을 만드는 방법을 소개합니다.

JavaScript 및 DOM

JScript User's Guide - MSDN에서 제공하는 유용한 JavaScript 설명서입니다.
W3C DOM Specification - W3C에서 제공하는 공식적인 DOM 표준 사양입니다.

HTML 및 CSS

CSS Reference - MSDN에서 제공하는 CSS 스타일시트에 대한 설명서입니다.
W3C HTML Tutorial - 기본 HTML 학습을 위해 W3C에서 제공하는 간단하고 쉬운 자습서입니다.
W3C CSS Tutorial - CSS 학습용 자습서입니다.

기타 가젯 개발

Sidebar Gadget Development Overview - Windows 사이드바에서 실행되는 가젯 생성 방법을 배울 수 있습니다.
Windows SideShow Gadget - Windows 사이드쇼에서 실행되는 가젯 생성 방법을 배울 수 있습니다.

Windows Live 가젯 개발자 검사 목록

Windows Live 가젯 개발자 검사 목록
가젯 매니페스트

가젯 네임스페이스는 <회사 이름>.<팀 이름>.<기능 이름> 형식을 따릅니다.
가젯 아이콘은 투명한 .GIF 형식으로 지정해야 합니다. 투명한 .PNG 형식은 Live.com에서 올바르게 렌더링되지 않습니다.

가젯 JavaScript 코드
일반

본인 확인 정보는 setPreference() 메서드를 통해 저장되지 않습니다. 플랫폼에 저장된 기본 설정은 유선상으로 일반 텍스트 형태로 전송됩니다.

네트워크 요청은 XMLHttpRequest 개체를 통해 수행되면 안 됩니다. 대신 Web.Network.createRequest() 및 관련된 호출을 사용하여 네트워크 요청이 적절히 프록시됨으로써 도메인에 관계없이 작동되도록 할 수 있습니다.

네트워크 요청으로부터 반환되는 데이터의 양은 가젯이 응답하지 않는 것으로 보일 만큼 많지 않아야 합니다.

가젯에서 문서 개체에 대해 getElementsByTagName을 호출하지 않도록 합니다. 이 작업은 가젯이 인라인으로 실행되고 있을 경우에 특히 성능을 저하시킬 수 있습니다.

Start.* 네임스페이스의 모든 개체, 메서드 및 속성은 private(전용)으로 간주되며 변경되지 않은 상태로 사용된다고 보장할 수 없습니다.

메모리 누수

연결된 모든 이벤트는 가젯의 dispose() 메서드에서 분리됩니다.
모든 멤버 변수는 가젯의 dispose() 메서드에서 null로 설정됩니다.
기본 클래스의 initialize() 메서드가 가젯의 initialize() 메서드 내에서 맨 먼저 호출됩니다.
기본 클래스의 dispose() 메서드가 가젯의 dispose() 메서드 내에서 맨 마지막에 호출됩니다.
http://gadgets.start.com/gadget.aspx?manifestUrl=gadgetUrl을 통해 가젯을 다시 로드할 때 메모리 사용이 증가되지 않습니다.

사용 편의성

가젯 내의 DOM 요소에는 적절한 탭 순서가 있어야 합니다.
모든 <img> 태그에는 ALT 특성이 포함되어 있어야 합니다.
단추는 순전히 <input> DOM 요소여야 하며 단추로 스타일이 지정된 <span> 태그면 안 됩니다.

가젯 CSS 파일

모든 선택기 앞에는 "."를 "_"로 바꾸고 맨 앞에 "."를 추가하여 정규화된 가젯 이름을 붙여야 합니다. 예를 들어 정규화된 가젯 이름이 "Microsoft.Live.HelloWorld"이면 모든 선택기 앞에는 ".Microsoft_Live_HelloWorld "가 와야 합니다. 이렇게 해야 가젯이 인라인으로 로드된 적이 있더라도 CSS 선택기 충돌이 발생하지 않습니다.

http://gadget-contest.spaces.live.com/