입력 장치별 인터랙션의 차이

구글이 정의하는 입력 장치의 종류

다양한 종류의 입력 장치

기기의 입력 장치 (Inputs for devices)

입력 장치(Inputs)란 사용자의 행동(터치, 클릭, 키 입력, 제스처 등)을 기기가 이해할 수 있는 신호로 변환해주는 장치입니다.

사용자는 휴대전화, 태블릿, 폴더블, TV, 노트북, 데스크톱 컴퓨터에서 마우스, 키보드, 트랙 패드와 같은 외부 입력 장치를 사용할 수 있습니다. 외부 입력 장치를 기기에 연결하면, 사용자는 익숙하고 유용한 방식으로 동작하기를 기대합니다.

다양한 입력 방식을 고려한 디자인을 통해 모든 화면 크기에서 사용성과 접근성이 향상시킬 수 있습니다. 이번 글에서는 입력 장치의 종류와 입력 장치별 인터랙션에 대해 알아보겠습니다. 입력 장치를 알아보기 전, 제스처와 관련해서는 아래 글에서 확인하실 수 있습니다.

14화 터치 제스처 종류 싹 다 파헤치기

---

마우스, 트랙패드, 물리 키보드

외부 입력 장치의 일반적 특징

외부 입력 장치는 다음과 같이 크게 세 가지의 특징으로 분류할 수 있습니다.

1️⃣ 마우스: 왼쪽/오른쪽 클릭, 마우스 휠, 추가 버튼

2️⃣ 트랙패드: 왼쪽/오른쪽 클릭, 제스처, 촉각 피드백

3️⃣ 물리 키보드: 가상 키보드를 대체, 미디어 키, 조합 키(Modifier keys)

---

입력 장치의 동작(좌)과 예상되는 행동(우)

입력 장치의 동작

입력 장치에 따라 디자이너와 개발자는 일반적으로 통용되는 방식과 사용자 기대에 맞는 동작을 구현할 수 있습니다.

---

마우스와 커서 상호작용

외부 마우스 입력 장치를 사용할 때는 기기 종류와 관계없이 마우스 커서를 표시해야 합니다. 마우스는 태블릿, 노트북, 휴대전화, 폴더블 등 다양한 기기에 연결될 수 있습니다.

일부 기기에서는 외부 입력 장치와 터치 입력을 동시에 사용할 수 있습니다. 마우스나 스타일러스(펜 형태의 입력도구) 입력을 별도로 인식하지 않는 기기에서는 마우스를 터치 입력으로 처리합니다.

외부 입력 장치가 연결되면 마우스 커서가 화면에 표시됩니다.

기본 클릭(Primary click)

마우스 클릭이나 스타일러스 탭은 터치 입력과 동일한 피드백을 제공해야 합니다. 예를 들어, 눌린 상태를 나타내기 위해 리플 효과를 표시하는 방식이 있습니다.

---

보조 클릭(Secondary click)

컨텍스트 메뉴는 마우스나 트랙패드로 오른쪽 클릭을 했을 때 나타나야 합니다.

컨텍스트 메뉴

보조 클릭은(단일 버튼 사용이든 트랙패드의 두 손가락 클릭이든) 컨텍스트 메뉴를 활성화해야 합니다. 컨텍스트 메뉴는 클릭된 객체에 대한 추가 옵션을 제공합니다. 더 많은 사용 방식과 가이드라인은 메뉴 섹션을 참조합니다.

호버 상태가 없는 컴포넌트(좌)와 호버가 적용된 컴포넌트(우)

호버(Hover)

마우스 커서를 사용할 때는 시각적 변화를 통해 사용자가 상호작용 가능한 객체를 쉽게 인지할 수 있도록 해야 합니다. 마우스가 인터랙티브 요소 위에 머물면, 호버 상태는 상호작용을 안내하는 중요한 단서가 됩니다. 스타일과 가이드라인은 상태(states) 섹션을 참조합니다.

커서(또는 스타일러스)가 요소 위에 호버할 때, 필요하다면 툴팁도 함께 표시되어야 합니다. 툴팁 관련 가이드는 툴팁 섹션을 참조합니다.

