사용자의 이목을 사로잡는 Metro 스타일 앱 만들기

Windows 8 앱 개발자 블로그

Windows 8 엔지니어링 팀에서 제공하는 Windows 8용 Metro 스타일 앱 개발의 이해

사용자의 이목을 사로잡는 Metro 스타일 앱 만들기

  • Comments 1

개발자가 스토어에 앱을 전송할 경우 분명 해당 범주에는 사용자의 관심을 끌기 위해 경쟁하게 될 다른 앱도 있을 것입니다. 사용자의 관심이 개발자의 Metro 스타일 앱에 집중되도록 하려면 이 앱의 차별화된 특징을 명확하게 소개하는 동시에 최상의 핵심 시나리오를 제공해야 합니다.

Windows 8에서는 일련의 디자인 패턴, 공통 컨트롤 및 개발자가 가장 자신 있는 항목을 강조하는 데 유용한 계약과 같은 기본 제공 플랫폼 기능을 제공합니다. 예를 들어 몇 가지만 소개하자면, 앱 바는 사용자가 개발자의 콘텐츠에 집중하도록 도와주고, 불필요한 요소를 최소화하도록 해주는 공통 컨트롤입니다. 터치 패턴은 사용자가 새 인터페이스를 학습하지 않고도 앱을 사용할 수 있도록 플랫폼 컨트롤(예: 가장자리에서 살짝 밀어 앱 바를 불러오는 동작)에서 일관성 있게 사용되는 제스처 집합을 규정합니다. 공유 계약은 사용자가 콘텐츠를 사용하여 더 많은 작업을 수행할 수 있도록 두 개의 앱이 함께 작동하도록 연결해 주는 역할을 합니다.

이 글은 다른 몇몇 글과는 달리, 코딩 패턴을 설명하기보다는 계획 프로세스에서 사용할 수 있는 디자인 패턴에 대해 소개합니다. 이를 위해 'Food with Friends'라는 예제 앱을 소개하고, 사용자의 눈길을 사로잡기 위한 핵심 질문인 "내 앱이 해당 범주에서 가장 뛰어난 점은 무엇인가?"에 대답하는 것부터 시작하겠습니다. 그런 다음 핵심 시나리오와 차별화 요소를 강조하기 위해 앱 구조와 레이아웃을 현실성 있게 설계하는 몇 가지 단계를 보여 드리겠습니다. 이 글은 앞으로 몇 달간 비정기적으로 제공될 시리즈의 첫 번째 글입니다. 이후의 글에서도 이 앱을 예제로 사용하여 Windows 8 플랫폼의 다양한 측면을 활용해 몰입도가 뛰어나고 정교하며 빠르고 유연한 환경을 만드는 방법을 소개할 예정입니다.

그럼 이제 시작해 보겠습니다.

예: Food with friends

우리는 사람들이 레스토랑을 찾을 때 유용한 앱을 만들려고 합니다. 먼저, 이 앱의 디자인 프로세스를 살펴보겠습니다.

1. 차별화 요소 파악

우선 레스토랑 및 식당 범주에서 다른 경쟁 제품과 차별화할 수 있는 핵심 요소를 파악하는 것부터 시작하겠습니다.

이 앱은 '사용자가 친구들과 함께 저녁 식사를 할 레스토랑을 찾도록 도와주는 기능'이라는 면에서 가장 뛰어납니다.

즉, 이 앱이 자랑하는 가장 고유한 특징은 사용자가 '친구들과 함께' '저녁' 식사를 하도록 도와주는 데 있습니다. 따라서, 친구들이 식사 장소에 동의하도록 하는 방법, 그리고 사용자가 의사를 결정할 때 고려할 수 있도록 친구들의 선호도를 버블로 보여 주는 데 중점을 둘 것입니다. 이는 같은 범주의 다른 일반 앱이 단순히 지역 레스토랑 목록만을 제공하는 것과 비교하면 이 앱만이 가진 차별화된 특징이라 하겠습니다.

