Web Guide목차진행 표시긴 글 읽기
스크롤 진행 표시와 목차 UI
긴 글을 읽을 때 '얼마나 남았지'라는 생각이 이탈을 만듭니다.
끝이 보이면 계속 읽고, 안 보이면 중간에 나갑니다.
01언제 필요한가
짧은 페이지에는 필요 없습니다. 스크롤을 여러 번 해야 하는 긴 콘텐츠에서 효과가 있습니다.
블로그 글, 가이드, 상세한 서비스 설명 페이지가 대상입니다.
1
긴 글
읽는 데 몇 분 이상 걸리는 콘텐츠.
2
섹션이 여럿
주제가 여러 개로 나뉜 페이지.
3
참고용 문서
특정 부분만 찾아보는 경우가 많은 페이지.
4
불필요한 경우
한 화면에 들어가는 짧은 페이지. 오히려 방해가 됩니다.
02진행 표시 방식
화면 상단에 얇은 막대로 진행률을 보여주는 방식이 가장 일반적입니다. 공간을 거의 차지하지 않으면서 끝이 보이게 합니다.
퍼센트 숫자보다 시각적인 막대가 부담이 적습니다.
상단 진행 막대
공간을 거의 안 씀 · 직관적 · 스크롤에 따라 채워짐 · 가장 무난한 방식
읽기 시간 표시
'읽는 데 약 5분'. 글 시작 부분에 표시. 시작 전에 판단하게 합니다
03목차가 더 유용할 때도 있다
진행 표시는 얼마나 남았는지만 알려줍니다. 목차는 무엇이 있는지 보여주고 원하는 곳으로 바로 갈 수 있게 합니다.
참고용 문서나 긴 가이드에서는 목차가 훨씬 유용합니다.
본문 상단 목차
글 시작 부분에 소제목 목록. 클릭하면 해당 위치로 이동.
고정 사이드 목차
화면 옆에 고정. 현재 위치가 강조됩니다. PC에서 유용.
모바일 목차
접었다 펴는 방식. 화면을 차지하지 않게.
현재 위치 표시
지금 읽고 있는 섹션을 강조하면 방향 감각이 생깁니다.
맨 위로 버튼
긴 글에서는 목차로 돌아가는 수단이 필요합니다.
04목차는 자동 생성이 낫다
글을 쓸 때마다 목차를 손으로 만들면 빠뜨리거나 본문과 어긋납니다. 소제목을 읽어 자동으로 만드는 방식이 확실합니다.
이렇게 하면 글을 수정해도 목차가 자동으로 맞춰집니다.
자동 생성소제목 태그를 읽어 목차를 만듭니다. 관리 부담이 없습니다.
제목 구조 전제소제목이 제대로 마크업되어 있어야 합니다.
깊이 제한1~2단계만. 너무 깊으면 목차가 길어집니다.
짧은 글은 생략소제목이 2개 이하면 목차를 만들지 않습니다.
링크 동작클릭 시 해당 위치로 부드럽게 이동하게 합니다.
CHECK POINT
□ 긴 콘텐츠에만 적용했는가
□ 짧은 페이지에 불필요하게 넣지 않았는가
□ 진행 표시가 공간을 많이 차지하지 않는가
□ 참고용 문서에는 목차를 제공하는가
□ 목차가 자동 생성되는가
□ 현재 읽는 위치가 표시되는가
□ 모바일에서 목차가 화면을 가리지 않는가
□ 맨 위로 돌아가는 수단이 있는가
#목차#진행 표시#긴 글 읽기#자동 생성#제목 구조#모바일#사용성#홈페이지 디자인#웹비스타#홈페이지 제작