20명 중 10명이 도움이 되는 것으로 평가 - 이 항목 평가

Windows Phone 앱 디자인 구현

2013-12-05

적용 대상: Windows Phone 8 | Windows Phone OS 7.1

 

이 항목에서는 Windows Phone 플랫폼에 통합된 것 같은 모양과 느낌의 앱을 디자인할 수 있도록 도와줍니다. 이 프로세스와 다른 디자인 프로세스 항목의 디자인 원칙과 전략은 증가하는 Windows Phone 스토어 에서 앱을 돋보이게 하는 데 중요합니다. 또한 다음을 수행하면 반복 시 발생할 수 있는 유용성 문제를 보다 쉽게 해결할 수 있습니다. 고품질 디자인은 자신의 앱을 경쟁 앱과 구분하는 데 중요한 적절한 사용자 환경 및 검토를 지원합니다.

브레인스토밍 및 계획에 대한 자세한 내용은 Windows Phone의 앱 개념화를 참조하세요.

이 항목에는 다음 단원이 포함되어 있습니다.

 

프로토타입을 디자인할 때는 지금까지의 모든 브레인스토밍을 결합해야 합니다. 이 단원에서는 앱의 모양의 모형을 스케치하고 이를 사용하여 디자인의 주요 특성을 테스트하는 방법을 알아보겠습니다.

참고참고:

프로토타입 생성은 품질에 도움이 될 뿐 아니라 시간과 불만을 줄입니다. 이 단원의 조언을 따르면 더 짧은 시간 내에 더 좋은 앱을 만들 수 있습니다.

Visual Studio용 Blend  는 신속하고 사실적인 프로토타입 생성에 유용합니다. Blend 를 사용하면 모형을 스케치하고 대화형 프로토타입을 만들 수 있습니다. 대화형 프로토타입은 사용자들이 이해할 수 있는 환경을 만들기 위해 사용자 지정 UI, 애니메이션 또는 전환이 필요한 앱의 영역에 유용합니다. 대개 앱의 성공에 필수적인 이러한 조작 기능은 사용자가 유용성 테스트 중에 "감"을 잡을 수 있게 합니다. 또는 Blend 는 프로토타입에서 바로 실제 작동하는 디자인을 만들 수 있도록 해줍니다. Blend 에 대한 자세한 내용은 Microsoft Expression 홈 페이지를 방문하세요.

Microsoft Visual Studio 2012에서 사용할 수 있는 PowerPoint 스토리보딩은 스케치에 사용할 수 있는 또 다른 도구입니다. 이 도구를 사용하면, 사전 정의된 스토리보드 모양 모음에서 스토리보드를 빌드하고 기존 사용자 지정 인터페이스를 캡처할 수 있습니다. 자세한 내용은 PowerPoint를 사용하여 사용자 스토리 또는 요구 사항 스토리보딩을 참조하세요.

개념 스케치

이 섹션에서는 앱의 모형을 만드는 방법을 알아보겠습니다.

디자인의 프로토타입을 생성하는 첫 번째 단계는 연필과 종이로 시작해야 하며 신속하게 PC의 스케치로 이동해야 합니다. 모바일 장치용 앱 스케치는 데스크톱 소프트웨어의 경우와 다릅니다. 이러한 앱은 탐색 계층 구조가 더 얕고 범위가 더 좁기 때문에 스토리보드의 유용성이 떨어집니다. 모바일 UI의 당면 과제는 직관적이고 동적인 방식으로 작업과 데이터를 제공하는 것입니다.

