디자인 사례 연구: 웹 사이트 및 Windows 런타임 앱

Applies to Windows and Windows Phone

수십 년 동안 웹 사이트 디자인은 일반적인 관행이었습니다. Windows 8에서는 디자이너와 개발자가 HTML5, CSS3(Cascading Style Sheets, Level 3), JavaScript 등의 익숙한 웹 기술을 사용하여 Windows 스토어 앱을 빌드할 수 있습니다. 여기서는 웹 사이트의 접근 권한 값을 표시하여 유용한 Windows 스토어 앱으로 만드는 방법을 살펴보고 Windows 8 플랫폼의 접근 권한 값을 사용하여 부가 가치, 개인 설정 및 풍부한 환경을 제공하는 방법을 보여 줍니다.

이 문서의 목적은 디자이너와 개발자가 웹 사이트를 Windows 스토어 앱으로 새롭게 구축할 수 있도록 돕는 것입니다.

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

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

푸드 트럭 웹 사이트 및 앱

이 문서는 사용자가 해당 지역의 푸드 트럭을 찾아보고, 최신 뉴스를 확인하고, 푸드 트럭에 대한 사용자 리뷰를 제공할 수 있게 하는 푸드 트럭 웹 사이트를 기반으로 합니다. 뒤에 나오는 디자인 지향 사례 연구에서는 사이트의 핵심 기능을 새롭게 구축하고 Windows 스토어 앱으로 확장하는 방법을 살펴보겠습니다.

Contoso Food truck 앱

Windows 스토어 앱으로 마이그레이션할 때의 목적은 웹 사이트의 최고 기능을 강조 표시하는 동시에 사이트의 핵심 기능과 패리티를 유지하는 것입니다. 이 Windows 스토어 앱은 사용자가 근처에 있는 트럭을 검색하고 찾는 데 유용합니다. 다음 그림은 푸드 트럭 웹 사이트 UI의 구조를 보여 줍니다. 여기서는 이러한 각 UI 구성 요소를 Microsoft 디자인 스타일로 변환하는 방법을 보여 줍니다.

Contoso Food truck 앱의 요소

  1. 레이아웃 및 탐색
  2. 명령 및 작업
  3. 계약: 검색, 공유 및 설정
  4. 터치
  5. 크기 조정 및 보기
  6. 알림

레이아웃 및 탐색

크롬이 아니라 콘텐츠 중심

대부분의 웹 사이트는 잘 설정된 레이아웃 패턴을 사용합니다. 홈페이지 디자인에는 탐색(머리글 및 바닥글), 유틸리티 구성 요소(로그인, 검색) 및 다른 콘텐츠(블로그 및 뉴스)에 대한 액세스를 지원하는 UI가 있습니다. 이러한 요소는 웹 사이트의 일반적인 요소지만 가장 중요한 작업, 즉 근처에 있는 푸드 트럭을 찾는 작업에 집중할 수 없도록 사용자 주의를 분산시킵니다. Windows 스토어 앱을 디자인할 때는 이러한 UI 및 콘텐츠는 앱의 기본 기능과 직접적인 관련이 없기 때문에 대부분 제거했습니다.

일반적인 웹 사용자 인터페이스 요소

웹 사이트:

  • 이 웹 사이트는 두 열로 이루어진 레이아웃 패턴을 사용합니다. 왼쪽에는 기본 콘텐츠가 있고 오른쪽에는 기타 콘텐츠가 있습니다.
  • 사이트의 주된 기능인 푸드 트럭은 화면의 약 1/3만 차지합니다.

Windows 스토어 앱으로 새롭게 구축된 웹 사이트

Windows 스토어 앱:

방문 페이지의 모든 공간은 이 앱의 주요 기능, 즉 근처에 있는 푸드 트럭을 찾는 기능에만 사용됩니다.

예제: 웹 사이트 홈페이지 및 Windows 스토어 앱 홈 화면에서 콘텐츠 강조 표시

