광학 줌 및 크기 조정Optical zoom and resizing

이 문서에서는 Windows 확대/축소 및 크기 조정 요소를 설명 하 고 앱에서 이러한 상호 작용 메커니즘을 사용 하기 위한 사용자 환경 지침을 제공 합니다.This article describes Windows zooming and resizing elements and provides user experience guidelines for using these interaction mechanisms in your apps.

중요 한 api: Windows. input, input (XAML)Important APIs: Windows.UI.Input, Input (XAML)

사용자는 광학 확대/축소를 사용 하 여 콘텐츠 영역 내에서 콘텐츠 보기를 확대할 수 있습니다 (콘텐츠 영역 자체에서 수행 됨). 반면 크기 조정을 사용 하면 콘텐츠 영역의 뷰를 변경 하지 않고 하나 이상의 개체에 대 한 상대 크기를 변경할 수 있습니다 (콘텐츠 영역 내의 개체에서 수행 됨).Optical zoom lets users magnify their view of the content within a content area (it is performed on the content area itself), whereas resizing enables users to change the relative size of one or more objects without changing the view of the content area (it is performed on the objects within the content area).

확대/축소 및 크기 조정 상호 작용은 모두 바깥쪽 및 늘이기 제스처를 통해 수행 됩니다. 즉, 이동 하는 손가락을 확대 하 고 확대 하 여 더 가깝게 이동 하거나 ctrl 키를 누른 상태에서 마우스 스크롤 휠을 스크롤하거나 Ctrl 키를 누른 상태에서 Shift 키를 누른 채 (숫자 키패드를 사용할 수 없는 경우) 더하기 (+) 또는 빼기 (-) 키를 누릅니다.Both optical zoom and resizing interactions are performed through the pinch and stretch gestures (moving fingers farther apart zooms in and moving them closer together zooms out), or by holding the Ctrl key down while scrolling the mouse scroll wheel, or by holding the Ctrl key down (with the Shift key, if no numeric keypad is available) and pressing the plus (+) or minus (-) key.

다음 다이어그램에서는 크기 조정 및 광학 확대/축소의 차이점을 보여 줍니다.The following diagrams demonstrate the differences between resizing and optical zooming.

광학 확대/축소: 사용자는 영역을 선택 하 고 전체 영역을 확대 합니다.Optical zoom: User selects an area, and then zooms into the entire area.

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

크기 조정: 사용자가 영역 내에서 개체를 선택 하 고 해당 개체의 크기를 조정 합니다.Resize: User selects an object within an area, and resizes that object.

손가락을 가깝게 이동 하면 개체를 축소 하 고 서로를 분리 하 여 이동 합니다.

참고    시각적 확대/축소는 의미 체계 확대/축소와 혼동 해서는 안 됩니다.Note   Optical zoom shouldn't be confused with Semantic Zoom. 동일 제스처는 두 상호 작용에 모두 사용 되지만, 의미 체계 확대/축소는 단일 뷰 내에서 구성 된 콘텐츠 (예: 컴퓨터의 폴더 구조, 문서 라이브러리 또는 사진 앨범)의 표현과 탐색을 나타냅니다.Although the same gestures are used for both interactions, semantic zoom refers to the presentation and navigation of content organized within a single view (such as the folder structure of a computer, a library of documents, or a photo album).

 

권장 사항 및 금지 사항Dos and don'ts

