디자인 사례 연구: iPad 및 Windows 런타임 앱

iOS는 터치 방식의 재미있고 매력적인 앱을 만들 수 있는 인기 있는 플랫폼입니다. Windows 8이 도입되면서 디자이너와 개발자는 자신들의 창의성을 자유롭게 발휘할 수 있는 새 플랫폼을 갖게 되었습니다.

이 사례 연구에서는 iOS에 익숙한 디자이너와 개발자가 Windows 스토어 앱에 대한 디자인 원칙을 사용하여 앱을 새롭게 구축할 수 있도록 도와줍니다. iPad 앱의 일반적인 사용자 인터페이스와 환경 패턴을 Windows 8 Windows 스토어 앱으로 변환하는 방법을 보여 줍니다. 경험을 기반으로 동일한 앱을 iPad 및 Windows 8용으로 빌드합니다. 또한 일반적인 디자인 및 개발 시나리오를 사용하여 Windows 8 플랫폼을 활용하고 Windows 스토어 앱에 대한 디자인 원칙을 통합하는 방법을 보여 줍니다.

Windows 8의 비즈니스 기회에 대한 자세한 내용은 앱 판매를 참조하세요. Windows 스토어 앱을 빌드하는 데 사용되는 기능에 대한 자세한 내용은 개발자용 Windows 8 제품 가이드를 참조하세요.

이 문서 다운로드: 이 문서를 다운로드하려면 이 문서의 오프라인 버전을 참조하세요.

개발 중인 앱은 사용자가 타임라인 보기를 사용하여 온라인으로 사진과 동영상을 보고 관리할 수 있는 연결된 사진 저널입니다.

Photo journal Windows 스토어 앱

이 앱은 iPad용으로 처음 만들어졌습니다. 다음 그림은 iPad 앱의 구조를 보여 줍니다. 이제 각 구성 요소가 Microsoft 디자인 언어로 어떻게 변환되는지를 살펴보겠습니다.

Photo journal iPad 앱

1. 레이아웃 및 탐색

2. 명령 및 작업

3. 계약: 검색, 공유 등

4. 터치

5. 방향 및 보기

6. 알림

레이아웃 및 탐색

크롬이 아니라 콘텐츠 중심

Photo journal 앱은 사용자의 사진과 해당 사진의 최근 소셜 활동을 보여 주는 뛰어난 기능이 있어야 합니다. Windows 스토어 앱을 만들 때 첫 번째 목표는 앱의 핵심 기능과 직접적인 관련이 없는 모든 UI 요소를 제거하는 것이었습니다. 예를 들어 위쪽 탐색 모음, 페이지 매김 컨트롤 및 아래쪽 컨트롤 막대를 모두 제거할 수 있습니다. 다음 섹션에서는 사용자가 필요한 경우 앱 바를 사용하여 크롬을 표시하는 방법에 대해 설명합니다.

iPad 앱 사용자 인터페이스 요소 Windows 스토어 앱 사용자 인터페이스 요소

iPad 앱

A. 위쪽 탐색 모음 B. 앱 콘텐츠 C. 페이지 매김 UI D. 아래쪽 탭 바

Windows 스토어 앱

B. 앱 콘텐츠 및 로고

 

예제: 초기 화면의 타임라인 보기

두 앱은 모두 초기 화면에 사진을 월별로 구성하여 표시하지만 월 표시 방법이 완전히 다릅니다. iPad 버전의 Photo journal에서는 페이지가 1년 12달을 모두 표시하도록 최적화되었으며 누적형 사진 비유를 통해 각 월을 나타냅니다. Windows 스토어 앱 홈 화면을 디자인할 때는 사용자에게 추가 컨텍스트를 제공하기 위해 더 많은 사진과 소셜 콘텐츠를 최상위 수준으로 가져왔습니다. 사진에서 테두리를 제거하고 대신 공백을 사용하여 앱의 핵심인 사진을 시각적으로 더 강조했습니다.

iPad 앱의 월 보기 Windows 스토어 앱의 월 보기

iPad: 각 월이 누적형 사진으로 표현되고 하나의 사진만 표시됩니다.

