뉴스 앱

Applies to Windows and Windows Phone

이 항목에서는 뛰어난 Windows 8.1용 뉴스 앱을 만드는 방법에 대해 설명합니다.

개요

Windows 8.1은 터치 중심의 태블릿에서 고해상도 랩톱 및 데스크톱 PC에 이르기까지 광범위한 장치에서 최고의 사용 범위를 제공합니다. 서로 다른 이러한 폼 요소는 뉴스 게시자에게 다양한 사용 사례와 시나리오에서 훌륭한 환경을 제공하고 하나의 앱으로 많은 사용자에게 다가갈 수 있는 고유한 기회를 열어줍니다. 

새로운 Windows 스토어 또한 고유한 구독용 상거래 엔진을 실행하고자 하는 경우 유연성을 제공하는 한편, 앱을 배포하고 홍보하고 콘텐츠를 통해 수익을 올릴 수 있는 새로운 기회를 제공합니다.  

이 문서에서는 뉴스 앱에 특히 중요한, 다음과 같은 Windows 8.1의 새로운 기능을 중점적으로 소개합니다.

  • 크롬 앞에 콘텐츠 배치—Windows 8.1에서는 운영 체제가 배경으로 투명해지면서 콘텐츠가 중심이 됩니다. 독자들은 전보다 더 많이 참여하고 산만함을 덜 느낄 수 있습니다.
  • 브랜드의 진가 발휘—Windows 8.1에서는 라이브 타일, 시작 화면, 로고 등을 통해 브랜드의 명성과 인식을 앱으로 가져올 수 있습니다.
  • 공유 계약 및 장치 계약—최고 수준의 새로운 운영 체제 기능을 통해 콘텐츠를 더 잘 공유하고 앱에서 주변 장치를 활용하도록 할 수 있습니다.
  • 알림—사용자에게 새 콘텐츠를 알리고 참여와 반복 사용을 높이기 위해 라이브 타일과 알림 메시지를 사용합니다.

뉴스 앱의 레이아웃 및 탐색

뉴스 앱은 일반적으로 서로 다른 많은 범주의 뉴스를 제공합니다. Windows 스토어 앱용 계층적 탐색 패턴을 사용하면 사용자가 관심을 갖는 콘텐츠를 바로 눈앞에 제공하는 한편 앱을 매우 빠르고 유연하게 사용하도록 할 수 있습니다.

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

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

계층적 모델

뉴스 앱에는 종종 사용자가 검색하고 사용할 상당한 양의 콘텐츠가 있습니다. 또한 뉴스 앱과 웹 사이트에서는 정보 밀도를 관리하기 위해 서로 다른 많은 범주를 사용하는 경향이 있습니다. 예를 들면 최상위 페이지에는 대개 눈에 띄는 "속보" 또는 "주요 기사" 섹션이 있습니다. 또한 정치, 세계 뉴스, 기술, 스포츠, 금융, 엔터테인먼트 등 다양한 기타 범주와 함께 일부 기사는 앱의 최상위에 표시될 수 있습니다. Windows 8.1에서 레이아웃 및 조작을 위해 계층적 모델을 사용하면, 흥미로운 콘텐츠를 탭이나 메뉴 뒤에 숨기는 것이 아니라 최상위로 끌어올려 사용자에게 제공할 수 있습니다. 최상위 방문 페이지, 즉 "허브"는 풍부한 시각적 다양성을 제공하여 앱의 각 부분으로 사용자를 이끌어야 합니다.

앱의 레이아웃을 생각할 때에는 상대적인 중요성과 어떻게 하면 가장 많은 사용자를 폭넓게 끌어들일 수 있을지를 기반으로 시나리오와 범주의 우선 순위를 정하세요. 예를 들어 주요 뉴스 기사 또는 속보 범주는 일반적으로 대부분의 뉴스 앱 사용자에게 중요하므로 앱의 허브 페이지에 눈에 띄게 배치해야 합니다.

다음의 다이어그램은 샘플 뉴스 앱의 계층적 모델을 보여 줍니다.

뉴스 앱에 대한 계층적 모델의 예제

앱의 허브 페이지

앱의 허브에서는 쉽게 이동할 수 있는 하나의 화면에 주요 기사, 속보, 사용자를 위한 권장 콘텐츠 및 각종 범주에 대한 특집 기사를 보여 줄 수 있습니다. 각 범주 그룹의 흥미로운 콘텐츠를 허브로 올릴 수 있습니다. 그룹 헤더를 탭하면 특정 섹션으로 이동하여 자세한 내용을 볼 수 있습니다.

