CSS로 PC와 Mobile을 구분하는 방법 - Interaction Media Features

 

언제부턴가 "반응형 웹"이 대세가 되면서, 사용자의 디바이스에 따라서 웹 화면을 적절하게 구성하는 것이 필수 요소가 되었습니다. 일반적으로, 브라우저 창의 크기를 기반으로 디자인을 다르게 설정하는 방식을 많이 사용하고 있죠? 이 사이즈를 기준으로 PC 혹은 Mobile을 얼추 구분하기도 합니다.

 

대부분의 경우 창 크기에 따라서만 조절해도 큰 문제는 없습니다만, 가끔은 사용자의 디바이스가 PC인지 모바일인지 구분하고 싶은 경우도 있습니다. 예를 들어서 다음과 같은 경우를 생각해 볼까요?

• Hover시에 이미지 위에 text를 overlay 하는 경우
• Hover를 하는 경우에만 나타나는 버튼 요소

 

위와 같은 경우에는 hover 동작은 마우스를 이용하는 PC에서 정상적으로 확인할 수 있으나, 터치스크린을 사용하는 모바일은 기본적으로 hover 동작이 없기 때문에 다른 방법으로 디자인을 설정할 수 있다면 더 좋을 것입니다. 

 

[Reference]

https://caseyjamesperno.com/blog/intro-interaction-media-queries

https://dzone.com/articles/finally-a-css-only-solution-to-hover-on-touchscree

https://proper-hovering.glitch.me/

 

 

기존에는 디바이스 구분을 위해서 JavaScript를 이용하곤 했지만, CSS Media Queries Level 4에 추가된 hover와 pointer 쿼리를 이용하면 모바일과 데스크톱을 구분하는 것이 어느 정도 가능합니다. 이번 글에서는 해당 내용을 살펴보도록 하겠습니다.

 

 

1. Interaction Media Features

1️⃣ Hover

Hover(호버) 미디어 기능은 기본(Primary) 포인팅 장치로 페이지의 요소를 호버링 할 수 있는지 여부를 판단하는 데 사용됩니다. 기존 CSS의 ":hover" 셀렉터는 호버가 발생하는 경우의 스타일을 정의하는 데 사용되지만, Media Feature의 hover는 장치의 입력 메커니즘을 기반으로 호버가 발생 가능한지 여부를 판단할 수 있습니다.

 

Hover 피쳐는 다음의 두 가지 값을 지원합니다.

• none :
  1. 주 포인팅 장치가 없는 경우
  2. 주 포인팅 장치가 hover를 지원하지 않는 경우.
  3. Hover가 가능하지만 일반적인 방법이 아닌 불편한 방법으로 hover 하는 경우 (ex: 터치스크린의 long tab은 hover로 간주될 수 있으나 일반적인 hover 동작은 아님)
• hover :
  • 기본 포인팅 장치가 특정 엘리먼트 위로 쉽게 hover 할 수 있는 경우를 나타냅니다.
  • 대표적으로 마우스와 같은 장치를 생각할 수 있습니다.

 

* 터치스크린이 주 포인팅 장치이지만 마우스를 동시에 지원하는 경우 → 비록 마우스를 통해서 hover 기능을 활용할 수 있지만, 주 포인팅은 터치스크린이므로 hover : none이 됩니다. 

 

2️⃣ Pointer

Pointer(포인터) 미디어 기능은 마우스와 같은 포인팅 장치의 존재 여부와 정확성을 판별하는 데 사용됩니다. 포인팅 장치가 여러 개 있는 경우 포인터 미디어 기능은 사용자 에이전트에서 결정한 "기본" 포인팅 장치의 특성을 반영해야 합니다.

 

Pointer 피쳐는 다음의 3가지 값을 지원합니다.

• none :
  • 장치의 기본 입력 메커니즘에는 포인팅 장치가 포함되지 않습니다.
• coarse :
  • 장치의 주 입력 메커니즘에는 정확도가 제한된 포인팅 장치가 포함됩니다. 
  • 예를 들어 터치스크린 및 모션 감지 센서(Xbox용 키넥트 주변 장치 등)가 있습니다.
• fine :
  • 기기의 기본 입력 메커니즘에는 정확한 포인팅 장치가 포함됩니다.
  • 예를 들면 마우스, 터치패드, 드로잉 스타일러스 등이 있습니다.

 