Windows 스토어 앱: 각 월이 여러 사진, 해당 제목 및 사진과 관련된 설명 수로 표현됩니다. 사용자는 초기 화면에서 특정 월의 강조 표시된 콘텐츠를 더 많이 볼 수 있습니다.

 

탐색 계층 평면화

Windows 스토어 앱 디자인에서는 계층적 탐색 패턴을 사용했습니다. 앱을 다시 디자인할 때 탐색할 필요 없이 앱의 허브 화면을 통해 더 많은 콘텐츠에 액세스할 수 있도록 탐색 계층을 평면화했습니다.

예제: 아래쪽 탭 바 제거

iPad 앱의 보기 상태iPad 앱의 설명 보기

iPad 앱

A. 사진 보기 B. 설명 보기

두 개의 피벗(사진 및 설명)이 있는 아래쪽 탭 바는 항상 화면에 표시됩니다. 사용자는 두 보기 중 하나만 볼 수 있습니다.

Windows 스토어 앱의 보기 상태

Windows 스토어 앱

  • 탭 사용자 인터페이스가 필요 없도록 설명과 사진을 하나의 뷰에 결합했습니다.
  • 초기 화면의 허브 디자인은 각 섹션에 가장 관련된 콘텐츠를 표시합니다.
  • 사용자가 전체 설명 목록을 보려면 Recent comments 레이블이 있는 그룹 헤더를 탭할 수 있습니다.

 

직접 조작을 통해 탐색

사용자는 직접 조작을 통해 콘텐츠와 조작하고 다른 영역으로 이동할 수 있습니다. Windows 스토어 앱을 디자인할 때는 사용자가 보다 효율적으로 탐색할 수 있도록 시맨틱 줌과 같은 기본 제공 컨트롤을 사용하여 가능한 한 직접 조작을 사용했습니다.

iPad 앱의 탐색

iPad 앱의 탐색

Windows 스토어 앱 탐색

시맨틱 줌을 사용하여 데이터 그룹에서 선택

iPad 앱

초기 화면의 위쪽 탐색 모음에서 Years 단추를 탭하여 팝오버를 표시하고 연도를 선택합니다.

Windows 스토어 앱

초기 화면에서 두 손가락을 모아 축소하고 모든 월과 연도를 표시합니다. 이렇게 하면 사용자가 원하는 연도와 월로 바로 점프할 수 있습니다. 사용자는 사진이 있는 월과 없는 월의 개요를 볼 수도 있습니다(흐린 빨간색 배경). 크롬을 사용하거나 다른 페이지로 이동하지 않고 전적으로 콘텐츠를 조작하여 탐색할 수 있습니다.

 

앱에 가장 적합한 탐색 패턴을 선택하는 방법을 보려면 탐색 패턴을 참조하세요.

앱 기능 전체 프로세스 시리즈의 일부로 플랫 탐색 패턴의 작동 방법을 살펴보세요.

명령 및 작업

앱 상황별 작업을 앱 바에 유지

앱에서 상황별 작업 또는 명령을 다시 디자인할 때 다시 "크롬보다 콘텐츠 중심" 방식에 따라 앱 바 컨트롤을 통해 모든 상황별 작업을 사용할 수 있도록 했습니다. 자주 사용하는 명령은 손이 닿기 쉽도록 오른쪽 및 왼쪽 가장자리 근처에 있습니다. 이렇게 하면 앱 디자인 화면이 컨트롤로 꽉 차지 않으며, 사용자가 어디에 있든 화면 아래쪽이나 위쪽부터 앱 바를 살짝 밀어 관련 작업을 표시할 수 있습니다. 모든 Windows 스토어 앱은 앱 바를 명령에 사용할 수 있습니다. 사용자가 앱 바 조작에 익숙하기 때문에 이 경우 앱의 유용성도 증가하며 전체 시스템이 일관성 있게 보입니다.

예제: 사진 삭제

iPad 앱에서 사진 삭제 Windows 스토어 앱에서 사진 삭제

iPad 앱

  • 사용자가 선택 모드를 시작할 때 앱 명령은 화면 위쪽에 있습니다.

Windows 스토어 앱

