내보내기(0) 인쇄
모두 확장

Windows Phone용 타일 디자인 지침

2013-12-05

적용 대상: Windows Phone 8 | Windows Phone OS 7.1

타일을 사용하면 앱이 실행되고 있지 않을 때 Windows Phone 시작 화면에서 고객에게 풍부하고 매력적인 콘텐츠를 제공할 수 있습니다.

Windows Phone Tile overview image

타일은 라이브(알림을 통해 업데이트됨) 타일로 만들거나 정적 타일로 만들 수 있습니다. 타일은 앱의 매니페스트에 정의된 기본 타일로 시작됩니다. 정적 타일은 항상 기본 콘텐츠를 표시하는 데 일반적으로 기본 콘텐츠는 전체 타일 로고 이미지입니다. 라이브 타일은 기본 타일을 업데이트하여 새 콘텐츠를 표시하고 또 다른 업데이트를 통해서만 기본 타일로 돌아갈 수 있습니다. 모든 타일에는 템플릿에 종속된 영역이 있으며, 이 영역에는 개수가 표시됩니다.

시작 화면의 타일은 소형, 중형 및 와이드형(선택 사항)이라는 세 가지 크기로 제공됩니다.

다음 두 가지 중요 사항을 반드시 기억해야 합니다.

  • 사용자는 언제라도 소형, 중형 또는 와이드형으로 타일의 크기를 조정할 수 있습니다.

  • 앱 내에서 언제라도 타일 알림을 끌 수 있는 방법을 사용자에게 제공해야 합니다.

Windows Phone 8에서는 전환, 아이콘 및 순환과 같은 세 가지 종류의 타일 템플릿을 지원합니다. 적합한 타일 템플릿 선택에 대한 자세한 내용은 Windows Phone용 앱에 가장 적합한 타일 템플릿 선택을 참조하세요.

이 섹션에서는 개발자가 준수해야 할 지침과 타일의 모양 및 타일 사용 방법을 계획할 때 유의해야 할 디자인 고려 사항에 대해 설명합니다.

이 항목에는 다음 단원이 포함되어 있습니다.

개발자의 목표는 앱에 대한 매력적인 타일을 만드는 것입니다. 라이브 타일을 사용하는 경우 개발자의 목표는 고객이 시작 화면에서 보고 싶어할 멋진 새 콘텐츠를 제공하여 앱을 실행하도록 유도하는 것입니다. 마지막으로 화려한 컬러의 과도한 사용을 피하세요. 요란하게 주의를 끄는 타일보다는 간단하고 깔끔하고 단아하게 디자인된 타일이 훨씬 더 효과적입니다.

앱을 디자인할 때 여러 가지 이유로 라이브 타일의 사용을 고려하세요.

  • 타일은 앱으로 들어가는 "정문"입니다. 멋진 라이브 타일은 앱이 실행되고 있지 않을 때 사용자를 앱으로 유도할 수 있습니다. 고객은 앱을 자주 사용할수록 해당 앱을 더욱 더 가치 있게 여깁니다.

  • 라이브 타일은 정적 타일과 아이콘만 시작 화면에 허용하는 운영 체제에서 앱을 차별화하는 장점입니다.

  • 라이브 타일은 Windows Phone 스토어에서 자신의 앱을 다른 앱과 차별화하는 매력 포인트입니다. 고객이 정적 타일을 사용하는 유사 앱보다 멋진 라이브 타일을 사용하는 앱을 더 좋아할 가능성이 높습니다.

  • 고객이 라이브 타일을 좋아하는 경우 시작 화면에서 해당 타일을 눈에 잘 띄는 곳에 배치하고 해당 앱을 자주 실행하게 됩니다. 타일을 통해 앱에서 멋진 콘텐츠를 우연히 발견할 경우 사용자는 매우 행복해 할 것입니다.

  • 사용자가 타일을 좋아하지 않는 경우에는 해당 타일을 시작 화면에 끝에 배치하거나 시작 화면에서 삭제할 수 있으며, 업데이트 기능을 사용하지 않거나 앱을 제거할 수도 있습니다.

다음과 같은 특성은 라이브 타일에 주목하게 합니다.

  • 앱이 실행되고 있지 않더라도 앱이 활성화되어 있다고 느끼게 하는 자주 업데이트되는 새로운 콘텐츠.

    예: 최신 헤드라인이나 새 이메일 수 표시

  • 고객이 앱 설정을 통해 지정할 수 있는 관심 분야 등 고객에 대해 알고 있는 정보가 사용되는 개인 설정되었거나 고객에게 맞춰진 업데이트.

    예: 고객의 취미에 맞춰진 일일 특가 상품

  • 고객의 현재 정황과 관련된 콘텐츠.

    예: 고객의 현재 위치를 사용하여 관련 교통 지도를 표시하는 교통 상황 안내 앱