웹 사이트와 Windows 스토어 앱은 모두 기본 페이지에 추천 푸드 트럭과 범주를 표시합니다. 웹 사이트의 공간이 제한되기 때문에 각 푸드 트럭 범주는 하나의 사진으로 표시됩니다. Windows 스토어 앱 홈 화면을 디자인할 때는 사용자에게 추가 컨텍스트를 제공하고 더 매력적인 인터페이스를 만들기 위해 더 많은 푸드 트럭 정보를 표시하도록 선택했습니다.

푸드 트럭 범주Windows 스토어 앱 범주

웹 사이트:

각 푸드 트럭 범주가 하나의 사진으로 표시됩니다. 사용자가 다른 페이지로 이동하여 해당 범주의 트럭을 더 많이 표시한 다음 트럭을 선택하여 세부 정보를 확인해야 합니다.

Windows 스토어 앱:

각 범주가 사진 그룹으로 표시되므로 사용자가 근처에 있는 주어진 범주의 트럭을 빠르게 확인할 수 있습니다. 사용자가 초기 화면에서 트럭으로 바로 이동할 수 있습니다.

 

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

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

직접 조작을 통해 탐색

웹 사이트에서는 탐색 요소가 위쪽 탐색 모음과 바닥글에 반복됩니다. 탐색 요소는 영구적이며 항상 보기에 표시됩니다. Windows 스토어 앱의 탐색 요소는 콘텐츠와 직접 통합되고 사용자가 필요할 때까지 숨겨져 있도록 디자인했습니다.

예제: 웹 사이트 및 Windows 스토어 앱에서 특정 트럭 탐색

웹 사이트를 사용하여 트럭 탐색Windows 스토어 앱을 사용하여 트럭 탐색

웹 사이트:

A. 사용자가 웹 사이트의 별도 범주 페이지로 이동하여 모든 트럭 범주를 확인합니다.
B. 범주(예: "바비큐 푸드 트럭")를 선택하고 범주를 시작합니다.
C. 마지막으로 선택한 범주에서 트럭을 선택할 수 있습니다.

Windows 스토어 앱:

A. 초기 화면에는 추천 트럭, 내 근처에 있는 트럭, 범주 보기 등의 콘텐츠 그룹으로 구성된 허브 페이지가 포함되어 있습니다.
B. 사용자가 터치를 사용하여 두 방향 중 하나로 이동하면 초기 화면에 다양한 푸드 트럭 범주가 표시됩니다.
C. 각 허브에 범주의 여러 트럭이 강조 표시되므로 사용자가 트럭을 탭하여 해당 트럭의 페이지로 직접 이동하거나, 범주 그룹 헤더 텍스트(예: "아시아")를 탭하여 범주 페이지로 이동할 수 있습니다.

 

명령 및 작업

앱 명령 및 작업을 앱 바에 유지

웹 사이트는 콘텐츠와 연결된 사용자 작업으로 표시되는 임시 명령을 자주 사용합니다. 예를 들어 웹 사이트의 모든 푸드 트럭 페이지에는 사용자가 주어진 트럭의 사진을 업로드할 수 있는 링크가 있습니다. 이러한 상황별 작업은 각 개별 트럭 페이지에서 반복됩니다.

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

예제: 웹 사이트 및 Windows 스토어 앱에서 푸드 트럭 사진 업로드

웹 사이트를 통해 사진 업로드Windows 스토어 앱을 통해 사진 업로드

웹 사이트:

  • 임시 명령 사용자 작업은 콘텐츠와 관련이 있습니다.

Windows 스토어 앱:

  • 사용자에게 몰입형 환경을 제공하기 위해 앱 바는 기본적으로 숨겨져 있습니다.
  • 사용자는 화면 아래쪽이나 위쪽에서 살짝 밀어 상황별 작업에 액세스할 수 있습니다. 사용자가 앱에 있는지 여부나 선택한 콘텐츠에 따라 작업이 변경됩니다.

 

계약