이 차별화된 특징을 요약하는 소개 문구는 사용자가 같은 범주의 경쟁 앱이 아니라 이 앱을 구입하고 싶어할 이유에 대해 설명합니다. 우리는 디자인을 취사 선택하고 사용할 기능 집합과 플랫폼 기능을 결정할 때마다 이 문구를 여러 번 다시 참조하게 될 것입니다.

이제 앱의 이름을 'Food with friends'라고 정하도록 하겠습니다.

2. 올바른 시나리오 선택

다음으로, 앱의 특징에 대한 소개 문구에 따라 중점을 둘 핵심 시나리오를 파악해 보겠습니다. 브레인스토밍 및 시나리오 선택 프로세스에는 우리가 제공할 수 있는 재미있는 시나리오(예: 음식의 영양가 표시)가 많이 있을 수 있습니다. 그러나 특징에 대한 소개 문구에서 약속하는 고유하고 차별화된 동급 최고의 경험을 실제로 제공하기 위해서는 우리의 비전과 관련없는 사항을 포함시켜서는 안 됩니다. 이 앱의 유용한 핵심 시나리오를 종합하여 정리하면 다음과 같습니다.

  • 내가 원하는 레스토랑 찾기
  • 친구가 원하는 레스토랑 찾기
  • 친구와의 오늘 저녁 식사 계획

사용자가 이러한 목표를 달성하는 방법에 필요한 기능을 생각하기에 앞서 사용자가 이 앱을 사용하려는 이유를 설명하는 시나리오에 대해 살펴보겠습니다. 각 시나리오에는 여러 가지 기능이 포함되므로 핵심 시나리오가 무엇인지 알면 이를 지원하는 기능을 고민할 수 있습니다. 기능 선택 및 디자인에 대해서는 다음 글에서 보다 자세히 다루겠지만 구현 가능한 기능의 몇 가지 예를 살펴보면 다음과 같습니다.

  • 내가 원하는 레스토랑 찾기:
    • 지도나 목록에서 레스토랑 찾아보기
    • 이름이나 키워드로 검색
    • 범주, 가격 및 등급별 필터링/정렬
    • 희망 목록에서 레스토랑 추가/제거

3. 방문 환경 만들기

방문 페이지는 모든 Metro 스타일 앱의 핵심이 되는 부분이며, 앱의 가장 큰 특징을 사용자에게 설명할 수 있는 장소이기도 합니다. 사용자가 앱을 시작했을 때 앱의 핵심 시나리오가 무엇이고 앱이 고유한 가치를 어떻게 제공하는지 즉시 이해하게 하는 것이 좋습니다. 뛰어난 방문 페이지는 항상 새롭고 업데이트된 콘텐츠를 제공함으로써 사용자가 앱을 열어보도록 유도하고, 사용자가 딴곳으로 이동하지 않고 많은 시간 동안 이곳에 머무르며 마음껏 시간을 보내도록 합니다. 방문 페이지는 사용자의 이목이 쏠리는 중심 허브와도 같은 곳이며, 여기서 사용자는 앱의 가장 뛰어난 특징을 확인할 수 있습니다.

뛰어난 허브를 디자인하는 것은 콘텐츠 및 기능을 사용자가 탐색하기 쉬운 방식으로 제공하는 데 최적화된 레이아웃을 만드는 것과 같습니다. 앱 또는 웹에서의 일반적인 탐색에는 앱의 기본 섹션을 표시하는 과정이 포함되어 있으며, 그런 다음 사용자의 선택에 따라 탐색 모음이나 목차에서 새로운 섹션으로 이동하게 됩니다. 이 패턴의 문제점은 사용자가 탐색하도록 유도하지 않는다는 점입니다. 사용자가 탭을 클릭하고 새로운 섹션을 탐색하려면 뭔가 재미있거나 유용한 것이 있어야 합니다. 만일 흥미로운 섹션이 없다면 사용자들은 다른 앱을 선택할 것입니다. 예를 들어 이 뉴스 리더 앱은 사용자가 단일 섹션에서 방문한 다음, 이름을 기반으로 앱의 다른 섹션으로 이동하도록 의식적으로 결정해야 하는 탭 기반 디자인을 사용합니다. 이 앱에서는 해당 섹션으로 전환하기 전에 이 4개의 다른 섹션 중 흥미 있는 섹션이 있는지를 알 수 없습니다.