뉴스 범주

앱의 허브 페이지에 모든 앱 범주를 일정하게 배치하고 각 범주에서 사용자의 관심을 끌 만한 몇몇 기사를 보여 주세요. 다음과 같이 그룹 헤더 옆에 숫자를 표시하여 범주에 더 많은 기사가 있음을 나타낼 수 있습니다.

더 많은 뉴스 기사가 있음을 나타내는 방법을 보여 주는 예제

속보

사용자는 일반적으로 가장 중요한 최신 뉴스 기사에 관심을 가지므로 속보는 뉴스 앱의 주요 시나리오입니다. 다른 콘텐츠보다 크게 만들고 뉴스의 우선 순위에 따라 두께와 색을 달리 하여 허브 페이지의 전면에서 속보 및 새로운 기사를 강조 표시할 수 있습니다.

다음 예제에서는 콘텐츠 배치와 크기를 사용할 뿐 아니라 헤드라인 앞에 빨간색으로 "Live"를 추가하여 콘텐츠에 대한 사용자의 시선을 끌어들임으로써 라이브 사건을 차별화합니다.

라이브 콘텐츠가 있음을 나타내는 방법의 예제

책갈피/나중을 위해 저장

사용자는 나중에 계속 읽을 수 있도록 기사를 저장하고 책갈피로 지정할 수 있습니다. 앱이 이 기능을 빠르고 유연하게 지원하면, 저장한 기사로 돌아오는 것이 어렵지 않으므로 사용자는 계속해서 앱을 시작하게 될 것입니다. 사용자가 저장한 기사를 모두 보관할 수 있도록 "책갈피" 또는 "즐겨찾기"와 같은 섹션을 허브 페이지에 추가하세요. 예를 들면 다음과 같습니다.

책갈피의 예제

사용자는 "책갈피" 또는 "즐겨찾기"에 기사를 추가하고 다 읽은 후 제거할 수 있습니다.

시맨틱 줌

시맨틱 줌을 사용하면 사용자는 단일 보기 내에서 빠르게 이동할 수 있습니다. 예를 들어 사용자는 손가락을 모으고 이동하여 허브의 상위 뉴스 기사에서 허브 페이지의 최신 뉴스 범주로 빠르게 도달할 수 있습니다. 다음 예제에서는 사용자가 시맨틱 줌을 사용하여 두 뉴스 범주 간에 빠르게 이동하는 방법을 보여 줍니다.

시맨틱 줌으로 빠르게 이동하는 방법의 예제

다음은 뉴스 앱에서 작동하는 시맨틱 줌의 추가 예제입니다.

시맨틱 줌의 추가 예제

시맨틱 줌을 사용하는 경우, 사용자는 허브 페이지에서 그룹을 선택하고 이동하여 범주를 다시 정렬할 수 있습니다. 이렇게 하여 사용자가 앱의 허브 페이지를 개인 설정하고 앱에 더 애착을 갖게 할 수 있습니다. 예를 들면 사용자는 앱의 "기술" 범주를 더 선호하므로 "정치" 범주의 앞에 두고자 할 수 있습니다. 이 기능을 사용자에게 제공하여 사용자의 기호에 따라 앱의 모양을 맞춤화할 수 있습니다.

범주의 정렬을 보여 주는 예제

특정 범주 페이지에서도 시맨틱 줌을 사용하여, 해당 범주의 서로 다른 기사 간에 탐색할 수 있습니다. 시맨틱 줌을 통해 사용자는 기사 간에 빠르게 이동할 수 있습니다.

앱의 기사 보기

앱의 기사 보기는 콘텐츠가 표시되는 곳입니다. 이곳은 사용자가 앱에서 가장 많은 시간을 보내는 곳이므로 사용자가 이 보기의 환경을 즐길 수 있다면 앱이 돋보이게 됩니다. 콘텐츠를 직관적으로 표시하여 이 보기가 시각적으로 즐거움을 주도록 만드는 것이 중요합니다. 이 보기 내에서 효율적으로 탐색하도록 하는 것도 중요합니다.

