6장. 시리즈 구조와 내부 링크로 흐름 잇기

지금까지 만든 내용은 각각의 글만 놓고 봐도 충분히 도움이 되지만, 시리즈 구조와 내부 링크를 잘 설계하면 구독자가 처음부터 끝까지 자연스럽게 읽도록 유도할 수 있습니다. 6장에서는 블로그용 시리즈 구조와 전자책용 내부 링크를 함께 설계하는 방법을 다룹니다.

6-1. 시리즈형 콘텐츠 구조 잡기

시리즈형 콘텐츠는 하나의 큰 주제를 여러 편으로 나누어 연재하는 방식입니다. “블로그에서 GitHub 파일 공유하기”라는 주제 역시 1장~10장 구조 그대로 블로그 시리즈로 옮길 수 있습니다.

1) 시리즈 전체 흐름 설계

예를 들어, 블로그에서는 다음과 같이 7편짜리 시리즈로 나눌 수 있습니다.

1편. 블로그와 GitHub를 함께 써야 하는 이유
2편. GitHub 리포지토리 만들기와 첫 업로드
3편. 다운로드용 블로그 글 구조 만들기
4편. 블로그 하단 GitHub 위젯 설치하기
5편. 스크린샷·FAQ·오류 대응으로 막힘 없이 안내하기
6편. 시리즈 목차와 내부 링크 설계하기
7편. 전자책과 수익화 전략으로 확장하기
  

이렇게 미리 흐름을 잡아두면, 각 글에서 어떤 내용을 얼마나 깊게 다룰지 결정하기가 훨씬 쉬워집니다.

2) 시리즈 제목 규칙 통일하기

시리즈 제목은 일정한 패턴을 유지해야 독자와 검색엔진 모두에게 “연결된 글”이라는 인상을 줄 수 있습니다.

[GitHub 연동 시리즈 1] 블로그와 GitHub를 함께 써야 하는 이유
[GitHub 연동 시리즈 2] GitHub 리포지토리 만들기와 첫 업로드
[GitHub 연동 시리즈 3] 다운로드용 블로그 글 구조 만들기
...
  

숫자를 앞에 둘지, 뒤에 둘지, 중간에 해시태그처럼 표기할지 한 번 정해 두면 전편에 걸쳐 동일하게 유지합니다.

6-2. 시리즈 목차 블록 만들기 (블로그용)

시리즈형 글에서 가장 중요한 것은 “다른 편으로 이동하는 길”을 명확하게 만들어 두는 것입니다. 이를 위해 각 글 상단이나 하단에 시리즈 목차 블록을 두고, 다른 편으로 이동하는 내부 링크를 걸어 둡니다.

1) 시리즈 목차 HTML 예시

<div class="series-toc">
  <h2>GitHub 연동 시리즈 목록</h2>
  <ol>
    <li><a href="/post/github-series-1">[1편] 블로그와 GitHub를 함께 써야 하는 이유</a></li>
    <li><a href="/post/github-series-2">[2편] GitHub 리포지토리 만들기와 첫 업로드</a></li>
    <li><a href="/post/github-series-3">[3편] 다운로드용 블로그 글 구조 만들기</a></li>
    <li><a href="/post/github-series-4">[4편] 블로그 하단 GitHub 위젯 설치하기</a></li>
    <li><a href="/post/github-series-5">[5편] 스크린샷·FAQ·오류 대응으로 막힘 없이 안내하기</a></li>
    <li><a href="/post/github-series-6">[6편] 시리즈 목차와 내부 링크 설계하기</a></li>
    <li><a href="/post/github-series-7">[7편] 전자책과 수익화 전략으로 확장하기</a></li>
  </ol>
</div>
  

2) 간단한 스타일 예시

<style>
.series-toc {
  border: 1px solid #e0e0e0;
  background: #fafafa;
  padding: 12px 16px;
  margin: 16px 0 24px;
  font-size: 0.95rem;
}
.series-toc h2 {
  font-size: 1rem;
  margin: 0 0 8px;
}
.series-toc ol {
  margin: 0;
  padding-left: 20px;
}
.series-toc a {
  color: #1a73e8;
  text-decoration: none;
}
.series-toc a:hover {
  text-decoration: underline;
}
</style>
  