크기 조정 또는 광학 확대/축소를 지 원하는 앱에 대해 다음 지침을 사용 합니다.Use the following guidelines for apps that support either resizing or optical zooming:

  • 최대 및 최소 크기 제약 조건 또는 경계가 정의 된 경우 시각적 피드백을 사용 하 여 사용자가 해당 경계에 도달 하거나이를 초과 하는 경우를 보여 줍니다.If maximum and minimum size constraints or boundaries are defined, use visual feedback to demonstrate when the user reaches or exceeds those boundaries.

  • 맞추기 요소를 사용 하 여 조작을 중지 하 고 특정 콘텐츠의 하위 집합이 뷰포트에 표시 되도록 논리 요소를 제공 하 여 확대/축소 및 크기 조정 동작에 영향을 줍니다.Use snap points to influence zooming and resizing behavior by providing logical points at which to stop the manipulation and ensure a specific subset of content is displayed in the viewport. 일반 확대/축소 수준이 나 논리적 보기에 대 한 맞춤 위치를 제공 하 여 사용자가 해당 수준을 더 쉽게 선택할 수 있도록 합니다.Provide snap points for common zoom levels or logical views to make it easier for a user to select those levels. 예를 들어 사진 앱은 100%에 크기 조정 맞춤 지점을 제공할 수 있으며, 응용 프로그램을 매핑하는 경우 맞춤 지점은 도시, 시/도 및 국가 보기에서 유용할 수 있습니다.For example, photo apps might provide a resizing snap point at 100% or, in the case of mapping apps, snap points might be useful at city, state, and country views.

    맞춤선을 사용 하면 사용자가 정확 하 게 유지 되 고 목표를 달성할 수 있습니다.Snap points enable users to be imprecise and still achieve their goals. XAML을 사용 하는 경우 ScrollViewer의 snap points 속성을 참조 하세요.If you're using XAML, see the snap points properties of ScrollViewer. JavaScript 및 HTML의 경우 -ms-콘텐츠-확대/축소-맞춤-요소를 사용 합니다.For JavaScript and HTML, use -ms-content-zoom-snap-points.

    다음과 같은 두 가지 유형의 스냅 지점이 있습니다.There are two types of snap-points:

    • 근접-연락처가 리프트 된 후에 관성이 맞춤 지점의 거리 임계값 내에서 중지 되 면 맞춤 지점이 선택 됩니다.Proximity - After the contact is lifted, a snap point is selected if inertia stops within a distance threshold of the snap point. 근접 한 맞춤 지점은 여전히 확대/축소 또는 크기 조정을 사용 하 여 맞춤 요소 사이를 종료 합니다.Proximity snap points still allow a zoom or resize to end between snap points.
    • 필수-제스처의 방향 및 속도에 따라, 선택 된 스냅 지점은 마지막 스냅 지점을 바로 앞 이나 뒤에 오도록 하는 것입니다.Mandatory - The snap point selected is the one that immediately precedes or succeeds the last snap point crossed before the contact was lifted (depending on the direction and velocity of the gesture). 조작은 반드시 필수 맞춤 지점에서 끝나야 합니다.A manipulation must end on a mandatory snap point.
  • 관성 물리를 사용 합니다.Use inertia physics. 여기에는 다음과 같은 옵션이 포함됩니다.These include the following:

    • 감속: 사용자가 집기를 중지 하거나 확장 하는 경우 발생 합니다.Deceleration: Occurs when the user stops pinching or stretching. 이는 slippery 표면의 중지를 슬라이딩 하는 것과 비슷합니다.This is similar to sliding to a stop on a slippery surface.
    • 바운스: 크기 제약 조건 또는 경계가 전달 될 때 약간의 바운스 효과가 발생 합니다.Bounce: A slight bounce-back effect occurs when a size constraint or boundary is passed.
  • 대상 지정에 대 한 지침에 따라 공간 제어.Space controls according to the Guidelines for targeting.

  • 제한 된 크기 조정에 대 한 크기 조정 핸들을 제공 합니다.Provide scaling handles for constrained resizing. 핸들을 지정 하지 않으면 기본적으로 크기가 조정 됩니다.Isometric, or proportional, resizing is the default if the handles are not specified.

  • 확대/축소를 사용 하 여 UI를 탐색 하거나 응용 프로그램 내에서 추가 컨트롤을 노출 하지 마세요. 대신 패닝 영역을 사용 하세요.Don't use zooming to navigate the UI or expose additional controls within your app, use a panning region instead. 이동에 대 한 자세한 내용은 패닝에 대 한 지침을 참조 하세요.For more info on panning, see Guidelines for panning.

  • 크기 조정 가능한 개체는 크기 조정 가능한 콘텐츠 영역 내에 배치 하지 마세요.Don't put resizable objects within a resizable content area. 이에 대 한 예외는 다음과 같습니다.Exceptions to this include:

    • 크기 조정 가능한 항목이 크기 조정 가능한 캔버스 또는 아트 보드에 나타날 수 있는 응용 프로그램을 그립니다.Drawing applications where resizable items can appear on a resizable canvas or art board.
    • 맵과 같은 포함 된 개체를 포함 하는 웹 페이지입니다.Webpages with an embedded object such as a map.

    참고    모든 경우에, 모든 터치 포인트가 크기 조정 가능한 개체 내에 있지 않으면 콘텐츠 영역의 크기가 조정 됩니다.Note   In all cases, the content area is resized unless all touch points are within the resizable object.

샘플Samples

보관 샘플Archive samples