앱에 전문가 작업이 필요한 경우 해당 작업의 스토리보드를 개별적으로 작성하여 가능한 한 적고 간단한 단계로 수행되게 합니다. 다음은 일반 스트리밍 라디오 앱에 대한 일련의 프로토타입 스케치입니다.

  1. 사용자가 가장 많이 보거나 사용할 정적 화면을 스케치합니다. 예를 들어 다음 그림에서는 아래 스트리밍 라디오 앱의 예비 도면을 보여 줍니다. 홈 화면, 카테고리, 아티스트 정보 뷰 및 즐겨찾는 스테이션 목록의 모형이 표시됩니다.

    UX_AppDesign_MainScreens

    기본 화면

  2. 앱이 특정 전환 상태를 사용자에게 표시하는 경우 이러한 상태의 모양을 스케치합니다. 이 예제에서는 음악 플레이어 앱을 빌드하는 경우 설정 및 시작 화면의 뷰를 그립니다.

    UX_AppDesign_States

    몇 가지 상태

  3. 사용자 지정할 수 있는 중요한 컨트롤을 스케치합니다. 사용자 지정 컨트롤을 사용하여 화면 분류 체계를 간소화하는 방법을 생각해 보세요. 이 모형은 자세한 재생 컨트롤과 컨트롤이 포함된 특수 가로 방향 뷰를 보여 줍니다.

    UX_AppDesign_ImportantControls

    중요한 컨트롤

  4. 이제 작업을 수행하는 단계 시퀀스로 화면의 일부를 결합할 수 있습니다. 사용자가 중요한 작업을 완료하는 데 필요한 단계를 계획합니다. 각 작업 단계에서 사용될 정적 화면을 순서대로 그립니다. 다음 그림에서는 아티스트 정보 보기까지 검색 작업 흐름을 매핑하는 모형을 보여 줍니다.

    UX_AppDesign_Search

    일반 검색 작업

    이 단계를 수행하려면 사용자가 앱에서 수행하려는 모든 작업을 나열해야 합니다. 예를 들어 음악 장르 검색, 즐겨찾는 목록에 새 스테이션 추가 등을 나열합니다. 그런 다음 식별된 각 작업에 대한 맵을 그립니다. 이러한 맵은 지정된 작업을 수행하기 위한 화면 경로를 보여 줍니다.

  5. 앱의 모든 부분에서 정적 화면 간의 전체 관계를 스케치합니다. 사용자가 작업을 수행할 때 진행되고 있다는 느낌을 줄 수 있도록 관련 화면이 표시되고 작동하도록 합니다. 다음 그림에서는 단순한 스트리밍 라디오 앱의 전체 정보 아키텍처 맵을 보여 줍니다.

    UX_AppDesign_Map

    마스터 맵

    마스터 맵은 작업 맵과 다릅니다. 정적 마스터 맵에서는 지정된 작업을 수행하는 흐름을 표시하지 않고 단순히 모든 화면과 화면 간의 계층 관계를 표시합니다. 앞의 예제에서는 홈 화면에서 즐겨찾기, 카테고리 및 검색 결과 화면에 접근할 수 있는 것을 확인할 수 있습니다.

    일부 도면을 벽에 고정한 후 Blend 에서 새 프로젝트를 열어 프로토타입 생성을 시작합니다.

    참고참고:

    Blend 를 사용하여 프로토타입을 생성하는 경우 백그라운드에서 도우미 XAML 코드가 작성됩니다. 이 기능을 사용하면 반복 시 작동하는 컨트롤과 스타일을 만들 수 있으며 이후에 호환성이 문제가 되지 않을 것을 확신할 수 있습니다. 또한 Blend 내에서 프로토타입을 생성하면 모형의 최고 기능을 최종 디자인에서 완벽하게 재현할 수 있습니다.

프로토타입 또는 모형을 생성할 주요 영역 식별

특정 중점 영역을 선택하면 모바일 앱의 프로토타입을 신속하게 생성할 수 있습니다. 일반적으로 높은 세부 정보 수준까지 앱의 모든 측면에 대해 프로토타입을 생성할 필요는 없습니다. 가장 중요하거나 가장 어려운 영역을 선택하고 이 영역을 중심으로 프로토타입을 생성합니다. 일반적으로 디자이너는 새 기술 또는 기능이나 개발 팀의 평범한 전문적 지식을 벗어난 항목에 우선 순위를 두어야 합니다.

대부분의 앱에서 이것은 사용자에게 가치를 제공하는 작업의 모형 생성을 의미합니다. 앱에 대해 의도한 목적의 진술을 고려합니다. 실제로 발생하고 있다고 상상하면서 단계별로 프로토타입을 생성하고 사용자 지정 컨트롤이 단계를 줄이거나 다른 방식으로 작업 속도를 향상시킬 수 있는 위치를 확인합니다.