푸드 트럭 웹 사이트는 검색, 로그인 등의 글로벌 작업에 대한 일반적인 웹 사이트 규칙을 따릅니다. 이러한 작업은 사이트의 오른쪽 위에 영구적으로 고정됩니다. Windows 스토어 앱을 디자인할 때는 이러한 글로벌 작업의 UI를 포함하지 않았습니다. 대신 검색, 공유, 설정 계약 등의 시스템 기본 제공 접근 권한 값을 사용했습니다. 이러한 UI 구성 요소는 항상 화면에 표시되지는 않으므로 앱 캔버스가 더 정리되고 콘텐츠에 추가 공간을 제공합니다.

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

대부분의 웹 사이트와 마찬가지로 푸드 트럭 사이트는 모든 페이지에 검색 상자가 있으며 검색 범위가 해당 사이트로만 지정됩니다. 즉, 사용자가 검색 전에 푸드 트럭 웹 사이트로 먼저 이동해야 합니다.

Windows 스토어 앱에서 검색 환경을 디자인할 때 사용자가 앱을 먼저 열지 않고도 좋은 트럭을 검색할 수 있도록 검색 계약을 사용했습니다. 검색 참 메뉴는 검색 기능에 대한 액세스를 제공하며 사용자가 시스템의 아무 곳에서나 호출할 수 있습니다.

예제: 웹 사이트 및 Windows 스토어 앱을 사용하는 푸드 트럭 검색

웹 사이트를 사용하여 검색

웹 사이트:

  • 검색 상자가 항상 사이트에 표시됩니다.
  • 검색 결과를 표시할 때도 모든 웹 사이트 크롬이 있습니다.
  • 사용자가 푸드 트럭을 검색하기 전에 항상 웹 사이트로 먼저 이동해야 합니다.

Windows 스토어 앱을 사용하여 검색

Windows 스토어 앱을 통한 검색 계약 환경

Windows 스토어 앱의 검색 결과

Windows 스토어 앱:

  • 사용자가 가장자리를 살짝 밀어 참 메뉴를 표시하고 검색을 선택하여 앱의 아무 곳에서나 검색할 수 있습니다. 앱 바 또는 앱 캔버스에 표시되는 앱에서 바로 검색 상자를 제공할 수도 있습니다.
  • 사용자가 현재 앱 내부에 있으므로 푸드 트럭 앱이 기본적으로 선택되어 있습니다. 사용자가 입력을 시작하면 앱이 검색 제안을 검색 창에 제공합니다. 이렇게 하면 사용자가 결과를 생성하는 단어를 빠르게 확인할 수 있습니다. 사용자가 쿼리(예: "바비큐 트럭")를 제출하면 앱이 검색 결과 보기를 표시합니다.
  • 검색 결과 보기는 간결하며 불필요한 크롬 없이 검색 결과만 표시합니다. 검색 상자를 추가하는 경우 전체 검색 사용자 환경을 제어할 수 있습니다.

예제: 앱 외부에서 푸드 트럭 검색(Windows 스토어 앱에서만 사용 가능)

앱에서 바로 검색뿐 아니라 사용자가 앱 외부에서 푸드 트럭 앱을 검색 대상으로 선택하여 검색할 수도 있습니다. 이 예제에서는 사용자가 시작 화면에서 "바비큐 트럭"을 검색하고 있습니다. 사용자가 검색 창의 앱 목록에서 푸드 트럭 앱을 탭하면 앱이 시작되고 검색 쿼리가 완료됩니다. 푸드 트럭은 근처에 있는 푸드 트럭을 찾는 데 최적화되어 있으므로 사용자가 한 번 탭하여 검색을 완료하고 해당 지역의 바비큐 트럭을 찾을 수 있습니다.

다른 앱에서 푸드 트럭 검색

검색 결과

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

푸드 트럭 웹 사이트에서 사용자는 메일, Facebook 또는 Twitter를 통해 특정 푸드 트럭에 대한 정보를 공유할 수 있습니다. 공유 옵션은 웹 사이트의 많은 위치에서, 공유할 수 있는 콘텐츠 근처에 자주 제공됩니다.

