글 목록(아카이브) 최적화｜목록형/썸네일형 가독성 체크리스트

아카이브(글 목록) 가독성 최적화 가이드

 

글 목록(아카이브) 최적화｜목록형/썸네일형 가독성 체크리스트

 

핵심 요약: 아카이브는 방문자가 처음 마주하는 콘텐츠 지도입니다. 목록형은 정보 밀도가 높고 빠르게 스캔할 수 있으며, 썸네일형은 시각적 몰입도를 높여 클릭 유인을 만듭니다. 핵심은 카드 구성·요약문 길이·메타 정보·페이징·모바일 가독성·성능·접근성을 균형 있게 설계하는 것.

📑 목차

• 아카이브의 역할과 KPI
• 목록형 vs 썸네일형: 선택 기준
• 카드/행 구성 요소 체크리스트
• 모바일 가독성·성능 최적화
• 페이징·정렬·필터 UX
• 내부링크·카테고리 안내
• 출고 전 품질 체크리스트
• 오늘부터 실행 요약

 

아카이브의 역할과 KPI

 

• 탐색: 사용자가 원하는 글을 3클릭 이내로 찾게 돕기
• 전환: 리스트 → 글 상세 클릭률(CTR) 향상
• 체류: 상세 진입 후 왕복 내부링크로 회전율/완독률 높이기

 

아카이브의 핵심 KPI와 개선 루프

 

목록형 vs 썸네일형: 선택 기준

 

구분	장점	적합한 주제/상황
목록형	정보 밀도 높음, 빠른 스캔, 스크롤 짧음	튜토리얼/노하우/뉴스 요약 등 텍스트 중심
썸네일형	시각적 몰입, 클릭 유도, 공유 이미지에 유리	여행/리뷰/사례/가이드 등 이미지 친화

 

혼합형으로 상단 추천(썸네일) + 아래 목록형 조합도 효과적입니다.

 

카드/행 구성 요소 체크리스트

 

• 제목(H3): 24~36자, 핵심 키워드 1~2개 자연 배치
• 요약문: 60~90자(PC 기준 2줄) — 글의 목적·효과 명확화
• 메타: 카테고리·작성/업데이트일·읽는 시간(예: 4분)
• 썸네일: 3:2 또는 16:9, WebP/AVIF, width/height 지정
• 행동: 자세히 보기 / 시리즈 버튼

팁: 요약문 앞 8~12자에 사용자 의도가 보이게 쓰면 CTR이 안정적으로 오릅니다.

 

카드/행 구성의 최적 배치 예

 

모바일 가독성·성능 최적화

 

• 폰트 15~16px, 행간 1.7~1.8, 카드 간격 12~16px
• 이미지 loading="lazy", 실제 표시 크기와 width/height 일치
• 목록형은 2~3줄 요약 유지(줄바꿈/말줄임 처리)
• 광고/위젯 영역은 고정 높이 지정해 CLS 방지

 

페이징·정렬·필터 UX

 

• 페이징: 페이지네이션 또는 “더 보기(Load more)” — 첫 화면에 최소 8~12개 노출
• 정렬: 최신순 기본, 인기/시리즈/가이드 탭 제공 가능
• 필터: 태그/서브주제로 좁혀보기(선택)

데이터 관리는 GA4에서 리스트 클릭 이벤트를 별도로 추적해 카드 유형·요약 길이·썸네일 유무의 성과를 비교하세요.

 

내부링크·카테고리 안내

 

아카이브 상단에 카테고리 가이드(허브)를 부가하면 탐색성이 상승합니다. 카드 하단에 시리즈/주제 링크를 고정해 왕복 이동을 유도하세요.

관련: 카테고리 구조 다시 짜기 · 메인 화면 UX 가이드 · HTML 편집 기능 가이드

허브 안내와 시리즈 링크로 왕복 탐색 강화

 

출고 전 품질 체크리스트

 

• 레이아웃: 목록형/썸네일형 중 주제에 맞는 한 가지를 우선 채택
• 제목·요약·메타·이미지·행동 버튼이 한 화면에 조화롭게 보이는지 확인
• 요약문 60~90자, 제목 24~36자, 중복 키워드 과다 삽입 금지
• 이미지 ALT·width/height·lazy 적용, 광고·위젯 고정 높이로 CLS 방지
• 내부링크 2개 이상(허브/시리즈) — 왕복 이동 경로 점검
• 모바일 미리보기: 360~414px 뷰에서 1분 스캔 테스트

 

오늘부터 실행 요약

 

1. 아카이브 레이아웃을 목록형/썸네일형 중 하나로 우선 확정
2. 카드 구성(제목·요약·메타·썸네일·버튼) 표준 템플릿 만들기
3. 상단에 카테고리 허브 안내 추가, 카드 하단에 시리즈/주제 링크 고정
4. GA4 리스트 클릭 이벤트 추적 → 요약 길이/썸네일/정렬 A/B 점검

 

처음이신가요? 이 글은 시리즈의 일부예요. 먼저 블로그 소개와 읽는 순서를 살펴보면 이해가 더 쉬워요.
→ 상단 공지 안내 공지에는 카테고리 구조 · 아카이브 가독성 · HTML 편집 가이드의 빠른 링크가 있어요.