일반적으로 웹 또는 다른 플랫폼에서 Windows Phone으로 앱을 가져오려면 앱 화면에서 적은 개수의 컨트롤과 그래픽을 제공하고 혼잡을 줄여야 합니다. 웹에서는 컨트롤을 큰 그룹으로 결합할 수 있는 반면, 적합한 분류 체계로 여러 화면에 작업을 분산해야 할 수도 있습니다. 앱에 포함할 그래픽, 콘텐츠 또는 사진을 확대해야 하는지 여부에 주의해야 합니다. 기본 컨트롤을 사용하고 WebBrowser 컨트롤을 가능한 한 적게 사용하여 프로토타입을 생성해야 합니다.

적절한 반복 횟수를 미리 결정합니다.

프로토타입 세부 정보 수준 결정

신속하게 프로토타입을 생성하고 빌드 단계로 넘어가려면 반복 시 최고 우선 순위를 지정해야 하는 앱 요소를 결정합니다. 이 과정에서 다음 앱 부분에 대해 프로토타입을 생성할 깊이를 결정해야 합니다.

  • 시각적 세부 정보 수준

    아트와 모양이 이 앱의 관련자에게 최고 우선 순위인 경우 기능, 화면 또는 상태에 대한 자세한 일련의 도면을 만들어야 합니다. 또한 사용자 지정 컨트롤과 상태의 모형을 생성해야 합니다.

    참고참고:

    Blend 에서 사용자 지정 컨트롤의 모형을 생성하면 컨트롤이 XAML에서 작동합니다.

    시각적 세부 정보 모형에는 다음이 포함되어야 합니다.

    1. 스타일 및 테마

    2. 시작 화면

    3. 앱 타일

  • 기능 세부 정보 수준

    기능이 앱의 중심 항목입니까? 그런 경우 일부만 작동하는 대화형 프로토타입을 빌드할 수 있습니다. 정적 화면 또는 정적 화면 그룹으로 시작하고 정적 화면 간의 상호 작용을 하나씩 빌드합니다. 기능을 간소화하고 컨트롤 또는 입력 필요성을 줄이는 방법을 고려합니다.

  • 콘텐츠 세부 정보 수준

    앱 관련자가 주로 콘텐츠 제공에 집중하는 경우 UI를 빌드하는 동안 가능한 가장 정확한 자리 표시자를 만드는 방법을 결정하는 것이 좋습니다. 콘텐츠가 텍스트인 경우 한글 입력 체계에 주의하여 디자인의 모형을 생성하고, 블록 또는 기타 추상화가 아니라 Filler 텍스트를 사용하여 콘텐츠 배치 위치를 나타냅니다.

    앱에서 시각적 미디어를 제공하려는 경우 프로토타입 생성 프로세스에 종이와 연필을 다시 추가하는 것이 좋습니다. 재생 중 표시되는 앱 콘텐츠의 자세한 스케치를 그리고, 도면에 가로 방향과 세로 방향을 모두 포함합니다. 방향 변경 시 컨트롤 사용자 지정이나 레이아웃 변경을 고려해야 합니다.

    앱을 지역화하려는 경우 여기서 필요한 언어에 충분한 공간을 허용하고 세계화 문제를 준비해야 합니다. 지역화 및 세계화 문제를 이해하기 위해 확인할 수 있는 기타 참조가 있습니다.

  • 브랜딩 세부 정보 수준

    상업적 목적으로 앱을 빌드 중이며 브랜딩이 관리되는 경우 세부 정보에 주의하여 포괄적이고 브랜딩된 시각적 프로토타입을 만듭니다. 이렇게 하면 최종 제품이 회사 표준 색,레이아웃 및 로고에서 벗어나지 않습니다.

일관성 있게 사용자 지정