3️⃣ 두 가지를 결합하여 디바이스 판단

위의 두 가지 기능(hover와 pointer)을 조합하여 트랙패드, 터치스크린, 마우스 등 입력 메커니즘의 기능을 기반으로 한 스타일링을 미세 조정할 수 있습니다. hover와 pointer 조합에 따른 기기 판단의 예는 다음과 같습니다.

 

	pointer: coarse	pointer: fine
hover: none	스마트폰, 터치스크린	스타일러스 디지타이저
hover: hover	닌텐도 Wii 컨트롤러, 키넥트	마우스, 터치패드 등

 

[Reference]

https://www.w3.org/TR/mediaqueries-4/#mf-interaction

https://css-tricks.com/touch-devices-not-judged-size/

 

 

CSS 코드 상으로는 아래와 같은 방식으로 설정하면 적용할 수 있습니다.

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
    ...
}
/* stylus-based screens */
@media (hover: none) and (pointer: fine) {
    ...
}
/* Nintendo Wii controller, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) {
    ...
}
/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) {
    ...
}

 

2. 여러 개의 입력 메커니즘을 고려하려면? : any-hover, any-pointer

Hover, 그리고 Pointer는 디바이스의 주(Primary) 입력을 참조합니다. 그러나 실제로는 여러 가지 입력 메커니즘이 함께 사용될 수도 있습니다. 이러한 경우, "any-"라는 접두어가 붙은 media feature를 사용하여 장치의 모든 입력 메커니즘에 대한 기능을 시험할 수 있습니다.

• any-hover : none, hover
• any-pointer : none, coarse, fine

 

각각, 앞에서 살펴본 hover와 pointer와 동일한 값을 가지며, 의미하는 바도 같지만 any-라는 접두어에서 보이듯이 주 입력 장치가 아닌 모든 입력 장치 중 "적어도 하나"에서 해당 값을 만족하는 경우 기능을 지원하는 것으로 판단합니다.

 

예를 들어 터치(primary)와 마우스(sub)를 모두 지원하는 디바이스를 고려해볼까요? 주 입력장치가 터치스크린이므로 pointer는 coarse만 지원되는 것으로 나옵니다. 반면, any-pointer의 경우에는 coarse와 fine 값 모두를 지원하는 것으로 판단합니다.

 

다만, 다양한 입력 메커니즘을 지원하는 기기에서 사용자가 실제로 어떤 포인팅 장치를 사용할지 예측하기는 어렵기 때문에, 전적으로 의존하기는 어려울 것 같습니다. 실제 설계에 있어서는 주 포인팅 장치를 기준으로 설정하는 것이 적절하지 않을까 개인적으로 생각해봅니다.

 

3. 내 디바이스의 상태는?

가장 쉽게 마음에 와 닿는 건 뭐니 뭐니 해도 직접 테스트해보는 것이겠죠? 아래 코드는 현재 이 화면을 보고 있는 기기의 Media features 상태에 따른 결과를 보여줍니다. 직접 테스트해보세요! (PC/모바일인지 구분은 단순하게 hover로만 판단했습니다. )

 

[참고] https://googlechrome.github.io/samples/media-hover-pointer/

 

See the Pen interaction media features by showtime (@paperblock) on CodePen.

 

 

여러 가지 디바이스 별로 정리된 내용은 아래 링크에서 확인할 수 있습니다.

https://patrickhlauke.github.io/touch/pointer-hover-any-pointer-any-hover/results/

 

4. 지원 브라우저

Interaction Media Features의 pointer, any-pointer, hover, any-hover와 관련된 기능은 거의 대부분의 브라우저에서 지원하고 있습니다.

 

https://caniuse.com/css-media-interaction

 

맺음말

이번 글에서는 CSS Media Query Level 4의 Interaction Media Feature에 대해서 살펴보았습니다. Interaction Media Queries는 입력 수단으로 무엇이 사용되고 있는지를 판단하여 개발자가 해당 입력 메커니즘의 기능에 맞게 구성 요소를 조정할 수 있도록 합니다.

 

다중 입력장치에 대해서는 아직은 약간의 한계가 있긴 합니다만, 현재 수준에서도 여러 가지 디바이스에 대한 판단을 JavaScript 없이 CSS에서 간편하게 할 수 있어서 좋은 것 같습니다.