이 목차 블록은 모든 시리즈 글에 공통으로 넣어 두면, 독자가 어느 글에서 시작하든 다른 편으로 쉽게 이동할 수 있습니다.

3) 본문 내 특정 섹션으로 점프하는 목차

긴 글에서는 시리즈 목차뿐 아니라, 글 내부에서도 각 섹션으로 점프할 수 있는 “내부 목차”를 두면 좋습니다.

<!-- 상단 목차 -->
<nav class="local-toc">
  <ul>
    <li><a href="#part-why-series">1. 왜 시리즈 구조를 써야 할까?</a></li>
    <li><a href="#part-series-toc">2. 시리즈 목차 블록 만들기</a></li>
    <li><a href="#part-ebook-links">3. 전자책 내부 링크 설계</a></li>
  </ul>
</nav>

<!-- 본문 섹션 -->
<h2 id="part-why-series">1. 왜 시리즈 구조를 써야 할까?</h2>
...
<h2 id="part-series-toc">2. 시리즈 목차 블록 만들기</h2>
...
<h2 id="part-ebook-links">3. 전자책 내부 링크 설계</h2>
...
  

6-3. 전자책에서 장/절 간 내부 링크 설계하기

전자책(ePub 등)에서는 여러 개의 HTML 파일이 모여 하나의 책을 이루고, 각 장·절로 이동하는 내부 링크를 직접 설계할 수 있습니다. 블로그에서 시리즈 목차를 만드는 방식과 원리는 거의 비슷합니다.

1) 같은 파일 안에서의 내부 링크

한 HTML 파일 안에서 특정 섹션으로 이동하는 기본 구조는 다음과 같습니다.

<!-- 이동 링크 -->
<a href="#chapter6-section1">6장 1절로 이동</a>

<!-- 도착 위치 -->
<h2 id="chapter6-section1">6-1. 시리즈형 콘텐츠 구조 잡기</h2>
  

2) 다른 장(다른 HTML 파일)으로 이동하는 링크

ePub 구조에서는 각 장이 별도 파일(예: chapter1.xhtml, chapter2.xhtml)로 나뉘어 있을 때가 많습니다.

<!-- 3장 1절로 이동하는 링크 예시 -->
<a href="chapter3.xhtml#chapter3-section1">3장 1절: 파일 소개 섹션으로 이동</a>

<!-- chapter3.xhtml 내부 -->
<h2 id="chapter3-section1">3-1. 블로그에서 보여줄 파일 소개 섹션 구성</h2>
  

이 구조를 이용하면, 6장에서 “시리즈와 내부 링크 전략”을 설명하면서 실제로 3장, 4장, 5장으로 바로 이동시키는 링크를 함께 제공할 수 있습니다.

3) 전자책용 “시리즈 안내 페이지” 예시

전자책 안에 시리즈 안내용 페이지를 하나 두고, 각 장으로 이동하는 링크를 모을 수도 있습니다.

<h1>이 책에서 다루는 GitHub 연동 시리즈</h1>
<ul>
  <li><a href="chapter1.xhtml">1장. 왜 블로그와 GitHub를 함께 써야 할까?</a></li>
  <li><a href="chapter2.xhtml">2장. GitHub 리포지토리 만들기와 첫 업로드</a></li>
  <li><a href="chapter3.xhtml">3장. 파일 소개와 설치·사용 방법, 샘플 본문</a></li>
  <li><a href="chapter4.xhtml">4장. 하단 위젯까지 포함한 다운로드 포스트</a></li>
  <li><a href="chapter5.xhtml">5장. 스크린샷, FAQ, 오류 대응으로 막힘 없이 안내하기</a></li>
  <li><a href="chapter6.xhtml">6장. 시리즈 구조와 내부 링크로 흐름 잇기</a></li>
</ul>
  

6장 정리

6장에서는 블로그와 전자책에서 시리즈 구조를 만들고, 내부 링크와 목차 블록을 통해 독자가 자연스럽게 다음 단계로 이동하도록 설계하는 방법을 살펴봤습니다. 다음 장에서는 이 시리즈 구조를 바탕으로, 무료 예제에서 유료 전자책과 강의로 이어지는 수익화 전략을 다뤄 볼 수 있습니다.

#가나 투데이 #ganatoday

그린아프로