카테고리 랜딩(허브) 페이지 만드는 법｜요약·바로가기·시리즈 연결
요약: 허브 페이지는 “카테고리의 목차이자 길잡이”입니다. 요약 인트로로 범위를 규정하고, 바로가기 카드로 핵심 경로를 제시하며, 시리즈 연결로 회독 동선을 만듭니다. 이 글은 카드형 레이아웃, 대표 글 선정 규칙, 내부 링크 구조를 실무 기준으로 정리했습니다.
허브의 목표와 구성: 요약·바로가기·시리즈
허브의 1차 목표는 “독자가 이 카테고리에서 얻을 수 있는 결과”를 한 문단으로 설명하고, 2차 목표는 “다음 행동”을 분명하게 제시하는 것입니다. 이를 위해 상단에 요약 인트로를 배치하고, 그 아래에 바로가기 카드(핵심 주제 4~8개)를 배열합니다. 이어서 시리즈 블록을 구성해 연재 글을 한 번에 회독할 수 있도록 합니다.
요약 인트로
- 한 문단(3~4문장)로 범위·대상·결과를 규정. 예) “이 허브는 티스토리 운영의 기본기와 점검 루틴을 모았습니다.”
- 내부 링크 2~3개를 자연스럽게 포함(핵심 경로로 안내).
바로가기 카드
- 주제는 과업 중심 명칭(예: “스킨 백업”, “이미지 최적화”).
- 카드는 2열(모바일 1열)·터치 타깃 44×44px·제목 28~36자.
- 썸네일은 16:9·텍스트 최소화·ALT는 “무엇+맥락+핵심”.
시리즈 연결
- 연재 묶음(예: “모바일 최적화 시리즈”)을 카드 1줄로 제공, 이동 순서 표기(1→2→3).
- 각 시리즈 카드에는 “읽는 데 걸리는 시간(예: 12분)”을 표시하면 회독 동선이 명확해집니다.
팁: 허브는 ‘항상 최신’이어야 합니다. 월 1회 점검하고 대표 글·링크를 갱신하세요.
카드형 레이아웃: 썸네일·제목·보조 정보 규칙
카드형은 스캔 속도가 빠르고, 모바일에서 그리드로 확장하기 쉽습니다. 핵심은 시각 계층과 정보 밀도입니다. 썸네일은 16:9(1200 ×675), 제목은 2줄 이내(28~36자), 보조 정보(요약·태그)는 2줄 이내로 제한하여 가독성을 지킵니다. 카드 내부의 링크는 제목 하나에 집중시키고, 썸네일은 클릭 영역을 공유하되 접근성 레이블을 정확히 부여합니다.
디자인 규칙
- 그리드: 데스크톱 2~3열, 태블릿 2열, 모바일 1열.
- 간격: 카드 간 16~20px, 카드 내부 패딩 16px.
- 그림자/테두리: 부드러운 그림자 + 12~16px 라운드.
- 호버/포커스: 제목 색 진하게, 테두리 강조, 포커스 테두리 3px.
텍스트 규칙
- 제목은 과업 중심(동사/명사 혼용). 예) “이미지 ALT·파일명 규칙”.
- 요약은 결과 중심(“무엇을 어떻게 해서 무엇을 얻는가”).
- 태그/뱃지는 1~3개로 제한(중요 키워드만).
접근성·성능
- 썸네일
alt1문장, 장식 아이콘은alt="" aria-hidden="true". - 포커스 이동은 카드 안에서 제목 링크가 먼저 받도록 순서를 설계.
- 아래쪽 썸네일은 지연 로딩, 첫 행은 eager 가능.
주의: 카드마다 버튼·링크를 남발하면 포커스가 분산됩니다. 제목 링크 1개 원칙을 지키세요.
대표 글 선정·내부 링크 구조(허브→글/시리즈)
허브의 신뢰도는 대표 글의 품질에 좌우됩니다. 트래픽 많은 글만 모으는 대신, 학습 경로를 따라 배열해야 합니다. 독자가 “입문→실무→점검” 순서로 이동하도록 단계형 묶음을 구성하고, 각 단계의 대표 글 1~2개씩만 노출합니다.
대표 글 선정 규칙
- 입문형: 개념·필수 설정. 최신 업데이트가 반영된 글.
- 실무형: 절차/체크리스트/코드 스니펫 포함.
- 점검형: 지표/템플릿/오류 복구 루틴.
- 유통기한: 6개월마다 재검토, 낡은 스크린샷은 우선 교체.
내부 링크 구조
- 허브 → 대표 글: 카드 제목 링크(1개)로 연결.
- 대표 글 ↔ 관련 글: 본문 중간/하단에 “연관 읽기” 블록(2~4개).
- 시리즈: 1→2→3 순서를 명시하고, 각 글 상단에 이전/다음 링크를 고정.
- 허브 ↔ 시리즈: 시리즈 시작 글과 허브를 상호 링크해 회독 루프를 형성.
허브-대표-시리즈 간 상호 링크가 구축되면 체류 시간과 회독률이 함께 개선됩니다. 이는 사용성 개선일 뿐 아니라 검색 엔진에 주제 군집을 신호로 제공하는 효과가 있습니다.
코드 스니펫(복붙용)
허브 카드 그리드(기본 CSS)
.hub {
display:grid; gap:20px;
grid-template-columns:repeat(3,1fr);
}
@media (max-width:1024px){ .hub{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .hub{grid-template-columns:1fr} }
.hub .card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;overflow:hidden}
.hub .thumb{aspect-ratio:16/9; background:#f1f5f9}
.hub .body{padding:14px 16px}
.hub .title{font-weight:700;color:#0f172a;text-decoration:none;border-bottom:1px dotted rgba(2,6,23,.2)}
.hub .title:hover{color:#1d4ed8;border-color:#1d4ed8}
.hub .meta{color:#64748b;font-size:14px;margin-top:6px}
.hub .tags span{display:inline-block;background:#eef2ff;color:#1d4ed8;border-radius:999px;padding:2px 8px;margin-right:6px;font-size:12px}
허브 카드 HTML(예시)
<div class="hub">
<article class="card">
<a class="thumb" href="/entry/mobile-first-checklist" aria-label="모바일 우선 점검표"></a>
<div class="body">
<a class="title" href="/entry/mobile-first-checklist">모바일 우선 점검표</a>
<p class="meta">가이드 · 읽는 시간 7분</p>
<p>폰트·여백·이미지·탭 네비게이션을 한 번에 점검합니다.</p>
<div class="tags"><span>모바일</span><span>웹바이탈</span></div>
</div>
</article>
<!-- 카드 반복 -->
</div>
시리즈 네비게이션(상·하단)
<nav aria-label="시리즈 내비게이션">
<a href="/entry/series-1" aria-current="page">1. 시작하기</a> ·
<a href="/entry/series-2">2. 실무 적용</a> ·
<a href="/entry/series-3">3. 점검 루틴</a>
</nav>
점검표｜합격 기준과 흔한 실수
| 항목 | 권장 규칙 | 합격 기준 |
|---|---|---|
| 요약 인트로 | 3~4문장, 내부 링크 2~3개 | 주제·대상·결과가 명확 |
| 바로가기 카드 | 2열(모바일 1열), 제목 28~36자 | 스캔 5초 내 핵심 파악 |
| 시리즈 연결 | 순번 표기 1→2→3 | 회독 동선 일관 |
| 접근성 | 밑줄·대비·포커스 테두리 | 키보드 탐색 100% 가능 |
| 신선도 | 월 1회 갱신 | 오래된 스샷/링크 0건 |
자주 틀리는 부분: 카드마다 링크 여러 개, 과도한 텍스트, 썸네일 내 과한 문구, 포커스 스타일 제거, 업데이트 미반영.
베스트 프랙티스: 허브/대표/시리즈의 상호 링크로 루프를 만들고, 카드 규칙과 색상·포커스 스타일을 스킨 한 곳에서 공통 관리하세요.
실천 요약
- 허브의 골자는 요약 인트로 → 바로가기 카드 → 시리즈입니다.
- 카드는 16:9 썸네일·제목 28~36자·요약 2줄로 간결하게.
- 대표 글은 입문/실무/점검 단계형으로 선정, 6개월마다 갱신.
- 허브·대표·시리즈 간 상호 링크로 회독 루프를 완성하세요.