𝗧𝗵𝗲 𝗖𝗦𝗦 𝗠𝗲𝗱𝗶𝗮 𝗤𝘂𝗲𝗿𝘆 𝗧𝗵𝗮𝘁 𝗖𝗵𝗮𝗻𝗴𝗲𝗱 𝗠𝘆 𝗗𝗲𝘀𝗶𝗴𝗻 𝗔𝗽𝗽𝗿𝗼𝗮𝗰𝗵
예전에는 화면 크기를 기준으로 웹사이트를 디자인하곤 했습니다.
사용자가 휴대폰을 쓰는지 태블릿을 쓰는지 감지해야 한다고 생각했습니다. 화면 높이가 너비보다 큰지 확인해 보기도 했지만, 이는 단순히 방향(orientation)만 확인할 뿐 기기 유형을 확인하는 것은 아니었습니다.
더 나은 방법을 찾았습니다. 사람들이 사이트와 어떻게 상호작용하는지를 확인하기 위해 미디어 쿼리를 사용하는 것입니다.
(hover) 쿼리는 기기가 요소 위에 마우스를 올리는(hover) 동작이 가능한지 확인합니다.
마우스나 트랙패드가 있는 기기에는 @media (hover: hover)를 사용하세요.
휴대폰과 같은 터치 전용 기기에는 @media (hover: none)를 사용하세요.
이를 통해 모바일에서의 hover 문제를 해결할 수 있습니다. 휴대폰에서는 hover 규칙이 제대로 작동하지 않거나 이상하게 동작하는 경우가 많습니다. 모바일에서는 버튼을 보여주고, 데스크톱에서는 사용자가 hover할 때까지 숨기도록 코드를 작성할 수 있습니다.
Tailwind를 사용하면 임의 변형(arbitrary variants) 기능을 통해 이를 쉽게 구현할 수 있습니다:
또한 (pointer)를 사용하여 포인터의 정밀도를 확인할 수 있습니다.
• 마우스: hover 가능 및 정밀한(fine) 포인터 • 트랙패드: hover 가능 및 정밀한(fine) 포인터 • 손가락 터치: hover 불가 및 거친(coarse) 포인터 • 스타일러스: 보통 hover 가능 및 정밀한(fine) 포인터
주 입력 장치뿐만 아니라 모든 입력 장치를 확인하고 싶다면 다음을 사용하세요:
• @media (any-hover: hover) • @media (any-pointer: fine)
마우스가 연결된 태블릿은 기본 입력 장치에 대해 hover: none을 보고할 수 있습니다. 하지만 마우스가 존재하기 때문에 any-hover: hover는 hover로 보고합니다.
화면 크기만을 위한 디자인은 그만두세요. 사용자가 인터페이스를 어떻게 터치하거나 클릭하는지를 고려하여 디자인을 시작하세요.