Windows 스토어 앱에서는 공유 시나리오가 공유 계약에 의해 더욱 부각됩니다. 시스템의 기본 제공 공유 참 메뉴를 사용하면 앱 전체에 공유 단추를 표시할 필요가 없습니다. 사용 중인 앱에 관계없이 사용자는 항상 일관된 위치에서 공유 옵션을 찾을 수 있습니다. 사용자가 사용하려는 각 서비스에 연결할 필요가 없기 때문에 이 변경은 디자인과 개발을 간소화합니다. 앱을 공유와 통합하면 공유 계약을 구현한 모든 Windows 앱과 연결됩니다. 외부 웹 서비스에 대한 API 변경을 처리할 필요가 없습니다.

예제: 푸드 트럭 사진 공유.

웹 사이트를 통해 공유Windows 스토어 앱을 통해 공유

웹 사이트:

  • 각 공유 서비스에 해당 단추가 있습니다.
  • 공유 단추가 웹 사이트 전체에 분배되어 있습니다.

Windows 스토어 앱:

  • 모든 Windows 스토어 앱에 있는 모든 공유 옵션에 대한 일관된 위치 사용자가 앱 내의 아무 곳에서나 공유를 호출할 수 있습니다.
  • 사용자가 공유 서비스를 선택하면 대상 앱이 UI 창과 브랜딩을 사용자 지정할 수 있습니다.

 

예제: 공유 창 자세히 살펴보기.

Windows 스토어 앱의 공유 창

Windows 스토어 앱:

  • 공유 대상으로 구현된 모든 앱이 공유 창의 앱 목록에 표시됩니다. 예를 들어 Socialite, Tweet@Rama 또는 Mail이 표시됩니다.
  • 사용자는 앱이 지원하는 다양한 콘텐츠 형식을 공유할 수 있습니다. 예를 들어 원하는 경우 링크 및 사진을 공유하거나 메모 작성 앱에 정보를 저장할 수 있습니다.
  • 사용자가 신속하게 공유 작업을 완료할 수 있도록 자주 사용하는 공유 대상은 위쪽에 표시됩니다.

설정 창 사용

푸드 트럭 웹 사이트에는 About us, Sign-in, Contact info, Newsletters 등의 유틸리티 기능 집합이 있습니다. 이러한 기능은 일반적인 웹 디자인 패턴에 따라 화면의 특정 영역에 있으므로 사용자가 쉽게 찾을 수 있습니다. 그러나 사이트의 여러 영역에 분배되어 있습니다. 구성 및 관리 작업은 Windows 스토어 앱의 주된 기능이 아닙니다. 설정 계약을 일관된 진입점과 함께 사용할 경우 이러한 앱 관리 기능이 있는 위치를 기억할 필요 없이 필요에 따라 안전하게 호출할 수 있습니다.

예제: 웹 사이트 및 Windows 스토어 앱에서 옵션 설정

웹 사이트를 통해 설정 조정

웹 사이트:

  • 로그인, About Us, Contact, Newsletter 등의 유틸리티 기능은 사이트의 여러 영역에 있습니다.

앱 설정에 액세스

단일 위치를 통해 옵션 설정

사용자의 Microsoft 계정에 로그인

알림 설정

Windows 스토어 앱:

A. 설정 옵션은 모두 설정 창의 단일 위치에 있습니다.
B. 사용자가 현재 컨텍스트를 벗어나지 않고 앱 내의 아무 곳에서나 로그인할 수 있습니다.
C. 알림 설정을 사용하면 사용자가 받으려는 알림 유형을 지정할 수 있습니다. 이 알림은 사이트 뉴스레터를 대체하고 사용자에게 앱의 적시 정보를 제공합니다.

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

