인피니트 스크롤Infinite Scroll

끝이 없는(infinite) 것처럼 보이는 스크롤입니다. 실제로는 끝에 가까워지면 다음 묶음을 몰래 불러와 붙이는 것입니다. 인스타그램·트위터 피드가 이 방식을 대중화했습니다.

언제 쓰나요

목적 없이 둘러보는 피드에 맞습니다. 커뮤니티 글, 사진, 추천 상품. 다음 것이 계속 나오는 것이 경험의 일부인 곳입니다.

반대로 무언가를 찾는 목록에는 맞지 않습니다. 위치를 기억할 수 없고, 푸터에 닿을 수 없고, 뒤로 가기를 누르면 맨 위로 튕깁니다. 이럴 때는 페이지네이션이나 "더 보기" 버튼이 낫습니다. 어느 쪽이든 끝에 도달했다는 표시("모두 봤습니다")는 꼭 둡니다.

AI에게 시키기

커뮤니티 피드를 인피니트 스크롤로 바꿔줘.
- 목록 끝 300px 전에 다음 20개를 미리 불러오기 (IntersectionObserver)
- 불러오는 동안 아래에 스켈레톤 3개, 실패하면 "다시 시도" 버튼
- 마지막 페이지에 도달하면 "모두 봤습니다" 표시하고 더 요청하지 않기
- 글을 열었다 뒤로 오면 스크롤 위치와 이미 불러온 목록을 유지

마지막 줄이 빠지면 글 하나 보고 돌아올 때마다 맨 위로 갑니다. 인피니트 스크롤에서 가장 많이 나오는 불만입니다.

혼동 주의

• 페이지네이션: 번호로 나눠 이동합니다. 위치 기억·공유·푸터 접근이 되는 것이 장점입니다.
• "더 보기" 버튼: 사용자가 누를 때만 붙습니다. 자동 로드의 편함과 페이지네이션의 통제 사이. 푸터에 닿아야 하는 페이지라면 이쪽입니다.
• 가상 스크롤(Virtual Scroll): 화면에 보이는 행만 그려서 수만 개도 가볍게 만드는 기술입니다. 인피니트 스크롤과 같이 쓰이지만, 데이터를 더 불러오는 것과는 별개입니다.
• 스켈레톤: 불러오는 동안 자리에 그리는 뼈대입니다. 인피니트 스크롤의 로딩 표시로 씁니다.