탭 기반 방문 페이지 디자인

대신, 이를 허브로 전환하고 사용자가 강제로 결정할 필요가 없는 화면 이동을 추가하기만 하면 사용자에게 앱의 콘텐츠나 기능이 왜 흥미 있는지가 자연스럽게 '표시'됩니다.

허브 기반 방문 페이지 디자인

앱의 레이아웃을 탐색하기 쉽도록 만들면 사용자는 이 앱에 계속 관심을 갖게 됩니다. 따라서, 앱의 가장 뛰어난 모든 점을 보여 줄 수 있습니다.

이제 이 점을 염두에 두고 Visual Studio Grid 프로젝트 서식 파일(XAML, HTML)을 사용하여 기본적인 허브 레이아웃부터 시작해 보겠습니다. 이 서식 파일의 방문 페이지(groupedItemsPage)에는 여러 섹션이 있으며, 각 섹션에 여러 항목이 선택되어 있습니다.

Visual studio Grid 프로젝트 서식 파일의 방문 페이지

이 페이지를 '이 앱은 사용자가 친구들과 함께 저녁 식사를 할 레스토랑을 찾도록 도와주는 기능이 가장 뛰어납니다.'라는 특징에 대한 소개 문���를 나타내도록 변경하려고 합니다. 첫 번째 단계는 허브의 각 섹션이 세 가지 핵심 시나리오 중 하나를 나타내도록 하는 것입니다. 따라서 핵심 시나리오를 표시해야 합니다(시나리오에 다시 연결되는 여러 섹션이 있을 수도 있음).

1. Tonight

친구와의 오늘 저녁 식사 계획에 중점을 둡니다.

2. Friends’ wishlists

친구가 원하는 레스토랑을 찾는 데 중점을 둡니다.

3. My wishlist

내가 원하는 레스토랑을 찾는 데 중점을 둡니다.

4. All Restaurants

이 항목도 내가 원하는 레스토랑을 찾는 데 중점을 둡니다.

Tonight, Friends’ wishlist, My wishlist, All restaurant 섹션으로 구성된 허브


섹션의 순서는 전략적으로 구성되어 있습니다. Tonight이 첫 번째인 이유는 '지금' 이동하려는 항목과 가장 밀접한 관련이 있고 앱을 열 때마다 변경될 수 있는 섹션이기 때문입니다. Tonight에 대한 정보는 새롭고 개인적이며 관련성이 높기 때문에 라이브 타일 콘텐츠를 적용하기에 적합합니다. 그리고 이 구성은 사용자가 시작 화면에 있는 앱의 라이브 타일에 Tonight이 표시된 경우 앱을 열고 허브 페이지 오른쪽의 라이브 타일에서 방금 표시된 콘텐츠를 볼 수 있음을 의미합니다. 또한 앱은 사용자가 앱을 열어본 것에 대한 대한 보상으로 해당 사용자에게 새롭고 가장 중요한 정보를 제공해야 합니다. 라이브 타일에 대한 자세한 내용은 Kevin Michael Woley의 뛰어난 라이브 타일 환경 만들기(1부)를 참조하세요.

다음으로, Friends’ wishlists와 My wishlist를 배치했습니다. 이 섹션은 다음 두 가지 이유로 순서가 정해졌습니다.

  • Food with friends의 초점은 친구에게 맞춰져 있습니다. 이는 어떤 앱도 같은 방식으로 제공하지 않는 Food with friends만의 차별화 요소입니다.
  • Tonight 섹션과 마찬가지로, 사용자가 앱을 사용하지 않는 동안 다른 사람이 자신의 희망 목록을 업데이트할 수 있으므로 자주 변경될 수 있습니다. 여기에는 사용자는 모르는 정보가 포함되어 있지만 다른 사람은 자신의 희망 목록을 잘 알고 있으므로 이 섹션을 탐색하는 것이 그다지 중요하지 않습니다.

