상호작용

휴대전화와 같은 소형 화면 기기에는 터치 스크린이 있는 경우가 많습니다. 노트북, 데스크톱 컴퓨터와 같은 대형 화면 기기에는 마우스나 트랙패드와 같은 하드웨어가 함께 제공되는 경우가 많습니다. 작은 화면은 터치, 큰 화면은 포인터로 생각하기 쉽습니다.

하지만 현실은 더 미묘합니다. 일부 노트북에는 터치 스크린 기능이 있습니다. 사용자는 터치 스크린, 트랙패드 또는 둘 다와 상호작용할 수 있습니다. 마찬가지로 태블릿과 같은 터치 스크린 기기에서 외부 키보드나 마우스를 사용할 수 있습니다.

화면 크기에서 입력 메커니즘을 추론하려고 하지 말고 CSS에서 미디어 기능을 사용하세요.

포인터

pointer 미디어 기능으로 가능한 세 가지 값(none, coarse, fine)을 테스트할 수 있습니다.

브라우저에서 pointer 값이 none이라고 보고하는 경우 사용자가 키보드를 사용하여 웹사이트와 상호작용하고 있을 수 있습니다.

브라우저에서 pointer 값이 coarse로 보고되면 기본 입력 메커니즘이 정확하지 않다는 의미입니다. 터치 스크린의 손가락은 대략적인 포인터입니다.

브라우저가 pointer 값을 fine로 보고하면 기본 입력 메커니즘이 세부적인 제어를 지원한다는 의미입니다. 마우스나 스타일러스는 좋은 포인터입니다.

pointer 값에 맞게 인터페이스 요소의 크기를 조정할 수 있습니다. 다양한 기기에서 이 데모 웹사이트를 방문하여 인터페이스가 어떻게 적응하는지 확인해 보세요.

이 예에서는 대략적인 포인터에 맞게 버튼이 더 크게 만들어집니다.

button {
  padding: 0.5em 1em;
}
@media (pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

요소를 작게 만들어 세밀한 포인터를 사용할 수도 있지만 다음 사항에 유의하세요.

@media (pointer: fine) {
  button {
    padding: 0.25em 0.5em;
  }
}

세부적인 제어가 가능한 기본 입력 메커니즘이 있는 경우에도 상호작용 요소의 크기를 줄이기 전에 신중하게 생각하세요. 피츠의 법칙은 여전히 적용됩니다. 미세한 포인터로도 작은 타겟에는 더 많은 집중력이 필요합니다. 타겟 영역이 클수록 포인팅 기기와 관계없이 모든 사용자에게 도움이 됩니다.

모든 포인터

pointer 미디어 기능은 기본 입력 메커니즘의 정밀도를 보고합니다. 하지만 많은 기기에는 입력 메커니즘이 두 개 이상 있습니다. 터치 스크린과 마우스를 동시에 사용하여 웹사이트와 상호작용하는 사용자가 있을 수 있습니다.

any-pointer는 포인팅 기기가 테스트를 통과하는지 보고한다는 점에서 pointer 미디어 기능과 다릅니다.

none의 any-pointer 값은 포인팅 기기를 사용할 수 없음을 의미합니다.

any-pointer 값이 coarse이면 하나 이상의 포인팅 기기가 정확하지 않다는 의미입니다. 하지만 기본 입력 메커니즘은 아닐 수 있습니다.

any-pointer 값이 fine이면 하나 이상의 포인팅 기기가 세부적인 제어를 지원한다는 의미입니다. 하지만 이것이 기본 입력 메커니즘이 아닐 수도 있습니다.

any-pointer 미디어 쿼리는 입력 메커니즘 중 하나라도 테스트를 통과하면 양성 결과를 보고하므로 브라우저가 any-pointer: fine 결과를 보고하고 any-pointer: coarse 결과도 보고할 수 있습니다. 이 경우 미디어 쿼리의 순서가 중요합니다. 마지막 항목이 우선 적용됩니다.

이 예에서 기기에 미세 입력 메커니즘과 대략적인 입력 메커니즘이 모두 있는 경우 대략적인 스타일이 적용됩니다.

@media (any-pointer: fine) {
  button {
    padding: 0.5em 1em;
  }
}
@media (any-pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

마우스 오버

hover 미디어 기능은 기본 입력 메커니즘이 요소 위로 마우스를 가져갈 수 있는지 보고합니다. 일반적으로 이는 마우스나 트랙패드로 제어되는 커서가 화면에 있음을 의미합니다.

미세 포인터와 대략적인 포인터를 구분하는 pointer 미디어 기능과 달리 hover 미디어 기능은 바이너리입니다. 기본 입력 장치가 요소 위로 마우스를 가져갈 수 있으면 hover 값을 보고합니다. 그 외의 경우 값은 none입니다.

이 예에서는 마우스를 가져가면 보조 아이콘이 표시되지만 기본 입력 장치가 요소를 마우스로 가져갈 수 있는 경우에만 표시됩니다.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:hover .extra {
    visibility: visible;
  }
}

마우스를 사용하여 버튼 위로 가져가면 아이콘이 표시됩니다. 하지만 키보드를 사용하여 버튼으로 탭하면 아이콘이 표시되지 않습니다. 키보드를 사용하면 마우스를 가져가는 대신 포커스가 맞춰집니다. 마우스가 연결된 데스크톱 기기는 기본 입력 메커니즘이 마우스 오버를 지원한다고 보고합니다. 이는 사실입니다. 하지만 마우스가 연결된 상태에서 키보드를 사용하는 사용자는 :hover 스타일의 이점을 누릴 수 없습니다. 따라서 :hover 및 :focus 스타일을 결합하여 두 상호작용을 모두 처리하는 것이 좋습니다.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:is(:hover, :focus) .extra {
    visibility: visible;
  }
}

