반응형 웹에서 hover 고려하기

1️⃣ hover with Styled-Components

• 이전 프로젝트에서부터 Styled-Components를 써왔던 나는, hover 를 아래와 같이 썼다. 이번에도 의사 클래스(&)를 사용해서 같은 방식으로 작성했다.
  
  
  

2️⃣ 모바일 기기에서 hover?

• 열심히 코드를 작성하던 중 갑자기 hover를 모바일 기기에서는 적용할 수 없다는 당연한 사실을 깨달았다...😱
• 터치 디바이스에서는 마우스 커서가 존재하지 않기 때문에, hover를 별도로 처리해줘야 한다.
• 만약 hover를 처리해주지 않으면, 해당 요소를 두번 터치해야하는 등 click 이벤트가 제대로 처리되지 않을 수 있다.

3️⃣ 해결 - 미디어쿼리 hover

• Media Queries Level 4에 포함된 @media hover 기능을 사용하면 이를 편리하게 해결할 수 있다.
• 다음과 같이 코드를 수정하였고, 배포 후 모바일에서 확인해보니 hover가 막힌 것을 확인할 수 있었다.

    @media (hover: hover) {
      &:hover {
        cursor: pointer;
        color: ${pink[200]};
      }
    }

4️⃣ 또 다시 문제 발생

• 위에서 hover 관련한 문제는 다 해결한 줄 알았지만, 다른 팀원의 폰에서는 여전히 hover 기능이 동작하고 있었다... 일부 기종에서 hover가 사라지지 않은 것이다..................😨😨

• pointer-events: none; 등 여러가지 시도를 해봤지만, 제대로 동작하지 않거나 근본적인 해결법이 아니라고 생각했다.

• hover 말고도 개발해야할 기능이 많았어서, 끝내 해결하지 못하고 프로젝트를 종료하게 되었다........😭

• 거의 다 해결한것 같았는데 여기서 막혀버리니 너무 아쉬웠고, 혹시 다음에도 반응형을 하게된다면 또 이 문제를 마주할 것 같아서 언젠가는 꼭 해결하고 싶었다.
  
  

5️⃣ (진짜) 해결!! - 미디어쿼리 Pointer

• 프로젝트가 끝나고도, 아직까지 해결하지 못한 반응형 hover가 계속 맴돌았다. 그래서 찾고 찾고 또 찾다가..최근에 원인과 해결법을 찾았다!

• https://codepen.io/michellebarker/pen/jOmNbgW
  위의 코드를 ios에서 확인하면 touch screen 이라고 인식되지만, 일부 Android 기종에서는 hoverable 디바이스라고 인식된다.
  일부 Android 기종에는 길게 누를때 호버링을 에뮬레이팅 하는 기능이 있어 hover를 지원하는 것으로 판단한다고 한다.

• 미디어쿼리 에서는 hover뿐만 아니라 장치의 포인터 여부와 정확도를 확인하는 pointer 속성이 존재한다.

  • none
    기본 입력 메커니즘에는 포인팅 장치가 포함되어 있지 않습니다.
  • coarse
    기본 입력 메커니즘에는 터치스크린의 손가락과 같이 정확도가 제한된 포인팅 장치가 포함됩니다.
  • fine
    기본 입력 메커니즘에는 마우스와 같은 정확한 포인팅 장치가 포함됩니다.

• pointer: fine 속성을 사용해서 안드로이드 기종에서도 hover 를 막았다!🤪

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          cursor: pointer;
          color: ${pink[200]};
        }
      }