Windows 앱
콘텐츠의 테이블 축소
콘텐츠의 테이블 확장

멋진 Windows 스토어 앱 만들기

Windows 스토어 앱은 Windows 8에서 사용자 환경의 구심점이며, 멋진 Windows 스토어 앱은 일관되고 강력한 사용자 환경을 제공하는 중요한 특성을 모두 갖추고 있습니다. 여기에서는 멋진 Windows 스토어 앱의 8가지 특징에 대해 배웁니다.

Windows 스토어 앱

비디오 시청

이 동영상에서는 Microsoft 스타일 원칙을 적용하여 멋진 앱을 만들 수 있는 방법을 설명합니다. 동영상을 본 후 멋진 Windows 스토어 앱을 구성하는 요소에 대한 요약을 읽어 보세요.

|

Microsoft 디자인 스타일 활용

콘텐츠는 Windows 스토어 앱의 심장이며, 크롬 앞에 콘텐츠를 배치하는 것이 Windows 스토어 앱 디자인의 기초입니다. 이외의 모든 항목은 콘텐츠를 제공하고 조작하는 데 유용한 액세서리, —즉 —크롬입니다.

콘텐츠 제공

콘텐츠가 잘 드러날 수 있도록 앱 UI를 디자인하고, 장애가 있는 사용자가 UI에 접근할 수 있도록 합니다.

레이아웃 정리 및 열기

  • 가장 관련 있는 요소만 화면에 표시하여 산만하지 않고 콘텐츠에 몰입할 수 있도록 합니다.
  • 줄, 상자, 불필요한 그래픽 효과(예: 흐리게, 그라데이션) 등을 제거하여 콘텐츠에 안정감을 부여합니다. 개방된 공간을 사용하여 콘텐츠 프레임을 구성합니다.
  • 화면에 지속적으로 표시되는 탐색 크롬(예: 탭)을 제한합니다. 사용자가 현재 콘텐츠에 집중하고 도중에 발견되는 크롬으로 인해 산만해지지 않도록 합니다.

분명한 정보 계층   사용자가 콘텐츠 계층 구조를 쉽게 이해할 수 있도록 Microsoft 디자인 언어는 깔끔하고 보기 좋은 입력 체계로 되어 있습니다. 줄 및 상자 대신 입력 체계를 사용하여 계층 구조 설정을 도와줍니다.

  • 크기, 두께 및 색상으로 텍스트를 구분하여 콘텐츠의 중요 부분에 대한 정보를 일과되게 전달합니다. 변형을 작게 하여 콘텐츠가 전체 계층 구조에 얼마나 적합한지를 쉽게 알 수 있게 합니다. 텍스트 및 입력 체계에 대한 지침을 참조하세요.
  • 기본 스타일시트를 사용하여 텍스트에 대해 미리 정의된 유형 램프를 가져옵니다.

Windows 실루엣  사용자가 콘텐츠에 집중할 때 콘텐츠의 구성을 보고 응용 프로그램을 식별합니다. 따라서 웹 페이지와 반대로 앱을 Windows 스토어 앱으로 쉽게 인식할 수 있도록 친숙한 실루엣을 사용하는 것이 좋습니다.

콘텐츠 조작

조작을 통해 사용자의 신뢰와 통제력을 유지하세요.

직접 조작  사용자의 가장 자연스러운 콘텐츠 조작 방법은 중간에 크롬이 없는 직접 조작입니다.

  • 가능하면 사용자가 제어를 통한 간접적인 조작이 아닌 직접적인 콘텐츠 조작을 통해 작업을 완료하게 합니다.

    예를 들어 화면에 단추를 추가하지 않고 항목을 탭하여 세부 정보를 확인하고, 가로질러 밀기를 통해 항목을 선택하고, 주위로 끌어서 이동하고, 화면을 축소하여 전체 컨텍스트를 볼 수 있도록 합니다.

  • 시맨틱 줌을 사용하면 긴 콘텐츠 목록을 콘텐츠 중심으로 빠르고 유연하게 확인할 수 있습니다.
  • 키보드에 의존하는 사용자와 화면 낭독 프로그램이 콘텐츠를 조작할 방식을 고려해야 합니다.

