시맨틱 줌에 대한 지침

Applies to Windows and Windows Phone

Windows 앱: 시맨틱 줌 컨트롤의 확대 및 축소 보기

Windows 앱: 시맨틱 줌 컨트롤의 확대 및 축소 보기

Windows Phone 앱: 시맨틱 줌 컨트롤의 축소 및 확대 보기

Windows Phone 앱: 시맨틱 줌 컨트롤의 축소 및 확대 보기

설명

시맨틱 줌 컨트롤을 사용하여 동일한 데이터 집합의 서로 다른 두 가지 시맨틱 보기를 확대/축소할 수 있습니다. 한 보기에는 일부 키로 그룹화된 항목 목록이 포함되고, 다른 보기에는 그룹 키 목록이 포함됩니다. 그룹 키를 탭하면 해당 그룹의 항목으로 다시 확대됩니다.

데이터 집합이 도움이 되는 각 신체별로 그룹화된 운동 목록인 경우 확대 보기는 신체(항목)별로 그룹화된 운동 목록이고 축소 보기는 신체(그룹 키) 목록이 됩니다. 데이터 집합이 큰 경우 축소하여 모든 그룹 키를 한 페이지에 표시하면 여러 번 스크롤하여 도달할 수 있는 멀리 떨어져 있는 항목을 빠르게 액세스하는 데 도움이 됩니다.

예제

표준 시맨틱 줌 컨트롤을 보여 주는 스크린샷

권장 사항 및 금지 사항

  • 요소가 유용하고 대화식으로 작동할 수 있도록 올바른 터치 대상 크기를 사용합니다. 자세한 내용은 대상 지정에 대한 지침을 참조하세요.
  • 적절하고 직관적인 시맨틱 줌 영역을 제공합니다. 사용자들은 종종 표시된 항목을 둘러싸는 영역 내에서 시맨틱 줌을 시작합니다. 따라서 시맨틱 줌 영역은 이 영역을 충분히 둘러쌀 수 있게 커야 합니다. 예를 들어 Windows 스토어에서는 앱 목록 주변에 사용자가 손가락을 대고 확대하거나 축소할 수 있는 충분한 빈 공간을 제공합니다.
  • 보기에 내장된 구조 및 의미 체계를 사용합니다.
    • 그룹화된 모음에 포함된 항목에는 그룹 이름을 사용합니다.
    • 그룹화되지 않았지만 정렬된 모음에는 정렬 순서(예: 날짜순 또는 이름 사전순)를 사용합니다.
    • 문서 모음을 나타낼 때는 페이지를 사용합니다.
  • 항목 레이아웃 및 이동 방향이 확대/축소 수준에 따라 바뀌면 안 됩니다. 레이아웃 및 이동 조작 방식은 확대/축소 수준이 달라져도 일관되고 예측 가능해야 합니다.
  • 축소 모드의 페이지(화면) 수는 3개로 제한합니다. 시맨틱 줌을 사용하면 콘텐츠로 빠르게 점프할 수 있습니다. 과도하게 이동하면 이러한 장점이 퇴색될 수 있습니다.
  • 콘텐츠 범위를 바꾸는 데 시맨틱 줌을 사용하지 않도록 합니다. 예를 들어 사진 앨범은 파일 탐색기에서 폴더 보기로 전환되지 않아야 합니다.
  • 시맨틱 줌 컨트롤의 자식 컨트롤에는 테두리를 설정하지 마세요. 시맨틱 줌과 자식 컨트롤 모두에 테두리를 설정하면 시맨틱 줌 테두리와 보기에 있는 자식 컨트롤의 테두리가 모두 표시됩니다. 확대하거나 축소하면 자식 컨트롤의 테두리가 콘텐츠와 함께 확대/축소되므로 보기가 좋지 않습니다. 시맨틱 줌 컨트롤에만 테두리를 설정합니다.

추가 사용법 지침

광학 줌은 콘텐츠의 배율 및 확대를 변경합니다. 시맨틱 줌은 키별로 그룹화된 항목 간에 제공되는 콘텐츠의 시맨틱(의미)과 해당 키 목록을 전환합니다. 그룹화된 긴 데이터 목록(예: 신체별로 그룹화된 운동 또는 이니셜로 그룹화된 이름)을 표시할 때마다 시맨틱 줌 컨트롤을 사용합니다.

