회전Rotation

이 문서에서는 새 Windows UI for rotation에 대해 설명 하 고 Windows 앱에서이 새로운 상호 작용 메커니즘을 사용할 때 고려해 야 하는 사용자 환경 지침을 제공 합니다.This article describes the new Windows UI for rotation and provides user experience guidelines that should be considered when using this new interaction mechanism in your Windows app.

중요 한 api: windows. Input, windows. .xamlImportant APIs: Windows.UI.Input, Windows.UI.Xaml.Input

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

  • 사용자가 UI 요소를 직접 회전할 수 있도록 회전을 사용 합니다.Use rotation to help users directly rotate UI elements.

추가 사용법 지침Additional usage guidance

회전 개요Overview of rotation

회전은 사용자가 개체를 원형 (시계 방향 또는 시계 반대 방향)으로 변환할 수 있도록 Windows 앱에서 사용 하는 터치 최적화 기술입니다.Rotation is the touch-optimized technique used by Windows apps to enable users to turn an object in a circular direction (clockwise or counter-clockwise).

입력 장치에 따라 회전 상호 작용은 다음을 사용 하 여 수행 됩니다.Depending on the input device, the rotation interaction is performed using:

  • 선택한 개체의 회전 그리퍼를 이동 하는 마우스 또는 활성 펜/스타일러스입니다.A mouse or active pen/stylus to move the rotation gripper of a selected object.
  • 회전 제스처를 사용 하 여 개체를 원하는 방향으로 전환 하는 터치 또는 수동 펜/스타일러스입니다.Touch or passive pen/stylus to turn the object in the desired direction using the rotate gesture.

회전을 사용 하는 경우When to use rotation

사용자가 UI 요소를 직접 회전할 수 있도록 회전을 사용 합니다.Use rotation to help users directly rotate UI elements. 다음 다이어그램에서는 회전 상호 작용에 대해 지원 되는 몇 가지 손가락 위치를 보여 줍니다.The following diagrams show some of the supported finger positions for the rotation interaction.

회전에서 지 원하는 다양 한 손가락 postures을 보여 주는 다이어그램입니다.

참고    사용자가 연결 지점 (예: 그리기 또는 레이아웃 응용 프로그램)과 관련 되지 않은 회전 지점을 지정 하지 않는 한, 대부분의 경우에는 대부분의 경우에 회전 지점은 두 터치 포인트 중 하나입니다.Note   Intuitively, and in most cases, the rotation point is one of the two touch points unless the user can specify a rotation point unrelated to the contact points (for example, in a drawing or layout application). 다음 이미지는 회전 지점이 이런 방식으로 제한 되지 않는 경우 사용자 환경이 저하 될 수 있는 방법을 보여 줍니다.The following images demonstrate how the user experience can be degraded if the rotation point is not constrained in this way.

첫 번째 그림은 초기 (엄지 단추) 및 보조 (인덱스 손가락) 터치 요소를 보여 줍니다. 인덱스 손가락은 트리를 터치 하 고 엄지 단추는 로그를 터치 합니다.This first picture shows the initial (thumb) and secondary (index finger) touch points: the index finger is touching a tree and the thumb is touching a log.

회전 제스처에 대 한 두 개의 초기 터치 지점이 표시 된 이미지입니다.image showing the two initial touch points for the rotation gesture. 이 두 번째 그림에서는 초기 (엄지) 터치 지점을 중심으로 회전이 수행 됩니다.In this second picture, rotation is performed around the initial (thumb) touch point. 회전 후에도 인덱스 손가락은 여전히 트리 트렁크에 접촉 하 고 있으며, 엄지 단추는 로그 (회전 지점)에 계속 접촉 하 고 있습니다.After the rotation, the index finger is still touching the tree trunk and the thumb is still touching the log (the rotation point).

두 초기 터치 포인트 중 하나로 제한 된 회전 지점을 사용 하 여 회전 된 그림을 보여 주는 이미지입니다.image showing a rotated picture with the rotation point constrained to one of the two initial touch points. 이 세 번째 그림에서 회전 중심은 응용 프로그램 (또는 사용자가 설정한)에서 그림의 중심점으로 정의 되었습니다.In this third picture, the center of rotation has been defined by the application (or set by the user) to be the center point of the picture. 회전 후에는 사진이 손가락 중 하나를 중심으로 회전 하지 않으므로 사용자가이 설정을 선택 하지 않은 경우 직접 조작의 효과는 중단 됩니다.After the rotation, because the picture did not rotate around one of the fingers, the illusion of direct manipulation is broken (unless the user has chosen this setting).

