Windows 스토어 사용자 경험 디자인

Windows 스토어 사용자 경험 디자인

Rate This
  • Comments 0

우리는 //build/ 컨퍼런스, 스토어 프리뷰 행사, 그리고 지난주에 있었던 CES 등 최근의 몇몇 행사에서 시연을 통해 스토어를 소개해 왔습니다. 이제 카탈로그 탐색 및 검색, Windows 8상에서의 앱 업데이트 및 로밍을 포함한 모든 스토어 고객 경험을 소개하는 것이 여러분께 도움이 될 것 같습니다. 스토어 고객 팀의 프로그램 매니저인 Jonathan Wang은 이 글에서 스토어의 구성 요소들을 우리의 디자인 모티베이션과 함께 설명합니다.

-- Antoine


Windows 스토어를 디자인할 때 우리의 최종 결정에 도움이 된 몇 가지 디자인 목적과 원칙이 있었습니다. 우리가 생각했던 스토어 디자인의 기본 원칙은 누구나 쉽게 앱을 찾고 빠르게 설치하도록 하는 것입니다. 이는 카탈로그나 시장 관점에서 보면 너무나도 당연한 이야기이지만 우리의 예상대로 Windows 스토어에서 제공되는 카탈로그의 크기와 다양성이 급속히 확대된다면 상당한 도전이 될 것입니다.

이 포스트에서는 랜딩 페이지, 편집 페이지, 생성된 데이터 목록, 앱 목록 페이지, 검색, 탐색, 설치 및 업데이트 경험 등 스토어를 구성하는 주요 요소를 소개하겠습니다. 보다 효율적인 앱 검색이라는 목적을 달성하기 위해 Windows Metro 스타일 디자인 언어를 어떻게 적용했는지와 이러한 UI 화면 간의 관계에 대해서도 설명드리도록 하겠습니다.

이 스토어 구조 다이어그램은 편집, 앱 설명 및 범주 페이지와 연결되는 스토어 랜딩 페이지를 보여 줍니다. 편집과 범주 페이지는 또한 앱 설명 페이지와 연결되어 있습니다. Windows 스토어 구조

검색을 위해 디자인된 랜딩 페이지

이전 포스트에서 언급했듯이 스토어 디자인의 핵심 원칙 중 하나는 검색에 최적화된 디자인입니다. Windows 8은 콘텐츠가 중심이 되고 불필요한 디자인 요소는 최소화하는 방식으로 개발 중입니다. 스토어 랜딩 페이지의 경우 불필요한 디자인 요소를 최소화하고 앱을 페이지 전면에 내세워 앱 브랜드 및 개성을 통해 사람들의 관심을 끌도록 했습니다.

스토어 / 추천 범주, Evernote 포함, Cut the Rope, eBay 및 Paintplay 앱, 추천 앱에 대한 전문가 리뷰, 추천 게임에 대한 전문가 리뷰가 포함된 게임 범주, 추가된 2개의 게임 앱
Windows 스토어 랜딩 페이지

우리는 스토어 랜딩 페이지에 새롭고 흥미로운 콘텐츠를 지속적으로 올리고 자주 업데이트할 계획입니다. 그러면 이곳을 찾는 고객들이 항상 새로운 콘텐츠를 볼 수 있다는 기대감을 갖고 방문하게 될 것입니다. 랜딩 페이지는 추천 콘텐츠와 탐색 콘텐츠(범주, 주요 앱 목록 등)로 구성됩니다. MUL(Microsoft Usability Labs)의 연구 자료, 그리고 개인 고객을 대상으로 한 인터뷰 조사에 따르면 최근 많은 사람들이 앱 스토어에서 원하는 내용만 검색하는 것으로 나타났습니다. 그 이유는 현재 대부분의 앱 스토어에서의 탐색 경험이 그다지 매력적이지 않기 때문이라고 합니다. 우리는 이러한 고객 의견을 랜딩 페이지 디자인에 적극 반영하여 추천 콘텐츠와 데이터 기반 목록, 범주 목록이 조화롭게 구성되고 아주 매력적인 탐색 경험을 제공하도록 디자인했습니다.

