이동에 대한 지침

Applies to Windows and Windows Phone

사용자는 이동 또는 스크롤을 통해 단일 보기 내에서 탐색하여 뷰포트 내에 맞지 않는 보기의 콘텐츠를 표시할 수 있습니다. 보기의 예로는 컴퓨터의 폴더 구조, 문서의 라이브러리 또는 사진 앨범이 있습니다.

앱 기능 전체 프로세스 시리즈의 일부로 이 기능의 작동 방법을 살펴보세요.:  사용자 조작: 터치식 입력... 등

권장 사항 및 금지 사항

이동 표시기 및 스크롤 막대

  • 콘텐츠를 앱에 로드하기 전에 이동/스크롤이 가능한지 확인합니다.

  • 위치 및 크기 신호를 제공하기 위해 이동 표시기와 스크롤 막대를 표시합니다. 사용자 지정 탐색 기능을 제공하는 경우에는 이동 표시기와 스크롤 막대를 숨깁니다.

    참고  표준 스크롤 막대와 달리 이동 표시기는 정보 제공 용도로만 사용됩니다. 입력 장치에 노출되지 않으며 어떤 방식으로도 조작할 수 없습니다.

단일 축 이동(1차원 오버플로)

  • 하나의 뷰포트 경계(세로 또는 가로)를 넘어가는 콘텐츠 영역에는 단일 축 이동을 사용합니다.

    • 1차원 항목 목록에는 세로 이동을 사용합니다.
    • 항목 그리드에는 가로 이동을 사용합니다.
  • 사용자가 끌기 지점 간을 이동하고 중지할 수 있어야 하는 경우에는 단일 축 이동에 필수 끌기 지점을 사용하지 마세요. 필수 끌기 지점은 사용자가 끌기 지점에서 중지하도록 합니다. 대신 근접 끌기 지점을 사용하세요.

자유형 이동(2차원 오버플로)

  • 두 뷰포트 경계(세로 또는 가로)를 모두 넘어가는 콘텐츠 영역에는 2축 이동을 사용합니다.

    • 사용자가 여러 방향으로 이동할 가능성이 큰 구조화되지 않은 콘텐츠의 경우 기본 이동 경로 동작을 무시하고 자유형 이동을 사용합니다.
  • 일반적으로 자유형 이동은 이미지나 지도 내에서 탐색하는 데 적합합니다.

페이지 보기

  • 콘텐츠가 별도의 요소로 구성되어 있거나 전체 요소를 표시하려는 경우에는 필수 끌기 지점을 사용합니다. 책이나 잡지 페이지, 항목 열 또는 개별 이미지가 여기에 포함될 수 있습니다.

    • 각 논리 범위에 끌기 지점이 있어야 합니다.
    • 각 요소의 크기를 보기에 맞게 조정해야 합니다.

논리적 및 핵심 사항

  • 사용자가 멈출 가능성이 큰 핵심 사항이나 논리적 위치가 콘텐츠에 있는 경우에는 근접 끌기 지점을 사용합니다. 예를 들어 섹션 헤더 등이 있습니다.

  • 최대 및 최소 크기 제약 조건이나 경계가 정의된 경우 사용자가 해당 경계에 도달하면 표시할 시각적 피드백을 사용합니다.

포함 또는 중첩된 콘텐츠 변경

  • 텍스트 및 그리드 기반 콘텐츠에 단일 축 이동(일반적으로 가로) 및 열 레이아웃을 사용합니다. 이러한 경우 콘텐츠는 일반적으로 래핑되고 열 사이에서 자연스럽게 흐르며 Windows 스토어 앱에서 사용자 환경을 일관되고 검색 가능하도록 유지합니다.

  • 포함된 이동 가능 영역을 사용하여 텍스트나 항목 목록을 표시하지 않습니다. 이동 표시기 및 스크롤 막대는 영역 내에서 입력 접촉이 감지되는 경우에만 표시되므로 직관적이거나 검색 가능한 사용자 환경이 아닙니다.

  • 다음 그림과 같이 두 이동 가능 영역이 같은 방향으로 이동하는 경우에는 체인으로 연결하거나 다른 이동 가능 영역 내부에 포함하지 마세요. 이렇게 하면 자식 영역의 경계에 도달할 때 부모 영역이 의도치 않게 이동될 수 있습니다. 이동 축을 수직으로 지정하는 것을 고려하세요.

    컨테이너와 같은 방향으로 스크롤되는 포함된 이동 가능 영역을 보여 주는 이미지

추가 사용법 지침

터치를 사용하여 이동(하나 이상의 손가락으로 살짝 밀기 또는 밀기 제스처 사용)하는 것은 마우스를 사용하여 스크롤하는 것과 같습니다. 이동 조작 방식은 스크롤 막대를 클릭하는 것보다는 마우스 휠을 회전하거나 스크롤 상자를 미는 것과 가장 유사합니다. API에서 구분되거나 일부 장치별 Windows UI에 필요한 경우가 아니면 두 조작을 모두 이동으로 간주합니다.