가장자리 활용   일부 작업은 직접적인 조작을 통해 수행할 수 없습니다. 이러한 작업에 대해 필요한 경우에만 상황에 맞는 명령을 표시하여 캔버스가 산만해지는 것을 방지할 수 있습니다. 사용자가 명령을 정확하게 찾을 수 있도록 화면 또는 장치의 가장자리를 활용하세요.

  • 앱 바에 명령을 배치합니다. 앱 바는 위쪽 또는 아래쪽 가장자리를 손가락으로 밀면 나타나고, 동작을 완료하면 사라집니다.
  • 참을 활용하세요. 참은 오른쪽 가장자리를 밀면 나타납니다(검색, 공유, 장치 또는 설정 참 호출).
  • 명령을 화면에 영구적으로 배치하거나 참을 통해 액세스되는 계약에 대한 중복 진입점을 표시하지 마세요.
  • 편리하게 디자인하고 자주 사용하는 조작 화면을 가장자리에서 가깝게 배치하세요.

자세한 내용은 명령 디자인을 참조하세요.

빠르고 유연함

일정한 힘으로 수행하는 사용자 동작에 빠르게 반응합니다.

목적이 있는 애니메이션  

Microsoft 디자인 언어의 핵심은 동작입니다. 체계적으로 디자인된 애니메이션은 앱에 생명을 불어넣고 환경을 전문적이고 돋보이게 합니다.

  • 목적이 있는 애니메이션을 사용하여 환경을 시각적으로 연결하여 스토리를 구성하세요. 유동 인터페이스를 통해 모든 항목을 가져오고 보냅니다.
  • 정보 전달을 위해 설계된 애니메이션 라이브러리의 시나리오별 애니메이션 집합을 활용하세요. 친숙한 동작을 사용하여 개념을 강화하고 사용자가 기대하는 내용이 무엇인지를 알 수 있도록 돕고 신뢰를 구축할 수 있습니다. 애니메이션에 대한 지침은 UI 애니메이션 섹션을 참조하세요.
  • 애니메이션을 사용하여 중요한 정보와 통신할 때는 정보를 전달하기 위한 액세스 가능한 대체 방식 또한 제공해야 합니다.

터치용 디자인  

Windows 스토어 앱은 처음부터 터치 방식으로 디자인되었습니다. 또한 편의성과 인체 공학을 염두에 두고 손과 손가락만으로 원하는 결과를 얻을 수 있도록 디자인되었습니다.

  • Windows 8 터치 언어를 지원하고 규정된 동작을 사용하여 콘텐츠를 자연스럽고 일관되게 조작할 수 있습니다. 자세한 내용은 터치 조작 디자인을 참조하세요.
  • 콘텐츠가 손가락을 직접 따르도록 합니다. 탭 동작을 차치하고 밀기 조치(예: 시맨틱 줌 )를 통해 콘텐츠를 빠르고 쉽게 찾아서 조작할 수 있습니다.
  • 터치하면 시각적 피드백이 즉시 제공되므로 원하는 대상을 터치했는지 확인할 수 있습니다. 조작을 되돌릴 수 있도록 유지한 상태에서 오류에 대비하여 공간을 제공하고 탐색하도록 촉구할 때에만 커밋합니다.
  • 별도의 터치 및 마우스 조작을 생성하지 마세요.
  • 접근성을 위해서는 모든 조작 요소에 프로그래밍 방식으로 액세스할 수 있어야 합니다. 자세한 내용은 접근성 있는 터치 이벤트로 만들기내레이터를 사용하여 메인 앱 시나리오 확인을 참조하세요.

기본 제공 컨트롤  

기본 제공 컨트롤을 활용하여 유동적이며 아름답고 일관된 애니메이션과 터치에 최적화된 동작을 생성합니다. 몇 가지 예를 들면 다음과 같습니다.

  • 밀기 동작(가로질러 밀기)을 통한 선택 기능은 ListView 컨트롤에 기본 제공됩니다. 긴 목록을 빠르고 융통적으로 탐색할 수 있도록 시맨틱 줌을 사용하여 확대할 수 있습니다. ListView 컨트롤에 대한 지침을 참조하세요.
  • FlipView 컨트롤을 사용하면 항목을 끌어서 이동하고 전환 애니메이션을 기본 제공할 수 있습니다.
  • 단추, 토글, 확인란, 라디오 단추, 등급 및 슬라이더 컨트롤은 모두 터치 동작에 대한 시각적 피드백을 제공하고 수정 시에만 커밋되며 끌어서 작업을 취소할 수 있습니다. 단추, 토클, 확인란, 라디오 단추, 날짜 및 시간 선택기, 등급 및 슬라이더 컨트롤에 대한 지침을 참조하세요.