1️⃣ 호버 상태가 없는 컴포넌트

2️⃣ 호버 상태 변화가 적용된 컴포넌트

---

커서(Cursors)

마우스나 트랙패드 같은 외부 입력 장치를 사용할 때 커서가 나타납니다. 커서는 인터랙티브 요소에 대한 더 많은 정보를 전달하기 위해 형태가 변경될 수 있습니다.

포인터는 입력 제어를 위한 시각적 표시를 제공합니다.

포인터(Pointer)

기본적으로 외부 입력 제어는 포인터 형태로 표시되어야 합니다.

손 모양 커서는 링크와 클릭 가능한 이미지에 사용됩니다.

손 모양(Hand)

링크 또는 링크된 이미지를 나타낼 때 커서는 손 모양으로 표시되어야 합니다.

리사이즈 화살표는 요소의 크기를 조절할 수 있음을 나타냅니다.

리사이즈 화살표(Resize arrows)

크기 조절이 가능한 요소의 경계에서는 커서가 리사이즈 화살표로 변경되어야 합니다.

I-빔 커서는 선택 가능한 텍스트임을 나타냅니다.

I-빔(I-beam)
텍스트 위에 호버할 때 커서는 I-빔 형태로 표시되어야 합니다. 편집 가능한 텍스트를 조작할 때는 다음과 같은 상호작용이 적용됩니다.

한 번 클릭하면 커서를 배치합니다.

두 번 클릭하면 단어를 선택합니다.

세 번 클릭하면 문단을 선택합니다.

한 번 클릭하면 선택이 해제되고 커서가 다시 위치합니다.

선택된 텍스트는 눈에 띄는 하이라이트로 표시됩니다.

텍스트 선택(Text selection)

마우스, 트랙패드, 스타일러스를 사용해 텍스트를 선택할 때는 다음을 적용합니다. 선택 영역은 하나의 색상으로 강조합니다. 강조된 영역 옆에 터치용 컨트롤은 표시하지 않습니다.

터치로 상호작용할 때(좌)와 마우스, 트랙패드, 스타일러스로 상호작용할 때(우)

터치를 이용한 텍스트 선택
터치로 상호작용할 때는, 다른 입력 장치가 연결되어 있더라도 항상 터치용 컨트롤을 표시합니다. 마우스, 트랙패드, 스타일러스를 사용할 때는, 해당 기기가 터치 장치이더라도 I-빔 커서와 컨텍스트 메뉴를 표시합니다.

원형 커서는 선택된 스타일러스 도구와 그 크기를 나타냅니다.

스타일러스 입력(Stylus input)

스타일러스(stylus)는 터치스크린이나 디지털 기기에서 손가락 대신 사용하는 펜 형태의 입력 도구입니다.

스타일러스를 사용할 때는, 브러시의 크기나 형태처럼 도구의 속성을 전달해야 하는 경우가 아니라면 보통 커서를 표시할 필요가 없습니다.

---

마우스 휠과 트랙패드 제스처

외부 마우스나 터치패드를 사용할 때는, 마우스 휠과 트랙패드 제스처를 통해 더 다양한 동작을 수행할 수 있습니다.

마우스 휠이나 트랙패드 제스처로 세로 목록을 스크롤하는 모습

수직 스크롤(Vertical scroll)

커서가 목록 위에 있을 때, 마우스 휠과 트랙패드의 두 손가락 제스처로 목록을 수직으로 스크롤할 수 있어야 합니다.

터치 시 위로 드래그하면 필드가 아래로 스크롤되며, 마우스 사용 시 위로 드래그하면 텍스트와 이미지를 선택합니다.

터치 스크롤 & 마우스 텍스트 선택

터치하여 드래그하면 텍스트 영역이 스크롤됩니다. 반면 마우스로 상호작용할 때는 텍스트 영역에서 드래그하면 텍스트가 선택됩니다.

캐러셀은 스크롤 휠이나 트랙패드를 사용해 가로로 스크롤할 수 있습니다.

수평 스크롤(Horizontal scroll)

