스크롤링 및 컨텐츠 관리

1) 스크롤에 대해 생각하는 이유

• 올바른 컨텐츠 검색 속도를 높입니다 (클릭 횟수 감소-스크롤 증가)
• 제어 감각을 제공합니다 (앵커, "위에서 위로", 접착 된 필터)
• 리소스 저장 (게으른 부팅, 가상화),
• 변환을 증가시킵니다 (앞에서 볼 수있는 내용, "엄지 영역" 의 CTA).

원칙: 속도> 밀도; 문맥> 잡음; 예측 가능성> "매직".

2) 스크롤링 모델: 무엇을 선택할 때

1. 고전적인 페이지

검색 결과, 테이블, 보고에 적합합니다. 장점: 제어, 안정적인 탭, 쉬운 페이지 탐색. 단점: 더 많은 클릭, 주의 "갭".

2. 무한 스크롤

저렴한 오류 비용의 피드 및 카탈로그 (뉴스, 컨텐츠 카드). 장점: 약혼, 더 적은 클릭. 단점: "잃어버린 바닥", 돌아 오기 어렵고 어려운 해결.

3. 하이브리드: 더 보이기/더 많이로드

타협: 위젯은 버튼 당 배치로로드됩니다. 장점: 렌더링 제어, 바닥 가용성, 예측 가능성. 단점: 여전히 선형.

4. 세그먼트 스크롤 (섹션/앵커)

긴 기사, 참조 및 위키. 장점: 문서지도, 빠른 점프. 단점: 내비게이션 및 내용 테이블 복잡화.

• 카탈로그/로비-하이브리드 또는 무한 + "처음으로 돌아갑니다".
• 검색/테이블-페이지 크기 및 빠른 필터로 페이지 매김.
• 문서/Longrid-TOC 및 진행 바 읽기가있는 세그먼트.

3) 정보 아키텍처 및 레이아웃

상단 헤더 (고정): 검색, 빠른 필터, 정렬; 콘텐츠가 나타날 때 겹치지 않습니다.
사이드 바 (데스크톱): 내용 표 (TOC), 필터; 모바일-남은 시트.
끈적 끈적한 요소: 상단 필터, 앵커 메뉴, 진행 상황 표시기 읽기, "Back to Top".
콘텐츠 카드: 예측 가능한 미리보기 높이 → 레이아웃 점프 감소.
빈 상태: "빈 화면" 이 아닌 해골/쉬머.

4) 스크롤링 동작 (미세 역학)

관성 및 물리학: 스크롤은 "네이티브" 로 나타나야합니다. 시스템 패턴을 끊지 마십시오.
축 잠금: 수평선 (회전 목마) 의 경우 모션 임계 값 이후 세로 축을 잠급니다.
스냅 포인트: 회전 목마, 카드 및 마법사 단계에 적합합니다. 긴 테이프에서 남용하지 마십시오.
고정 스크롤: 다시로드 할 때 사용자 초점 및 상대 위치를 유지하십시오.
스크롤 체인: 페이지로 "점프" 하지 않도록 중첩 된 컨테이너에서 이벤트의 "흐름" 을 제한하십시오.

5) 주의 관리

플로팅 STA/" 예금 "/" 재생 ": 엄지 영역에서는 내용이 겹치지 않습니다.
진행 표시 줄 읽기: 앵커와 동기화 된 맨 위의 눈금자.
내용 표 (TOC) -현재 주제 강조, 바로 가기, 상단 버튼.
타이틀 앵커: DM의 안정적인 해시; 캡 높이 보상으로 스크롤합니다.
상황 "고정" 필터: 1-2 화면을 스크롤 한 후 수정하십시오.

6) 큰 테이프로드 및 렌더링

게으른로드: 이미지, 비디오, 블록. 부하 임계 값은 ~ 1-2 화면 앞에 있습니다.
가상화/윈도우: 보이는 영역 + 버퍼 만 그립니다.
장소 보유자/해골: 예측 가능한 크기, "도약" 이 없습니다.
배치 재 장전: 20-60 단계 요소; 쿼리와 렌더링 사이의 균형.
파티션 캐시: 되돌아 가면 위치를 복구하고 덩어리를로드하십시오.

7) 테이프에서 컨텐츠 관리

그룹화: 날짜/범주별로; 분리기 헤더 스틱.
정렬 및 필터: 활성 조건을 나타내는 가시적이고 액세스 가능합니다.
붕괴/확장: 긴 설명을 보려면 자세히 보십시오.
스크롤중인 미디어: 자동 일시 정지 비디오가 보이지 않습니다 소리가없고 명시 적으로 제어되는 경우에만 자동 재생.
오류 상태: "네트워크 손실", "로드 실패" -재 시도 및 저장 위치.

8) 가용성 및 현지화

"더 많이 다운로드", "처음으로", "TOC 열기" 와 같은 모든 동작을 제스처없이 사용할 수 있습니다.
초점 관리: 앵커를 탐색 할 때-초점을 섹션 제목으로 전송합니다.
스크린 리더: 스크롤 버튼/TOC, 주문 로직에 대한 설명.
RTL: 거울 수평 회전 목마 및 지표.
감소 된 모션: 단순화 된 효과를 선호하는 사람들을 위해 "복잡한" 애니메이션 및 시차를 사용하지 않습니다.