사용자가 엄지손가락을 사용해 인간 공학적으로 쉽게 콘텐츠를 이동할 수 있도록 뉴스 앱의 기사 보기는 가로로 이동해야 합니다. 또한 기사를 페이지로 나누는 것도 고려해 보세요. 한 기사를 여러 페이지로 나누면 사용자는 어느 정도 읽었는지 알 수 있으며 원하는 곳으로 쉽게 이동할 수 있습니다.

가로로 이동하는 기사를 보여 주는 보여 주는 그림

그러나 뉴스 기사를 만들 때 매우 뛰어난 레이아웃과 사용자 환경을 구현하려면 그것을 보는 사용자를 고려해야 합니다.

  • 태블릿 PC에서
  • 노트북 PC에서
  • 데스크톱 PC에서

이러한 시나리오 각각은 사용자의 사용 패턴을 고려한 서로 다른 레이아웃을 구현할 때 이점을 갖게 됩니다. 예를 들어, 사용자가 태블릿에서 뉴스를 읽을 때에는 가로 및 세로 보기 모두를 사용하지만 노트북과 데스크톱 PC에서는 거의 가로 보기만 사용하게 됩니다. 따라서 양 방향을 모두 염두에 두고 기사 보기를 디자인하세요. 또한 태블릿에 맞게 디자인된 레이아웃은 터치 탐색에도 최적화되어야 합니다. 앞서 제안했듯이 콘텐츠를 여러 페이지로 나누는 것이 좋습니다. 페이지 추가를 위한 터치 중심 방식은 기사 내의 끌기 지점을 사용하여 "스피드 범프"를 만들어 구현합니다. 이렇게 하면 사용자는 기사 전체를 빠르게 이동할 때 기사의 어디에 있는지를 알 수 있습니다.

노트북과 데스크톱 PC 사용자에게는 가로 방향이 더 일반적이므로 지루한 열의 집합을 피할 수 있는 기사의 레이아웃 방법을 생각해 보세요. 한 가지 레이아웃 방법은 여러 열에 걸친 삽입 창, 이미지 또는 기타 미디어 요소를 사용하는 것입니다. 레이아웃에 변화를 주려면 인용문을 추가하고 전체 페이지로 확장되는 제목을 사용할 수 있습니다. 또한 노트북과 데스크톱 시나리오에서 모두 사용자는 대부분 키보드와 마우스를 사용해 탐색합니다. 따라서 레이아웃이 키보드와 마우스 입력에 모두 응답하도록 하는 것이 중요합니다.

사용자가 계속해서 읽기 환경을 유지하고 앱에 더 오래 머물도록 기사 보기에 관련 기사 및 댓글을 표시할 수 있습니다. 예를 들면 다음과 같습니다.

관련 기사 및 댓글을 보는 사용자

기사 가운데에서 탐색

사용자는 종종 특정 주제 또는 뉴스 범주에 관심을 갖게 되며 그와 관련된 여러 기사를 읽을 수 있습니다. 앱의 콘텐츠가 짧은 경향이 있으면 기사의 끝에서 다음 기사로 넘어갈 때 오른쪽으로 이동하고, 기사의 시작에서 이전 기사로 넘어갈 때 왼쪽으로 이동하도록 하세요. 사용자가 다른 기사로 매우 빨리 전환하도록 하려면 이 보기에서 시맨틱 줌을 제공할 수도 있습니다.

기사 레이아웃의 예제

각 게시글 또는 기사의 콘텐츠가 긴 경향이 있으면, 사용자가 다른 기사로 쉽게 전환할 수 있도록 위쪽 앱 바에 "이전 기사" 및 "다음 기사" 단추를 둘 수 있습니다. 앞뒤로 살짝 밀어 기사 간에 이동하도록 하는 것 외에 이러한 단추를 제공할 수도 있습니다. 단추에 다양한 시각적 스타일을 적용할 수 있습니다. 예를 들어 이전 및 다음 기사의 기사 미리 보기를 보여 주면 사용자는 전환할 콘텐츠의 멋진 미리 보기를 이용할 수 있습니다. 또는 표준 "이전" 및 "다음" 문자 모양을 사용할 수 있지만, 콘텐츠가 산만해지지 않도록 앱 바를 반투명 또는 투명하게 만들어 변화를 줄 수 있습니다. 다음은 위쪽 앱 바에 그러한 단추가 있는 예제입니다.

이전 및 다음을 보여 주는 UI가 있는 위쪽 앱 바의 예제

명령