끝으로, All restaurants를 배치했습니다. 우리는 사용자가 자신의 희망 목록을 관리하려는 경우에만 이 섹션으로 이동할 것으로 예상했습니다. 특징에 대한 소개 문구에 따라 사용자는 대부분의 시간을 '오늘밤'에 방문할 장소를 결정하는 데 보낼 것입니다. 다시 말해, 이미 설정된 희망 목록에서 오늘밤의 추천 레스토랑을 확인하는 데 가장 많은 시간을 보낼 것입니다. 또한 이 섹션을 마지막에 둠으로써 다른 콘텐츠에 영향을 주지 않고 원하는 대로 이 섹션을 확장할 수 있는 이점도 있습니다. 시맨틱 줌을 사용하여 목록에서 빠르게 이동할 수 있기 때문에 All restaurants를 계속 확장하는 것에 대해 걱정할 필요가 없습니다.

4. 섹션 디자인

섹션 디자인의 핵심은 해당 시나리오에 맞게 최적화하는 것입니다. 전체 허브에서 타일 그리드가 균일할 필요는 없습니다. 창의성을 발휘하고, 앱이 어떻게 차별화되는지 보여 주고, 앱의 가장 뛰어난 점을 맨 앞으로 가져올 수 있습니다. 또한 방문 페이지의 주어진 섹션에 모든 항목을 표시할 필요가 없습니다. 콘텐츠가 지나치게 많아질 수 있기 때문입니다. 대신 가장 관련성이 높은 최신 항목 집합만 포함할 수 있습니다. 예를 들어 Friends’ wishlist 아래에 가장 친한 친구만 표시하고, My Wishlist 아래에 가장 최근에 추가된 레스토랑만 표시할 수 있습니다.

이 앱의 경우 첫 번째 섹션인 Tonight에서는 '오늘밤' 친구와 함께 식사할 장소를 결정합니다. 이를 위해서는 친구들 간의 공동 작업이 필요하기 때문에 토론의 성격을 띠는 것이 가장 적합합니다.

친구와의 저녁 식사 계획에 대한 대화로 채워진 방문 페이지의 Tonight 섹션

My friend’s wishlist는 '친구' 및 이들이 원하는 항목과 관련된 섹션이므로 사람을 중심으로 디자인해야 합니다.

여러 친구의 레스토랑 목록으로 채워진 방문 페이지의 Friends’ wishlist 섹션

My wishlist는 내가 가장 가고 싶은 레스토랑 목록이므로 레스토랑을 가장 앞으로 가져옵니다.

내 레스토랑 목록으로 채워진 방문 페이지의 My wishlist 섹션

끝으로, All restaurants는 방대한 레스토랑 컬렉션을 탐색할 수 있는 곳이므로 사용자가 관심을 가질 수 있는 가장 인기 있는 일부 레스토랑을 소개한 다음 탐색하기 쉬운 범주를 제공합니다. 이 모든 부분을 배치했으므로 이제 앱의 허브 방문 페이지가 어떻게 표시될지 확인할 수 있습니다.

레스토랑 목록으로 채워진 방문 페이지의 All restaurants 섹션

차별화된 경험을 제공하는 데 있어 중요한 부분은 제품의 브랜드를 알리는 것입니다. 이는 다른 글에서 따로 다룰 만한 주제입니다. 브랜드를 만든 플랫폼에서 일관성 있는 모양과 느낌을 유지하는 동시에 브랜드의 개성을 부각시킬 수 있는 레이아웃과 시각 디자인 팁 및 기법에 대해 보다 세분화된 정보를 얻고 싶으시면 MSDN 블로그를 수시로 확인해 주시길 바랍니다. 여기에서는 간단한 예만 살펴보겠습니다.