9) 성능: 목표와 측정

• 스크롤 생크: <1% 프레임> 16. 일반적인 장치에서는 7ms입니다.
• CLS (누적 레이아웃 시프트): 1 (특히 재 장전 중).
• TBT/차단: 스크롤하는 동안 무거운 동기 컴퓨팅을 피하십시오.
• 메모리: 긴 세션 중 안정적인 사용 (가상화 중 누출 없음).

• 수동 스크롤 청취자, '요청 애니메이션 프레임' 을 통한 계산 지연;
• 스크롤하는 동안 "가벼운" 그림자/복잡한 흐림 없음;
• 고정 또는 예측 가능한 카드 크기
• 다시 추첨을 저장합니다 (배치 업데이트).

10) 원격 측정 및 이벤트

• 'scroll _ star '/' scroll _ end' (소스, 속도, 방향),
• (PHP 3 = 3.0.6, PHP 4)
• 'viewport _ itements _ exposed' (id, 가시성 시간),
• 'toc _ click', 'anchor _ navigate', 'back _ to _ top _ click',
• (PHP 3 = 3.0.6, PHP 4)

• 깊이에 도달 (얼마나 많은 ecrap/요소가 보이는지),
• 아이템 당 노출 시간 (평균/중앙값),
• 오류율, 재생률,
• 스크롤 포기 (다음 배치가로드되기 전에),
• 위치로 돌아 가기 성공.

11) 다양한 유형의 콘텐츠에 대한 패턴

게임/제품 카탈로그: 하이브리드 테이프, 끈적 끈적한 필터, 가상화, "더 많은 것을 보여주기" 버튼.
Longrides/wiki: TOC, 진행 표시 줄, 앵커, "섹션으로의 복사 링크".
뉴스 피드: 분리기 날짜가있는 끝없는 피드, "마지막으로 돌아가십시오".
테이블/그리드: 페이지 매김 + "N 바이", 동결 제목 및 키 열, 필요에 따라 수평 스크롤.
라이브 피드/로그 스트림: "일시 정지/잡기" 가있는 자동 스크롤, 버퍼 제한.

12) 모바일 기능

엄지 영역: CTA와 "처음부터" -아래에서; 필터-나가는 시트에서.
"풀링" 바닥: 중지 된 경우에만 표시하십시오. 스크롤을 방해하지 마십시오.
제스처: 수평 회전 목마 - 축 방향 잠금 장치; 새로 고침-예상되는 경우에만.
부드러움: "무거운" 목록에 대한 60 FPS 점검; 효과의 밀도를 줄입니다.

13) 안티 패턴

"종료없는 끝없는 테이프 + 숨겨진 바닥" (링크/연락처/규칙 없음).
읽기를 이동시키는 추가 부하-컨텍스트 손실.
텍스트와 CTA가 겹치는 플로팅 패널.
무제한 높이의 카드 → "방황" 레이아웃 시프트.
보이는 경우 소리가 나는 자동 플레이 미디어.
"다시" 위치 복구가 없습니다.

14) 구현 점검표 (스프린트 별)

스프린트 1: 모델 선택 (페이지/하이브리드/무한), 기본 스크롤 용기, 끈적 끈적한 모자/필터, "Back to Top".
스프린트 2: 이미지/블록, 골격, 예측 가능한 카드 크기의 게으른 로딩.
스프린트 3: 가상화 목록, 위치 저장 및 버스트 캐시, 앵커/TOC.
스프린트 4: 스크롤 및 노출 원격 측정 및 스크롤 생크 경고.
스프린트 5: 접근성 (초점/판독기), RTL, 모션 감소, 키보드 탐색 (데스크탑).
스프린트 6: 미세 최적화: 축 잠금 장치, 스냅 포인트, 테이프의 UX 미디어 향상.

15) 용어집

무한 스크롤-요소의 무한한 로딩.
Windowing/Virtualization-렌더링은 보이는 목록 항목 만 보입니다.
고정 스크롤링-재 장전 중 상대 위치를 유지합니다.
스크롤 생크- 스크롤 할 때 프레임을 건너 뛰어 "저킹" 합니다.
TOC (내용 표) -앵커가있는 내용 테이블.
CLS/INP-레이아웃 안정성 및 응답 성 측정.

16) 결론

스크롤링은 단순히 "페이지 이동" 이 아니라 관심과 리소스 관리 전략입니다. 이기는 인터페이스는 다음과 같습

1. 적절한 흐름 모델 (페이지/하이브리드/무한) 을 선택하고

2. 제어 (앵커, TOC, 끈적 끈적한 필터, "처음까지"),

3. 빠르고 안정적인 렌더링 (게으른 로딩, 가상화, 시프트 없음),

4. 접근 가능하고 예측 가능한 상

5. 원격 측정을 측정하고 데이터를 기반으로 UX를 개선합니다.