A. 사용자에게 몰입형 환경을 제공하기 위해 앱 바는 기본적으로 숨겨져 있습니다. 사용자는 화면 아래쪽이나 위쪽부터 살짝 밀어 앱 바를 열 수 있습니다. B. 사용자가 페이지에서 개체를 선택하면 선택한 항목의 상황별 작업이 바에 표시됩니다. 선택한 개체가 있는지 여부와 앱에서 사용자가 있는 위치에 따라 작업이 변경됩니다. 일반적으로 글로벌 명령은 앱 바의 오른쪽에 배치됩니다. 경우에 따라 표시되는 명령은 앱 바의 왼쪽에 배치되어야 합니다.

 

계약

검색 계약을 사용하여 중앙 집중식 검색 환경 제공

앱 캔버스에 영구적으로 포함되는 검색 입력 인터페이스를 만드는 대신 검색 계약을 구현했습니다. 사용자는 참 메뉴를 통해 일관성 있게 검색을 호출할 수 있으며, 결과가 콘텐츠에 적합한 방식으로 앱에 표시될 수 있습니다. 검색 계약을 사용하면 시스템의 어디에서나 검색 참 메뉴를 호출하여 계약을 지원하는 앱의 콘텐츠를 찾을 수 있습니다.

예제: Photo journal 앱 내에서 사진 검색

iPad 앱의 검색 Windows 스토어 앱의 검색 계약

iPad 앱

  • 검색은 앱 내의 초기 화면에서 사용할 수 있습니다.
  • 사용자가 검색 단어를 입력하면 결과가 나타나며 사용자가 결과를 선택할 수 있습니다.

Windows 스토어 앱

  • 사용자는 참 메뉴를 열고 검색 참 메뉴에 액세스합니다. 사용자가 현재 앱 내부에 있으므로 Photo journal 앱이 기본적으로 선택되어 있습니다.
  • 사용자가 입력을 시작하면 앱이 검색 제안을 창에 제공합니다. 이렇게 하면 사용자가 검색 결과를 생성하는 단어를 빠르게 확인할 수 있습니다. 사용자가 쿼리를 제출하면 검색 결과 보기가 표시되며 원하는 결과를 선택합니다.

 

예제: Photo journal 앱 외부에서 사진 검색(Windows 스토어 앱에만 해당)

다음 예제에서는 검색 창을 통해 새 앱을 선택하여 여러 앱에서 단어를 검색하는 방법을 보여 줍니다. 이 기능을 사용하면 사용자가 언제든지 원하는 앱에서 임의 콘텐츠를 검색할 수 있습니다.

Photo journal 앱 외부 검색

Windows 스토어 앱

사용자가 Tweet@Rama 앱에서 "바르셀로나" 단어를 검색하고 Photo journal을 사용하여 바르셀로나 사진을 보려고 합니다. 이제 Photo journal이 검색 결과 공급자입니다. 앱이 자동으로 시작되고 검색 결과를 표시합니다. 사용자가 Photo journal 앱을 시작하고 검색하지 않아도 됩니다.

 

공유 계약을 사용하여 관심 있는 추가 대상과 사용자에 연결

소셜 미디어 통합은 대부분의 앱에서 주요 구성 요소입니다. iPad 앱을 디자인할 때는 일반적으로 디자이너와 개발자가 앱이 지원하는 소셜 미디어 채널(예: Twitter 또는 Facebook)을 선택하며, 개발자는 이러한 서비스를 개별적으로 통합하거나 사용 가능한 프레임워크 중 하나를 사용해야 합니다. 이러한 공유 서비스에 대한 API 변경이 있을 경우 공유 서비스가 계속 작동하려면 개발자가 해당 코드를 업데이트해야 합니다.

공유 접근 권한 값을 Windows 스토어 앱으로 변환할 때는 시스템의 공유 계약을 사용했습니다. 사용자가 사용하려는 각 서비스에 연결할 필요가 없기 때문에 이 계약은 디자인과 개발을 간소화합니다. 소셜 네트워크뿐 아니라 사용자는 Notespace 또는 EverNote와 같은 메모 작성 앱 등의 다른 서비스에 콘텐츠를 저장할 수도 있습니다. 적은 양의 코드만 사용하면 앱이 공유 계약을 구현한 모든 Windows 스토어 앱과 연결됩니다. 외부 소셜 네트워킹 사이트나 웹 서비스에 대한 API 변경을 처리할 필요가 없습니다. 사용자 관점에서는 언제든지 참 메뉴에 액세스하고 공유 창을 열어 일관된 위치에서 공유할 수 있습니다.