즉, 단순하고 직관적이며 Windows 8 Metro 스타일 UI와 일관성 있는 탐색 경험을 제공함으로써 Windows 8 사용자는 스토어 환경에 빨리 적응하고 원하는 것을 쉽게 찾을 수 있게 됩니다. 스토어 범주는 화면 상단에 가로로 길게 뻗어있고 호기심을 자아내는 앱들이 각 범주마다 배치됩니다. 검색 방법 역시 아주 간단합니다. 손가락을 사용해 오른쪽이나 왼쪽으로 가볍게 밀기만 하면 됩니다. 간단한 손가락 움직임만으로 새롭고 흥미로운 각종 범주의 앱과 스토어 전체 페이지를 손쉽게 볼 수 있습니다. 평소에 관심 있는 분야가 있다면 특정 범주를 한 번 누른 다음 해당 범주의 앱을 집중적으로 찾아볼 수도 있습니다.

범주를 포함한 스토어의 긴 가로 보기: 추천, 게임, 연예, 사진, 음악 및 비디오, 책 및 참고 도서, 뉴스 및 날씨, 라이프 스타일 가로 스크롤을 통해 더 많은 범주를 보십시오. 큰 이미지로 보려면 클릭하십시오.

플랫폼에서 얼마나 뛰어난 성능을 제공하는지, 그리고 Metro 스타일 디자인 원칙을 얼마나 잘 표현하는지 등 다양한 요인을 토대로 편집부에서 앱을 평가하고 선별하여 새로운 스토어 범주의 여러 곳에 소개할 계획입니다. 만일 우리가 소개할 여러 앱들 간에 공통되는 주제가 있다면 특별한 "주제" 페이지를 만들어 랜딩 페이지에서 앱을 선보이려고 합니다. 고객은 또한 가장 인기 있는 앱과 우리가 추천하는 양질의 앱에 대한 추천 목록을 각 범주에서 볼 수 있게 됩니다. 성공가도를 달리는 "떠오르는 스타" 개발자들이 내놓은 앱과 꾸준히 우수한 앱을 발표하며 유명세를 떨치고 있는 개발자들의 앱도 소개할 계획입니다. 한편, 과거 구매 기록을 바탕으로 고객에게 적합한 앱을 추천할 계획도 갖고 있습니다.

스토어 범주에 대한 감각을 익히고 이곳에서 제공되는 앱의 종류를 이해하는 방법은 손가락을 모아 페이지를 축소하여 전체 범주를 확인한 다음, 손가락으로 눌러 특정 범주로 빠르게 이동하는 것입니다. 이러한 동작은 시작 화면에서도 사용할 수 있습니다. 우리는 이 동작을 "의미 중심 확대/축소(semantic zoom)"라고 부릅니다. 확대나 축소를 통해 페이지에 무엇이 있는지 상세하게 볼 수 있게 해주기 때문입니다. 스토어를 축소해서 보면 모든 앱 범주가 한눈에 들어오므로 카탈로그가 크거나 다양한 범주를 지원해도 능률적인 탐색이 가능합니다. 이러한 디자인을 통해 카탈로그와 범주가 확장되더라도 효과적인 탐색이 보장됩니다. 우리는 랜딩 페이지에 기본 ListView 컨트롤의미 중심 확대/축소 컨트롤 기능을 적용했습니다. 의미 중심 확대/축소 컨트롤 기능은 HTML과 JavaScript로 Metro 스타일 앱을 제작하는 개발자들이 사용할 수 있습니다.

추천, 게임, 연예, 사진 및 음악을 포함한 스토어 랜딩 페이지 보기 더 많은 범주를 보기 위해 축소

다양한 범주로 구성된 스토어의 평면적 탐색 구조는 Windows 8의 Metro 스타일 사용자 경험 디자인의 핵심 아키텍처 구성 요소인 줌과 함께 상당히 많이 발전했습니다.