"책갈피에 추가", "뉴스 피드 추가", "타일을 시작에 고정" 등 일반적인 작업에 대한 명령은 모두 아래쪽 앱 바에 있어야 합니다. 아래쪽 앱 바는 사용자가 안심하고 찾을 수 있도록 그러한 명령을 통합하는 장소이기 때문입니다.

명령에 대한 자세한 내용은 Windows 스토어 앱을 위한 명령 디자인을 참조하세요.

책갈피

허브 페이지에서 나중에 읽기 위해 기사를 저장할 때, 또는 지금 기사를 읽고 있지만 다 읽을 수 없을 것 같을 때 일반적으로 기사를 책갈피로 지정합니다. 훌륭한 뉴스 앱은 두 상황을 모두 지원하여, 사용자가 기사를 읽는 동안 허브나 범주 페이지에서 아래쪽 앱 바를 사용하여 선택한 기사를 책갈피로 지정할 수 있도록 해야 합니다. 책갈피 단추는 토글, 즉 책갈피를 추가하거나 제거하는 단일 단추여야 합니다.

사용자가 어떤 장치를 사용하든 책갈피로 지정한 기사를 계속해서 읽을 수 있도록 항상 책갈피를 로밍하세요. 단추의 기능이 허브 페이지에서는 상황에 따라 다르지만 기사 보기에서는 포괄적인 경우에도 다음 예제와 같이 단추는 일관성을 위해 앱 바의 왼쪽에 있어야 합니다.

앱 바 왼쪽에 책갈피 단추를 보여 주는 예제

앱 탐색 계층 구조에 대한 자세한 내용은 Windows 스토어 앱용 탐색 디자인을 참조하세요.

텍스트 선택

사용자는 기사에서 발췌문을 선택하려는 경향이 있으므로 특히 기사 보기의 텍스트에 대해서는 앱에서 콘텐츠 선택이 가능하도록 설정하세요. 선택한 콘텐츠를 복사하기 위한 상황에 맞는 메뉴가 자동으로 표시됩니다.

계약

사용자 환경을 풍성하게 하고 뉴스 앱을 Windows 환경의 나머지와 연결하기 위해 해당되는 경우 게임에서 Windows 8.1 계약을 활용해야 합니다. 계약에 대한 자세한 내용은 앱 계약 및 확장을 참조하세요.

공유 계약

공유 계약은 두 앱 간에 콘텐츠를 공유하는 친숙하고 자연스러운 방법을 사용자에게 제공합니다. 자신의 뉴스 앱을 다른 앱과 명확히 긍정적으로 차별화할 수 있는, 앱의 콘텐츠 공유를 위한 많은 시나리오가 있습니다. Windows 8.1의 공유를 사용하면 추가 통합을 앱에 코딩하지 않고도 이 모든 시나리오를 구현할 수 있습니다. 사용자가 앱의 콘텐츠를 공유할 수 있게 하려는 경우 앱이 공유 소스여야 합니다. 앱에서 다른 앱의 데이터를 사용할 수 있게 하려는 경우 앱이 공유 대상이어야 합니다.

뉴스 앱에서 공유

뉴스 범주에 있는 대부분의 앱은 뉴스 콘텐츠를 이용하는 것과 관련이 있습니다. 오늘날 뉴스 앱의 주요 기능은 기사와 흥미로운 이야기를 공유하는 것이므로 이러한 앱의 모든 기사가 공유 계약의 소스가 되어야 합니다.

공유 소스가 되면 URI, 비트맵, HTML, 텍스트, 저장소 항목 또는 사용자 지정 데이터 형식의 형태인지에 관계없이 이러한 형식을 지원하는 다른 앱이 뉴스 앱의 콘텐츠를 사용할 수 있습니다. 이 기능은 여러 가지 시나리오를 가능하게 해 줍니다. 이러한 계약을 활용하는 소셜 공유 환경을 쉽게 상상해 볼 수 있습니다. 앱이 소셜 네트워크, 블로깅 앱 및 메일 앱에 즉시 공유할 수 있도록 만들 수 있습니다.

뉴스 앱의 공유 예

소셜 공유 외에도 계약을 통해 사용자는 노트 기록 앱, 뉴스 집계 및 기타 공유 대상을 사용하여 뉴스를 공유하는 방식으로 연구, 계획 및 보관 작업을 완료할 수 있습니다. 예를 들어 뉴스 기사에서 선택한 발췌문을 나중에 참조하기 위해 기사 링크와 함께 전자 필기장에 저장하려는 경우 공유 소스가 이 정보를 나타내는 올바른 데이터 형식을 제공하면 이렇게 할 수 있습니다.