기본 제공 컨트롤은 기본적으로 접근성이 있으므로 접근성 있는 앱을 개발하는 비용을 줄일 수 있습니다. 기본 제공 컨트롤에 대해서는 세부 사용자 환경(UX) 지침 목록을 참조하세요.

원하는 크기로 조정

모든 양식 요소와 모든 보기 옵션이 사용자에게 개방된 유용한 환경을 구축합니다.

여러 양식 요소에 대한 크기 조정   Windows 8을 실행 중인 수억 대의 PC에서 앱을 사용할 수 있습니다. 이러한 PC는 <10" 태블릿부터 >27" 화면까지 화면의 크기와 해상도가 다양합니다.

  • 플랫폼 컨트롤에 기본 제공된 부동 레이아웃 지원을 통해 화면에 제공된 실제 자산을 최대한 활용하세요. 예를 들어 ListView에서는 사용 가능한 공간을 기반으로 콘텐츠를 자동으로 재배치합니다.
  • 이 플랫폼은 장치의 화면 크기와 해상도를 기반으로 크기를 자동으로 조절합니다. 3가지 크기의 자산을 제공하거나 SVG(Scalable Vector Graphics)를 사용하여 앱을 항상 선명하고 보기 좋게 유지합니다. 화면에 맞게 크기를 조정하는 방법픽셀 밀도로 크기를 조정하는 방법을 참조하세요.
  • [접근성]에서 화면에 보이는 모든 항목을 더 크게 보기를 켜면 사실상 현재 해상도가 낮아지므로 여전히 모든 UI가 보이고 사용 가능한지 확인해야 합니다. 자세한 내용은 "화면에 보이는 모든 항목을 더 크게 보기" 옵션을 사용하여 앱 확인을 참조하세요.
  • Microsoft Visual Studio의 시뮬레이터를 사용하여 양식 요소에 따른 앱의 모양을 확인할 수 있습니다.

여러 창 크기에 맞게 디자인  멀티태스킹을 자연스럽게 수행하고 여러 앱을 나란히 실행할 수 있습니다. 사용자는 최소 너비까지 계속해서 앱 크기를 조정할 수 있습니다. 기본 최소 너비는 500픽셀입니다. 앱이 더 작은 크기에서도 잘 작동하고 사용자가 앱을 화면에 유지하도록 하려는 경우 최소 너비를 320픽셀로 변경할 수 있습니다. 창 크기에 대한 지침을 참조하세요.

  • 앱이 콘텐츠를 유동적으로 재배치하여 적절하게 표시되고, 최소 너비까지 어떤 크기에서나 작동할 수 있도록 디자인하세요. 사용자가 앱 크기를 조정할 때 사용자의 컨텍스트를 유지합니다.
  • 앱 바, 탐색 모음, 대화 상자 및 플라이아웃 등의 앱 컨트롤이 최소 크기로 축소되도록 합니다.

올바른 계약 사용

계약은 Windows 스토어 앱을 시스템 UI에 함께 바인딩합니다.. 동일한 계약을 구현하는 두 앱을 함께 사용하여 포괄적이고 복잡한 시나리오를 완료할 수 있습니다.

  • 검색, 공유, 파일 선택기 등과 같은 가장 일반적인 일부 계약의 경우 해당 Visual Studio 항목 템플릿으로 시작합니다.
  • 사용자가 신뢰할 수 있는 일관된 호출 모델을 위해 참을 사용합니다. 계약 호출을 위해 앱 캔버스에서 대체 UI를 만들지 마세요. 그러면 사용자가 혼란스러워 할 수 있습니다.
  • 앱 계약 전체 목록을 참조하세요.

공유   공유 계약을 사용하면 앱의 데이터를 다른 앱과 공유할 수 있습니다. 원본 앱은 공유할 데이터를 제공하고, 대상 앱은 공유되는 콘텐츠를 일반 데이터 형식으로 받습니다. 콘텐츠 공유 지침을 참조하세요.

  • 모든 앱은 공유 원본이며 최대한 많은 형식을 구현해야 합니다.
  • 공유되는 데이터를 게시, 저장 또는 변환하는 앱은 공유 대상이 될 수 있습니다. 예를 들어 통신, 소셜 네트워킹, 장치에 연결된 앱 등이 있습니다.