스토어 검색 및 탐색

UI의 핵심으로 자리잡은 검색 기능은 온라인 스토어에서 상품을 찾아 구입하는 가장 보편적인 방법이기도 합니다. Windows 스토어는 검색 규약을 만들어 사용자가 어떤 앱을 사용하고 있든지 간에 검색 참을 눌러 다른 앱을 검색할 수 있도록 하였습니다. 이로써, 스토어 앱이 열린 상태에서도 손쉽게 새로운 앱을 찾을 수 있게 되었습니다. 또한, 우리는 스토어를 시작하지 않고도 스토어를 쉽게 검색할 수 있도록 했습니다.

날씨 앱, 우측 검색 창과 함께, 스토어에서 "sudoku"를 찾을 준비가 됨Windows 어디서든 앱 검색

웹을 서핑하거나 앱을 사용하는 중에 갑자기 어떤 앱이 생각나면 검색 참을 누르고 검색어를 입력한 다음 스토어를 선택하여 검색 결과를 보면 됩니다.

스토어에 있는 동안에는 동일한 UI를 통해 검색이 가능하기 때문에 늘 익숙한 방법으로 검색할 수 있게 됩니다.

스토어 홈 페이지, 우측 검색 창, 스토어에서 "인턴 앱"을 찾음
스토어에서 검색 사용하기

텍스트를 입력하자마자 '텍스트 제안(text suggestion)'이 검색 창에 표시됩니다. 이는 대다수의 사람들에게 유용하고 편리한 기능이지만 터치 키보드 사용자의 경우에는 더더욱 그렇습니다. 텍스트 제안 중 하나가 앱이라면 "추천" 결과로 표시됩니다. 이것을 누르면 앱 목록 페이지로 바로 연결됩니다. 굳이 검색 결과 페이지로 가지 않아도 되기 때문에 불필요한 몇 단계를 건너뛰어 앱 목록 페이지로 신속하게 이동할 수 있습니다. 특히 검색 추천 기능의 경우 앱의 브랜드가 아이콘으로 표시되므로 바로 브랜드를 인지할 수 있게 됩니다.

특정 앱을 생각하고 있지 않은 경우에도 일반적인 검색 용어를 사용하여 검색 결과 페이지로 이동할 수 있습니다.

"인턴 앱"에 대한 결과로 10가지 앱이 보임 검색 결과 페이지

처음에는 앱이 관련성이 높은 순서대로 분류되어 나타나고 이 페이지에서 결과물을 탐색할 수 있습니다. 검색 결과를 가격, 최고 사용자 평점, 배포 날짜 등으로 분류하고, 검색 결과가 너무 많으면 범주나 가격 등으로 필터링하여 앱의 개수를 줄일 수도 있습니다.

우리는 이러한 디자인을 범주 보기에도 적용하여 절차를 최소화하고 가장 효과적인 방법으로 검색 경험을 향상시키고자 했습니다. 랜딩 페이지의 범주 헤더를 누르면 해당 범주 페이지에 액세스할 수 있습니다. 이와 같은 범주 보기 디자인을 통해 카탈로그를 부담 없이 탐색할 수 있습니다. 우리는 범주 페이지를 검색 결과 페이지와 거의 비슷하게 디자인했습니다. 따라서, 고객은 동일한 필터링 및 분류 옵션을 경험할 수 있습니다. 또한 랜딩 페이지 및 검색 UI와 같은 범주 탐색 기능을 아주 단순하게 디자인하여 화면을 계속 내리면 페이지를 전환하지 않고도 더 많은 앱을 볼 수 있도록 했습니다.

게임 범주, 28개의 앱 포함, 필터: 모든 가격, 무료, 무료 체험 및 유료
범주 페이지

앱 목록 페이지

앱 목록은 앱에 대한 필요한 모든 정보를 얻을 수 있는 공간이자 개발자가 앱의 특징과 유용성을 소개하는 곳이기도 합니다.

