CSS 스크롤 스냅
프로젝트에서 유튜브 쇼츠 형식의 스크롤로 게시글을 보여줘야 하는 부분이 있었다.
유튜브에서는 CSS Scroll-Snap 기술을 사용한 것 같아 도입해 보았다
CSS 스크롤 스냅은 스냅 위치로 이동 및 스크롤 동작을 제어하는 기능이 포함된 CSS 모듈이며.Scroll snap 모듈을 사용하면 사용자가 터치, 휠 스크롤 조작을 마쳤을 때의 오프셋을 설정할 수 있다.
스크롤링은 사용자와 웹 콘텐츠 간의 자연스러운 인터랙션이지만 정밀도가 부족하여
콘텐츠의 중간에서 멈추거나주요 콘텐츠의 일부만 보이기도 한다.
하지만 미리 설정한 위치로 이동한다면 자연스러운 스크롤 움직임과 함께
사용자 경험은 더욱 향상될 수 있으며.
CSS Scroll snap 모듈을 사용하면 스크롤 동작을 정의하기 위한 JavaScript 사용을 줄일 수 있고,하드웨어 가속을 사용하기 때문에 웹 브라우저에서 원활한 동작과
성능 향상을 기대할 수 있다는 장점이 있다
https://wit.nts-corp.com/2018/08/28/5317
프로젝트 도입 결과물
'트러블슈팅' 카테고리의 다른 글
| fatal: your current branch appears to be broken 깃에러 (0) | 2023.07.19 |
|---|---|
| NextRouter was not mounted. (1) | 2023.07.10 |
| 이미지 리사이징 (0) | 2023.02.09 |
| Cloud Front 도입과 access denied 오류 (0) | 2023.02.06 |
| 관리자 페이지 (0) | 2023.02.06 |