두 초기 터치 점이 아니라 그림의 중심으로 제한 된 회전 지점을 사용 하 여 회전 된 그림을 보여 주는 이미지입니다.image showing a rotated picture with the rotation point constrained to the center of the picture rather than either of the two initial touch points. 이 마지막 그림에서 회전 중심은 응용 프로그램 (또는 사용자가 설정한)에 의해 그림의 왼쪽 가장자리 가운데에 있는 지점이 되도록 정의 되었습니다.In this last picture, the center of rotation has been defined by the application (or set by the user) to be a point in the middle of the left edge of the picture. 사용자가이 설정을 선택 하지 않은 경우에도이 경우 직접 조작의 효과는 중단 됩니다.Again, unless the user has chosen this setting, the illusion of direct manipulation is broken in this case.

두 초기 접촉 지점이 아닌 그림의 가장 왼쪽 중심으로 제한 되는 회전 지점을 표시 하는 이미지입니다.

 

Windows 10은 사용 가능, 제한 및 결합의 세 가지 회전 유형을 지원 합니다.Windows 10 supports three types of rotation: free, constrained, and combined.

TypeType 설명Description
무료 회전Free rotation

무료 회전을 사용 하면 사용자가 360 수준 원호의 어디에서 나 자유롭게 콘텐츠를 회전할 수 있습니다. 사용자가 개체를 해제할 때 개체는 선택한 위치에 유지 됩니다.Free rotation enables a user to rotate content freely anywhere in a 360 degree arc. When the user releases the object, the object remains in the chosen position. 무료 회전은 Microsoft PowerPoint, Word, Visio 및 그림판과 같은 응용 프로그램의 그리기 및 레이아웃에 유용 합니다. 및 Adobe Photoshop, Illustrator 및 Flash가 있습니다.Free rotation is useful for drawing and layout applications such as Microsoft PowerPoint, Word, Visio, and Paint; and Adobe Photoshop, Illustrator, and Flash.

제한 된 회전Constrained rotation

제한 된 회전은 조작 중에는 자유 회전을 지원 하지만 릴리스 시 90 수준 증분 (0, 90, 180 및 270)에는 맞춤 지점을 적용 합니다.Constrained rotation supports free rotation during the manipulation but enforces snap points at 90 degree increments (0, 90, 180, and 270) upon release. 사용자가 개체를 놓으면 개체가 가장 가까운 맞춤 지점으로 자동으로 회전 합니다.When the user releases the object, the object automatically rotates to the nearest snap point.

제한 된 회전은 가장 일반적인 회전 방법으로, 콘텐츠를 스크롤 하는 것과 비슷한 방식으로 작동 합니다.Constrained rotation is the most common method of rotation, and it functions in a similar way to scrolling content. 맞춤선을 사용 하면 사용자가 정확 하지 않고 여전히 목표를 달성할 수 있습니다.Snap points let a user be imprecise and still achieve their goal. 제한 된 회전은 웹 브라우저 및 사진 앨범 같은 응용 프로그램에 유용 합니다.Constrained rotation is useful for applications such as web browsers and photo albums.

결합 된 회전Combined rotation

결합 된 회전은 제한 된 회전에 의해 적용 되는 각각의 90 방향 맞춤 지점에서 영역 (이동 에 대 한 지침의 레일과 유사)으로 사용 가능한 회전을 지원 합니다.Combined rotation supports free rotation with zones (similar to rails in Guidelines for panning) at each of the 90 degree snap points enforced by constrained rotation. 사용자가 90도 영역 중 하나를 벗어난 개체를 해제 하는 경우 개체는 해당 위치에 유지 됩니다. 그렇지 않으면 개체가 자동으로 맞춤 지점으로 회전 합니다.If the user releases the object outside of one of 90 degree zones, the object remains in that position; otherwise, the object automatically rotates to a snap point.

참고    사용자 인터페이스 레일은 목표 영역에서 특정 값 이나 위치에 대 한 움직임을 제한 하 여 선택에 영향을 주는 기능입니다. Note  A user interface rail is a feature in which an area around a target constrains movement towards some specific value or location to influence its selection.
 

샘플Samples

보관 샘플Archive samples