또한 소스 공유 계약을 지원하여 앱이 탭하여 보내기를 통해 근접한 장치에 직접 공유할 수 있도록 합니다.

소스 앱의 경우 사용자가 공유하게 하려는 콘텐츠에 의미 있는 개수만큼 데이터 형식을 지원하는 것이 중요합니다. 이렇게 하면 사용자가 다양한 공유 대상 앱과 앱 콘텐츠를 공유할 수 있습니다. 아래 예제에서 Contoso News는 원본 앱입니다. 이 앱은 현재 초점이 맞춰져 있는 기사의 텍스트, 미리 보기 및 링크를 공유합니다. 공유 창에는 이러한 콘텐츠 유형의 공유를 지원하는 QuickLink 및 공유 대상 앱 목록이 표시됩니다.

뉴스 앱에서 공유하기 위한 공유 창 옵션의 예

뉴스 앱에 공유

일부 뉴스 앱은 사용자가 익숙한 자체 전시 방식으로 대량의 소스에 있는 정보를 정리하고 활용할 수 있는 방법을 제공하여 다른 앱의 기사를 종합할 수 있게 해 줍니다. 이러한 앱은 대상 공유 계약을 지원하는 데 투자해야 합니다.

공유 대상이 되면 앱이 공유 소스 앱에서 제공하는 데이터를 흥미롭고 의미 있는 방식으로 이용할 수 있습니다. 아래 예제에서는 뉴스 앱의 기사를 나중에 읽을 수 있도록 뉴스 집계에 공유할 수 있습니다.

뉴스 집계 앱의 공유 예

공유 계약에 대한 자세한 내용은 콘텐츠 공유 및 받기를 참조하세요.

댓글 및 다른 소셜 앱과의 통합

뉴스 앱은 사용자가 댓글을 달도록 하거나 공유 참 메뉴에 통합된 앱을 사용해 기사를 설명하고 태그를 지정하도록 하여 값을 전달할 수 있습니다. 공유 참 메뉴와 통합된 앱을 사용하면 사용자가 실제로 공유를 위해 사용할 앱에 맞게 앱의 공유 환경을 맞춤화할 수 있으며, 하나의 통합된 환경에 모든 공유를 집중할 수 있으므로 사용자에게 도움이 됩니다. 또한 새로운 소셜 네트워크가 시작되면 앱이 자동으로 통합되므로 특정 소셜 네트워크를 위한 코드 작성에 시간을 낭비할 필요가 없습니다.

뉴스 앱의 입력 체계

사용자가 다량의 정보를 빠르고 쉽게 검색하고 사용할 수 있도록 시각적 계층 구조를 만들려면 뉴스 앱에서 입력 체계 그리드와 크기 램프를 사용하세요. 글자 램프에 지정된 Segoe UI 글꼴 사용이 뉴스 콘텐츠에 적절하지만, Windows 스토어 앱 문서의 권장 글꼴인 Calibri 또는 "전통 문서" 권장 글꼴인 Cambria의 사용을 고려할 수도 있습니다. Georgia 글꼴은 웹의 뉴스 사이트에서 널리 사용되므로 뉴스 앱에서 간편하게 선택할 수 있습니다.

대체 시스템 글꼴을 지정하려는 경우 해당 글꼴이 Windows 8.1과 함께 설치되는지, Microsoft Office 등 별도의 앱 설치를 요구하지 않는지 확인하세요. 자신의 고유한 사용자 지정 또는 라이선스 글꼴을 사용하는 경우 앱에 글꼴을 포함할 수 있는 충분한 법적 권한이 있는지 확인하세요. 어떤 글꼴을 사용하든 Windows 8.1 글자 램프는 사용해야 할 최대 크기 및 스타일 수를 올바르게 안내합니다.

글자 램프 지침의 권장 사항에 따라 앱 전체에서 적은 수의 글꼴 크기를 사용하면 콘텐츠에서 구조와 리듬의 감각이 만들어집니다. 글자 램프에서 여러 요소가 같은 글꼴 크기를 사용하지만 다른 정보 유형을 제공하는 경우 정보 계층 구조가 형성되도록 색, 글꼴 두께 및 스타일 사용을 고려해 보세요. 다음 예제는 글꼴 크기, 색 및 두께를 사용해 그러한 계층 구조를 만드는 방법을 보여 줍니다.