푸드 트럭 사이트는 사용자에게 해당 지역의 트럭 사진을 업로드하도록 권유합니다. 이 기능은 Windows 스토어 앱에서 파일 선택기를 사용하여 쉽게 복제할 수 있습니다. 파일 선택기는 사용자가 로컬 PC, 연결된 저장 장치 또는 홈 그룹을 통해 연결된 다른 컴퓨터에 있는 파일과 폴더에 액세스할 수 있게 하는 전체 화면 대화 상자입니다. 파일 선택기 계약에 참여한 앱의 항목에 액세스할 수도 있습니다.

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

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

Windows 스토어 앱:

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

터치

가로 레이아웃에 가로 이동 사용

푸드 트럭 웹 사이트와 Windows 스토어 앱은 모두 사용자 조작 방법과 인체 공학을 염두에 두고 디자인되었습니다. 웹 사이트는 주로 마우스 조작에 맞게 디자인되었으므로 모든 페이지의 콘텐츠가 세로로 배치되며 사용자가 마우스를 사용하여 쉽고 빠르게 원하는 콘텐츠로 스크롤할 수 있습니다. Windows 스토어 앱은 터치 방식으로 디자인되었으며 대부분의 데스크톱 및 노트북 PC와 마찬가지로 가로 방향을 사용합니다. 가로 레이아웃은 화면 공간 사용을 최적화합니다. 또한 세로로 스크롤하는 것보다 사용자가 가로 방향 장치에서 터치를 통해 가로로 이동하는 것이 더 편리하고 자연스럽습니다.

예제: 웹 사이트 및 Windows 스토어 앱 초기 화면에서 콘텐츠 탐색.

세로 스크롤 대신 이동 사용

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

웹 사이트의 일반적인 규칙은 여러 개체 옆에 확인란을 사용하여 다중 선택을 나타내는 것입니다. Windows 8에서는 사용자가 이동 방향에 수직으로 개체를 빠르게 살짝 밀어 목록이나 그리드의 개체를 선택할 수 있습니다. 개체를 선택하면 항목과 관련된 명령을 보여 주는 앱 바가 자동으로 표시됩니다.

예제: 시작 화면에 고정하기 위해 초기 화면에서 여러 푸드 트럭 선택.

앱 방문 페이지에서 사용자가 트럭을 살짝 밀어 선택하면 선택한 트럭에 책갈피를 지정할 수 있는 즐겨찾기에 추가 명령이 포함된 앱 바가 표시됩니다. 이 제스처는 취소가 가능하므로 Windows 스토어 앱에서 훨씬 효율적으로 선택할 수 있으며 사용자가 안심하고 앱을 탐색할 수 있습니다.

시작 화면에 여러 트럭 고정

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

손가락 모으기 및 확대 제스처를 사용하면 사용자가 긴 콘텐츠 목록을 하나씩 빠르게 살펴볼 수 있습니다. Windows 스토어 앱의 방문 페이지에는 추천, 내 근처, 아시아, 바비큐, 아침 식사 등의 많은 그룹이 표시됩니다. 사용자는 가로로 이동하여 더 많은 콘텐츠를 보거나 시맨틱 줌을 사용하여 특정 섹션으로 빠르게 점프할 수 있습니다. 시맨틱 줌 컨트롤을 사용하여 손가락을 모으면 축소되어 현재 보기의 모든 섹션이 한눈에 표시됩니다. 사용자는 탭하여 목록의 처음, 끝 또는 특정 섹션으로 빠르게 점프할 수 있습니다. 축소된 보기를 추가로 디자인하여 각 섹션 내의 흥미로운 콘텐츠나 섹션에 대한 미디어 정보(예: 각 범주의 트럭 수)를 표시할 수 있습니다. 앱 캔버스에서 영구적 탐색 요소 대신 축소된 보기를 탐색에 사용할 수 있습니다.

예제: 시맨틱 줌을 사용하여 특정 트럭 범주로 이동.

웹 사이트에서 특정 범주로 점프Windows 스토어 앱을 사용하여 특정 트럭으로 점프

