다음을 통해 공유


광학 확대/축소 및 크기 조정

이 문서에서는 Windows 확대/축소 및 요소 크기 조정에 대해 설명하고 이러한 상호 작용 메커니즘을 앱에서 사용하기 위한 사용자 환경 지침을 제공합니다.

중요 API: Windows.UI.Input, Input(XAML)

광학 확대/축소를 사용하면 콘텐츠 영역 내의 콘텐츠 보기를 확대할 수 있지만(콘텐츠 영역 자체에서 수행됨) 크기 조정을 사용하면 콘텐츠 영역의 보기를 변경하지 않고도 하나 이상의 개체의 상대 크기를 변경할 수 있습니다(콘텐츠 영역 내의 개체에서 수행됨).

광학 확대/축소 및 크기 조정 상호 작용은 손가락 모으기 및 스트레치 제스처(손가락을 더 멀리 이동하고 확대하여 더 가깝게 이동)를 통해 수행되거나, 마우스 스크롤 휠을 스크롤하는 동안 Ctrl 키를 아래로 누르거나 Ctrl 키를 누른 상태에서(Shift 키를 사용하여, 숫자 키패드를 사용할 수 없는 경우) 더하기(+) 또는 빼기(-) 키를 눌러 수행됩니다.

다음 다이어그램은 크기 조정과 광학 확대/축소의 차이점을 보여줍니다.

광학 확대/축소: 사용자가 영역을 선택한 다음 전체 영역을 확대/축소합니다.

손가락을 더 가깝게 이동하면 콘텐츠 영역이 확대되고 축소됩니다.

크기 조정: 사용자가 영역 내의 개체를 선택하고 해당 개체의 크기를 조정합니다.

손가락을 더 가깝게 이동하면 개체가 축소되고 개체를 따로 이동하면 개체가 확대됩니다.

참고 광학 줌을 시맨틱 줌과 혼동하지 않아야 합니다. 두 상호 작용에 동일한 제스처가 사용되지만 의미 체계 확대/축소는 단일 보기(예: 컴퓨터 폴더 구조, 문서 라이브러리 또는 사진 앨범)로 구성된 콘텐츠의 표시 및 탐색을 나타냅니다.

 

권장 사항 및 금지 사항

다음 지침을 크기 조정 또는 광학 확대/축소를 지원하는 앱에 사용합니다.

  • 최대 및 최소 크기 제약 조건 또는 경계가 정의된 경우 시각적 피드백을 사용하여 사용자가 해당 경계에 도달하거나 초과하는 경우를 보여줍니다.

  • 끌기 지점을 사용하여 조작을 중지하고 콘텐츠의 특정 하위 집합이 뷰포트에 표시되는 논리적 지점을 제공하여 확대/축소 및 크기 조정 동작에 영향을 줍니다. 사용자가 이러한 수준을 더 쉽게 선택할 수 있도록 공통 확대/축소 수준 또는 논리적 보기에 대한 맞춤 지점을 제공합니다. 예를 들어, 사진 앱은 100%의 크기 조정 끌기 지점을 제공하거나, 매핑 앱의 경우 끌기 지점이 도시, 주 및 국가 보기에서 유용할 수 있습니다.

    끌기 지점을 사용하면 사용자가 정확하지 않으며 목표를 달성할 수 있습니다. XAML을 사용하는 경우 ScrollViewer의 끌기 지점 속성을 참조하세요.

    두 유형의 끌기 지점이 있습니다.

    • 근접성 - 접촉이 해제된 후 관성 끌기 지점의 거리 임계값 내에서 중지되는 경우 끌기 지점이 선택됩니다. 근접 끌기 지점은 여전히 끌기 지점 간에 확대/축소 또는 크기 조정을 허용합니다.
    • 필수 - 선택한 끌기 지점은 제스처의 방향과 속도에 따라 접촉이 해제되기 직전에 교차된 마지막 끌기 지점 바로 앞이나 성공 지점입니다. 조작은 필수 끌기 지점에서 끝나야 합니다.
  • 관성 물리학을 사용합니다. 여기에는 다음이 포함됩니다.

    • 감속: 사용자가 꼬집기 또는 스트레칭을 중지할 때 발생합니다. 이것은 미끄러운 표면에서 정지에 슬라이딩과 비슷합니다.
    • 바운스: 크기 제약 조건 또는 경계가 전달될 때 약간의 바운스백 효과가 발생합니다.
  • 대상 지정 지침에 따른 공간 컨트롤.

  • 제한된 크기 조정을 위한 크기 조정 핸들을 제공합니다. 핸들을 지정하지 않은 경우에는 등각 또는 비례 크기 조정이 기본값입니다.

  • 확대/축소를 사용하여 UI를 탐색하거나 앱 내에서 추가 컨트롤을 노출하지 말고 이동 영역을 대신 사용합니다. 이동에 대한 자세한 내용은 이동 지침을 참조하세요.

  • 크기 조정 가능한 콘텐츠 영역 내에 크기 조정 가능한 개체를 배치하지 마세요. 예외는 다음을 포함합니다.

    • 크기 조정 가능한 항목이 크기 조정 가능한 캔버스 또는 아트 보드에 나타날 수 있는 그리기 애플리케이션.
    • 맵과 같은 포함된 개체가 있는 웹 페이지.

    참고 모든 터치 지점이 크기 조정이 가능한 개체 안에 있는 경우가 아니면 항상 콘텐츠 영역의 크기가 조정됩니다.

샘플

보관 샘플