글꼴 크기 및 정보 계층 구조의 예제

크기, 색, 두께 등 글꼴 모범 사례에 대한 자세한 내용은 텍스트와 입력 체계에 대한 지침 및 검사 목록을 참조하세요.

콘텐츠의 최신 상태

뉴스 시나리오에서는 앱의 콘텐츠를 최신 상태로 유지해야 합니다. 사용자에게 최신 상태를 나타내는 요소를 살펴보겠습니다.

콘텐츠를 마지막으로 업데이트한 시간

사용자에게 "마지막으로 업데이트한" 정보를 표시하면 사용자는 뉴스 앱의 신뢰성에 확신을 갖게 됩니다. 조심스러운 방법으로 캔버스에 마지막 업데이트에 대한 정보를 표시하세요. 이 정보는 글자 램프에 대해 제3의 정보 스타일(9포인트)로 표시해야 합니다. 예를 들면 다음과 같습니다.

콘텐츠 최신 상태를 보여 주는 예제

기사 게시 시간

기사가 게시된 시간을 보여 주는 것은 사용자에게 자신이 읽는 콘텐츠의 최신 상태에 대해 알리는 또 다른 일반적인 방법입니다. 그러한 타임스탬프에 대해 제3의 정보 글자 램프 스타일을 사용하고, 동일한 글자 램프를 사용하는 레이아웃의 다른 콘텐츠와 차별화하기 위해 색과 두께를 사용하세요.

콘텐츠 새로 고침

뉴스 앱은 항상 최신 상태의 콘텐츠를 표시해야 합니다. 앱의 콘텐츠를 최신 상태로 유지하려면 기회가 있을 때마다 데이터를 다운로드하세요. 예를 들면 사용자가 기사를 읽는 동안 허브 페이지용 새 콘텐츠를 다운로드하여, 사용자가 허브 페이지로 돌아가면 최신 콘텐츠를 볼 수 있도록 하세요. 그러나 사용자가 무선 모바일 연결을 사용 중일 때에는 백그라운드에서 데이터를 다운로드하지 마세요. 로밍 중이거나 모바일 광대역을 사용 중일 때에는 앱의 백그라운드 데이터 사용을 최소화해야 하기 때문입니다.

또한 콘텐츠를 오프라인으로 사용할 수 없을 때 사용자에게 이를 알려 앱에서 오프라인 시나리오를 처리할 수 있어야 합니다.

앱에서 사용자가 현재 사용 중인 페이지의 콘텐츠를 업데이트해야 하는 경우 진행률 컨트롤에 대한 지침 및 검사 목록에 설명된 대로 업데이트 중인 캔버스 영역의 위쪽에 진행률을 표시하세요. 또한 새 콘텐츠를 삽입하고 캔버스에서 이전 콘텐츠를 제거하려면 목록 애니메이션에 대한 지침 및 검사 목록에 설명된 대로 애니메이션을 사용하세요. 다음은 이미지의 위쪽에 진행률 표시줄이 있는 예를 보여 줍니다.

진행률 표시줄의 예제

뉴스 앱에서 콘텐츠를 한동안 업데이트하지 않았는데 사용자가 해당 콘텐츠로 전환하려는 경우, 이전 콘텐츠를 어둡게 하고 많은 콘텐츠가 업데이트 중임을 알리는 진행률 표시줄을 캔버스에 표시하는 방법을 고려해 보세요.

콘텐츠를 업데이트하는 동안에도 앱이 응답하는지 확인하세요. 또한 연결이 약한 경우 시간 제한 값을 설정하고 앱의 오프라인 UI를 표시하세요. 다음 이미지는 업데이트 중에 흐리게 표시되는 허브 페이지 콘텐츠를 보여 줍니다.

콘텐츠가 업데이트 중임을 보여 주는 예제

연결 및 유지

라이브 타일 및 알림을 사용하면 사용자가 시작 화면에 있을 때 최신 콘텐츠를 표시할 수 있습니다. 이 기능을 사용하면 사용자와의 연결을 구축하여 앱을 활기차게 유지할 수 있습니다.

타일 및 알림

