디자인이 휴대기기에 표시될 때는 버튼이나 링크와 같은 대화형 요소가 충분히 크고 그 주변에 충분한 공간이 있는지 확인하여 실수로 다른 요소 위에 중첩되지 않고 쉽게 누를 수 있도록 해야 합니다. 이는 모든 사용자에게 이로운 점이겠지만, 특히 운동 장애가 있는 사용자에게 도움이 됩니다.
최소 권장 터치 대상 크기는 모바일 뷰포트가 올바르게 설정된 사이트에서 기기 독립적 픽셀 기준으로 약 48입니다. 예를 들어 아이콘의 너비와 높이는 최대 24픽셀이지만 추가 패딩을 사용하여 탭 타겟 크기를 최대 48픽셀로 설정할 수 있습니다. 48x48픽셀 영역은 약 9mm에 해당하며 이는 사용자의 손가락 패드 영역 크기와 비슷합니다.
데모에서는 모든 링크가 최소 크기를 충족하도록 패딩을 추가했습니다.
또한 터치 영역 사이의 간격은 가로와 세로 모두 약 8픽셀이어야 합니다. 그래야 사용자가 손가락으로 한 탭 타겟을 누를 때 의도치 않게 다른 탭 타겟에 터치되지 않습니다.
터치 영역 테스트
타겟이 텍스트이고 em 또는 rem와 같은 상대 값을 사용하여 텍스트와 패딩의 크기를 조절한 경우 DevTools를 사용하여 해당 영역의 계산된 값이 충분히 큰지 확인할 수 있습니다.
아래 예에서는 텍스트와 패딩에 em를 사용하고 있습니다.
링크의 a를 검사하고 Chrome DevTools에서 계산된 창으로 전환합니다. 여기에서 상자의 다양한 부분을 검사하고 어떤 픽셀 크기로 확인할 수 있습니다.
Firefox DevTools에는 레이아웃 패널이 있습니다.
이 패널에서 검사된 요소의 실제 크기를 가져옵니다.
미디어 쿼리를 사용하여 터치 스크린 사용 감지
표시 영역 크기를 테스트한 다음 작은 크기가 휴대전화 또는 태블릿일 가능성이 높으며 이에 따라 터치스크린이 사용될 것이라고 추측하는 대신 이제 실제 기기 기능에 따라 디자인을 더 효과적으로 조정할 수 있습니다.
이제 미디어 쿼리로 테스트할 수 있는 미디어 기능 중 하나는 사용자의 기본 입력이 터치 스크린인지(pointer) 그리고 현재 감지된 입력 중 하나라도 터치 스크린인지(any-pointer)입니다. pointer 및 any-pointer 기능은 fine 또는 coarse를 반환합니다.
마우스가 블루투스를 통해 휴대전화에 연결되어 있더라도 마우스나 트랙패드를 사용하는 사용자는 미세 포인터입니다.
coarse 포인터는 터치스크린을 나타냅니다. 터치스크린은 휴대기기일 수도 있고 노트북 화면이나 대형 태블릿일 수도 있습니다.
미디어 쿼리 내에서 CSS를 조정하여 터치 영역을 늘리려는 경우 대략적 포인터 테스트를 통해 모든 터치스크린 사용자의 탭 타겟을 늘릴 수 있습니다. 이렇게 하면 기기가 휴대전화이든 더 큰 기기이든 관계없이 더 큰 탭 영역이 제공됩니다.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
포인터와 같은 상호작용 미디어 기능에 관한 자세한 내용은 반응형 웹 디자인 기본사항 도움말을 참고하세요.