검색   검색 계약 및 앱 내 SearchBox 컨트롤을 사용하면 Windows의 어디에서든 앱 콘텐츠를 검색할 수 있습니다. 결과는 앱에 의해 제공되며 앱의 자체 UI 또는 전체 검색 창 내에 표시됩니다. 검색 지침 및 검사 목록을 참조하세요.

  • 검색이 앱에 필수적인 경우에는 새 SearchBox 컨트롤을 사용합니다. 검색이 앱에서 중요하지만 중심 기능은 아닐 경우에는 검색 참 메뉴와 계약을 사용합니다.
  • 검색 계약과 SearchBox 컨트롤을 사용하여 전체 검색에서 활성화하도록 설정할 수 있습니다.
  • 사용자가 앱을 사용하기 시작할 때 검색이 필요한 경우에는 앱의 canvas에 표준 검색 문자 모양을 추가합니다.
  • 사용자가 필터링하거나 범위를 지정하여 검색 결과 집합의 범위를 좁힐 수 있도록 하면 앱의 검색 결과 페이지를 개선할 수 있습니다.
  • 새로운 적중 강조 API를 사용하여 검색 결과가 쿼리와 일치하는 이유를 표시합니다.

파일 선택기     파일 선택기 계약을 사용하면 다른 앱에서 앱 콘텐츠에 액세스할 수 있습니다. 파일 선택기를 호출한 후 파일 선택기 계약을 지원하는 다른 앱이나 로컬 저장소에서 파일을 찾아서 선택할 수 있습니다. 파일 선택기 지침을 참조하세요.

  • 다른 컨텍스트에서 사용자에게 유용한 파일을 액세스하거나 저장하는 경우에 이 계약을 활용하세요.
  • 기본 제공 부동 레이아웃 및 선택 동작을 가져오려면 ListView 컨트롤을 활용하세요.

유용한 타일에 투자

타일은 앱으로 들어가는 문과 같습니다. 타일은 시작 화면에 배치된 앱의 확장으로 기존 아이콘보다 훨씬 더 개인적이고 관련된 정보를 제공할 수 있습니다. 사람들을 내 앱으로 유인할 수 있는 유용한 타일을 디자인하는 데 투자하세요. 타일 지침을 참조하세요.

  • 타일에 표시되는 콘텐츠를 사용자에 맞게 조정하고 앱 콘텐츠가 변경될 때마다 업데이트하여 항상 최신의 상태로 유지하세요. 사용 가능한 다양한 타일 템플릿이 미리 디자인되어 있으므로 콘텐츠 형식에 가장 적합한 디자인을 선택하세요.
  • 사용자가 앱을 실행한 후 쉽게 찾을 수 있도록 앱의 홈페이지에 활성화되는 콘텐츠를 참조하세요.
  • 사용자가 시작 화면에서 자주 업데이트되는 앱 콘텐츠의 하위 섹션에 관심을 갖도록 보조 타일을 사용하세요. 보조 타일 지침을 참조하세요.

연결된 느낌

사용자가 앱에 연결되어 있다는 느낌을 갖도록 라이브 타일과 알림을 통해 새로운 콘텐츠를 제공하세요. 라이브 타일과 알림은 모두 동일한 인프라를 사용하며 Windows 푸시 알림 서비스를 사용하는 중에 언제든지, 앱이 실행 중인 동안 로컬로 또는 예정된 시간에 업데이트할 수 있습니다.

라이브 타일   앱 타일에서 동적이고 관련 있는 개인 설정된 콘텐츠를 사용하여 사용자를 지속적으로 유인합니다. 타일 콘텐츠가 새로울수록 시작 화면에서 주목을 받을 수 있는 위치에 타일이 배치되므로 앱을 실행하는 사람이 더 많아질 수 있습니다.

  • 라이브 타일은 배치된 상태에서 최대 5회까지 업데이트됩니다. 예를 들어 새로운 앱의 라이브 타일은 매일 여러 가지 사례를 순환적으로 표시할 수 있습니다.
  • 라이브 업데이트에 표시되는 콘텐츠를 앱의 홈페이지에서 액세스할 수 있어야 합니다. 더 이상 관련이 없거나 홈페이지에서 액세스할 수 없는 오래된 알림 제거
  • 배지를 사용하여 간단한 숫자 또는 문자 정보를 표시합니다.

알림   앱은 알림을 사용하여 Windows의 어느 위치에서건 시기적으로 중요한 메시지를 간략하게 표시할 수 있습니다. 알림 메시지 지침을 참조하세요.

  • 대부분의 앱은 조용합니다. —즉, 앱에서 알림을 사용하려면 사용자가 옵트인(사전 동의)해야 합니다.
  • 사용자가 앱의 알림 기능을 제어하므로 시기적으로 중요하고 관련 있는 알림만 표시하세요. 누락된 중요 알림은 앱의 타일에 표시하세요.
  • 짧은 기간에 여러 번 업데이트된 경우 알림을 통합하세요.
  • 오류 또는 경고 표시를 위해 알림을 사용하지 마세요. 오류는 인라인 또는 플라이아웃과 메시지 대화 상자에 표시해야 합니다.