기본 입력 장치가 요소 위로 마우스를 가져갈 수 있더라도 마우스 오버 상호작용 뒤에 정보를 숨기지 않도록 주의하세요. 정보의 검색 가능성이 낮아집니다. 중요한 정보나 중요한 인터페이스 요소를 숨기는 데 마우스 오버를 사용하지 마세요.

마우스 오버

hover 미디어 쿼리는 기본 입력 메커니즘에 대해서만 보고합니다. 일부 기기에는 터치 스크린, 마우스, 키보드, 트랙패드 등 여러 입력 메커니즘이 있습니다.

any-pointer이 입력 메커니즘을 보고하는 것처럼 사용 가능한 입력 메커니즘이 요소를 마우스로 가져갈 수 있으면 any-hover이 true가 됩니다.

이전 예시에서 로직을 반전하기로 결정한 경우 호버 스타일을 기본값으로 설정한 다음 any-hover의 값이 none이면 호버 스타일을 삭제할 수 있습니다.

button .extra {
  visibility: hidden;
}
button:hover .extra,
button:focus .extra {
  visibility: visible;
}
@media (any-hover: none) {
  button .extra {
    visibility: visible;
  }
}

마우스 오버가 가능한 입력 메커니즘이 없는 기기에서는 추가 아이콘이 항상 표시됩니다.

가상 키보드

사람들은 커서와 손가락을 사용하여 인터페이스를 탐색하지만 정보를 입력할 때는 키보드가 필요합니다. 기기에 실제 키보드가 연결되어 있다면 괜찮지만 터치 스크린 기기를 사용하는 경우에는 조금 더 복잡합니다. 이러한 기기는 화면에 가상 키보드를 제공합니다.

입력 유형

실제 키보드와 달리 가상 키보드는 예상 입력과 일치하도록 맞춤설정할 수 있습니다. 예상 입력에 관한 정보를 제공하면 기기에서 가장 적절한 가상 키보드를 제공할 수 있습니다.

HTML5 입력 유형은 input 요소를 설명하는 좋은 방법입니다. type 속성은 email, number, tel, url 등의 값을 허용합니다.

  <label for="email">Email</label>
  <input type="email" id="email">

  <label for="number">Number</label>
  <input type="number" id="number">

  <label for="tel">Tel</label>
  <input type="tel" id="tel">

  <label for="url">URL</label>
  <input type="url" id="url">

입력 모드

inputmode 속성을 사용하면 가상 키보드를 세밀하게 제어할 수 있습니다. 예를 들어 값이 number인 input type이 하나 있는 경우 inputmode 속성을 사용하여 정수와 소수를 구분할 수 있습니다.

나이와 같은 정수를 묻는 경우 inputmode="numeric"을 사용합니다.

<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">

가격과 같이 소수점이 포함된 숫자를 요청하는 경우 inputmode="decimal"를 사용하세요.

<label for="price">Price</label>
<input type="number" id="price" inputmode="decimal">

자동 완성

양식을 작성하는 것을 좋아하는 사람은 없습니다. 디자이너는 사용자가 양식 필드를 자동으로 작성할 수 있도록 지원하여 사용자 환경을 개선할 수 있습니다. autocomplete 속성은 문의 양식, 로그인 양식, 결제 양식을 개선할 수 있는 다양한 옵션을 제공합니다.

<label for="name">Name</label>
<input type="text" id="name" autocomplete="name">

<label for="country">Country</label>
<input type="text" id="country" autocomplete="country">

<label for="email">Email</label>
<input type="email" id="email" autocomplete="email">

이러한 HTML 속성(type, inputmode, autocomplete)은 양식 필드에 작은 추가 사항이지만 사용자 환경에 큰 차이를 가져올 수 있습니다. 사용자의 기기 기능을 예측하고 이에 대응하면 사용자를 지원할 수 있습니다. 자세한 내용은 양식 학습에 도움이 되는 과정을 참고하세요.

이 과정의 다음 단계에서는 몇 가지 일반적인 인터페이스 패턴을 살펴봅니다.

이해도 테스트

상호작용에 대한 지식 테스트