예제: Photo journal의 사진을 다른 앱과 공유

iPad 앱에서 사진 공유

iPad

iPad Photo journal 앱에서 사진을 공유하려면 먼저 위쪽 탐색 모음에서 작업 단추를 탭한 다음 Facebook에서 공유하도록 선택합니다. 나중에 다른 소셜 네트워킹 서비스와 통합하려는 경우 개발자가 추가적인 작업을 수행하고 공유 단추를 더 많이 추가해야 합니다.

Windows 스토어 앱의 공유 워크플로
Windows 스토어 앱에서 공유 대상 선택

Windows 스토어 앱

  • 사용 중인 앱에 관계없이 사용자는 항상 일관된 위치에서 공유 옵션을 찾을 수 있습니다.
  • 공유 대상으로 지정된 설치된 모든 앱이 공유 창의 앱 목록에 표시됩니다. 예를 들어 Socialite, Tweet@Rama, Notespace, PaintPlay는 모두 공유 대상입니다.
  • 사용자는 다양한 콘텐츠 형식을 공유할 수 있습니다. 예를 들어 링크 및 사진을 공유하거나 메모 작성 앱에 정보를 저장할 수 있습니다.
  • 사용자가 신속하게 작업을 완료할 수 있도록 자주 사용하는 공유 대상은 목록 위쪽에 표시됩니다.

 

Photo journal 앱은 공유 소스인 동시에 공유 대상이 되도록 디자인되었습니다. 사용자는 다른 앱의 사진을 Photo journal의 해당 사진 스트림에 쉽게 공유할 수 있습니다. 이 연결도 공유 계약을 통해 사용할 수 있습니다. 공유 대상으로 적합한 앱에 대한 자세한 내용은 콘텐츠 공유에 대한 지침 및 검사 목록을 참조하세요.

예제: 다른 앱의 사진을 Photo journal과 공유 – 대상 공유(Windows 스토어 앱에만 해당)

다음 예제에서는 다른 사진 앱의 사용자가 멕시코 여행 사진을 보고 있습니다. 타임라인 보기에서 사진을 보기 쉽도록 고유한 Photo journal 앱 컬렉션과 앨범 사진을 공유하려고 합니다. 사용자가 공유 창을 열면 Photo journal 앱이 공유 대상 중 하나로 나열되고 공유 워크플로를 호출합니다.

다른 앱의 사진을 Photo journal과 공유

 

파일 선택기를 사용하여 여러 위치의 파일 액세스

파일 선택기는 사용자가 로컬 PC, 연결된 저장 장치 또는 홈 그룹에 있는 파일과 폴더에 액세스할 수 있게 하는 전체 화면 대화 상자입니다. 파일 선택기 계약에 참여한 앱의 항목에 액세스할 수도 있습니다.

예제: 로컬 파일 시스템에서 사진 업로드

iPad 앱에서 파일 시스템 및 소셜 미디어 사이트의 사진 액세스

iPad 앱

iPad 앱은 로컬 사진 라이브러리 및 몇몇 소셜 네트워킹 서비스에 있는 사진에 액세스하는 기능을 지원합니다.

Windows 스토어 앱의 파일 선택기 UI 액세스

Windows 스토어 앱

A. 사용자가 앱 바의 업로드 단추를 탭하면 파일 선택기 UI가 열립니다. 이 UI는 사용자가 파일에 액세스할 때마다 표시되는 일관된 UI 화면입니다. B. 파일 헤더를 탭하면 사용 가능한 모든 파일 위치의 플라이아웃이 표시되며 사용자가 파일 폴더로 이동합니다. C. 사용자가 선택한 사진을 표시하는 왼쪽 아래의 미리 보기 목록과 폴더에서 여러 사진을 선택합니다.

 

예제: 다른 앱에서 Photo journal의 사진 사용(Windows 스토어 앱에만 해당)