웹 사이트:

  • 사용자가 모든 범주를 보려면 별도의 페이지로 이동해야 합니다.

Windows 스토어 앱:

  • 사용자가 초기 화면에서 시맨틱 줌을 사용하여 화면을 벗어나지 않고 모든 범주를 쉽게 확인할 수 있습니다.
  • 시맨틱 줌 보기에서는 각 범주가 하나의 사진으로 표시됩니다. 전체 목록을 보기 위해 이동하지 않고도 초기 화면에서 모든 범주를 사용할 수 있습니다.

 

크기 조정

다른 방향 및 화면 크기에 맞게 조정되는 레이아웃 디자인

각 장치, 화면 크기, 해상도 및 방향에 맞게 크기가 조정되도록 푸드 트럭 웹 사이트 레이아웃을 유연하게 디자인했습니다. 유연한 웹 사이트 디자인과 유사하게 Windows 8 PC는 작은 터치 전용 태블릿에서 큰 노트북과 데스크톱에 이르기까지 다양합니다. 더 많은 고객이 앱을 사용하게 하려면 Windows 스토어 앱을 지원하는 다양한 장치에서 앱이 멋지게 보이도록 디자인하는 것이 중요합니다.

웹 사이트 디자인의 많은 원칙을 Windows 스토어 앱 개발에 적용할 수 있습니다. 기본 제공 템플릿과 컨트롤을 사용하면 쉽게 가로 보기에서 세로 보기로 변경하거나 그 반대로 변경할 수 있습니다. 방향이 세로로 변경되면 각 범주에 더 많은 트럭이 표시됩니다. 마찬가지로, 고해상도 모니터의 추가 화면 공간을 이용하기 위해 앱이 각 범주에 더 많은 트럭을 표시합니다.

예제: 서로 다른 장치에서의 푸드 트럭 웹 사이트 및 Windows 스토어 앱

각기 다른 장치와 화면 해상도의 푸드 트럭 웹 사이트

웹 사이트:

  • 푸드 트럭 웹 사이트가 각 화면 크기와 양식 요소에 맞게 레이아웃을 조정하고 재배치됩니다.

각기 다른 레이아웃 모드와 해상도의 Windows 스토어 앱

Windows 스토어 앱:

  • 세로 모드, 가로 모드 및 고해상도 화면의 Windows 스토어 앱 추가 공간을 사용하여 더 많은 콘텐츠를 표시합니다.

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

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

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

예제: 와이드 및 좁은 크기의 Windows 스토어 앱 초기 화면

와이드 및 좁은 크기의 Windows 스토어 앱

  • 왼쪽: 와이드 크기의 푸드 트럭 앱으로, 화면의 대부분을 사용합니다. 사용자가 날씨 앱과 푸드 트럭 앱을 나란히 놓고 사용할 수 있습니다.
  • 오른쪽: 좁은 너비에서는 긴 가장자리를 따라 이동하는 것이 더 편리하므로 사용자가 세로로 이동하여 추가 콘텐츠에 액세스합니다. 전체 보기의 가로 이동도 긴 가장자리를 따라 이동하도록 최적화되어 있지만 이 이동과는 다릅니다.

알림

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

푸드 트럭 웹 사이트의 사용자는 사이트로 이동하여 해당 지역의 새 푸드 트럭이나 위치가 변경된 푸드 트럭에 대한 뉴스와 블로그를 확인할 수 있습니다. 웹 사이트에서 사용자가 Facebook 및 Twitter의 푸드 트럭 공지를 팔로우할 수도 있습니다. 그러나 이렇게 하려면 사용자가 웹 사이트로 이동하여 새로운 소식을 확인하거나 업데이트에 등록해야 합니다. 관련성이 손실될 때까지 사용자에게 업데이트가 표시되지 않을 수도 있습니다.