입력 장치에 따라 사용자는 다음 중 하나를 사용하여 이동 가능한 영역 내에서 이동합니다.

  • 마우스, 터치 패드 또는 액티브 펜/스타일러스를 사용하여 스크롤 화살표를 클릭하거나 스크롤 상자를 끌거나 스크롤 막대 안을 클릭합니다.
  • 마우스 휠 단추를 사용하여 스크롤 상자 끌기를 에뮬레이트합니다.
  • 마우스가 지원하는 경우 확장된 단추(XBUTTON1 및 XBUTTON2)를 사용합니다.
  • 키보드 화살표 키를 사용하여 스크롤 상자 끌기를 에뮬레이트하거나 페이지 키를 사용하여 스크롤 막대 내부 클릭을 에뮬레이트합니다.
  • 터치, 터치 패드 또는 패시브 펜/스타일러스를 사용하여 손가락을 원하는 방향으로 밀거나 살짝 밉니다.

밀기는 손가락을 이동 방향으로 천천히 움직이는 것과 관련 있습니다. 이때 일대일 관계가 형성되어 콘텐츠가 손가락과 같은 속도 및 거리로 이동합니다. 살짝 밀기는 손가락을 빠르게 밀었다 떼는 것으로, 이때는 이동 애니메이션에 다음과 같은 물리학이 적용됩니다.

  • 감속(관성): 손가락을 들면 이동 속도가 느려집니다. 이 동작은 매끄러운 화면을 미끄러지다가 멈추는 것과 비슷합니다.
  • 흡수: 감속 중 이동 가속도로 인해 끌기 지점이나 콘텐츠 영역 범위에 도달하면 약간 뒤로 튀는 효과가 발생합니다.

이동 유형

Windows 8에서는 다음 세 가지 이동 유형을 지원합니다.

  • 단일 축 - 한 방향(가로 또는 세로)에서만 이동이 지원됩니다.
  • 이동 경로 - 모든 방향에서 이동이 지원됩니다. 그러나 사용자가 특정 방향에서 거리 임계값을 넘으면 이동이 해당 축으로 제한됩니다.
  • 자유형 - 모든 방향에서 이동이 지원됩니다.

이동 UI

이동 조작 환경은 유사한 기능을 제공하지만 입력 장치에 고유합니다.

이동 가능 영역

이동 가능 영역 동작은 CSS 스타일시트를 통해 디자인 타임에 JavaScript로 작성한 Windows 스토어 앱 개발자에게 노출됩니다.

검색된 입력 장치에 따라 다음 두 가지 이동 표시 모드가 있습니다.

  • 터치의 이동 표시기
  • 마우스, 터치 패드, 키보드 및 스타일러스를 비롯한 다른 입력 장치에 대 한 스크롤 막대입니다.

참고  이동 표시기는 터치 접촉이 이동 가능 영역 내에 있을 때만 표시됩니다. 마찬가지로, 스크롤 막대도 마우스 커서, 펜/스타일러스 커서 또는 키보드 포커스가 이동 가능 영역 내에 있을 때만 표시됩니다.

이동 표시기

이동 표시기는 스크롤 막대의 스크롤 상자와 비슷합니다. 이 표시기는 전체 이동 가능 영역에 대한 표시된 콘텐츠의 비율과 이동 가능 영역에서 표시된 콘텐츠의 상대적 위치를 나타납니다.

다음 다이어그램은 길이가 다른 두 개의 이동 가능 영역과 이동 표시기를 보여 줍니다.

길이가 다른 두 개의 이동 가능 영역과 이동 표시기를 보여 주는 이미지

이동 동작
끌기 지점

살짝 밀기 제스처를 사용하여 이동할 경우 터치 접촉을 들 때 관성 동작이 조작에 도입됩니다. 관성을 사용하면 사용자의 직접 입력 없이 일정한 거리 임계값에 도달할 때까지 콘텐츠가 계속 이동합니다. 끌기 지점을 사용하여 이 관성 동작을 수정할 수 있습니다.

끌기 지점은 앱 콘텐츠에 논리적 멈춤을 지정합니다. 인식적으로, 끌기 지점은 사용자를 위한 페이징 메커니즘 역할을 하며 큰 이동 가능 영역에서 과도한 밀기나 살짝 밀기로 인한 피로를 최소화합니다. 끌기 지점을 통해 사용자 입력을 처리하고 콘텐츠나 키 정보의 특정 하위 집합이 뷰포트에 표시되도록 할 수 있습니다.

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

  • 근접 - 접촉을 뗀 후 끌기 지점의 거리 임계값 내에서 관성이 멈추면 끌기 지점이 선택됩니다. 근접 끌기 지점 사이에서 이동이 멈출 수도 있습니다.
  • 필수 - 제스처의 방향과 속도에 따라 접촉을 떼기 전에 마지막으로 교차한 끌기 지점 바로 앞이나 뒤에 있는 끌기 지점이 선택됩니다. 필수 끌기 지점에서 이동이 멈추어야 합니다.

이동 끌기 지점은 웹 브라우저 및 사진 앨범과 같이 페이지가 매겨진 콘텐츠를 에뮬레이트하거나 뷰포트 또는 화면에 맞도록 동적으로 다시 그룹화될 수 있는 논리적인 항목 그룹이 있는 응용 프로그램에 유용합니다.

