포인터 상호작용

데스크톱 사용자는 마우스나 터치패드와 같은 포인터 기기를 사용하여 앱과 상호작용합니다. 최적의 데스크톱 환경을 위해 마우스 오버, 스크롤, 기본 클릭, 보조 클릭과 같은 주요 포인터 이벤트를 지원하세요.

데스크톱 입력에 맞게 조정할 때 고려사항

  1. 기존 시스템에 마우스 오버 상태와 상호작용을 추가합니다.
  2. 효율성을 높이기 위해 마우스 오른쪽 버튼 클릭 상호작용을 고려합니다.
  3. 타겟의 크기가 더 정확해야 합니다.

기본 클릭

기본 클릭(대부분의 경우 왼쪽 클릭)은 데스크톱 사용자가 사용하는 기본 커서 상호작용입니다. 일반적으로 사용자는 기본 클릭만으로 모든 기본 사용자 여정을 완료할 수 있어야 합니다. 기본 클릭에서 기능을 숨기지 않는 것은 검색 가능성 측면에서 좋을 뿐만 아니라 스위치 액세스와 같은 지원 기술에도 중요합니다.

보조 클릭

터치 상호작용은 길게 누르기에 의존하지만 데스크톱 사용자는 마우스 오른쪽 버튼 클릭이나 트랙패드에서 두 손가락으로 탭하는 것과 같은 보조 클릭 시 컨텍스트 메뉴가 표시되기를 기대합니다. 최적의 데스크톱 환경을 위해 앱이 길게 클릭하지 않아도 보조 클릭으로 컨텍스트 메뉴를 트리거하도록 구성하세요.

카드를 마우스 오른쪽 버튼으로 클릭하여 더 많은 옵션이 있는 컨텍스트 메뉴 표시
카드를 마우스 오른쪽 버튼으로 클릭하여 더 많은 옵션이 있는 컨텍스트 메뉴를 표시합니다.

마우스 오버

커서 아이콘 변경 외에도 마우스를 가져갈 때 요소의 시각적 상태를 변경하여 상호작용을 나타낼 수도 있습니다. 디자인 안내는 상태에서 자세히 알아보세요.

마우스 오버를 통해 팁이나 컨텍스트 메뉴 또는 더보기 메뉴에 중첩된 목록 작업과 같은 보충 정보나 작업을 표시할 수도 있습니다.

여기서는 마우스 오버를 사용하여 도움말에 추가 정보와 더 많은 상호작용을 표시합니다.
여기서는 마우스 오버를 사용하여 도움말에 추가 정보와 더 많은 상호작용을 표시합니다.

드래그 앤 드롭

터치 스크린에서는 스크롤을 위해 한 손가락 스와이프가 예약되어 있으므로 드래그하려면 길게 누르기가 필요합니다. 스크롤 휠이나 터치패드에서 두 손가락 스와이프와 같은 전용 스크롤 메서드가 있는 포인터 기기를 사용하면 클릭 후 드래그가 즉시 이루어져야 합니다.

대체 상호작용으로 드래그 가능한 카드.

선택

전용 클릭 타겟을 제공하여 데스크톱 환경의 선택 상호작용을 간소화합니다.

선택 옵션을 표시하기 위해 길게 터치하는 대신 데스크톱에서는 마우스를 가져가면 체크박스가 표시됩니다.

대상 크기

커서 상호작용을 위해 UI 요소의 크기를 조정할 때는 지나치게 크거나 요소의 시각적 경계를 벗어나는 내장 터치 타겟이 있는 버튼을 피하세요.

포인터 기기를 사용할 때 버튼과 타겟의 최대 너비를 설정합니다.
버튼이 전체 너비로 확장되거나 내재된 터치 타겟을 유지하도록 허용

포인터 타겟은 표준 48x48dp 터치 타겟보다 작을 수 있습니다. 예를 들어 항목을 선택한 후에 주로 표시되는 마우스 오버 시 보관과 같은 대체 커서 상호작용의 경우입니다.

입력 디자인에 관한 자세한 내용은 Material Design 입력을 참고하세요. 마우스 및 터치패드 지원으로 구현하는 방법을 알아보세요.