소형 및 중형 타일 크기는 사용자에게 항상 제공되므로 소형 및 중형 타일 크기가 필요합니다. 모든 타일은 처음에 중형 크기로 만든 다음 소형으로 축소해야 합니다. 와이드형 타일도 허용할지 여부를 결정해야 합니다. 와이드형 타일을 허용하려면 매니페스트에서 기본 타일을 정의할 때 와이드형 이미지를 제공하고 매니페스트 디자이너에서 Supports wide size(와이드 크기 지원) 옵션을 설정하면 됩니다. 와이드형 이미지를 포함하도록 앱을 설정하지 않는 경우 타일이 중형으로 설정되고 중형과 소형 사이에서만 크기 조정이 가능해집니다. 와이드형 업데이트 알림을 허용할 수 없습니다.

Windows Phone Iconic Tile template showcase image

소형, 중형 및 와이드형 타일

앱에 대한 타일을 만들 때 다음 디자인 지침을 고려해야 합니다.

  • 앱에 사용자에게 표시할 새롭고 흥미로운 콘텐츠가 있으며 이러한 알림이 일주일에 한 번 이상 자주 업데이트되는 경우에만 와이드형 타일을 사용하세요.

  • 소형 또는 중형 타일에는 와이드형 타일보다 적은 콘텐츠가 표시되므로 콘텐츠의 우선 순위를 정하세요. 와이드형 타일에 표시할 수 있는 내용을 모두 소형이나 중형 타일에 넣으려고 하지 마세요.

  • 앱에서 타일 알림을 사용하여 업데이트를 사용자에게 보내지 않는 경우 소형 및 중형 타일만 사용하세요.

  • 앱에서 짧은 요약 알림(즉 개수나 단일 숫자를 통해서만 표현할 수 있는 알림)과 관련된 시나리오만 지원하는 경우 소형 및 중형 타일과 함께 개수를 사용하세요. 예를 들어 알림을 사용하여 받은 새 문자 수만 전달하려는 SMS 앱은 이 시나리오에 적합합니다. 매니페스트에 와이드형 이미지를 제공하지 마세요.

  • 앱에서 시작 화면에 자세히 표시하지 않을 업데이트를 보내는 경우 소형 및 중형 크기를 사용하세요. 예를 들어 급여명세서 앱은 지불 금액 등 명세 내용을 언급하는 대신에 새 급여를 사용할 수 있다는 내용만 표시할 수 있습니다. 매니페스트에 와이드형 이미지를 제공하지 마세요.

앱의 기본 타일은 매니페스트에 정의되어 있습니다. 기본 타일은 정적이며 소형, 중형 또는 와이드형이며 일반적으로 디자인이 단순합니다. 일부 앱의 경우 기본 타일만으로도 충분합니다. 앱이 설치될 때 타일에서 업데이트 알림을 받을 때까지는 기본 타일이 시작 화면에 표시됩니다.

기본 타일의 적절한 사용

기본 타일을 만들 때 다음 사항에 유의하세요.

  • 기본 타일 이미지를 사용하여 본질적으로 앱 로고용 캔버스로서 앱 브랜드를 나타내세요.

  • 와이드형 이미지를 포함하려는 경우 제공할 와이드형 이미지와 소형/중형 타일 이미지 간의 디자인 관계를 고려하세요. 항상 사용자에게는 타일을 소형, 중형 또는 와이드형으로 표시할 수 있는 옵션이 있으며 언제라도 이 옵션을 변경할 수 있다는 점을 기억해야 합니다. 일반 규칙은 다음과 같습니다.

    • 중형 및 와이드형 타일 모두에서 로고의 동일한 세로 위치(동일 높이)를 유지하세요.

    • 로고에 앱 이름이 포함되지 않는 경우 타일 하단에 앱 이름을 포함하세요. 다음 예는 이러한 상황을 보여줍니다.

매니페스트에 정의된 앱 이름 요소를 사용하는 타일:

Small, medium, and wide Tiles

로고 이미지에 앱 이름을 포함하는 타일:

전환 또는 순환 타일용으로 이미지에서 투명한 로고 자체의 주변 공간을 만드는 경우 사용자의 테마 컬러가 비쳐 보입니다. 하지만 아이콘 타일을 선택하는 경우 매니페스트에서 브랜드 컬러를 지정할 수 있습니다. 이 방법은 앞에 표시된 메일 앱 타일 등 로고와 함께 사용해야 합니다.

기본 타일의 부적절한 사용

기본 타일을 디자인할 때 다음은 피해야 합니다.

  • "클릭하세요!"로 표시되는 타일 등 앱을 실행하기 위한 명시적인 텍스트 호출을 포함하도록 기본 타일을 디자인하지 마세요.

  • 로고에 앱의 이름을 포함하는 경우 이름 필드에 해당 이름을 반복해서 사용하지 마세요. 여기에 표시된 것처럼 하나 도는 다른 것을 사용합니다.

    Medium and wide Tiles

참고참고:

사용자는 앱에 제공된 버튼을 사용하여 보조 타일을 만듭니다. 보조 타일을 만들면 항상 사용자가 시작 화면으로 이동하여 타일의 위치를 볼 수 있습니다. 타일이 앱으로 돌아가서 고정된 후 간단히 뒤로 버튼만 누르면 됩니다. 사용자는 시작 화면이나 부모 앱을 통해 보조 타일 제거를 명시적으로 제어할 수 있습니다.

보조 타일의 적절한 사용

보조 타일의 올바른 사용에 대해 고려해야 할 사항:

  • 시작 화면의 모든 타일과 마찬가지로, 보조 타일은 새 콘텐츠로 자주 업데이트되어야 하는 동적 배출구입니다. 보조 타일에는 다른 타일과 동일한 메커니즘을 사용하여 알림 및 업데이트가 표시될 수 있습니다.

  • 전적으로 사용자의 결정에 따라 보조 타일이 만들어지는 경우 사용자에게 고정하도록 제공되는 앱 내 영역은 다음 지침에 따라 개발자에 의해 결정됩니다.

    • 초점이 있는 콘텐츠가 이미 고정된 경우 앱 바에 고정 버튼을 표시하고 ("삭제 버튼"으로) 설정하여 사용자가 이 버튼을 통해 고정된 콘텐츠를 삭제할 수 있도록 해야 합니다.

    • 초점이 있는 콘텐츠를 고정할 수 없는 경우 앱 바 고정 버튼을 표시하면 안 됩니다. 앱에서 앱 바 외부에 고정 명령을 표시하는 경우 앱 바의 고정 버튼이 표시되지 않거나 해제된 상태로 표시되어야 합니다. 고정 버튼이 해제되거나 표시되지 않아야 하는지 여부는 버튼이 설정되었을 때 나타나는 UI 표면과 시나리오에 따라 달라집니다.

    • 고정 및 삭제용으로 SDK 제공 앱 바 버튼을 사용합니다.

    • 보조 타일을 생성하는 앱과 관련된 상황에 맞는 상호 작용을 추가할 수도 있습니다.

보조 타일의 부적절한 사용

보조 타일을 생성할 때 다음과 같은 행동은 피하세요.

  • 보조 타일을 변경할 수 없는 개별 파일이나 다른 정적 콘텐츠의 바로 가기로 사용하지 마세요.

  • 가상 명령 버튼으로 보조 타일을 사용하여 "다음 트랙으로 건너뛰기" 타일 등 부모 앱과 상호 작용하지 마세요.

타일 디자인에 대한 기타 유의 사항은 다음과 같습니다.

  • 타일 업데이트 알림에서 이미지나 텍스트 요소를 사용하여 앱 브랜딩 정보를 표시하지 마세요. 앱의 브랜드를 강제 적용하고 사용자에게 일관성을 제공하기 위해 해당 목적으로 제공된 템플릿의 요소, 즉 앱 이름(제목) 이미지를 사용합니다. 라이브 타일은 알림마다 모양이 크게 변경될 수 있지만 이름의 위치는 동일합니다. 따라서 사용자는 각 타일의 동일 위치에서 해당 정보를 보고 빠른 검색을 통해 즐겨 사용하는 앱을 찾을 수 있습니다. 앱에서 제공된 브랜딩 요소를 사용하지 않는 경우 사용자가 앱의 타일을 빨리 식별하기 어려울 수 있습니다.

  • 주기 템플릿에서 이미지의 항목 중 하나로 브랜딩을 사용하지 마세요. 이 시나리오에는 사용자의 눈을 사로잡는 타일에 대한 애니메이션 변경 내용도 포함됩니다. 흥미로운 새 콘텐츠가 아니라 단순히 브랜드를 표시할 목적으로 애니메이션을 통해 사용자의 주의를 끌 경우 사용자가 짜증스러워 할 것입니다.

  • 광고용으로 타일을 사용하지 마세요.

  • 타일에서 화려한 컬러의 과도한 사용을 피하세요. 요란하게 주의를 끄는 타일보다는 간단하고 깔끔하고 단아하게 디자인된 타일이 훨씬 더 효과적입니다.

  • 타일에 의존하여 긴급한 실시간 정보를 사용자에게 전달하지 마세요. 예를 들면, 타일은 통신 앱에서 수신 전화를 사용자에게 알리기 위한 적절한 위치가 아닙니다. 실시간 메시지에는 토스트 알림을 사용하는 것이 더 바람직합니다.

  • 하이퍼링크, 버튼 또는 다른 컨트롤처럼 보이는 이미지 콘텐츠는 피하세요. 타일은 이러한 요소를 지원하지 않으며 전체 타일이 단일 클릭 대상입니다.

  • 타일 업데이트 알림에서 상대적 시간 스탬프 또는 날짜(예: "2시간 전")를 사용하지 마세요. 이러한 시간 스탬프나 날짜는 시간이 경과되는 동안에도 정적 상태로 유지되므로, 결국 부정확한 메시지가 됩니다. 절대 날짜 또는 시간(예: "14:00")을 사용하세요.

표시:
© 2014 Microsoft