Windows 스토어 앱에 고유한 기능도 이용하며 다른 앱에서 Photo journal의 사진 콘텐츠를 선택하는 기능 지원도 추가합니다. 이렇게 하면 사용자가 Photo journal의 사진을 먼저 로컬 파일 시스템으로 다운로드한 다음 사진을 다른 앱으로 업로드하는 단계가 생략됩니다. Photo journal은 파일 선택기 계약을 구현하므로 시스템에서 파일 저장소 위치로 인식됩니다.

다른 앱에서 Photo journal의 콘텐츠 사용

Windows 스토어 앱

사용자가 PC 설정 화면에 있고 찾아보기를 탭하여 계정 사진을 사용자 지정합니다. Photo journal은 파일 선택기 계약을 구현하므로 파일 디렉터리에서 앱에 액세스할 수 있습니다. 그런 다음 Photo journal 컬렉션에 저장된 사진을 선택할 수 있습니다.

 

터치

가장자리 살짝 밀기를 통해 앱 및 시스템 명령 액세스

Windows 8에서는 사용자가 가장자리부터 살짝 밀어 명령에 액세스하고 앱 간에 탐색할 수 있습니다.

  • 앱 명령은 화면의 아래쪽이나 위쪽 가장자리부터 살짝 밀면 표시됩니다. 앱 명령을 표시하려는 경우 항상 앱 바를 사용해야 합니다.
  • 화면 오른쪽 가장자리부터 살짝 밀면 시스템 명령이 포함된 참 메뉴가 표시됩니다.
  • 왼쪽 가장자리부터 살짝 밀면 이전에 사용한 앱으로 전환됩니다.
  • 화면의 위쪽 가장자리부터 아래쪽 가장자리까지 살짝 밀면 앱을 도킹하거나 닫을 수 있습니다.

예제: Windows 스토어 앱에서 앱 바와 참 메뉴 액세스

Windows 스토어 앱에서 앱 바 액세스 Windows 스토어 앱에서 참 액세스

화면의 아래쪽 또는 위쪽 가장자리부터 살짝 밀어 앱 명령에 액세스합니다.

화면 오른쪽 가장자리부터 살짝 밀면 검색, 공유, 시작, 장치, 설정 등의 시스템 명령이 포함된 참 메뉴가 표시됩니다.

 

크로스 밀기를 통해 개체 선택

Windows 8에서는 사용자가 이동 방향에 수직으로 손가락을 짧게 밀어 목록이나 그리드의 개체를 선택할 수 있습니다. 개체를 선택하면 관련 명령을 보여 주는 앱 바가 자동으로 표시됩니다.

예제: 삭제할 여러 사진 선택

iPad 앱에서 여러 사진 삭제 Windows 스토어 앱에서 여러 사진 삭제

iPad 앱

  • 사용자는 선택 작업 및 기타 편집 작업을 수행하기 위해 특정 편집 모드를 시작합니다. 탭은 시작 등의 기본 동작에 예약되어 있기 때문입니다.
  • 작업을 마치면 편집 모드를 종료합니다.

Windows 스토어 앱

  • 사용자가 개체를 아래로 살짝 밀어 선택하면 상황에 맞는 명령이 포함된 앱 바가 자동으로 표시됩니다.
  • 사용자는 다른 모드를 시작 및 종료하지 않고 개체를 탭하고 선택할 수 있습니다.
  • 이 제스처는 취소가 가능하므로 Windows 8 앱에서 훨씬 효율적으로 선택할 수 있습니다.

 

손가락 모으기 및 확대를 통해 시맨틱 줌 사용

손가락 모으기 및 확대 제스처는 iPad 및 Windows 스토어 앱에서 모두 크기 조정에 주로 사용되지만 Windows 8에서는 이러한 제스처를 통해 시맨틱 줌을 사용하여 콘텐츠의 처음, 끝 또는 아무 위치로나 바로 점프할 수도 있습니다. 시맨틱 줌을 사용하면 사용자가 축소하여 관련 그룹의 데이터를 보고 빠르게 다시 돌아갈 수 있습니다. 긴 콘텐츠 목록을 검토하기 위한 탐색 기능을 제공하는 대신 이러한 조작 유형에는 가능한 한 시맨틱 줌을 사용하세요. 물론 사용자가 전체 화면 모드에서 사진을 보는 경우에는 손가락 모으기 및 확대를 광학 줌에 사용할 수 있습니다.