브랜드화된 색상과 배경 이미지가 적용된 Food with friends 방문 환경

5. 앱의 나머지 부분 배치

이제 방문 페이지를 만들었으므로 앱의 나머지 부분은 쉽게 배치할 수 있습니다.

허브의 모든 섹션을 보여 준 것은 아니므로 각 섹션의 전체 콘텐츠 집합을 표시하는 데에만 사용되는 페이지가 필요합니다. Visual Studio Grid 서식 파일의 groupDetailPage가 이러한 용도로 설계되었습니다. 이 페이지의 ListView 레이아웃을 콘텐츠 유형에 가장 적합하도록 지정해 보겠습니다.

My friend’s wishlist:

전체 친구 목록과 이들이 즐겨 찾는 레스토랑이 표시된 Friend’s wishlist 페이지

My wishlist:

내가 즐겨 찾는 전체 레스토랑 목록이 표시된 My wishlist 페이지

All restaurants:

추천 요리 종류별로 그룹화된 모든 레스토랑의 전체 목록

우리는 허브에 적용된 두 가지 핵심 엔터티가 있다는 것을 알고 있습니다. 바로 레스토랑과 사람입니다. 이는 사용자가 탭/클릭한 경우 항목에 대한 정보를 볼 수 있는 항목 세부 정보 페이지(Grid 프로젝트 서식 파일의 itemDetailPage)의 두 가지 변형이 필요하다는 것을 의미합니다.

프로필 정보, 희망 목록 및 후기로 구성된 친구의 페이지

영업 시간, 위치, 연락처 정보, 사진 및 다른 사용자의 후기로 구성된 레스토랑 페이지

각 페이지를 디자인할 때 각 페이지의 가장 뛰어난 점이 무엇인지, 그리고 앱의 "특징"에 대한 소개 문구에 어떤 방식으로 기여할지를 지속적으로 고민해야 합니다.

6. UI 탐색

이제 여러 페이지를 만들었으므로 사용자에게 페이지 간의 이동 방법을 제공하기만 하면 됩니다. UI 탐색 방법의 경우 앱의 특징과는 달리 사용자가 이미 알고 있는 기존 탐색 패턴을 적용할 수 있으므로 사용자는 앱의 콘텐츠와 기능에 빠��게 액세스할 수 있습니다. 이 예에서는 계층형 시스템 패턴을 따르는 Grid 프로젝트 서식 파일을 사용합니다. 예를 들어 타일을 탭하면 해당 항목의 세부 정보 페이지로 이동하고, 허브의 섹션 머리글을 탭하면 해당 섹션으로 이동합니다. 다시 탭하면 이동하기 방금 전의 위치(위가 아님)로 이동합니다. 이 대부분은 Grid 프로젝트 서식 파일에 기본적으로 제공됩니다. 이후 글에서는 앱 내 탐색의 보다 고급 기능을 구현하는 방법과 팁에 대해 자세히 살펴볼 예정입니다.

앱 콘텐츠의 계층 구조를 보여 주는 스크린샷

요약

해당 범주에서 가장 뛰어난 점이 무엇인지를 파악하는 것이 여러 사용자들의 눈에 띄는 Metro 스타일 앱을 만드는 첫 번째 단계이자, 가장 중요한 단계입니다. 앞서 살펴본 바와 같이 차별화 요소를 확인하고 강조하는 것은 콘텐츠 구조, 방문 경험, 페이지 레이아웃 및 탐색과 관련된 많은 기본적인 결정에 영향을 줍니다. 이후의 글에서도 이를 기반으로 Windows 8 플랫폼을 사용하여 앱을 해당 범주에서 최고의 앱으로 만드는 방법에 대해 알아보겠습니다. 이 글에 언급된 리소스를 검토하려면 http://design.windows.com을 참조하세요.

- Windows 수석 프로그램 관리자, Bonny Lau

  • Loading...
Leave a Comment
  • Please add 7 and 8 and type the answer here:
  • Post