사용자 지정 시각적 요소는 앱에 품질, 독창성 또는 브랜딩을 줄 수 있습니다. 앱 시각적 디자인을 사용자 지정할 수준을 미리 결정하고 해당 요소를 적절하게 계획합니다. 앱 디자인 프로세스의 뒷부분에서는 사용자 지정 아트와 브랜딩을 도입하기 어려울 수 있습니다.

사용자 지정해야 하는 요소는 테마, 템플릿, 컨트롤 및 스타일입니다.

Windows Phone에서 시각적 요소를 사용자 지정하는 경우 항상 다음 지침을 사용합니다.

사실성보다 적절한 작업 선호

일반적으로 앱에 실생활을 모방하는 사용자 지정 컨트롤을 사용하면 안 됩니다. 예를 들어 Windows Phone 음악+동영상 허브의 FM 라디오 기능은 다이얼, 손잡이 또는 일련의 버튼을 사용하여 방송국 선택을 제어하지 않습니다. 대신 Slider 컨트롤을 사용하여 주파수를 조절하고, 재생/일시 중지 버튼을 사용하여 라디오를 켜고 끄며, 즐겨찾기 버튼을 사용하여 미리 설정된 방송국을 저장합니다.

UX_AppDesign_FMRadio

FM 라디오 - Windows Phone OS 7.1 

적절한 사용을 위해 앱이 콘텐츠 또는 게임 플레이를 전체 화면 모드로 표시하는 경우 일부 또는 모든 컨트롤, 앱 바 및 상태 표시줄을 사라지게 하거나 제거하는 것도 좋습니다.

그룹으로 사용자 지정 컨트롤의 상호 작용 계획

사용자 지정 컨트롤을 사용하여 앱에서 일관성과 안정성을 구현하려면 기호, 모양, 단어 및 색이 일관된 의미를 갖는 내부 디자인 스타일이 앱에 포함되어 있는지 확인합니다.

서로 영향을 주는 상호 관련된 사용자 지정 컨트롤 그룹을 제공하려는 경우 가능한 모든 컨트롤 조합이 적절하고 의도한 방식으로 작동하는지 확인합니다.

실현 가능한 경우 사용자 지정 컨트롤 간의 가능한 상호 작용을 그려 가능한 모든 작업이 적절한지 확인합니다. 일부 조합이 사용자에게 혼동되는 시나리오를 강제하는 경우 대체 디자인을 사용합니다.

프로토타입이 구체화되고 있으므로 디자인을 중지하고 Windows Phone 디자인의 매개 변수 외부로 흐르지 않았는지 확인합니다. 다음 질문을 통해 장치가 플랫폼과 OS를 최대한 활용하고 있는지 검토합니다.

프로토타입에 대한 검토 질문

  • 앱 디자인에서 Windows Phone 하드웨어를 이용하는 방법이 명확합니까?

  • 앱 작업이 안정적으로 작동합니까?

  • 앱이 너무 많은 정보나 기능을 제공합니까? 아니면 너무 적게 제공합니까?

  • 앱에서 사용자가 중요하게 여기는 작업을 수행할 수 있도록 허용합니까?

  • 다른 모바일 플랫폼에서 이동 중입니까? Windows Phone 사용자는 더 적은 탭 수, 보다 명확한 뷰, 큰 한글 입력 체계, 대비와 색 사용을 기대합니다.

  • 두 개의 스크롤 축(즉, X축과 Y축) 및 방향(즉, 세로 방향과 가로 방향)을 모두 사용합니까? 앱 목적에 따라 사용자가 둘 다 기대할 수도 있습니다.

  • 손가락으로 컨트롤을 쉽게 작동할 수 있습니까? 컨트롤 텍스트가 알아보기 쉽습니까?

  • UI가 터치에 대한 피드백과 진행률을 제공합니까?

  • 하드웨어 뒤로 버튼의 사용에 익숙합니까?

  • 포함된 웹 콘텐츠(및 WebBrowser 컨트롤) 사용을 자제합니까?

  • 전체 화면 콘텐츠 재생 시 앱이 상태 표시줄, 컨트롤 및 앱 바를 사라지게 합니까?

  • Pivot 및 Panorama 컨트롤을 효과적으로 올바르게 사용합니까?