클라우드에 로밍

로밍   사용자가 작업을 중단한 위치에서 다시 시작할 수 있도록 하는 데이터를 로밍하여 장치와 관계없이 지속적인 환경을 구축합니다. 앱 데이터 로밍 지침을 참조하세요.

  • 설정, 상태 및 소량의 사용자 콘텐츠를 저장하고 로밍하려면 Microsoft 계정과 사용자 단위 클라우드 저장소를 활용하세요.
  • 로밍하는 데 유용한 앱 설정 예:
    • 날씨 앱의 시/군/구 및 온도(섭씨/화씨) 기본 설정
    • 뉴스 앱에서 사용자가 가입한 RSS 피드
    • 스포츠 앱의 즐겨찾는 팀
  • 로밍하는 데 유용한 앱 상태 예:
    • 읽기 앱에서 읽은 가장 먼 위치
    • 게임에서 완료한 마지막 검사점 또는 이동
    • 음악 앱에서 마지막으로 재생한 트랙

프로세스 수명 관리(앱 수명 주기)   명시적으로 저장할 필요 없이 사용자의 상태를 유지하여 지속적인 환경을 보장합니다. 앱 일시 중단 및 다시 시작에 대한 지침을 참조하세요.

  • 앱을 처음부터 다시 시작하지 않고 중단한 위치에서 다시 시작하는 것이 일반적입니다. 다른 앱으로 전환했다가 쇼핑 카트, 완료하지 않은 메일 또는 중단한 게임으로 돌아올 수 있어야 합니다.
  • 앱을 마지막으로 액세스한 후 많은 시간이 경과하여 이전 컨텍스트가 더 이상 관련이 없는 경우 앱을 처음부터 다시 시작합니다. 예를 들어 뉴스 앱에서 기사를 마지막으로 연 후 많은 시간이 경과하여 해당 기사가 지금은 더 이상 뉴스가 되지 않는 경우 사용자를 홈페이지로 안내합니다.
  • 화면을 벗어날 때 앱을 종료하지 마세요. 사용자가 앱으로 돌아올 때 효율성을 극대화하려면 앱 수명 주기를 시스템에 위임합니다. 사용자에게 앱 종료 기능을 제공하지 마세요.

Microsoft 디자인 스타일 원칙 준수

이 원칙에 따라 편리하게 디자인하세요.

꼼꼼한 솜씨 발휘

  • 많은 사용자가 자주 보는 사소한 내용에 시간과 에너지를 아낌없이 투자하세요.
  • 모든 단계에서 완벽하고 돋보이는 환경을 구축하세요.

적은 노력으로 많은 결과 획득

  • 검색 기능보다 산만한 환경을 해결하세요. 사용자가 좋아하는 내용에 몰입하게 하세요. 그러면 나머지 콘텐츠도 탐색하게 됩니다.
  • 사용자가 콘텐츠에 몰입할 수 있도록 가장 관련 있는 요소만 화면에 남겨두어 보기 좋고 목적 있는 환경을 구축하세요.

빠르고 유연함

  • 사용자가 콘텐츠를 직접 조작하게 하고 동작에 빠르게 반응하는 환경을 구축하세요.
  • 다채로운 경험을 제공하고, 연관성을 실현하고, 의미 있는 동작을 사용하여 스토리를 구축하세요.

진정한 의미의 디지털

  • 디지털 미디어를 최대한 활용하세요. 물리적인 한계를 제거하여 현실보다 더 효율적이고 간편한 환경을 구축하세요.
  • 화면에 픽셀로 표시되는 사실을 포용하세요. 실제 재료의 한계를 뛰어 넘는 굵고 생생하고 선명한 색상과 이미지를 사용하여 디자인하세요.

일관된 경험 제공

  • 에코시스템을 활용하고 다른 앱, 장치 및 시스템을 함께 사용하여 사용자를 위한 시나리오를 완성하세요.
  • 중복을 줄이고 UI 모델에 맞추세요. 사용자가 이미 알고 있는 내용을 활용하여 친밀감, 제어 및 신뢰를 제공하세요.

 

 

표시:
© 2017 Microsoft