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