타일에 최신 뉴스 기사와 속보를 표시하면, 사용자가 앱 타일에서 흥미로운 뉴스 기사를 발견할 때 앱에 참여하고 계속해서 앱에 대해 관심을 갖도록 할 수 있습니다. 다음은 뉴스 헤드라인을 표시하는 앱 타일의 예제입니다.

앱 타일이 사용자의 관심을 끄는 방법을 보여 주는 예제

사용자는 서로 다른 뉴스 범주 타일을 시작에 고정하면 해당 범주에 맞춤화된 알림을 볼 수 있으며 관심이 있는 특정 유형의 뉴스에 빠르게 액세스할 수 있습니다. 이는 앱에 대한 사용자의 관심을 끄는 또 다른 방법입니다.

앱이 실행되고 있지 않을 때에도 표시되는 속보의 알림 메시지에 사용자가 옵트인(opt in)하도록 허용하면 앱은 계속해서 사용자에게 최신 뉴스를 제공하고 관심을 끌 수 있습니다. 이것은 설정 참 메뉴를 통해 액세스되는 앱 설정에서 지정할 수 있는 옵트인 설정이어야 합니다. 왜냐하면 속보에 대한 알림 수신에 관심이 있다고 명시적으로 표현하지 않은 사용자는 원치 않는 알림을 불편하게 생각할 수 있기 때문입니다. 다음은 알림 메시지의 예제입니다.

알림 메시지의 예제

로밍

사람들은 대부분 Windows PC를 둘 이상 가지고 있으므로, 모든 Windows PC에서 일관된 사용자 환경을 제공하면 사용자는 원하는 환경을 누릴 수 있습니다. 앱 설정, 기사 책갈피, 즐겨찾기 뉴스 범주, 읽기 기본 설정, 모든 PC에서 사용자에게 유용한 앱의 기타 데이터 등을 로밍할 수 있습니다. 앱 데이터 로밍의 모범 사례에 대한 자세한 내용은 로밍 중인 응용 프로그램 데이터에 대한 지침을 참조하세요.

창 크기 조정

Windows 8.1에서는 사용자가 최소 너비까지 창 크기를 임의로 조정하고 화면에 앱을 나란히 배치하여 멀티태스킹할 수 있습니다. 좁은 너비에서 제대로 작동하는 앱을 디자인하면 앱의 화면 표시 시간과 사용자 참여 기간이 증가합니다. 사용자가 앱을 사용하는 동안 멀티태스킹할 수 있으므로 다른 일을 하는 동안에도 화면에 앱을 열어두게 됩니다.

사용자는 여러 가지 이유로 앱의 크기를 조정할 수 있습니다. 뉴스 기사 내에 나가는 링크가 있고 사용자가 기사를 벗어나지 않고 브라우저에서 새 링크를 시작하려는 경우일 수 있습니다. 사용자가 옆에 있는 다른 앱을 더 크게 만들려는 경우일 수도 있습니다. 앱의 크기를 조정하는 이유에 관계없이 크기 조정 작업 시 사용자가 읽고 있던 기사가 탐색되고 손실되지 않도록 하는 것이 중요합니다.

사용자가 앱 크기를 높이가 너비보다 크도록 조정하는 경우 세로로 이동하도록 페이지 흐름을 조정하는 것이 좋습니다. 창 크기 조정에 대한 자세한 내용은 창 크기 및 화면에 맞게 크기 조정에 대한 지침을 참조하세요.

좁은 너비 뉴스 앱 예제

시작 화면

앞서 설명했듯이 뉴스 앱은 웹에서 최신 콘텐츠를 자주 다운로드해야 합니다. 앱의 속도와 응답성을 높이려면, 각 범주의 모든 이미지가 다운로드된 후에 방문 페이지가 표시되도록 하지 마세요. 사용자가 기다리는 것을 참지 못할 수 있습니다. 기사 제목이 다운로드되자마자 앱의 허브 페이지를 보여 준 다음, 이미지와 기타 데이터를 비동기로 로드하세요.

허브 페이지가 나타나기를 기다리는 짧은 시간 동안, 앱에서 콘텐츠를 다운로드 중임을 사용자에게 알리는 메시지와 함께 시작 화면을 표시하세요. 예를 들면 다음과 같습니다.

시작 화면 예제

관련 항목

Windows 스토어 앱용 명령 디자인
Windows 스토어 앱 만나보기
Windows 스토어 앱용 탐색 디자인
터치 조작 디자인
Windows 스토어 앱용 UX 지침

 

 

표시:
© 2014 Microsoft