마우스를 사용하는 경우, 마우스 휠로 가로 스크롤이 필요한 영역을 이동할 수 있어야 합니다. 트랙패드를 사용하는 경우, 두 손가락의 수평 제스처로 스크롤할 수 있어야 합니다.

---

물리 키보드(Physical keyboard)

물리 키보드가 기기에 외부로 연결되었거나 노트북에 내장된 경우, 사용자는 가상 키보드로 수행할 수 있는 모든 작업을 동일하게 수행할 수 있어야 하며, 더 많은 기능도 활용할 수 있어야 합니다.

물리 키보드가 연결된 경우 가상 키보드를 숨기며(좌), 물리 키보드가 분리되면 가상 키보드를 표시(우)합니다.

가상 키보드 표시 및 숨기기

물리 키보드의 연결 여부에 따라 가상 키보드는 나타나거나 숨겨져야 합니다.

일반적인 키보드 상호작용

Enter 키는 일반적으로 메시지 보내기와 같은 동작을 실행합니다.

Enter 키

사람들은 물리 키보드의 Enter 키가 메시지 보내기처럼 일반적으로 사용하는 기능을 수행하도록 개발자가 활성화해두었기를 기대합니다.

스페이스바를 누르면 보통 미디어가 일시 정지되거나 재생됩니다.

스페이스바 제어(Spacebar control)

사람들은 스페이스바(또는 사용 가능한 미디어 키)가 음악이나 비디오를 재생하거나 일시 정지하는 기능에 사용되도록 설정되어 있기를 일반적으로 기대합니다.

탭 포커스에는 포커스 표시가 포함되며, 키보드에서 Tab을 누를 때 순서대로 이동합니다.

탭(Tab) 포커스

키보드 사용자가 Tab 키로 페이지를 탐색할 때, 인터랙티브 요소의 포커스는 논리적인 순서를 따라야 합니다. 대부분의 페이지에서는 왼쪽에서 오른쪽, 위에서 아래 순서가 이에 해당합니다. 키보드나 다른 입력 장치로 포커스가 이동할 때, 포커스 상태에는 링 형태의 키보드 포커스 표시가 포함됩니다.

Escape 키

사람들은 물리 키보드의 Escape 키가 요소를 닫거나, 포커스를 제거하거나, 선택을 해제하는 동작을 수행할 것으로 일반적으로 기대합니다.

Escape 키는 표시 중인 메뉴, 다이얼로그, 바텀시트 같은 모달 요소를 닫아야 합니다.

Escape 키는 화면에 표시된 포커스 표시를 제거하고 포커스 순서를 0으로 설정해야 합니다.

Escape 키는 입력 중일 때 텍스트 커서를 제거해야 하지만, 이미 입력된 텍스트는 삭제하지 않아야 합니다.

---

마치며

입력 장치는 터치, 마우스, 트랙패드, 스타일러스, 물리 키보드 등 다양하며, 각기 다른 기대 동작을 가집니다. 따라서 외부 입력이 연결되면 해당 입력에 맞는 커서, 클릭 방식, 스크롤 등 일관된 피드백을 제공하는 것이 중요합니다.

텍스트 선택, 스크롤, 포커스 이동처럼 입력 방식에 따라 달라지는 영역에서는 사용자의 익숙한 패턴을 우선해야 합니다. 터치 환경에서는 터치 컨트롤을, 마우스 환경에서는 컨텍스트 메뉴와 호버, I-빔 커서 등을 정확하게 적용해야 합니다.

음성 입력과 같은 입력 방식도 존재하지만, 제품을 설계할 때는 여전히 기본 입력 장치에 대한 이해가 우선됩니다. 마우스, 트랙패드, 키보드는 대부분의 기기에서 공통적으로 사용되며, 입력 동작의 기준이 됩니다. 기본 입력을 정확히 이해해두면 다양한 환경에서도 예측 가능한 인터랙션을 구성할 수 있고, 새로운 입력 방식 역시 이 흐름 안에서 자연스럽게 적용할 수 있습니다.

입력 장치에 대한 자세한 내용은 아래에서 확인하실 수 있습니다.

Inputs – Material Design 3