Cut the Rope / 스토어 > 게임 > 퍼즐 /***** 평점(1023) / $1.49 / 단추: 구입 / 무료 체험 / 대형 앱 이미지 및 앱 상세 설명
앱 목록 페이지는 앱 브랜드에 가치를 더해 줍니다.

앱 목록 페이지에서는 앱의 개성이 잘 드러나도록 앱 패키지의 시각적 요소를 바탕으로 앱 브랜드 색상과 로고를 적용합니다. 앱에 대한 자세한 설명과 기능 목록, 사용자 평점, 사용자 리뷰를 통해 고객은 앱의 품질과 필요성을 판단할 수 있습니다. 또한 우리는 FVO(FlipView Object) 컨트롤 기능으로 스크린 화면을 전환할 수 있도록 했습니다. 이 기능은 개발자들도 활용할 수 있습니다. 스크린샷은 앱 정보를 가장 효과적으로 전달하는 시각적 매체이므로 매우 중요합니다. 앱 목록은 또한 나이 제한 등급 및 필요한 앱 권한 목록(위치 센서, 문서 라이브러리 등)을 보여 줍니다.

데스크톱 앱 인증을 통과한 데스크톱 앱은 앱 목록 페이지에도 소개됩니다. 이러한 앱은 스토어에서 검색 및 탐색을 통해 찾을 수 있습니다. 앱 개발자의 웹 사이트 링크도 함께 제공되므로 해당 사이트에서 앱을 구입할 수도 있습니다.

Contoso / 개발자로부터 앱 받기 / 개발자 웹 사이트로 가기(링크) / 앱 개요
데스크톱 앱 목록 페이지

앱 설치

Windows 8에 앱을 설치하는 과정은 간단하고 빠르며 안정적으로 이루어집니다.

Windows 스토어에 로그인되어 있는 경우 앱 목록 페이지에서 한 번만 누르면 무료 앱이나 무료 체험 앱을 설치할 수 있습니다. 아주 간단하지 않습니까? 유료 앱의 경우 구입 승인을 받으려면 암호를 입력해야 합니다. 앱을 구입할 때마다 일일이 암호를 입력하는 것이 번거롭다면 설정에서 이 보안 과정을 해제할 수 있습니다. 하지만, 어린 자녀를 둔 분들은 원치 않는 앱 구입으로 인한 피해를 막기 위해 이 과정을 애용할 것으로 보입니다.

앱을 검색하는 동안에는 어떤 방해도 받지 않는 것이 중요합니다. 이러한 생각에서 앱을 설치하는 중에도 계속 검색이 가능하도록 했습니다. 즉, 설치 진행률 막대를 계속 주시해 볼 필요가 없게 되었습니다. 마찬가지로, 방금 구입한 앱 때문에 앱 목록 페이지에 계속 머물러 있어야 한다면 아무 일도 할 수 없습니다. 이러한 상황이 발생하지 않도록 하기 위해 설치가 시작되자마자 이전 페이지, 즉 랜딩 페이지나 범주 페이지 또는 다른 우수한 앱 목록 페이지로 돌아가서 계속 쇼핑을 할 수 있게 했습니다. 우리가 조사한 자료에 따르면 하나의 앱을 구입한 고객은 다른 앱도 찾아보는 것으로 나타났습니다.

물론, 진행률 표시기로 설치 과정을 언제든지 확인할 수 있습니다. 설치 중인 앱의 타일을 초기 화면에 추가할 수도 있습니다. 설치 진행 상황이 궁금하다면 진행률 표시기를 눌러 세부 내용을 확인할 수 있습니다.

진행률 막대와 "다운로드 중..."이 표시된 4개의 앱이 포함된 설치 세부 사항 페이지
설치 중인 앱 보기

설치가 완료되면 알림 기능이 앱이 준비되었다고 알려줍니다. 알림을 누르면 앱이 바로 실행됩니다. 즉, 앱이 준비되는 즉시 바로 사용할 수 있습니다. 새로운 앱의 타일은 언제나 시작 화면의 끝에 표시되므로 사용자는 이 지점에서 앱을 어디로든 이동시킬 수 있습니다. 이를 통해 사용자는 원하는 대로 시작 화면의 앱 구성을 변경할 수 있습니다.

앱 업데이트

우리는 업데이트 또한 간단하고 예측할 수 있도록 만들었습니다. Microsoft는 매일 한차례 고객이 설치한 앱에 대한 업데이트가 있는지 확인합니다. 그리고, 스토어의 타일이 가능한 업데이트의 개수를 표시하여 사용자가 업데이트를 할 수 있는 항목이 있다는 것을 알려 줍니다.

모든 앱을 업데이트하려면 업데이트 페이지로 이동한 다음 단추 하나만 누르면 됩니다. 그러면 모든 업데이트가 자동으로 선택됩니다. 개발자가 새로운 업데이트를 제공하면 빠른 시일 내에 앱을 업데이트하는 것이 좋습니다.

앱 업데이트 / 8개의 업데이트 가능 앱 업데이트가 신속하고 간편하게 설치될 수 있습니다.

업데이트가 신속하게 설치되는 이유는 컴퓨터가 대기 모드에 있을 때 업데이트를 백그라운드에서 다운로드(설치는 하지 않음)하기 때문입니다. 하지만 컴퓨터가 데이터 사용료가 부과되는 이동 통신망에 연결되어 있으면 업데이트를 다운로드하지 않습니다. 물론 자동 업데이트 다운로드를 원치 않으면 스토어 설정에서 이 기능을 해제하면 그만입니다. 업데이트가 설치되는 동안에는 스토어의 이전 페이지로 돌아가서 새롭고 흥미로운 콘텐츠를 찾아볼 수 있습니다.

앱 다시 가져오기

여러 대의 PC를 소유한 사용자를 고려하여 모든 사용자의 앱을 5대까지 Windows 8 PC에 설치할 수 있도록 했습니다. 새 장치에 앱을 설치할 때마다 앱을 실행할 수 있는 장치 목록에 해당 장치의 정보가 추가됩니다. 여섯 번째 장치에 앱을 설치할 경우 이전 장치 중 하나에서 앱을 제거해야 현재 장치에 설치할 수 있다는 알림 메시지가 표시됩니다.

앱 / 9개의 앱이 보임 모든 앱을 보이게 한 후 재설치함

또한 사용자는 특정한 장치에 설치된 앱을 필터링할 수 있습니다. 이 기능은 한 장치에 설치되어 있는 앱을 다른 장치에 다시 설치할 때 편리합니다. 실제로 이러한 앱이 로밍을 허용하고 고객이 연결 계정(Windows Live ID로 Windows 8에 로그인한 경우)을 갖고 있다면 각 앱의 설정과 상태는 장치에 관계없이 그대로 유지됩니다.

올바른 균형 유지

Windows 스토어를 디자인할 때 우리가 준비한 콘텐츠에서 전혀 예상 못한 앱을 발견하는 것, 그리고 고객이 원���는 앱을 직접 검색하여 찾는 것 이 두 가지 구성의 균형을 이루기 위해 노력했습니다. 앱 목록과 각 앱의 브랜드 아이콘 및 색상을 강조하여 고객의 필요를 채우기 위해 노력했습니다. 앱을 찾아 설치하고 업데이트하는 과정이 일사천리로 진행되도록 디자인했습니다. 고객을 최대한 배려하여 앱 검색 과정이 아주 손쉽게 이루어지도록 했으므로 Windows 스토어는 개발자들에게 최상의 가치와 기회를 제공해 줄 것입니다.

Jonathan J. Wang


다른 미디어 플레이어로 보려면 이 비디오를 다운로드하십시오.
고화질 MP4 | 저화질 MP4

  • Loading...
Leave a Comment
  • Please add 3 and 6 and type the answer here:
  • Post