예제: 초기 화면과 월 스포크 페이지의 시맨틱 줌

Windows 스토어 앱에서 시맨틱 줌 사용

Windows 스토어 앱

A. 초기 화면의 시맨틱 줌을 사용하면 사용자가 원하는 연도와 월로 바로 점프할 수 있습니다. B. 월 보기 스포크 페이지에서 시맨틱 줌을 사용하면 사용자가 특정 날짜로 점프할 수 있으며 사용 가능한 해당 연도의 사진 수를 자세히 보여 주는 정보 그래픽도 제공됩니다.

 

방향 및 화면 크기

적응 레이아웃 디자인

iPad 앱에는 고정 화면 크기와 해상도가 있으며 두 방향이 지원되는데 디자이너가 이 점을 고려해야 합니다. Windows 8은 휴대용 태블릿에서 올인원 데스크톱에 이르기까지 다양한 양식 요소에서 실행됩니다. 따라서 추가 화면 공간을 사용하여 사용자에게 더 많은 콘텐츠를 표시할 수 있습니다. Photo journal 앱을 다시 디자인할 때 화면 해상도와 장치 크기를 감안하여 두 장치 방향에서 앱이 어떻게 표시되는지를 고려했습니다. 그리드 레이아웃을 사용하면 세로 레이아웃과 고해상도 화면에 맞게 디자인 크기를 쉽게 조정할 수 있습니다. 예를 들어 사용 가능한 추가 세로 공간이 있으면 각 월에 강조 표시된 사진을 더 많이 포함합니다.

예제: 가로, 세로 및 큰 화면의 초기 화면 디자인(Windows 스토어 앱에만 해당)

iPad 앱은 가로 및 세로 모드를 사용합니다.

iPad 앱

동일한 콘텐츠가 가로 및 세로 레이아웃에서 모두 표시됩니다. 콘텐츠가 세로 방향으로 재배치됩니다.

여러 보기 모드 및 해상도의 Windows 스토어 앱

Windows 스토어 앱

세로 레이아웃과 더 큰 화면에서는 앱이 추가 공간을 사용하여 허브 페이지의 각 섹션에 더 많은 콘텐츠를 표시합니다. iOS 망막 표시용 이미지를 만드는 것과 유사하게, 각 Windows 배율(100%, 140% 및 180%)을 위해 여러 이미지를 만들었습니다. 이러한 이미지는 HD 태블릿에 자동으로 로드됩니다.

 

좁은 너비를 사용하여 사용자 참여 확대

Windows 8에서는 사용자가 화면에 여러 앱을 나란히 배치하여 멀티태스킹할 수 있습니다. 좁은 너비에서 제대로 작동하는 앱을 디자인하면 앱의 화면 표시 시간과 사용자 참여 기간이 증가합니다. 사용자가 두 앱 사이의 구분선을 조작하여 앱 크기를 쉽게 변경할 수 있으므로 크기 조정 시 컨텍스트를 유지하는 것이 중요합니다. 앱 크기 조정의 결과로 사용자의 앱 상태가 손실되지 않도록 합니다.

크기 조정에 대한 자세한 내용은 창 크기 및 화면에 맞게 크기 조정에 대한 지침길고 좁은 레이아웃에 맞게 창 크기를 조정하기 위한 지침을 참조하세요.

예: 좁은 너비의 초기 화면

좁은 너비의 Windows 스토어 앱

Windows 스토어 앱

  • 좁은 너비에 맞게 초기 화면의 크기가 조정되는 경우에도 사용자는 동일한 콘텐츠에 액세스할 수 있습니다.
  • 높고 좁은 크기에서는 긴 가장자리를 따라 이동하는 것이 더 편리하므로 사용자가 세로로 이동하여 추가 콘텐츠에 액세스합니다. 전체 보기의 가로 이동도 긴 가장자리를 따라 이동하도록 최적화되어 있지만 이 이동과는 다릅니다.

 

알림

영구적 및 동적 업데이트에 타일 사용

