텍스트 및 이미지 선택

이 문서에서는 텍스트, 이미지 및 컨트롤을 선택하고 조작하는 방법을 설명하고 앱에서 이러한 메커니즘을 사용할 때 고려해야 할 사용자 환경 지침을 제공합니다.

중요 API: Windows.UI.Xaml.Input, Windows.UI.Input

권장 사항 및 금지 사항

  • 고유한 위치 조정 막대 UI를 구현하는 경우 글꼴 문자 모양을 사용합니다. 위치 조정 막대는 시스템 전체에서 사용할 수 있는 두 가지 Segoe UI 글꼴의 조합입니다. 글꼴 리소스를 사용하면 여러 dpi에서 렌더링 문제가 간소화되며 다양한 UI 크기 조정에서도 제대로 작동합니다. 고유한 위치 조정 막대를 구현하는 경우 다음 UI 특성을 공유해야 합니다.

    • 원형 모양
    • 모든 배경에서 표시
    • 일관된 크기
  • 위치 조정 막대 UI가 포함되도록 선택 가능한 콘텐츠 주위에 여백을 제공합니다. 앱이 이동/스크롤되지 않는 영역에서 텍스트 선택을 사용하도록 설정할 경우 다음 그림과 같이 텍스트 영역의 왼쪽 및 오른쪽에 1/2 위치 조정 막대 여백과 텍스트 영역의 위쪽 및 아래쪽에 1 위치 조정 막대 높이를 허용합니다. 이렇게 하면 전체 위치 조정 막대 UI가 사용자에게 표시되며 다른 가장자리 기반 UI의 무인 조작이 최소화됩니다.

    text selection gripper margins

  • 조작 중에 위치 조정 막대 UI를 숨깁니다. 조작 중에 위치 조정 막대에 의한 폐색을 제거합니다. 이 기능은 위치 조정 막대가 손가락으로 완전히 가려지지 않았거나 텍스트 선택 위치 조정 막대가 여러 개 있는 경우에 유용합니다. 따라서 자식 창을 표시할 때 시각적 아티팩트가 제거됩니다.

  • 컨트롤, 레이블, 이미지, 소유 콘텐츠 등의 UI 요소를 선택할 수 없게 합니다. 일반적으로 Windows 애플리케이션은 특정 컨트롤 내에서만 선택을 허용합니다. 단추, 레이블, 로고 등의 컨트롤은 선택할 수 없습니다. 앱에서 선택 작업이 중요한지 평가하고 중요한 경우 선택이 금지되어야 하는 UI 영역을 식별합니다.

추가 사용법 지침

텍스트 선택 및 조작은 터치 조작으로 인해 발생하는 사용자 환경 문제에 특히 영향을 미칠 수 있습니다. 마우스, 펜/스타일러스 및 키보드 입력은 고도로 세분화되어 있습니다. 마우스 클릭이나 펜/스타일러스 접촉은 일반적으로 단일 픽셀에 매핑되고 키는 누른 상태 또는 누르지 않은 상태가 됩니다. 그렇지만 터치식 입력은 세분화되어 있지 않습니다. 한 손가락의 전체 표면을 화면의 특정 x-y 위치에 매핑시켜 텍스트 캐럿을 정확히 배치하는 것은 어려운 일입니다.

고려 사항 및 권장 지침

Windows의 언어 프레임워크를 통해 표시된 기본 제공 컨트롤을 사용하여 선택 및 조작 동작을 비롯한 전체 플랫폼 사용자 조작 환경을 제공하는 앱을 빌드합니다. 기본 제공 컨트롤의 조작 기능은 대부분의 Windows 앱에서 충분히 작동합니다.

표준 Windows 텍스트 컨트롤을 사용할 경우에는 이 항목에 설명된 선택 동작 및 시각 효과를 사용자 지정할 수 없습니다.

텍스트 선택

텍스트 선택을 지원하는 사용자 지정 UI가 앱에 필요한 경우 여기에 설명된 Windows 선택 동작을 따르는 것이 좋습니다.

편집 가능 및 편집 불가능 콘텐츠

터치를 사용할 경우 선택 조작은 주로 삽입 커서를 설정하거나 단어를 선택하기 위한 탭하기, 선택 영역을 수정하기 위한 밀기 등의 제스처를 통해 수행됩니다. 다른 Windows 터치 조작과 마찬가지로 시간이 제한된 조작은 정보 UI를 표시하는 길게 누르기 제스처로 제한됩니다. 자세한 내용은 시각적 피드백에 대한 지침을 참조하세요.

Windows에서는 선택 조작에 대해 가능한 두 가지 상태인 편집 가능 및 편집 불가능 상태를 인식하고 그에 따라 선택 UI, 피드백 및 기능을 조정합니다.

편집 가능 콘텐츠

단어의 왼쪽 절반에서 탭하면 단어 바로 왼쪽에 커서가 배치되고, 오른쪽 절반에서 탭하면 단어 바로 오른쪽에 커서가 배치됩니다.

다음 이미지는 단어 맨 처음이나 끝 부분을 탭하여 위치 조정 막대가 있는 초기 삽입 커서를 배치하는 방법을 보여 줍니다.

tap (or press and hold) left side of a word to place a caret and gripper at the beginning of that word. tap (or press and hold) the right side of a word to place a caret and gripper at the end of that word.

다음 이미지는 위치 조정 막대를 끌어 선택을 조정하는 방법을 보여 줍니다.

drag the gripper in either direction to adjust selection (the first gripper remains anchored and a second gripper is displayed). drag either gripper to make subsequent adjustments.

다음 이미지는 선택 영역 내부나 위치 조정 막대를 탭하여 상황에 맞는 메뉴를 호출하는 방법을 보여 줍니다(길게 누르기를 사용할 수도 있음).

tap (or press and hold) within the selection or on a gripper to invoke the context menu.

참고 철자가 틀린 단어의 경우에는 이러한 조작이 다소 다르게 진행됩니다. 철자가 틀린 것으로 표시된 단어를 탭하면 전체 단어가 강조 표시되고 제안되는 맞춤법 상황에 맞는 메뉴가 호출됩니다.

 

편집 불가능 콘텐츠

다음 이미지는 단어 내부를 탭하여 단어를 선택하는 방법을 보여 줍니다(초기 선택에는 공백이 포함되지 않음).

tap within a word to select it (no spaces are included in the initial selection).

편집 가능 텍스트에 대해서도 동일한 절차에 따라 선택을 조정하고 상황에 맞는 메뉴를 표시합니다.

개체 조작

가능한 경우 Windows 앱에서 사용자 지정 개체 조작을 구현할 때 텍스트 선택과 동일한(또는 유사한) 위치 조정 막대 리소스를 사용합니다. 이렇게 하면 플랫폼 전체에서 일관된 조작 환경을 제공할 수 있습니다.

예를 들어 크기 조정 및 자르기를 지원하는 이미지 처리 앱이나 조정 가능한 진행률 표시줄을 제공하는 미디어 플레이어 앱에서 위치 조정 막대를 다음 그림과 같이 사용할 수도 있습니다.

media player with progress gripper

조정 가능한 진행률 표시줄이 있는 미디어 플레이어입니다.

image with crop grippers

자르기 위치 조정 막대가 있는 이미지 편집기입니다.

개발자용

샘플

보관 샘플