이 접근 권한 값을 Windows 스토어 앱으로 변환할 때는 타일과 알림 메시지를 사용하여 요구에 맞는 최신 정보를 사용자에게 제공했습니다. 시작 화면에 표시되는 타일을 통해 Windows 스토어 앱에 액세스합니다. 타일은 활동에 따라 반응하고 사용자가 앱을 더 많이 사용하고 가치를 파생하도록 사용자에 맞는 새롭고 개인 설정된 콘텐츠를 제공합니다. 이 콘텐츠는 앱이 실행되지 않는 경우에도 계속 표시됩니다.

일반적으로 웹 사이트는 블로그 및 뉴스레터를 사용하여 최신 뉴스 및 사건을 전달합니다.

웹 사이트:

  • 웹 사이트의 최신 뉴스 섹션에는 트럭의 최신 위치가 표시됩니다.
  • 웹 사이트의 블로그에는 새 트럭이 나열되고 주어진 인접 지역에서 푸드 트럭을 이용할 수 있는 시기에 대한 힌트를 제공합니다.

라이브 타일과 알림은 Windows 스토어 앱에 생명을 불어넣습니다.

Windows 스토어 앱:

  • 푸드 트럭 앱의 기본 타일에는 사용자 근처에 있는 푸드 트럭과 해당 위치에 트럭이 머무르는 기간이 표시됩니다. 푸드 트럭 앱이 실행되지 않는 경우에도 타일을 업데이트할 수 있으므로 사용자가 시작 화면을 통해 업데이트를 받을 수 있습니다.
  • 사용자는 즐겨 찾는 트럭(예: 치즈버거 트럭)을 시작 화면에 타일로 고정하여 해당 트럭에 대한 최신 뉴스를 받을 수 있습니다. 이 경우 요구에 맞게 자유로운 사용자 지정이 가능합니다. 앱 디자이너는 구현하기 쉽도록 많은 타일 템플릿 및 크기 중에서 선택할 수 있습니다.

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

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

예제: 사용자가 가장 좋아하는 푸드 트럭의 위치 변경

사용자가 설정 창을 통해 즐겨찾는 푸드 트럭 위치가 변경될 경우 알림 메시지를 받도록 옵트인(opt in)했습니다.

예제 알림

결론

기존 웹 사이트를 기반으로 하여 Windows 스토어 앱을 빌드하는 경우 항상 자신에게 앱의 주요 기능을 물어보세요. 대답이 있는 경우 Windows 스토어 앱을 해당 시나리오에 맞게 최적화합니다. 항상 크롬보다 콘텐츠를 강조해야 합니다. 공유, 검색, 설정 등의 시스템에서 기본 제공 명령을 사용하여 익숙하고 직관적인 메커니즘을 통해 일반적인 기능에 액세스할 수 있게 하세요. 필요하지 않은 경우 앱 바와 시맨틱 줌 컨트롤을 사용하여 명령을 화면 바깥쪽에 숨깁니다. 그리고 라이브 타일과 알림을 이용하여 사용자가 앱이 실행되지 않을 때도 앱에서 가치를 파생시킬 수 있게 합니다. 이렇게 하면 사용자가 좋아하고 비즈니스 성장에 도움이 되는 매력적인 Windows 스토어 앱을 갖게 될 것입니다.

작성자 정보

Nicholas Huttema, Plain Concepts

Nicholas Huttema는 Plain Concepts의 시각 및 조작 디자이너입니다. 그는 새로운 아이디어와 간결한 사용자 인터페이스를 좋아합니다. Nick은 미국 미시간 주에서 학교를 마치고 직장 생활을 시작했습니다. 그 이후 로스앤젤레스와 시애틀 지역의 여러 회사에서 근무하면서 UX 디자인 기술을 습득했습니다. 그는 Microsoft, Myspace, Amazon.com, Herman Miller 등의 디자인 작업을 했습니다. 업무 외 시간에는 야외 하이킹, 캠핑, 스노보딩 등을 즐깁니다.

Qixing Zheng, Microsoft Corporation

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

 

 

 

표시:
© 2014 Microsoft