상호작용

휴대전화와 같은 소형 화면 기기에는 터치스크린이 있는 경우가 많습니다. 노트북 및 데스크톱 컴퓨터와 같은 대형 화면 기기에는 마우스나 트랙패드와 같은 하드웨어가 함께 제공되는 경우가 많습니다. 작은 화면과 터치스크린을, 대형 화면을 포인터와 동일시하고 싶을 수 있습니다.

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

화면 크기에서 입력 메커니즘을 추론하는 대신 CSS의 미디어 기능을 사용하세요.

포인터

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

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

브라우저에서 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 미디어 기능과 다릅니다.

any-pointer 값이 none이면 사용할 수 있는 포인팅 기기가 없음을 의미합니다.

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;
  }
}

해당 버튼 위로 마우스를 가져가면 아이콘이 나타납니다. 하지만 키보드를 사용하여 탭 버튼을 누르는 경우에는 아이콘이 보이지 않습니다. 키보드를 사용하면 마우스 오버가 아니라 초점이 맞춰집니다. 마우스가 연결된 데스크톱 기기는 기본 입력 메커니즘이 마우스 오버가 가능하다고 보고합니다. 이는 true입니다. 하지만 마우스가 연결되어 있는 동안 키보드를 사용하는 사용자는 :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)은 양식 입력란에 약간 추가되는 것이지만 사용자 환경에 큰 차이를 만들 수 있습니다. 사용자 기기의 기능을 예측하고 이에 대응함으로써 사용자의 역량을 강화합니다. 더 자세한 내용은 양식 학습에 도움이 되는 전용 과정을 참고하세요.

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

학습 내용 확인하기

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