프로젝트에서 가로 스크롤을 구현해야 하는 일이 생겼다.
모바일에서도 동작해야 하고 노트북과 같이 큰 화면에서도 동작해야 해서 어떻게 구현해야 할지 고민하고 있었다.
스크롤을 사용하면 마우스 클릭을 사용해서 왼쪽 오른쪽으로 드래그가 안 된다는 게 이슈였고 translate을 사용하면 포커스로 요소 간 이동할때 포커스된 요소로 스크롤이 되지 않는 게 이슈였다. 즉, 웹 접근성에 좋지 않은 경험을 초래한다.
아래는 Scroll과 Translate의 차이점을 잘 설명한 글이다.
https://mygumi.tistory.com/427
고민하다가 내린 결론은 웹 접근성을 위해 Scroll을 사용하기로 했고 UX를 위해 Scroll에서도 Drag가 가능하도록 구현하였다.
다음 Article은 Drag to Scroll에 대해서 아주 잘 설명한 글이다. 아랫글을 참고하여 프로젝트에 적용하여 웹 접근성과 사용자 경험 둘 다 만족하게 한 것 같다.
꼬북꼬북한개발자입니다.