Infinite Scroll
무한 스크롤
무한 스크롤은 사용자가 현재 끝에 가까워질 때 더 많은 피드 항목을 로드합니다.
실제 예시
추천 피드가 추천을 보여주고, 불러오는 중이라고 알려줘요. 맨 아래로 가는 다른 방법도 있죠.
주요 부분
- 01Current location
- 02Destination labels
- 03Focus order
- 04Responsive behavior
사용할 때
다음 항목이 정확한 위치보다 더 중요할 때 캐주얼한 탐색에 사용하세요.
다음 경우에는 사용하지 마세요
집중 검색, 비교, 또는 신뢰할 수 있는 결과가 필요한 작업에는 절대 사용하지 마세요.
코드에서 사용된 이름
IntersectionObserver 출시하기 전에
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome：Complete the task with 무한 스크롤 (Infinite Scroll)。 User context：추천 피드가 추천을 보여주고, 불러오는 중이라고 알려줘요. 맨 아래로 가는 다른 방법도 있죠. Recommended pattern：무한 스크롤 (Infinite Scroll)。 Why it fits：다음 항목이 정확한 위치보다 더 중요할 때 캐주얼한 탐색에 사용하세요. Do not use it when：집중 검색, 비교, 또는 신뢰할 수 있는 결과가 필요한 작업에는 절대 사용하지 마세요. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary)：하나의 공식 표준이 전체 용어를 통제하지 않음. 의미는 팀, 플랫폼 또는 프레임워크마다 달라질 수 있음. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
이 요청을 확인하세요
Review how 무한 스크롤 (Infinite Scroll) is used now. Definition: 무한 스크롤은 사용자가 현재 끝에 가까워질 때 더 많은 피드 항목을 로드합니다. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.