사용자 지정 UI 요소 테스트

사용자 지정 UI 요소의 모형을 생성한 경우 직접 테스트해야 합니다. Blend 에서 작업하는 경우 디자인 시 앱이 백그라운드에서 작성하는 코드를 사용하여 XAML에서 컨트롤이 작동하는지 실제로 확인할 수 있습니다.

사용자에게 문의

프로토타입 생성을 시작하는 즉시 앱 대상 사용자에서 신뢰할 수 있는 소규모 사용자 그룹을 찾습니다. 편안해지면 즉시 신뢰할 수 있는 사용자에게 프로토타입을 보여 주기 시작합니다. 원하는 작업 방식을 설명하지 말고, 사용자가 앱이 수행하는 작업 및 작동 방식을 얼마나 쉽게 이해하는지 기다려서 확인합니다.

참고참고:

일반적으로 조기 사용자 테스트에는 선 표현 도면 대신 시각적 세부 정보가 포함된 모형을 사용합니다. 선 표현 도면은 사용자 환경의 정확한 시뮬레이션을 만들지 않습니다.

조기에 고객과 대화

비즈니스용 앱을 디자인하는 경우 대상 사용자 외에도 관리자와 비전문가의 요구 및 우선 순위를 테스트해야 합니다. 예를 들어 프로젝트 관리 소프트웨어는 프로젝트 참가자는 물론 앱을 사용하여 프로젝트 진행률을 확인하려는 감독자에게 유용해야 합니다.

참고참고:

계속해서 더 많은 기능을 요구하는 사용자 요청의 희생물이 되지 않도록 합니다. 심각한 UI 문제를 알려주는 사용자 피드백도 있지만 대부분의 사용자 피드백은 전체적으로 받아들여야 합니다. 앱을 집중된 최소 상태로 유지합니다. 사용자가 UI 또는 상호 작용을 구체적으로 제안하는 대신 앱 내에서 자신의 목적을 표현하는 경우가 많다는 것을 명심합니다.

디자인 프로세스의 이 시점에서는 앱이 앞에서 설명한 Windows Phone 유용성 지침을 이미 충족해야 합니다. 최종 모형을 평가하는 경우 다음 단계를 수행합니다.

  1. 프로토타입이 아이디어 수집에서 계획한 요구와 표준을 충족하는지 확인합니다.

  2. 모형이 최종 앱 검토 프로세스에 필요한 세부 정보 수준을 충족하는지 확인합니다. 디자인의 주요 측면에 대한 프로토타입 생성을 읽은 후 프로토타입에 필요하다고 결정한 세부 정보 수준을 상기합니다.

  3. 최종 모형에는 다음에 대한 적절한 수준의 세부 정보가 포함되어야 합니다.

    • 시각적 요소 - 한글 입력 체계와 콘텐츠가 명확하고 알아보기 쉬우며 간결하게 제공됩니까? 시각적으로 매력적입니까?

    • 기능 요소 - 목적과 작업 둘 다에서 작업이 직관적입니까? 앱이 수행하는 작업과 작동 방식이 명확합니까?

    • 컨트롤 요소 - 모든 사용자 지정 컨트롤이 일관성 있는 내부 디자인 언어에 따라 작동합니까? 터치 작업이 용이하도록 크기와 간격이 지정되었습니까?

    • 브랜딩 요소 - 색과 로고를 정확하게 재현했습니까? 모든 아트가 저작권 규정을 준수합니까?

  4. 프로토타입을 생성하는 동안 매핑한 상호 작용을 유지했는지 확인합니다. 가장 일반적이거나 중요한 작업이 원하는 방식으로 표시되고 진행되는지 확인합니다.

  5. 디자인이 완료되고 빌드를 시작할 수 있게 되면 Windows Phone용 첫 번째 앱을 만드는 방법을 참조하여 제출을 위해 앱이 디자인 요구 사항을 충족하도록 준비하기 시작합니다.

이 정보가 도움이 되었습니까?
(1500자 남음)
의견을 주셔서 감사합니다.
표시:
© 2014 Microsoft. All rights reserved.