'A'로 시작하는 이름에서 'z'로 시작하는 이름으로 스크롤하면 많은 살짝 밀기 제스처가 사용될 수 있습니다. 시맨틱 줌 컨트롤을 사용하면 두 번만 탭하여 이동할 수 있습니다. 한 번 탭하여 이니셜 목록을 축소하고 한 번 더 탭하여 'Z'로 확대합니다.

시맨틱 줌은 두 보기 사이의 확대/축소를 관리합니다. 보기는 경우에 따라 항목이나 그룹 키를 포함하는 목록 보기 또는 그리드 보기입니다.

시맨틱 줌은 콘텐츠를 구성하고 표시하기 위해 두 가지 고유한 분류 모드(또는 줌 수준)를 사용합니다. 하나는 평면적인 단일 구조로 항목을 표시하는 데 사용되는 하위 수준(또는 확대) 모드이고 다른 하나는 항목을 그룹으로 표시하여 사용자들이 콘텐츠를 빠르게 탐색하고 이동할 수 있도록 하는 상위 수준(또는 축소) 모드입니다.

시맨틱 줌 조작 방식은 손가락 모으기 및 확대 동작(손가락을 멀리 벌려 확대하고 가깝게 모아 축소)이나 Ctrl 키를 누른 채로 마우스 스크롤 휠을 스크롤하거나 Ctrl 키(숫자 키패드를 사용할 수 없는 경우 Shift 키)를 누르고 더하기(+) 또는 빼기(-) 키를 눌러 수행합니다.

시맨틱 줌을 간단히 살펴보려면 이 짧은 동영상을 시청하세요.

다음은 시맨틱 줌을 사용할 수 있는 앱의 예입니다.

  • 연락처를 알파벳 순서로(또는 다른 방법으로) 구성하고 알파벳 문자를 사용하여 데이터를 표시하는 주소록. 사용자는 문자를 확대하여 그 문자와 관련된 연락처를 볼 수 있습니다.
  • 메타데이터(예: 찍은 날짜)를 기준으로 이미지를 구성하는 사진 앨범. 사용자는 특정 날짜에서 확대하여 그 날짜와 관련된 이미지들을 표시할 수 있습니다.
  • 범주별로 항목을 구성하는 제품 카탈로그.

  • 시맨틱 줌 레이아웃의 기타 예
    확대축소
    축소 레이아웃의 예확대 레이아웃의 예
    축소 레이아웃의 예확대 레이아웃의 예
    축소 레이아웃의 예확대 레이아웃의 예
    축소 레이아웃의 예확대 레이아웃의 예

     

시맨틱 줌을 사용한 탐색

이동 및 스크롤만으로도 콘텐츠 탐색이 가능하지만(이동에 대한 지침 참조) 시맨틱 줌 접근 권한 값과 함께 사용하면 강력한 탐색 및 구성 효과를 얻을 수 있습니다.

이동 및 스크롤은 소규모 콘텐츠 및 짧은 거리 작업에 유용합니다. 그렇지만 콘텐츠 규모가 커지면 빠른 탐색이 어려워집니다. 시맨틱 줌은 대량의 콘텐츠를 탐색할 때 장거리를 이동한다는 느낌을 줄여주며 콘텐츠 내의 위치에 빠르고 쉽게 액세스할 수 있도록 합니다.

참고  

시맨틱 줌을 광학 줌과 혼동하지 않도록 하세요(광학 줌 및 크기 조정에 대한 지침 참조). 이러한 두 기능은 동일한 조작 방식 및 기본 동작(확대/축소 배율에 따라 좀 더 자세하거나 덜 자세하게 표시)을 공유하지만 광학 줌은 사진과 같은 콘텐츠 영역이나 개체의 확대 상태를 조정하는 것을 의미합니다.

  • 스크롤 점프

    축소 모드에서 콘텐츠를 탭하면 다음에 제공되는 세 다이어그램과 같이 보기가 확대되고 탭한 지점으로 이동됩니다.

    원래의 시맨틱 뷰를 보여 주는 스크린샷
    축소된 전체 콘텐츠가 터치 대상이 될 수 있습니다.
    원래의 시맨틱 뷰에서 한 부분에 탭하기 제스처를 보여 주는 스크린샷
    콘텐츠 부분 탭하기
    탭하기 대상의 새로운 의미 체계 보기를 보여 주는 스크린샷
    탭한 영역으로 확대 및 이동

     

  • 전환

    한 시맨틱 줌 수준에서 다른 수준으로 전환하는 데 매끄러운 크로스 페이드 및 크기 조정 애니메이션이 사용됩니다. 이것은 Windows Touch의 기본 동작이며 사용자 지정할 수 없습니다.

