휴 ... 시간여행을 통해 밀린 학습 일지를 다 작성했습니다 ~ ㅎㅎ
기념으로 오늘은 네이버 웹 서핑을 좀 했는데요!
하다가 좀 특이한 점을 발견했습니다,,,!
바로바로로바로바로
네이버가 무한스크롤 방식으로 변경됐다는 점입니다!!!
원래는 페이지네이션 방식을 사용했던 것 같은데 스크롤이 무한으로 계속 되더라고요,,🙊
이미 SNS에서는 당연시 사용된 기술이지만
네이버는 검색 엔진인 만큼 이 방식을 사용할 줄 몰랐는데 정말 신기했어요
기존에 사용하던 방식이 아니라서 좀 어색하기도 ,,, 불편한 것 같기도 ,,,
그러다가 갑자기 왜 네이버는 이러한 변화를 시도했을까 하는 생각이 들었습니다
그래서 아티클 스터디도 해야한다~ 하는 김에 오늘은 무한 스크롤에 대해서 공부해 봤어요!
그 내용을 오늘 학습 일기에서 정리해 보겠습니다
*아래 글은 https://blog.insilicogen.com/164의 내용을 요약하여 정리한 부분이 있음을 명시합니다*
무한 스크롤 (Infinite Scroll)
웹 페이지에서 콘텐츠를 자동으로 로딩하여 사용자가 스크롤할 때 추가적인 내용을 계속해서 보여주는 기법
이 방식은 사용자가 페이지를 새로 고침 하거나 다음 페이지로 이동하지 않고도 콘텐츠를 탐색할 수 있도록 해줌
무한 스크롤 구현 방법
- JavaScript의 Scroll Event
- Intersection Observer API
구현 시 주의 사항
웹성능; 페이지에 과도한 요소가 추가되면 브라우저의 성능이 저하되어 페이지 로딩이 실패하거나 브라우저가 다운될 위험이 있음
⇒ Google에서 개발한 웹 성능 분석 도구인 Lighthouse에서는 문서의 요소 개수가 1500개 이하로 유지되는 것을 권장
무한 스크롤 장점
- 사용자가 콘텐츠를 끊김 없이 탐색할 수 있도록 하여 보다 자연스러운 사용자 경험을 제공
- 스크롤만으로 추가 콘텐츠가 로드되기 때문에 사용자는 더 많은 콘텐츠를 소비하게 됨
- 클릭 없이 스크롤만으로 콘텐츠를 탐색할 수 있어 사용자에게 편리함 제공
무한 스크롤 단점
- 지나치게 많은 스크롤을 요구할 수도 있음
- 많은 데이터를 로드해야 하므로 사용자의 기기 성능과 네트워크 속도에 따라 느려질 수 있음
- 특정 콘텐츠로 바로 접근하기 어려워지며 끝없는 스크롤로 인해 사용자가 원하는 정보를 찾기 어려울 수도 있음
페이지네이션 (Pagination)
사용자가 명확하게 구분된 페이지를 하나씩 탐색하는 방식
사용자가 다음 페이지로 이동하여 콘텐츠를 탐색하도록 함
페이지네이션 장점
- 사용자가 현재 어느 위치에 있는지 쉽게 파악할 수 있으며, 원하는 페이지로 바로 이동할 수 있음
- 한 번에 로드되는 데이터 양이 적어 페이지 로딩 속도가 비교적 빠르고 안정적
- 특정 페이지로 바로 접근할 수 있어 사용자가 원하는 정보를 빠르게 찾을 수 있음
페이지네이션 단점
- 사용자가 다음 페이지로 이동하기 위해서는 추가적인 클릭이 필요하므로 탐색 과정이 번거로울 수 있음
- 모바일 환경에서 페이지 번호를 클릭하는 것이 불편할 수 있음
- 사용자가 페이지를 넘기는 과정에서 탐색을 중단할 가능성이 높아 콘텐츠 소비가 줄어들 수 있음
무한스크롤은 사용자가 많은 양의 콘텐츠를 한꺼번에 탐색하는 데 유리
소셜 미디어나 뉴스 사이트처럼 사용자가 다양한 콘텐츠를 연속적으로 소비하는 경우에 적합
페이지네이션은 사용자가 특정 정보를 체계적으로 탐색해야 하는 경우에 유리
검색 엔진이나 전자 상거래 사이트처럼 사용자가 특정 정보를 찾는 데 집중하는 경우에 적합
무한스크롤을 공부하면서 네이버가 더 많은 콘텐츠를 소비하기를 바라는 마음으로 그 기술을 채택한 것 같다는 생각이 들었어요. 그런데 많은 사람들이 검색 엔진 목적이 무한한 정보 수집이 아니라 필요한 정보 수집일 텐데 페이지네이션보다 더 효율적일까? 하는 생각도 동시에 들었답니당.... 아직은 왜 네이버가 이런 선택을 했는지 모르겠다는 결론에 이르렀어용,,! 좀 더 깊이있게 공부하고 생각해보면서 왜 네이버가 이 기술을 채택했는지 알아봐야겠다는 생각을 했습니당
'PM 준비 > 학습 일지' 카테고리의 다른 글
| 🌱8주차 세 번째 학습 일지🌱 마지막 학습 일지 [제로베이스 PM스쿨 29기] (2) | 2024.10.17 |
|---|---|
| 🌱6주차 세 번째 학습 일지🌱 PM 포트폴리오 주의사항 [제로베이스 PM스쿨 29기] (0) | 2024.10.14 |
| 🌱6주차 두 번째 학습 일지🌱 PM/PO 포트폴리오를 작성하기 전 알아둬야할 것[제로베이스 PM스쿨 29기] (6) | 2024.10.14 |
| 🌱6주차 첫 번째 학습 일지🌱 가트너의 2024 AI 트랜드 보고서 [제로베이스 PM스쿨 29기] (12) | 2024.10.10 |
| 🌱5주차 세 번째 학습 일지🌱 [제로베이스 PM스쿨 29기] (2) | 2024.10.06 |
