페이지에서 찾기
콘텐츠의 테이블 축소
콘텐츠의 테이블 확장

페이지에서 찾기에 대한 지침

페이지에서 찾기를 사용하면 사용자가 현재 본문에서 텍스트 일치 항목을 찾을 수 있습니다. 문서 뷰어, 판독기 및 브라우저는 페이지에서 찾기 기능을 제공하는 가장 일반적인 앱입니다.

권장 사항

  • 사용자가 페이지에 있는 텍스트를 검색할 수 있도록 해주는 페이지에서 찾기 기능이 있는 앱에 명령 모음을 배치합니다. 배치 세부 정보는 예제 섹션을 참조하세요.

    • 페이지에서 찾기 기능을 제공하는 앱의 경우 필요한 모든 컨트롤이 명령 모음에 있어야 합니다.
    • 페이지에서 찾기 기능을 벗어나는 많은 기능이 앱에 포함되어 있는 경우 페이지에서 찾기 컨트롤을 모두 포함하는 다른 명령 모음에 대한 진입점으로 찾기 단추를 최상위 명령 모음에 제공할 수 있습니다.
    • 페이지에서 찾기 명령 모음은 사용자가 터치 키보드를 사용하여 조작하는 경우에도 계속 표시되어야 합니다. 터치 키보드는 사용자가 입력 상자를 탭할 때 나타납니다. 이때 터치 키보드로 가려지지 않도록 페이지에서 찾기 명령 모음을 위로 이동해야 합니다.

    • 페이지에서 찾기는 사용자가 보기에 연결하는 동안 사용 가능한 상태로 유지되어야 합니다. 사용자는 페이지에서 찾기를 사용하는 동안 보기 내 텍스트에 연결해야 합니다. 예를 들어 사용자는 문서를 확대 또는 축소하거나, 보기를 이동하여 텍스트를 읽을 수도 있습니다. 사용자가 페이지에서 찾기 사용을 시작하고 나면 명령 모음에서 페이지에서 찾기를 종료할 수 있도록 닫기 단추를 사용할 수 있어야 합니다.

    • 바로 가기 키(CTRL+F)를 사용하도록 설정하세요. 바로 가기 키 CTRL+F를 구현하여 사용자가 페이지에서 찾기 명령 모음을 신속하게 호출할 수 있도록 하세요.

    • 페이지에서 찾기 기능을 포함하세요. 페이지에서 찾기를 구현하기 위해 필요한 UI 요소는 다음과 같습니다.

      • 입력 상자
      • 이전 및 다음 단추
      • 일치 항목 수
      • 닫기(데스크톱 전용)
    • 보기에서는 일치 항목이 강조 표시되어야 하며 화면에서 그 다음 일치 항목이 표시되도록 스크롤할 수 있어야 합니다. 사용자는 이전다음 단추를 사용하고, 터치를 사용하는 직접 조작 또는 스크롤 막대를 사용하여 문서를 신속하게 이동할 수 있습니다.

    • 찾기-바꾸기 기능은 기본적인 페이지에서 찾기 기능과 함께 작동해야 합니다. 찾기-바꾸기 기능이 있는 앱의 경우 페이지에서 찾기가 찾기-바꾸기 기능과 연결되지 않는지 확인하세요.

  • 페이지에 있는 텍스트 일치 항목 수를 사용자에게 표시하는 일치 항목 카운터를 포함하세요.
  • 바로 가기 키(CTRL+F)를 사용하도록 설정하세요.

예제

페이지에서 찾기 기능에 액세스하는 간편한 방법을 제공합니다. 모바일 UI의 이 예제에서는 확장 가능한 메뉴에서 두 개의 "...에 추가" 명령 후 "페이지에서 찾기"가 표시됩니다.

페이지에서 찾기 예제 1

 

페이지에서 찾기를 선택한 후 사용자가 검색어를 입력합니다. 검색어를 입력할 때 텍스트 제안이 표시될 수 있습니다.

페이지에서 찾기 예제 2

 

검색에서 일치하는 텍스트가 없는 경우 "결과 없음" 텍스트 문자열이 결과 상자에 표시됩니다.

페이지에서 찾기 예제 3

 

검색에서 일치하는 텍스트가 있는 경우 첫 번째 용어가 뚜렷한 색상으로 강조 표시되고 이후의 일치 항목은 이 예제와 같이 같은 색상표의 보다 은은한 색조로 강조 표시됩니다.

페이지에서 찾기 예제 4

 

페이지에서 찾기에는 일치 항목 카운터가 있습니다.

페이지에서 찾기 검색 카운터의 예

추가 사용법 지침

페이지에서 찾기 구현

  • 페이지에서 찾기를 제공하는 앱 유형과 마찬가지로 사용자는 문서 뷰어, 판독기 및 브라우저를 통해 전체 화면을 보고 읽을 수 있습니다.
  • 페이지에서 찾기 기능은 보조 기능으로 명령 모음에 위치해 있어야 합니다.

명령 모음에 명령을 추가하는 방법에 대한 자세한 내용은 빠른 시작: 명령 모음 추가를 참조하세요.

[이 문서에는 UWP(유니버설 Windows 플랫폼) 앱 및 Windows 10과 관련된 정보가 있습니다. Windows 8.1 참고 자료는 Windows 8.1 지침 PDF 를 다운로드하세요.]

관련 항목

디자이너용
텍스트 및 이미지 선택을 사용하지 않는 방법
검색에 대한 지침
개발자용(HTML)
빠른 시작: 명령 모음 추가

 

 

표시:
© 2017 Microsoft