휴대전화와 같은 소형 화면 기기에는 터치 스크린이 있는 경우가 많습니다. 노트북 및 데스크톱 컴퓨터와 같은 대형 화면 기기에는 마우스나 트랙패드와 같은 하드웨어가 함께 제공되는 경우가 많습니다. 작은 화면은 터치, 큰 화면은 포인터로 간주하고 싶은 유혹이 있지만
하지만 현실은 더 미묘합니다. 일부 노트북에는 터치 스크린 기능이 있습니다. 사용자는 터치 스크린 또는 트랙패드 또는 둘 다와 상호작용할 수 있습니다. 마찬가지로 태블릿과 같은 터치스크린 기기에서 외부 키보드나 마우스를 사용할 수도 있습니다.
화면 크기에서 입력 메커니즘을 추론하려고 하지 말고 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; } }
사용자가 세분화된 제어가 가능한 기본 입력 메커니즘을 보유하고 있더라도 상호작용 요소의 크기를 줄이기 전에 한 번 더 생각해 보세요. Fitts의 법칙은 계속 적용됩니다. 타겟이 작을수록 정밀한 포인터를 사용해도 더 많은 집중력이 필요합니다. 타겟 영역이 클수록 포인팅 기기와 관계없이 모든 사용자에게 유리합니다.
포인터
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;
}
}
마우스를 사용하여 이 버튼 위로 가져가면 아이콘이 표시됩니다. 하지만 키보드를 사용하여 버튼으로 탭하면 아이콘이 계속 보이지 않습니다. 키보드를 사용하면 마우스 오버가 아닌 포커스를 맞춥니다. 마우스가 연결된 데스크톱 기기는 기본 입력 메커니즘이 마우스 오버할 수 있다고 보고하며 이는 사실입니다. 하지만 마우스가 연결된 상태에서 키보드를 사용하는 사용자는 :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
)은 양식 필드에 약간 추가되는 것처럼 보이지만 사용자 경험에 큰 영향을 미칠 수 있습니다. 사용자의 기기 기능을 예상하고 이에 대응하면 사용자에게 더 많은 기능을 제공할 수 있습니다. 자세한 내용은 양식 학습에 관한 과정을 참고하세요.
이제 이 과정에서 일반적인 인터페이스 패턴을 살펴볼 차례입니다.
이해도 확인
상호작용에 대한 지식 테스트
화면 크기에서 사용자의 입력 유형을 추론하는 대신 어떤 기능을 사용해야 하나요?
prompt()
로 사용자에게 요청handheld
@media (pointer)
와 @media (any-pointer)
의 차이점은 무엇인가요?
사용자에게 더 적절한 가상 키보드를 표시하는 입력 유형은 무엇인가요?
type="tel"
type="number"
type="email"
type="url"