고려 사항 및 권장 지침

사용자는 앱에서 두 가지 의미 체계 수준을 정의해야 합니다.

다음 질문은 축소 모드를 설계할 때 고려할 사항입니다.

  • 정보의 구조와 표현이 확대/축소 비율에 따라 어떻게 변경되어야 합니까?
  • 힌트 또는 '길잡이'가 데이터 탐색에 유용합니까?
  • 어느 정도의 콘텐츠가 이동과 스크롤을 최소화하면서 시맨틱 뷰를 유용하게 볼 수 있습니까?

이러한 고려 사항이 서로 상충되는 경우도 있습니다. 사용자들이 어디로 점프할지 알도록 많은 정보가 포함된 풍부한 콘텐츠를 표시하는 것이 바람직하지만 이러한 정보와 총 의미 체계 수준 길이 간에 균형을 맞추어야 합니다. 사용자들이 축소 모드에서 여러 번 이동해야 할 경우 시맨틱 줌이 제공하는 주요 이점인 —빠른 탐색이라는 효과가 상실됩니다.

Windows 8용 실습 랩

시맨틱 줌 및 기타 Windows 8의 주요 기능으로 작업해 보려면 Windows 8용 실습 랩(영문)을 다운로드하세요. 이러한 랩은 선택한 프로그래밍 언어(JavaScript 및 HTML 또는 C# 및 XAML)로 샘플 Windows 스토어 앱을 만들 수 있는 모듈식 단계별 소개를 제공합니다.

모양 및 조작

시맨틱 줌 컨트롤의 모양은 표시되는 보기에 따라 달라집니다. 각 보기는 목록 보기 컨트롤이나 그리드 보기 컨트롤입니다. 확대하면 시맨틱 줌은 키 헤더 아래에 그룹화된 항목 목록으로 나타나고, 축소하면 키 목록으로 나타납니다.

확대된 상태에서 항목을 탭하면 항목이 선택되거나 세부 정보 페이지로 이동합니다. 축소된 경우 그룹 키를 탭하면 해당 그룹이 확대되어 보기로 스크롤됩니다.

  • Applies to Windows

Windows: 확대/축소 조작은 손가락 모으기 및 확대 제스처(손가락을 가깝게 모아 축소하고 멀리 벌려 확대)나 Ctrl 키를 누른 채로 마우스 스크롤 휠을 스크롤하거나 Ctrl 키(숫자 키패드를 사용할 수 없는 경우 Shift 키)를 누르고 더하기(+) 또는 빼기(-) 키를 눌러 수행합니다.

  • Applies to Windows Phone

Windows Phone: 확대된 경우 그룹 키 헤더를 탭하여 축소합니다.

관련 항목

디자이너용
일반적인 사용자 조작에 대한 지침
터치 조작
개발자용(HTML)
SemanticZoom 컨트롤 추가
빠른 시작: SemanticZoom 추가
빠른 시작: 포인터
빠른 시작: DOM 제스처 및 조작
빠른 시작: 정적 제스처
빠른 시작: 조작 제스처
SemanticZoom
Windows.UI.Input
개발자용(XAML)
빠른 시작: 터치식 입력
빠른 시작: 포인터 입력 처리
Windows.UI.Xaml.Input
개발자용(DirectX 및 C++로 작성한 Windows 런타임 앱)
터치 입력에 응답(DirectX 및 C++)
샘플(WinJS)
사용자 지정 컨트롤용 HTML SemanticZoom 샘플
HTML ListView 그룹화 및 SemanticZoom 샘플
샘플(DOM)
HTML 스크롤, 이동 및 확대/축소 샘플
입력: 인스턴스화 가능한 제스처 샘플
샘플(Windows 스토어 앱 API)
입력: 조작 및 제스처(JavaScript) 샘플
입력: Windows 8 제스처 샘플
입력: XAML 사용자 입력 이벤트 샘플
XAML 스크롤, 이동 및 확대/축소 샘플
샘플(DirectX)
DirectX 터치 입력 샘플
입력: 조작 및 제스처(C++) 샘플

 

 

표시:
© 2014 Microsoft