다음 다이어그램은 특정 지점으로 이동했다가 뗄 경우 콘텐츠가 자동으로 논리적 위치로 이동되는 방식을 보여 줍니다.

이동 가능 영역을 보여 주는 이미지이동 가능 영역이 왼쪽으로 이동되는 모습을 보여 주는 이미지논리적 끌기 지점에서 이동이 중지된 이동 가능 영역을 보여 주는 이미지
살짝 밀어 이동합니다.터치 접촉을 들어 올립니다.이동 가능 영역은 터치 접촉을 들어 올린 위치가 아니라 끌기 지점에서 멈춥니다.

 

이동 경로

콘텐츠가 디스플레이 장치의 치수와 해상도보다 더 넓고 클 수 있습니다. 따라서 2차원 이동(가로 및 세로)이 필요한 경우가 많습니다. 이러한 경우 레일은 동작 축을 따라 이동(세로 또는 가로)을 강조하여 사용자 환경을 향상시킵니다.

다음 다이어그램에서는 이동 경로의 개념을 보여 줍니다.

이동을 제한하는 이동 경로가 있는 화면의 다이어그램

포함 또는 중첩된 콘텐츠 변경

사용자가 다른 확대/축소 가능 요소 또는 스크롤 가능 요소 안에 중첩된 요소에 대한 확대/축소 또는 스크롤 한계에 도달할 경우 하위 요소에서 시작된 상위 요소가 확대/축소 또는 스크롤 작업을 상위 요소가 계속해야 할지 여부를 지정할 수 있습니다. 이것을 확대/축소 또는 스크롤 체인이라고 합니다.

체인 연결은 하나 이상의 단일 축 또는 자유형 이동 영역을 포함하는 단일 축 콘텐츠 영역 내에서 이동하는 데 사용됩니다(터치 접촉이 이러한 자식 영역 중 하나에서 이루어지는 경우). 특정 방향으로 자식 영역의 이동 경계에 도달하면 같은 방향의 부모 영역에서 이동이 활성화됩니다.

하나의 이동 가능 영역이 다른 이동 가능 영역 안에 중첩되는 경우 컨테이너와 포함된 콘텐츠 사이에 충분한 공간을 지정하는 것이 중요합니다. 다음 다이어그램에서는 하나의 이동 가능 영역이 다른 이동 가능 영역 내에 위치하며 각 영역의 이동 방향은 수직입니다. 각 영역에서 사용자가 이동할 수 있는 공간은 충분합니다.

포함된 이동 가능 영역을 보여 주는 이미지

다음 다이어그램처럼 충분한 공간이 없으면 포함된 이동 가능 영역이 컨테이너 내의 이동을 방해하여 하나 이상의 이동 가능 영역에서 의도하지 않은 이동이 발생할 수 있습니다.

포함된 이동 가능 영역을 위한 충분한 여백이 없는 경우를 보여 주는 이미지

이 지침은 앨범(이전 또는 다음 이미지로 이동) 또는 세부 정보 영역 내에서 단일 축 이동을 지원하는 동시에 개별 이미지나 지도 내에서 제약 없는 이동을 지원하는 사진 앨범이나 지도 앱 같은 앱에도 유용합니다. 자유형 이동 이미지나 지도에 해당하는 세부 정보 또는 옵션 영역을 제공하는 앱에서는 이미지나 지도의 제약 없는 이동 영역이 세부 정보 영역으로의 이동을 방해할 수 있으므로 페이지 레이아웃을 세부 정보 및 옵션 영역으로 시작하는 것이 좋습니다.

관련 항목

디자이너용
일반적인 사용자 조작에 대한 지침
마우스 조작에 응답
키보드 조작에 응답
터치 조작 디자인
개발자용(HTML)
빠른 시작: 포인터
빠른 시작: DOM 제스처 및 조작
빠른 시작: 정적 제스처
빠른 시작: 조작 제스처
키보드 접근성 구현
개발자용(XAML)
효율적으로 큰 데이터 집합 로드, 저장 및 표시
GridView 및 ListView 항목의 증분 업데이트
GridView 및 ListView 컨트롤을 사용하여 앱의 시작 시간 단축
빠른 시작: 터치식 입력
빠른 시작: 포인터 입력 처리
키보드 접근성 구현
개발자용(DirectX 및 C++로 작성한 Windows 런타임 앱)
터치 입력에 응답(DirectX 및 C++)
샘플(DOM)
HTML 스크롤, 이동 및 확대/축소 샘플
입력: 인스턴스화 가능한 제스처 샘플
샘플(Windows 스토어 앱 API)
입력: 조작 및 제스처(JavaScript) 샘플
입력: Windows 8 제스처 샘플
입력: XAML 사용자 입력 이벤트 샘플
XAML 스크롤, 이동 및 확대/축소 샘플
샘플(DirectX)
DirectX 터치 입력 샘플
입력: 조작 및 제스처(C++) 샘플

 

 

표시:
© 2014 Microsoft