휴대전화와 같이 화면이 작은 기기에는 터치스크린이 있는 경우가 많습니다. 노트북 및 데스크톱 컴퓨터와 같은 대형 화면 기기에는 마우스나 트랙패드와 같은 하드웨어가 함께 제공되는 경우가 많습니다. 작은 화면은 터치, 큰 화면은 포인터로 동일시하기 쉽습니다.
그러나 현실은 더 미묘합니다. 일부 노트북에는 터치스크린 기능이 있습니다. 사용자는 터치스크린 또는 트랙패드 또는 둘 다와 상호작용할 수 있습니다. 태블릿과 같은 터치스크린 기기에서 외부 키보드나 마우스를 사용할 수도 있습니다.
화면 크기에서 입력 메커니즘을 추론하려고 시도하는 대신 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 미디어 기능과 다릅니다.
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)은 양식 입력란에 약간 추가되지만 사용자 환경에 큰 변화를 가져올 수 있습니다. 사용자의 기기 기능을 예측하고 이에 반응함으로써 사용자에게 더 큰 힘을 실어주는 셈입니다. 자세한 내용은 양식을 학습하는 데 도움이 되는 전용 과정을 참고하세요.
다음으로 이 과정에서는 몇 가지 일반적인 인터페이스 패턴을 살펴보겠습니다.
이해도 확인
상호작용에 대한 지식 테스트
화면 크기에서 사용자의 입력 유형을 추론하려고 하는 대신 사용해야 하는 기능은 무엇인가요?
@media (pointer: coarse) 또는 @media (-any-pointer: coarse) 등prompt()로 사용자에게 확인handheld@media (pointer)와 @media (any-pointer)의 차이점은 무엇인가요?
any-pointer는 일치하는 항목의 모든 기기 입력 유형을 쿼리합니다.어떤 입력 유형이 사용자에게 더 적절한 가상 키보드를 표시하나요?
type="url"type="tel"type="number"type="email"