디자인이 휴대기기에 표시될 때는 버튼이나 링크와 같은 대화형 요소가 충분히 크고 그 주변에 충분한 공간이 있는지 확인하여 실수로 다른 요소 위에 중첩되지 않고 쉽게 누를 수 있도록 해야 합니다. 이는 모든 사용자에게 이로운 점이겠지만, 특히 운동 장애가 있는 사용자에게 도움이 됩니다.
최소 권장 터치 대상 크기는 모바일 뷰포트가 올바르게 설정된 사이트에서 기기 독립적 픽셀 기준으로 약 48입니다. 예를 들어 아이콘의 너비와 높이는 24px에 불과할 수 있지만 패딩을 추가로 사용하여 탭 타겟 크기를 최대 48px로 만들 수 있습니다. 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;
}
}
포인터와 같은 상호작용 미디어 기능에 대한 자세한 내용은 반응형 웹 디자인 기본사항 도움말을 참고하세요.