iOS 5는 새 알림이 화면 위에 빠르게 표시되는 알림 센터를 도입했으며 사용자가 위쪽부터 살짝 밀어 센터에서 모든 메시지를 볼 수 있습니다. 또한 iOS 스프링보드의 앱 아이콘에 숫자 배지가 첨부되어 새 메시지가 있음을 나타낼 수 있습니다. Windows 8 시작 화면의 타일은 앱 아이콘의 숫자 배지와 iPad의 알림 센터 기능을 결합합니다. 사용자는 단일 위치에서 앱을 시작하고 알림을 읽을 수 있습니다. 또한 고정된 형식을 사용하는 iOS의 알림과 달리 Windows 스토어 앱 타일은 정사각형 크기 3개와 와이드 크기 1개로 사용할 수 있으며, 디자이너가 선택할 수 있는 다양한 템플릿 모음을 제공합니다.

예제: 초기 화면의 알림

iPad 스프링보드의 Photo journal 알림 시작 화면의 Photo journal 타일 및 알림

iPad

A. iPad 스프링보드의 앱 아이콘(숫자 배지 포함)

B. Photo journal 알림이 표시된 알림 센터

Windows 8

C. 숫자 배지와 알림이 포함된 시작 화면의 타일 많은 타일 템플릿을 사용할 수 있습니다.

 

중요한 임시 알림에 알림 메시지 사용

알림 메시지를 사용하여 사용자에게 이벤트를 실시간으로 알릴 수 있습니다. 수동적인 타일 업데이트와 달리, Windows 스토어 앱의 알림 메시지는 사용자를 중단시키는 중요한 업데이트입니다. 화면 오른쪽 위에 표시되며 시스템의 어디에서나 표시될 수 있습니다. 일반적으로 사용자가 앱을 처음 실행할 때 알림을 옵트인(opt in)하도록 하는 것이 좋습니다. 해당하는 경우 타일에 대한 최근 알림 메시지를 적절한 시기에 표시합니다. 알림은 화면 맨 위에 배너로 표시되는 iOS 임시 알림과 비슷합니다. 그러나 디자이너가 보다 적절한 알림을 표시하기 위해 알림 템플릿 모음 중에서 선택할 수 있습니다.

예제: 가족 구성원으로부터 설명을 받으면 Photo journal에서 사용자에게 알림

시작 화면의 알림 메시지

가족이 앱의 사진에 설명을 입력하면 알림 메시지를 받도록 설정됩니다.

 

작성자 정보

Bart Claeys, Ratio Interactive.

Bart Claeys는 Ratio Interactive의 사용자 환경 수석 디자이너이며 웹 및 모바일 앱용 UI/UX 전문가입니다. 이전에는 Saatchi & Saatchi Brussels의 인터랙티브 아트 디렉터로 근무했으며 Toyota, Sony 및 다른 여러 국제 브랜드의 크리에이티브 캠페인을 만들었습니다. Bart는 제품 개발 전공의 석사 학위를 가지고 있으며 브랜드 관리 분야에서 추가 교육 과정을 이수했습니다. 그는 벨기에의 선도적인 크리에이티브 구인란인 Creativeskills.be의 설립자입니다. 2006년에 Bart는 Flemish Government에서 기업가 정신 촉진을 위해 창설한 "You are Flanders future" 상을 받았습니다.

Qixing Zheng, Microsoft Corporation.

Qixing Zheng은 Microsoft의 사용자 환경 프로그램 관리자입니다. Windows 8 사용자 인터페이스를 만든 팀의 일원으로, 디자이너의 Microsoft 디자인 언어 학습을 지원해 왔습니다. 그녀의 열정은 사람들이 일상적으로 사용하는 기술을 통해 사용자 환경을 개선할 수 있도록 돕는 것에서 비롯되었습니다. Windows 팀에 합류하기 전에 Qixing은 Microsoft Canada에서 최초의 UX 고문으로 근무했으며 대학, 디자인 커뮤니티 및 회사에서 Microsoft의 UX 투자에 대해 강연했습니다. 또한 뛰어난 디자인 전문가를 발굴하고 커뮤니티에서 디자인 사례를 수집하는 업무를 수행했습니다.

 

관련 항목

Windows 8에서 iOS 앱 디자인 다시 만들기

iOS 개발자용 리소스