가나투데이

5장. 스크린샷, FAQ, 오류 대응으로 막힘 없이 안내하기

5장. 스크린샷, FAQ, 오류 대응으로 막힘 없이 안내하기

1~4장에서 블로그 글 구조와 GitHub 연동 방법을 만들었다면, 5장에서는 독자가 실제로 따라 하는 과정에서 막히지 않도록 돕는 스크린샷, FAQ, 오류 대응 섹션을 설계합니다. 이 장을 잘 만들어 두면 댓글·문의 대응 시간이 크게 줄고, 전자책 신뢰도도 함께 올라갑니다.

5-1. 스크린샷으로 설치 과정을 시각화하기

텍스트만으로 설치 과정을 설명하면, 특히 초보자는 중간에 쉽게 길을 잃습니다. 각 단계마다 핵심 화면을 캡처해 “여기까지 왔다면 맞게 따라오고 있는 것”을 눈으로 확인하게 해 주는 것이 중요합니다.

1) 어떤 화면을 반드시 캡처해야 할까?

GitHub 리포지토리 메인 화면 (Code 버튼, Download ZIP 위치)
Upload files 화면 (파일 드래그 구역, Commit changes 버튼)
코드 에디터에서 index.html이 열린 화면
블로그 에디터 HTML 모드에 코드가 붙어 있는 화면
최종적으로 블로그 화면에 버튼·위젯이 노출된 장면

전자책에서는 각 스크린샷에 번호를 붙이고, 본문에서 그 번호를 참조하는 방식이 좋습니다. 이렇게 하면 “그림 5-1을 참고하세요”라는 식으로 안내할 수 있습니다.

2) 스크린샷 캡션과 설명 HTML 예시

아래는 전자책/블로그에서 그대로 사용할 수 있는 스크린샷 삽입 예시입니다.

<figure>
  <img src="images/5-1-github-download-zip.png"
       alt="GitHub 리포지토리에서 Download ZIP 버튼 위치">
  <figcaption>
    그림 5-1. GitHub 리포지토리에서 <strong>Download ZIP</strong> 버튼 위치
  </figcaption>
</figure>

이처럼 <figure>와 <figcaption> 태그를 사용하면, 전자책에서도 이미지와 설명을 하나의 덩어리로 관리하기가 쉽습니다.

3) 단계별 스크린샷을 묶어 보여주는 예시

<h2>설치 과정 한눈에 보기</h2>

<ol>
  <li>GitHub에서 예제 리포지토리로 이동합니다. (그림 5-1 참고)</li>
  <li>Code 버튼을 클릭하고 Download ZIP을 선택합니다. (그림 5-2 참고)</li>
  <li>압축을 풀고 index.html을 코드 에디터로 엽니다. (그림 5-3 참고)</li>
  <li>코드를 블로그 HTML 모드에 붙여넣습니다. (그림 5-4 참고)</li>
</ol>

<figure>
  <img src="images/5-1-step1-repo.png" alt="예제 리포지토리 메인 화면">
  <figcaption>그림 5-1. 예제 리포지토리 메인 화면</figcaption>
</figure>

<figure>
  <img src="images/5-1-step2-download.png" alt="Download ZIP 버튼 위치">
  <figcaption>그림 5-2. Download ZIP 버튼 위치</figcaption>
</figure>

5-2. 자주 묻는 질문(FAQ) 섹션 설계

FAQ 섹션은 독자가 실제로 겪는 반복 질문을 한 번에 정리해 두는 공간입니다. “질문–답변” 구조를 명확하게 유지하면, 독자도 필요한 정보를 빠르게 찾을 수 있습니다.

1) FAQ 작성 원칙

질문은 독자가 실제로 쓸 법한 문장으로 쓴다. (예: “버튼을 눌렀는데 다운로드가 안 돼요”)
답변은 짧은 요약 → 필요한 경우 단계별 가이드 순서로 쓴다.
가능하면 스크린샷이나 코드 예시 링크를 함께 제공한다.

2) FAQ HTML 구조 예시

<h2>자주 묻는 질문(FAQ)</h2>

<h3>Q1. 다운로드 버튼을 눌렀는데 아무 변화가 없습니다.</h3>
<p>
A1. 대부분의 경우, href 주소가 잘못되었거나 GitHub 리포지토리가 비공개로 설정된 상태입니다.
아래 두 가지를 순서대로 확인해 주세요.
</p>
<ol>
  <li>버튼 코드의 href가 ZIP 다운로드 주소인지 확인합니다.</li>
  <li>GitHub 리포지토리가 Public 상태인지 확인합니다.</li>
</ol>

<h3>Q2. 모바일에서 버튼이 잘려 보입니다.</h3>
<p>
A2. 버튼에 고정 너비가 설정되어 있으면 작은 화면에서 잘릴 수 있습니다.
width 속성을 제거하거나, 100% 너비로 설정해 보세요.
</p>

<h3>Q3. 코드 그대로 붙였는데 블로그 편집기에서 오류가 납니다.</h3>
<p>
A3. 일부 블로그 편집기는 &lt;style&gt; 태그를 제한하기도 합니다.
이 경우, CSS는 별도 설정 메뉴에 넣고 본문에는 HTML만 붙여넣어 주세요.
</p>

이런 형태의 FAQ는 전용 페이지로 빼서 모아 두거나, 각 다운로드 포스트 하단에 공통으로 붙여둘 수 있습니다.

3) 전자책용 FAQ 블록

전자책에서는 FAQ를 별도 박스로 강조하면 가독성이 좋아집니다.

<section class="faq-block">
  <h2>FAQ – 설치 중 자주 묻는 질문</h2>

  <h3>Q. GitHub 링크를 눌렀는데 404 오류가 납니다.</h3>
  <p>
  A. 리포지토리 이름이나 브랜치 이름이 바뀐 경우입니다.
  전자책에 적힌 주소 대신, 실제 GitHub에서 주소를 다시 복사해 붙여넣으세요.
  </p>
</section>

5-3. 오류 대응(트러블슈팅) 섹션 만들기

오류 대응 섹션은 단순 질문을 넘어, “문제가 발생했을 때 스스로 해결할 수 있게 돕는 작은 매뉴얼”입니다. 좋은 오류 가이드는 문제 상황을 명확히 묘사하고, 원인과 해결 단계를 순서대로 제시합니다.

1) 좋은 오류 메시지와 가이드의 구성

상황 요약: “무슨 일을 하다가 어떤 메시지가 떴는지”
가능한 원인: 1~2개의 대표 원인 정리
해결 단계: 따라 할 수 있는 순서형 가이드
추가 도움: 그래도 해결되지 않을 때 확인할 것

2) 트러블슈팅 HTML 예시 1 – 다운로드가 안 될 때

<h2>오류 해결 가이드</h2>

<h3>문제 1. 다운로드 버튼을 눌러도 파일이 내려받아지지 않을 때</h3>
<p>
다음과 같은 상황일 수 있습니다.
</p>
<ul>
  <li>버튼은 보이지만, 클릭해도 아무 반응이 없다.</li>
  <li>새 탭이 열리지만 “404 Not Found” 페이지가 나온다.</li>
</ul>

<h4>가능한 원인</h4>
<ul>
  <li>href 속성에 입력한 주소가 잘못되었거나 오타가 있다.</li>
  <li>GitHub 리포지토리가 Private(비공개) 상태이다.</li>
</ul>

<h4>해결 방법</h4>
<ol>
  <li>GitHub 리포지토리에서 Code 버튼을 클릭하고 Download ZIP 메뉴를 다시 확인합니다.</li>
  <li>브라우저 주소창에서 ZIP 주소를 복사한 뒤, 버튼 href에 그대로 붙여넣습니다.</li>
  <li>리포지토리 Settings에서 Public 상태인지 확인합니다.</li>
</ol>

3) 트러블슈팅 HTML 예시 2 – 블로그 편집기 오류

<h3>문제 2. 블로그 편집기에서 “허용되지 않는 태그” 오류가 날 때</h3>
<p>
일부 블로그 플랫폼은 &lt;script&gt;나 &lt;style&gt; 같은 태그를
본문에서 제한하기도 합니다.
</p>

<h4>가능한 원인</h4>
<ul>
  <li>HTML 모드가 아닌 일반 편집 모드에 코드를 붙여넣은 경우</li>
  <li>플랫폼 정책상 허용되지 않는 태그를 사용한 경우</li>
</ul>

<h4>해결 방법</h4>
<ol>
  <li>편집기의 HTML 또는 소스 모드로 전환했는지 확인합니다.</li>
  <li>본문에서는 &lt;div&gt;, &lt;a&gt;, &lt;ul&gt; 등 기본 태그만 사용합니다.</li>
  <li>CSS는 블로그 꾸미기/고급 설정/스타일 편집 메뉴에 별도로 추가합니다.</li>
</ol>

4) 트러블슈팅 섹션에 스크린샷 추가하기

오류 메시지가 뜨는 화면을 그대로 캡처해서 보여주면, 독자가 “내가 보는 화면과 같구나”라고 느끼면서 안심할 수 있습니다.

<figure>
  <img src="images/5-3-editor-error.png"
       alt="블로그 편집기에서 허용되지 않는 태그 오류 메시지">
  <figcaption>
    그림 5-5. 블로그 편집기에서 허용되지 않는 태그 오류 메시지 예시
  </figcaption>
</figure>

5장 정리

5장에서는 스크린샷, FAQ, 오류 대응 섹션을 이용해 독자가 설치·사용 과정에서 막히지 않도록 돕는 방법을 살펴봤습니다. 다음 장부터는 이런 실전 지원 요소들을 시리즈 구조, 수익화, 전자책 확장 전략과 어떻게 연결할지 이어서 다룰 수 있습니다.

5장. 스크린샷, FAQ, 오류 대응으로 막힘 없이 안내하기

#가나 투데이 #ganatoday

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

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

7장. 무료 예제에서 유료 전자책·강의로 수익화하기

지금까지는 블로그 글과 GitHub 예제를 통해 “무료로 가치 제공”에 집중했다면, 7장에서는 이 구조를 유료 전자책·강의·템플릿 판매로 확장하는 수익화 전략을 다룹니다. 핵심은 무료와 유료의 경계를 명확히 나누고, 블로그 글에서 자연스럽게 유료 콘텐츠로 이어지는 흐름을 설계하는 것입니다.

7-1. 무료와 유료를 나누는 기준 잡기

먼저 “어디까지 무료로 줄 것인가, 어디서부터 유료로 전환할 것인가”를 정해야 합니다. 기준이 애매하면 독자는 혼란을 느끼고, 반대로 너무 빡세게 막으면 신뢰를 잃기 쉽습니다.

1) 무료 영역에 포함시키기 좋은 것들

기본 개념 설명, 환경 설정, 첫 예제 설치 방법
샘플 코드 일부, 핵심 구조를 보여주는 최소 예제
스크린샷, FAQ, 오류 대응 등 “막힘 없이 시작하게 해주는 부분”

2) 유료 영역으로 묶기 좋은 것들

실제 프로젝트 수준의 완성 예제(여러 페이지, 여러 기능 포함)
수익화 전략, 운영 노하우, 실패/성공 사례 정리
체크리스트, 워크시트, 재사용 가능한 템플릿 모음

이 책의 맥락에서는 “블로그 글 1~5장 수준의 내용 + 기본 예제”는 무료로 제공하고, “복수의 실제 적용 사례 + 수익화 전략 + 템플릿 세트”는 유료 전자책으로 묶는 구성이 자연스럽습니다.

7-2. 블로그 글에서 유료 전자책으로 자연스럽게 연결하기

유료 전환의 핵심은 “무료 글에서 충분한 가치를 준 다음, 더 깊이 배우고 싶은 사람만 초대하는 것”입니다. 이를 위해 각 다운로드 포스트 하단에 전자책 안내 블록을 통일된 형태로 넣어 둘 수 있습니다.

1) 전자책 안내 블록 HTML 예시

<div class="ebook-cta">
  <h2>더 깊이 배우고 싶다면 – 전자책으로 전체 흐름 보기</h2>
  <p>
    이 글에서는 GitHub 예제 한 가지를 중심으로 살펴봤습니다.
    만약 <strong>“블로그에서 GitHub 파일 공유하는 전체 전략”</strong>을
    처음부터 끝까지 한 번에 정리해서 보고 싶다면, 아래 전자책을 참고해 주세요.
  </p>
  <ul>
    <li>1~6장: 블로그+GitHub 연동 기초와 예제 코드</li>
    <li>7장: 수익화 전략과 전자책 확장 사례</li>
    <li>부록: 바로 쓸 수 있는 블로그 서식/코드 템플릿 모음</li>
  </ul>
  <a href="https://example.com/ebook-checkout"
     style="display:inline-block;padding:10px 18px;
            background:#ff6f00;color:#ffffff;
            text-decoration:none;border-radius:4px;
            font-weight:600;margin-top:8px;">
    전자책 자세히 보기
  </a>
</div>

2) 안내 블록 스타일 예시

<style>
.ebook-cta {
  border: 1px solid #ffd9b3;
  background: #fff7ec;
  padding: 16px 18px;
  margin: 32px 0 16px;
}
.ebook-cta h2 {
  margin-top: 0;
  font-size: 1.05rem;
}
.ebook-cta ul {
  margin: 8px 0 12px;
  padding-left: 20px;
}
.ebook-cta a {
  color: #ffffff;
}
</style>

이 블록을 모든 관련 글 하단에 공통으로 넣어 두면, 누적되는 검색 유입이 전자책 판매 페이지로 자연스럽게 흘러가게 됩니다.

3) “미리보기 글” 패턴 활용

일부 장·절은 블로그에 거의 그대로 공개하되, 특정 부분에서 자연스럽게 유료 본문으로 이어지게 만들 수 있습니다.

<h2>이후 내용은 전자책에서 이어집니다</h2>
<p>
여기까지는 블로그에서도 충분히 따라 할 수 있도록 전체 흐름을 공개했습니다.
이후에는 실제 적용 사례 3가지와 실패를 줄이는 체크리스트를 전자책에서 자세히 다룹니다.
아래 버튼을 눌러 이어지는 내용을 확인해 보세요.
</p>
<a href="https://example.com/ebook-checkout">전자책 이어서 읽기</a>

7-3. 가격과 구성 설계: 전자책·강의·템플릿 패키지

전자책 수익화를 위해서는 가격과 구성, 그리고 “업셀 구조(추가 제안)”까지 함께 설계하는 것이 좋습니다.

1) 기본 전자책 패키지 구성 예시

본편 전자책(PDF/ePub): 1~10장 전체 내용
코드 번들: GitHub 예제 리포지토리 + 다운로드용 ZIP 묶음
보너스 체크리스트: “블로그 글 출간 전 체크리스트”, “전자책 출간 전 체크리스트”

초반에는 5,000원~15,000원 구간에서 시작해 보고, 독자 반응과 후기, 제공 가치에 따라 조정하는 방식이 무난합니다.

2) 상위 패키지(프리미엄) 구성 예시

기본 전자책 + 코드 번들
영상 강의 1~2시간 분량 (설치·적용 과정을 실제 화면으로 설명)
질문 답변 세션(라이브 또는 이메일 Q&A)
블로그 글/템플릿 1:1 피드백 쿠폰 1회

이런 상위 패키지는 전자책 단품의 2~3배 가격으로 책정하는 경우가 많으며, “실제 적용을 도와주는 동영상·피드백”이 핵심 가치가 됩니다.

3) 블로그 내에서 패키지 비교 보여주기

블로그 판매 페이지에서는 패키지 간 차이를 표로 정리하면 이해하기 좋습니다.

<table border="1" cellspacing="0" cellpadding="6">
  <thead>
    <tr>
      <th>구성</th>
      <th>Basic 전자책</th>
      <th>Pro 패키지</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>전자책(PDF/ePub)</td>
      <td>포함</td>
      <td>포함</td>
    </tr>
    <tr>
      <td>GitHub 코드 번들</td>
      <td>포함</td>
      <td>포함</td>
    </tr>
    <tr>
      <td>영상 강의</td>
      <td>미포함</td>
      <td>포함</td>
    </tr>
    <tr>
      <td>1:1 피드백</td>
      <td>미포함</td>
      <td>1회 포함</td>
    </tr>
  </tbody>
</table>

7-4. 판매 채널과 홍보 루틴 설계

전자책을 어디서 어떻게 팔 것인가, 그리고 어떤 루틴으로 홍보할 것인가는 수익의 지속성을 좌우합니다.

1) 판매 채널 예시

자기 블로그 + 간편 결제(이폼, Toss, 카카오페이 링크 등)
전자책 플랫폼: 크몽, 브런치북, 리디북스, 네이버 시리즈 등
강의 플랫폼: 인프런, 탈잉, 클래스101 등 (영상 패키지 결합 시)

2) 블로그 기반 홍보 루틴 예시

1단계: 전자책 핵심 주제와 관련된 무료 글 3편 작성
2단계: 각 글 하단에 전자책 안내 블록(ebook-cta) 삽입
3단계: 전자책 내용 일부를 '미리보기 글'로 공개
4단계: 후기 및 적용 사례 글 발행
5단계: SNS/커뮤니티에 핵심 요약 + 판매 링크 공유

한 권의 전자책으로 최소 3편 이상의 관련 글을 만들어 유입을 반복적으로 일으키는 전략이 유효합니다.

3) 후기와 사회적 증거(소셜 프루프) 활용

구매 후기를 수집해 블로그 글과 판매 페이지에 노출하면, 신규 독자의 신뢰를 빠르게 얻을 수 있습니다.

<div class="ebook-reviews">
  <h2>구매자 후기</h2>
  <blockquote>
    <p>
      "블로그에 GitHub 예제를 어떻게 연결해야 할지 막막했는데,
      이 전자책 덕분에 구조를 한 번에 잡을 수 있었어요."
    </p>
    <cite>- 닉네임 A</cite>
  </blockquote>
</div>

7장 정리

7장에서는 무료 블로그 글과 GitHub 예제를 기반으로, 유료 전자책·강의·템플릿 패키지로 확장하는 수익화 전략을 살펴봤습니다. 다음 장에서는 이러한 구조를 장기적으로 운영하면서, 전자책 업데이트와 후속 콘텐츠까지 이어가는 운영 전략을 다룰 수 있습니다.

7장. 무료 예제에서 유료 전자책·강의로 수익화하기

#가나 투데이 #ganatoday

8장. 템플릿과 자동화로 작업 시간 줄이기

1~7장에서 만든 구조와 예제를 실제 블로그 운영에 적용하다 보면, 비슷한 형식의 글을 계속 쓰게 된다는 사실을 금방 느끼게 됩니다. 8장에서는 이 반복 작업을 줄이기 위해 블로그용/전자책용 템플릿을 만들고, 가능한 부분은 자동화하는 방법을 살펴봅니다.

8-1. 블로그용 공통 템플릿 만들기

다운로드 포스트, 예제 소개 포스트, 시리즈 안내 포스트 등은 구조가 거의 같습니다. 이 구조를 HTML 서식 템플릿으로 만들어 두면, 매번 새로 짜지 않고도 빠르게 초안을 만들 수 있습니다.

1) 다운로드 포스트 공통 템플릿

<!-- 다운로드 포스트 공통 템플릿 -->
<h1>[무료 공유] {{제목}}</h1>

<p>
이 글에서는 <strong>{{핵심 기능}}</strong>을 구현한 예제 파일을 공유합니다.
블로그에서 GitHub 예제를 연결하고 싶은 분을 위한 자료입니다.
</p>

<h2>공유 파일 소개</h2>
<p>
{{예제 요약 설명}}
</p>
<ul>
  <li>{{파일1 이름}} : {{파일1 설명}}</li>
  <li>{{파일2 이름}} : {{파일2 설명}}</li>
  <li>{{파일3 이름}} : {{파일3 설명}}</li>
</ul>

<h2>설치 및 사용 방법</h2>
<ol>
  <li>아래 다운로드 버튼을 눌러 ZIP 파일을 내려받습니다.</li>
  <li>압축을 해제한 뒤, {{핵심 파일}}을 코드 에디터로 엽니다.</li>
  <li>코드 안의 href를 자신의 GitHub ZIP 링크로 교체합니다.</li>
  <li>전체 코드를 블로그 HTML 모드에 붙여넣습니다.</li>
</ol>

<h2>예제 소스코드 다운로드</h2>
<p>아래 버튼을 눌러 예제를 내려받으세요.</p>
<a href="{{ZIP_URL}}"
   style="display:inline-block;padding:10px 18px;
          background:#1a73e8;color:#ffffff;
          text-decoration:none;border-radius:4px;
          font-weight:600;">
  {{버튼 문구}}
</a>

중괄호로 표시한 부분({{제목}}, {{ZIP_URL}} 등)에만 내용을 채워 넣으면, 글의 기본 뼈대는 항상 같은 품질로 유지됩니다.

2) 시리즈 안내용 공통 블록

시리즈 안내 블록 역시 템플릿으로 만들어 두고, 링크만 바꿔가며 재사용할 수 있습니다.

<div class="series-toc">
  <h2>{{시리즈 이름}} 목록</h2>
  <ol>
    <li><a href="{{1편 링크}}">[1편] {{1편 제목}}</a></li>
    <li><a href="{{2편 링크}}">[2편] {{2편 제목}}</a></li>
    <li><a href="{{3편 링크}}">[3편] {{3편 제목}}</a></li>
  </ol>
</div>

8-2. 전자책용 챕터 템플릿 만들기

전자책 HTML 파일은 각 장마다 구조가 거의 동일합니다. 제목, 도입, 2~3개의 섹션, 코드 예시, 스크린샷 설명, 정리 섹션을 하나의 템플릿으로 잡아두면 재사용이 편리합니다.

1) 챕터 공통 HTML 템플릿

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>{{장 번호}}장. {{장 제목}}</title>
</head>
<body>

  <h1>{{장 번호}}장. {{장 제목}}</h1>

  <p>
    {{장 도입부 요약}}
  </p>

  <h2>{{장 번호}}-1. {{소제목1}}</h2>
  <p>{{소제목1 설명}}</p>
  <pre><code>{{코드 예시1}}</code></pre>

  <h2>{{장 번호}}-2. {{소제목2}}</h2>
  <p>{{소제목2 설명}}</p>

  <h2>{{장 번호}} 정리</h2>
  <p>
    {{핵심 요약 문단}}
  </p>

</body>
</html>

실제 집필에서는 이 템플릿 파일을 복사해 chapter1.html, chapter2.html처럼 파일명을 바꾸고, 중괄호 부분만 각 장 내용으로 채우면 됩니다.

2) 스크린샷/그림 삽입 템플릿

이미지 블록 역시 고정 포맷으로 만들어 두면 매번 스타일을 고민할 필요가 줄어듭니다.

<figure>
  <img src="images/{{파일명}}" alt="{{이미지 설명}}">
  <figcaption>그림 {{번호}}. {{캡션 텍스트}}</figcaption>
</figure>

8-3. 간단한 자동화 아이디어

완전한 코드 기반 자동화까지 가지 않더라도, 반복되는 텍스트 치환과 구조 생성 정도는 도구를 활용해 쉽게 줄일 수 있습니다.

1) “채워 넣기용 프로프트” 만들기

같은 구조의 글을 자주 쓴다면, 템플릿과 함께 “질문 리스트”를 만들어 AI에게 넘기는 방식으로 자동화를 시도할 수 있습니다.

1. 이번 예제의 제목은?
2. 이 예제가 해결하는 문제는?
3. 대상 독자는 누구인가?
4. 포함된 주요 파일은 무엇인가?
5. 설치·사용 단계는 어떻게 되는가?
6. 다운로드 링크(URL)는 무엇인가?

이 답변들을 기반으로, 앞에서 만든 HTML 템플릿의 중괄호 부분만 채워 넣으면 한 편의 글 초안이 거의 자동으로 완성됩니다.

2) 반복 태그를 위한 스니펫/서식 활용

코드 에디터(VS Code 등)의 스니펫 기능이나 블로그의 ‘내 템플릿’ 기능을 사용하면, 자주 쓰는 HTML 블록을 단축어 하나로 불러올 수 있습니다.

snippet blog-download-post
  <h1>[무료 공유] ${1:제목}</h1>
  <p>${2:도입부 요약}</p>
  ...

3) 전자책 합본 자동화의 출발점

장별 HTML 파일이 일관된 구조를 가지고 있다면, 나중에 이 파일들을 하나로 합쳐 ePub/PDF로 변환하는 작업을 자동화하기가 쉬워집니다. 9장에서 다룰 전자책 변환 파트는 이 템플릿들을 전제로, “합치기·링크 정리·표지 추가” 작업에 초점을 맞춥니다.

8장 정리

8장에서는 블로그 글과 전자책 챕터를 위한 HTML 템플릿을 만들고, 반복되는 구조를 재사용하거나 간단한 자동화로 작업 시간을 줄이는 방법을 살펴봤습니다. 다음 장에서는 이 템플릿들을 실제 ePub/PDF 전자책으로 변환하는 과정과, 출판 시 주의할 점을 다룹니다. 8장. 템플릿과 자동화로 작업 시간 줄이기 9장(전자책 변환/출판)도 같은 스타일로 완성 HTML이 필요하시면, 바로 이어서 만들어 드리겠습니다.

#가나 투데이 #ganatoday

1장. 왜 블로그와 GitHub를 함께 써야 할까?

1장. 왜 블로그와 GitHub를 함께 써야 할까?

1-1. 이메일 첨부와 카페 자료실의 한계

많은 개발자들이 여전히 소스 코드를 이메일 첨부나 카페 자료실로 구독자에게 전달합니다. 처음에는 간편해 보이지만, 시간이 지날수록 몇 가지 문제가 드러납니다.

메일 용량 제한 때문에 큰 프로젝트는 잘려서 보내지 못합니다.
여러 번 수정하다 보면 어느 파일이 최신 버전인지 헷갈립니다.
카페·커뮤니티는 탈퇴하거나 글이 내려가면 링크가 사라질 수 있습니다.

특히 “예전 블로그 글에 올려 둔 첨부 파일이 사라졌어요”라는 문의가 반복된다면, 파일을 블로그 안에 직접 두는 방식에는 한계가 있다는 신호입니다.

스크린샷 예시: 메일 첨부 한계 화면

아래와 같은 화면을 스크린샷으로 캡처해서 넣어 두면 독자의 공감을 더 쉽게 얻을 수 있습니다.

메일 작성 화면에서 “첨부 파일 용량 초과” 에러가 떠 있는 장면
카페 자료실에서 “파일이 삭제되었거나 존재하지 않습니다” 메시지가 보이는 장면

실제 전자책에서는 다음과 같이 이미지를 삽입하면 됩니다.

<img src="images/mail-attachment-error.png" alt="이메일 첨부 용량 초과 에러 화면">

1-2. 블로그를 ‘배포 허브’로 쓰는 개념

블로그는 검색 유입, 구독자 관리, 설명 문서 제공에 최적화된 채널입니다. 반대로, 실제 파일 저장과 버전 관리는 전문 저장소가 훨씬 더 잘합니다.

이 책에서 다루는 전략은 간단합니다.

파일과 소스 코드는 GitHub 같은 저장소에 올려 두고,
블로그 글은 “무엇을, 왜, 어떻게 쓰는지”를 설명하는 안내 페이지로 쓴다.

이렇게 역할을 분리하면, 블로그 글 하나가 “설명 + 다운로드 센터” 역할을 동시에 수행하게 됩니다.

스크린샷 예시: 블로그 글과 GitHub 리포지토리 연결 구조

독자가 전체 구조를 한눈에 이해할 수 있도록, 다음과 같은 구성을 그림으로 보여줄 수 있습니다.

왼쪽: 블로그 글 화면(제목, 소개, 사용 방법, 다운로드 버튼)
오른쪽: GitHub 리포지토리 화면(파일 목록, Code 버튼, Download ZIP 위치)

전자책에서는 단순한 다이어그램이나 실제 캡처 이미지를 사용해 “블로그 → GitHub로 연결되는 흐름”을 시각적으로 보여 주세요.

1-3. GitHub를 파일 창고로 쓰는 이유

GitHub는 원래 개발자를 위한 코드 저장소이지만, 블로그 글을 쓰는 입장에서는 매우 강력한 “파일 공유 창고”로 활용할 수 있습니다.

Public 리포지토리는 누구나 링크만 있으면 접속 가능하다.
버전별 변경 이력이 자동으로 쌓인다.
“Download ZIP” 기능으로 전체 파일을 한 번에 내려받을 수 있다.

즉, 한 번 올려 두면 블로그 글에서는 링크만 붙여 주면 되고, 이후 버전을 올려도 동일한 글에서 계속 최신 파일을 안내할 수 있습니다.

실제 GitHub 다운로드 링크 HTML 예시

예를 들어, 아래와 같이 GitHub 리포지토리의 ZIP 다운로드 링크를 블로그 글이나 전자책 HTML에 버튼 형태로 삽입할 수 있습니다.

<a href="https://github.com/사용자명/저장소명/archive/refs/heads/main.zip"
   style="display:inline-block;padding:10px 18px;
          background:#1a73e8;color:#ffffff;
          text-decoration:none;border-radius:4px;
          font-weight:600;">
  예제 소스코드 다운로드 (.zip)
</a>

위 코드는 일반 텍스트 링크 대신, 독자가 직관적으로 눌러 볼 수 있는 “다운로드 버튼”을 만들어 주는 간단한 HTML 예시입니다.

스크린샷 예시: 다운로드 버튼이 포함된 블로그 글

이 부분에서는 실제 블로그 글에 위 HTML을 넣었을 때의 화면을 캡처해 보여 줍니다.

본문 설명 아래에 파란색 “예제 소스코드 다운로드 (.zip)” 버튼이 보이는 장면
마우스를 올렸을 때 커서가 손 모양으로 바뀌는 장면

전자책에서는 다음과 같은 형태로 이미지를 넣을 수 있습니다.

<img src="images/blog-download-button.png"
     alt="GitHub 예제 소스코드 다운로드 버튼이 포함된 블로그 글 화면">

1장 정리

이 1장에서 살펴본 것처럼, 블로그는 설명과 안내에, GitHub는 파일 저장과 버전 관리에 강점을 가진 도구입니다. 다음 장에서는 실제로 GitHub 리포지토리를 만들고, 블로그에서 쓸 수 있는 링크를 준비하는 과정을 단계별로 살펴보겠습니다.

1장. 왜 블로그와 GitHub를 함께 써야 할까?

#가나 투데이 #ganatoday

블로그 글에서 GitHub 파일 공유하는 전략

블로그 글에서 GitHub 파일 공유하는 전략

1장. 왜 블로그와 GitHub를 함께 써야 할까?

1-1. 이메일 첨부와 카페 자료실의 한계

많은 개발자들이 아직도 소스 코드를 이메일 첨부나 카페 자료실로 공유합니다. 하지만 용량 제한, 버전 관리, 링크 만료 등의 문제가 자주 발생합니다.

1-2. 블로그를 배포 허브로 쓰는 개념

블로그 글은 검색 유입과 구독자 안내에 강점이 있습니다. 파일 자체는 외부 저장소에 두고, 블로그를 설명과 안내를 담당하는 배포 허브로 활용할 수 있습니다.

1-3. GitHub를 파일 창고로 쓰는 이유

GitHub는 소스 코드와 버전 관리를 위한 대표적인 저장소입니다. 공개 리포지토리를 활용하면 누구나 링크만으로 파일을 내려받을 수 있습니다.

2장. 준비하기: 블로그와 GitHub 기본 세팅

2-1. GitHub 계정과 리포지토리 생성

먼저 GitHub에 회원 가입을 하고 새 리포지토리를 만듭니다. 공유용 자료는 전용 리포지토리를 만들어 두면 관리가 쉬워집니다.

2-2. 공유용 리포지토리 구조 설계

예제 프로젝트별 폴더, 버전별 폴더 등 일정한 규칙을 정해 두는 것이 좋습니다. README.md 파일에 간단한 사용 방법과 다운로드 안내를 적어 둡니다.

2-3. 블로그 글쓰기 환경 점검

네이버 블로그, 티스토리, 블로그스팟 등 어떤 플랫폼이든 HTML 모드나 코드 삽입 기능이 있는지 확인합니다.

3장. 공유할 파일 패키지 만들기

3-1. 소스 코드와 템플릿 묶기

예제 프로젝트에 포함될 파일들을 하나의 폴더에 정리합니다. 필요하다면 ZIP 압축 파일로도 함께 준비해 둡니다.

3-2. 설명 문서와 README 작성

사용자가 바로 이해할 수 있도록 목적, 대상, 실행 방법을 간단히 정리합니다. 이 설명은 나중에 블로그 글 본문에도 재활용할 수 있습니다.

3-3. 버전 관리와 태그 전략

기능이 바뀔 때마다 버전 번호를 올리고 태그를 남겨 두면, 예전 글과의 호환성을 설명할 때 도움이 됩니다.

4장. GitHub에 업로드하고 다운로드 링크 만들기

4-1. 웹 화면에서 파일 업로드

GitHub 리포지토리 화면에서 Add file 버튼을 눌러 파일을 업로드합니다. 변경 사항을 설명하는 메시지를 적고 Commit changes를 눌러 저장합니다.

4-2. ZIP 다운로드 링크 활용

리포지토리의 Code 버튼을 누르면 Download ZIP 메뉴가 보입니다. 이 링크를 구독자에게 안내하면 한 번에 전체 파일을 받을 수 있습니다.

4-3. 공개 범위와 라이선스 설정

리포지토리를 Public으로 둘지 Private로 둘지 결정합니다. MIT, Apache 등 사용 허용 범위를 명시한 라이선스를 선택하면 혼선을 줄일 수 있습니다.

5장. 블로그 글 구조 설계: 다운로드 포스트 만들기

5-1. 제목과 도입부에서 ‘파일 공유’ 강조하기

예를 들어, “[무료 공유] OO 기능 예제 소스코드 (GitHub 다운로드 링크 포함)”처럼 제목에 파일 공유 용도와 핵심 키워드를 함께 넣습니다.

5-2. 파일 소개 섹션 구성

어떤 문제를 해결하는 코드인지, 어떤 환경에서 테스트했는지, 포함된 주요 파일과 기능을 간단한 목록으로 정리합니다.

5-3. 설치 및 사용 방법 섹션

1단계 다운로드, 2단계 압축 해제, 3단계 설정, 4단계 실행 같은 순서대로 안내합니다. 복잡한 부분은 코드 블록과 스크린샷을 함께 보여 주면 좋습니다.

5-4. 다운로드 섹션 배치

글 중간이 아니라 별도의 “다운로드” 섹션을 만들어 링크를 모아 두는 것이 좋습니다. 버튼형 링크를 사용하면 구독자가 즉시 알아볼 수 있습니다.

6장. 블로그에서 GitHub 링크 삽입하기

6-1. 텍스트 링크로 연결하는 기본 방법

가장 단순한 형태는 다음과 같습니다.

<a href="https://github.com/사용자명/저장소">
  GitHub 리포지토리 바로가기
</a>

6-2. 다운로드 버튼 스타일 예시

HTML 모드에서 다음과 같이 작성하면 버튼처럼 보이는 링크를 만들 수 있습니다.

<a href="https://github.com/사용자명/저장소/archive/refs/heads/main.zip"
   style="display:inline-block;padding:10px 18px;
          background:#1a73e8;color:#ffffff;
          text-decoration:none;border-radius:4px;
          font-weight:600;">
  다운로드 받기 (.zip)
</a>

6-3. 여러 버전 링크 정리법

기본 버전, 확장 버전, 이전 버전 링크를 목록으로 정리하면 좋습니다.

기본 버전 v1.0 다운로드
확장 버전 v1.1 다운로드
이전 버전 v0.9 다운로드

7장. 구독자 경험 최적화 전략

7-1. 사용 장면을 시각적으로 보여 주기

실행 화면, 폴더 구조, 설정 화면을 캡처해서 함께 보여 주면 이해도와 신뢰도가 올라갑니다.

7-2. 자주 묻는 질문 정리

설치 오류, 버전 충돌, 권한 문제 등 자주 나오는 질문을 미리 정리해 두면 댓글 대응에 드는 시간을 줄일 수 있습니다.

7-3. 업데이트 알림 유도

글 마지막에 이웃 추가, 뉴스레터 구독, 깃허브 Star/Watch를 요청하여 이후 업데이트 소식을 쉽게 전달할 수 있습니다.

8장. 수익화와 전자책 확장

8-1. 무료와 유료를 나누는 기준

핵심 기능 예제는 무료로 제공하고, 심화 기능이나 대형 프로젝트 템플릿은 유료 전자책이나 강의로 확장할 수 있습니다.

8-2. 블로그 글에서 전자책으로 이어지는 흐름

다운로드 포스트 하단에 전자책 안내 영역을 만들어 보다 체계적인 자료가 필요할 때 전자책으로 유도합니다.

8-3. 장기적인 자료실 블로그 운영 전략

같은 주제의 예제와 템플릿을 계속 쌓아가면, 블로그 자체가 하나의 개발 자료실이 됩니다.

#가나 투데이 #ganatoday

2장. GitHub 리포지토리 만들기와 첫 업로드

2장. GitHub 리포지토리 만들기와 첫 업로드

2-1. 새 GitHub 리포지토리 만들기

이제 블로그에서 연결할 실제 파일 저장소, 즉 GitHub 리포지토리를 만들어 보겠습니다. 이 리포지토리가 앞으로 구독자에게 소스 코드와 예제 파일을 제공하는 중심 창고가 됩니다.

1) GitHub 새 리포지토리 생성 단계

브라우저에서 https://github.com 에 접속하여 로그인합니다.
오른쪽 상단의 + 아이콘을 클릭한 뒤, New repository를 선택합니다.
Repository name 입력란에 리포지토리 이름을 적습니다. 예: blog-download-examples
Description에 간단한 설명을 적습니다. 예: 블로그 구독자용 예제 소스코드 모음
Public을 선택하여 누구나 볼 수 있도록 설정합니다.
Initialize this repository with a README 옵션은 체크해 둡니다.
마지막으로 Create repository 버튼을 눌러 리포지토리를 생성합니다.

여기까지 완료하면, 이제 블로그 글에서 링크를 걸 수 있는 빈 창고가 하나 생긴 것입니다. 다음 단계는 이 창고에 실제 예제 파일을 올려 두는 일입니다.

스크린샷 예시: 새 리포지토리 생성 화면

전자책에서는 아래와 같은 장면을 캡처해 이미지로 보여 주세요.

Repository name과 Description 입력 칸이 보이는 화면
Public 라디오 버튼이 선택된 상태
화면 하단의 Create repository 버튼이 강조된 상태

HTML에서는 다음과 같이 이미지를 삽입할 수 있습니다.

<img src="images/github-new-repo.png"
     alt="GitHub 새 리포지토리 생성 화면">

2-2. 예제 파일 구조 준비하기

리포지토리를 만들었다면, 이제 블로그에서 공유할 예제 파일을 하나의 폴더 구조로 정리해야 합니다. 이 구조가 깔끔할수록 구독자가 받았을 때 이해하기가 쉬워집니다.

1) 기본 폴더 구성 예시

blog-download-examples/
├─ 01-basic-button/
│  ├─ index.html
│  └─ README.md
└─ 02-advanced-layout/
   ├─ index.html
   └─ README.md

각 예제 폴더 안에는 최소한 index.html 과 사용법을 적은 README.md 파일을 두는 것을 권장합니다.

2) README.md 예시 내용

아래는 “블로그에서 GitHub 파일 공유 버튼 만들기” 예제용 README 예시입니다.

# 블로그용 GitHub 다운로드 버튼 예제

이 예제는 블로그 글에서 사용할 수 있는 GitHub 다운로드 버튼 HTML 코드입니다.

## 포함 파일

- index.html : 버튼 HTML 예제
- screenshot.png : 버튼이 적용된 화면 예시

## 사용 방법

1. index.html 파일 안의 <a> 태그 코드를 복사합니다.
2. 블로그 글의 HTML 모드에 붙여넣습니다.
3. href 속성에 자신의 GitHub ZIP 링크를 넣어줍니다.

2-3. 웹 화면에서 첫 파일 업로드하기

로컬에서 준비한 폴더와 파일들을 GitHub 리포지토리에 업로드해 보겠습니다. 여기서는 Git 설치 없이, 브라우저만 사용한 업로드 방법을 다룹니다.

1) 단일 파일 업로드

방금 만든 리포지토리의 메인 페이지로 이동합니다.
Add file 버튼을 클릭하고, Upload files를 선택합니다.
로컬 컴퓨터에서 index.html, README.md 파일을 드래그 앤 드롭합니다.
페이지 하단의 Commit changes 영역에서 메시지를 간단히 적습니다. 예: add basic download button example
Commit changes 버튼을 클릭하여 업로드를 완료합니다.

2) 예제 폴더째 업로드

웹 UI는 폴더 구조 업로드가 조금 불편할 수 있습니다. 간단한 방법은 예제 폴더를 ZIP으로 압축한 뒤, 압축을 푼 상태로 다시 폴더 채 업로드하는 것입니다.

또는 Git을 설치한 뒤, 로컬에서 git push로 올리는 방법도 있지만, 이 전자책에서는 “처음 시작하는 사람도 바로 따라 할 수 있는” 웹 기반 방법에 집중합니다.

스크린샷 예시: Upload files 화면

독자 이해를 돕기 위해 아래 장면을 캡처해 넣을 수 있습니다.

Add file → Upload files 메뉴를 선택한 화면
업로드 영역에 파일이 드래그되어 있는 장면
하단의 Commit changes 버튼이 보이는 화면

예시 HTML 코드는 다음과 같습니다.

<img src="images/github-upload-files.png"
     alt="GitHub Upload files 화면">

2-4. 블로그에서 사용할 기본 리포지토리 링크 확보

파일 업로드까지 완료했다면, 이제 블로그 글에서 사용할 “기본 리포지토리 링크”와 “ZIP 다운로드 링크” 두 가지를 확보해야 합니다.

1) 리포지토리 메인 링크

브라우저 주소창에 보이는 URL이 바로 리포지토리 메인 링크입니다. 예를 들어 다음과 같은 형태입니다.

https://github.com/사용자명/blog-download-examples

이 링크는 “코드를 직접 보고 싶은 구독자용”으로 안내합니다.

2) ZIP 다운로드 링크

구독자에게는 전체 파일을 한 번에 받을 수 있는 ZIP 링크가 더 편합니다. GitHub에서는 다음과 같은 URL 형태를 사용합니다.

https://github.com/사용자명/blog-download-examples/archive/refs/heads/main.zip

브라우저에서 이 주소를 열어 보면, 리포지토리의 main 브랜치를 ZIP 파일로 내려받을 수 있습니다. 블로그 글에서는 이 주소를 다운로드 버튼의 href로 사용하게 됩니다.

3) 블로그에서 바로 쓸 수 있는 버튼 HTML

아래 코드는 1장에서 살펴본 버튼 예제를 2장에서 만든 리포지토리 링크와 연결한 완성형입니다.

<a href="https://github.com/사용자명/blog-download-examples/archive/refs/heads/main.zip"
   style="display:inline-block;padding:10px 18px;
          background:#1a73e8;color:#ffffff;
          text-decoration:none;border-radius:4px;
          font-weight:600;">
  블로그 예제 소스코드 다운로드 (.zip)
</a>

이 버튼 하나만 있으면, 블로그 글 어디에서든 “GitHub에 올려 둔 최신 예제 소스”를 구독자에게 바로 제공할 수 있습니다.

2장 정리

이 장에서는 새 GitHub 리포지토리를 만들고, 예제 파일을 업로드한 뒤, 블로그에서 사용할 리포지토리 링크와 ZIP 다운로드 링크를 확보하는 과정까지 살펴보았습니다. 다음 장에서는 이렇게 준비한 예제를 바탕으로, 블로그 글 구조를 어떻게 설계하면 “다운로드 포스트” 느낌을 극대화할 수 있는지 구체적으로 다뤄 보겠습니다.

2장. GitHub 리포지토리 만들기와 첫 업로드

#가나 투데이 #ganatoday

3장. 파일 소개와 설치·사용 방법, 블로그용 샘플 본문

3장. 파일 소개와 설치·사용 방법, 블로그용 샘플 본문

3-1. 블로그에서 보여줄 파일 소개 섹션 구성

이제 GitHub 리포지토리에 올려 둔 예제 파일을, 블로그 글 안에서 어떻게 소개할지 구체적인 섹션 구조를 만들어 보겠습니다. 이 섹션이 깔끔할수록 구독자는 “이 파일이 나에게 필요한지”를 빠르게 판단할 수 있습니다.

1) 파일 소개에 꼭 들어가야 할 요소

이 예제가 해결하는 문제(사용 목적)
어떤 사람을 위한 것인지(대상 독자)
포함된 주요 파일 목록
필요한 환경(언어, 버전, 브라우저 등)

예시 문장은 다음과 같이 구성할 수 있습니다.

<h2>공유 파일 소개</h2>
<p>
이 자료는 <strong>블로그 글에서 GitHub 파일 공유 버튼</strong>을
쉽게 붙일 수 있도록 도와주는 예제 코드입니다.
블로그 초보자, GitHub를 막 시작한 개발자, 전자책으로 코드를 배포하고 싶은 분께 적합합니다.
</p>
<ul>
  <li>index.html : 다운로드 버튼 HTML 예제</li>
  <li>style.css : 버튼 색상과 모양을 꾸미는 스타일</li>
  <li>README.md : 설치 및 사용 방법 설명</li>
</ul>
<p>
이 예제는 크롬 브라우저, 최신 블로그 에디터 환경에서 테스트되었습니다.
</p>

스크린샷 예시: 파일 소개 섹션

전자책이나 블로그 글에서 다음과 같은 화면을 캡처해 함께 넣어 보세요.

“공유 파일 소개”라는 소제목과 간단한 설명 문단
포함 파일 목록이 글머리표 리스트로 정리된 화면

<img src="images/blog-file-intro-section.png"
     alt="블로그 글의 파일 소개 섹션 화면">

3-2. 설치 및 사용 방법 섹션 작성

두 번째로 중요한 부분은 설치 및 사용 방법입니다. 이 섹션은 “예제 파일을 받아서 그대로 따라 했을 때 오류 없이 돌아가느냐”를 좌우합니다.

1) 단계별 안내 구조

아래처럼 단계별 목록으로 작성하면 가독성이 좋아집니다.

<h2>설치 및 사용 방법</h2>
<ol>
  <li>아래 다운로드 버튼을 클릭해 ZIP 파일을 내려받습니다.</li>
  <li>압축을 해제한 뒤, 폴더 안의 index.html 파일을 엽니다.</li>
  <li>코드 에디터(예: VS Code)에서 &lt;a&gt; 태그 부분을 확인합니다.</li>
  <li>href 속성에 자신의 GitHub ZIP 링크를 붙여넣습니다.</li>
  <li>전체 코드를 블로그 글의 HTML 모드에 복사·붙여넣기 합니다.</li>
</ol>

2) 코드 블록 예시

설치 단계에서 핵심이 되는 부분은 코드 블록으로 강조해 줍니다.

<pre><code>&lt;a href="https://github.com/사용자명/blog-download-examples/archive/refs/heads/main.zip"
   style="display:inline-block;padding:10px 18px;
          background:#1a73e8;color:#ffffff;
          text-decoration:none;border-radius:4px;
          font-weight:600;"&gt;
  블로그 예제 소스코드 다운로드 (.zip)
&lt;/a&gt;
</code></pre>

스크린샷 예시: 설치 단계 안내

다음과 같은 장면을 이미지로 보여주면 독자가 안심하고 따라올 수 있습니다.

VS Code에서 index.html 코드가 열린 화면
블로그 에디터 HTML 모드에 코드가 붙어 있는 화면

<img src="images/editor-install-steps.png"
     alt="코드 에디터와 블로그 에디터에서 설치 단계를 보여주는 화면">

3-3. 블로그용 샘플 본문 통째로 만들기

여기서는 지금까지의 요소를 모두 합쳐, 실제 블로그에 바로 붙여넣어 쓸 수 있는 샘플 본문을 만들어 보겠습니다.

1) 샘플 본문 HTML

<h1>[무료 공유] 블로그에서 GitHub 파일 공유 버튼 만드는 예제 코드</h1>

<p>
블로그 구독자에게 소스 코드를 나눠 줄 때,
이메일 첨부나 카페 자료실만 쓰기엔 불편하셨죠?
이 글에서는 <strong>GitHub에 올려 둔 예제 파일</strong>을
블로그 글 하나로 깔끔하게 공유하는 방법을 소개합니다.
</p>

<h2>공유 파일 소개</h2>
<p>
이 자료는 블로그 본문에 GitHub 다운로드 버튼을 간단히 붙일 수 있는 예제입니다.
블로그 초보자, GitHub를 막 시작한 개발자에게 적합합니다.
</p>
<ul>
  <li>index.html : 버튼 HTML 예제</li>
  <li>style.css : 버튼 스타일 예제 (선택)</li>
  <li>README.md : 설치 및 사용 방법 안내</li>
</ul>

<h2>설치 및 사용 방법</h2>
<ol>
  <li>아래 다운로드 버튼을 클릭해 예제 ZIP 파일을 내려받습니다.</li>
  <li>압축을 해제하고 index.html 파일을 코드 에디터로 엽니다.</li>
  <li>코드 안의 &lt;a&gt; 태그 href 부분을 자신의 GitHub ZIP 링크로 교체합니다.</li>
  <li>전체 코드를 복사하여 블로그 글의 HTML 모드에 붙여넣습니다.</li>
</ol>

<h2>예제 소스코드 다운로드</h2>
<p>아래 버튼을 눌러 전체 예제를 ZIP 파일로 받아보세요.</p>
<a href="https://github.com/사용자명/blog-download-examples/archive/refs/heads/main.zip"
   style="display:inline-block;padding:10px 18px;
          background:#1a73e8;color:#ffffff;
          text-decoration:none;border-radius:4px;
          font-weight:600;">
  블로그 예제 소스코드 다운로드 (.zip)
</a>

<h2>마무리 안내</h2>
<p>
설치 중 막히는 부분이 있다면 댓글로 질문을 남겨 주세요.
추가로 필요한 예제나 확장 버전이 있다면,
요청을 모아서 다음 글 또는 전자책 업데이트에 반영하겠습니다.
</p>

2) 스크린샷 예시: 샘플 본문이 적용된 블로그 글

이제 마지막으로, 위 샘플 본문을 실제 블로그에 적용한 화면을 캡처해 보여 줍니다.

제목, 파일 소개, 설치 방법, 다운로드 버튼이 순서대로 배치된 장면
모바일 화면에서 버튼이 어떻게 보이는지 추가 캡처

<img src="images/blog-sample-post.png"
     alt="샘플 본문이 적용된 블로그 글 전체 화면">

3장 정리

3장에서는 파일 소개 섹션, 설치·사용 방법 섹션, 그리고 실제 블로그용 샘플 본문을 하나로 묶어 구성하는 방법을 살펴봤습니다. 다음 장부터는 구독자 경험, 수익화, 전자책 확장까지 연결하는 전략을 이어서 다룹니다.

3장. 파일 소개와 설치·사용 방법, 블로그용 샘플 본문

#가나 투데이 #ganatoday

4장. 다운로드용 블로그 글 구조, 한 번에 완성하기

4장. 다운로드용 블로그 글 구조, 한 번에 완성하기

3장에서 기본 구조를 살펴봤다면, 4장에서는 같은 패턴을 한 번 더 연습해 보겠습니다. 이번에는 “블로그 하단에 GitHub 예제 모음 링크를 모아서 보여주는 위젯” 예제를 기준으로, 파일 소개 섹션, 설치·사용 방법, 블로그용 샘플 본문을 처음부터 끝까지 만들어 봅니다.

4-1. 예제 시나리오와 파일 구성

이 장에서 사용할 예제는, 블로그 글 하단에 “관련 예제 더 보기” 영역을 만들어 여러 GitHub 예제 리포지토리를 한 번에 모아서 보여주는 HTML 코드입니다.

1) GitHub 쪽 파일 구성 예시

blog-github-widgets/
├─ footer-widget-basic/
│  ├─ index.html
│  ├─ widget.css
│  └─ README.md
└─ footer-widget-advanced/
   ├─ index.html
   ├─ widget.css
   └─ README.md

각 폴더 안의 index.html은 “블로그 하단 위젯” 샘플 코드이고, widget.css는 디자인을 조정하는 스타일 파일입니다. README.md에는 설치·사용 방법을 정리해 둡니다.

2) 블로그에서 보여줄 파일 소개 섹션 HTML

먼저, 구독자에게 “이 예제가 어떤 역할을 하는지”를 알려 주는 소개 블록부터 만듭니다.

<h2>공유 파일 소개 – 블로그 하단 GitHub 예제 위젯</h2>
<p>
이 예제는 블로그 글 하단에 <strong>GitHub 예제 모음 위젯</strong>을
넣고 싶은 분을 위한 HTML 코드입니다.
여러 개의 예제 리포지토리를 한 번에 보여주고, 구독자가 필요한 예제만 골라볼 수 있게 만들 수 있습니다.
</p>
<ul>
  <li>footer-widget-basic/index.html : 기본 위젯 구조 예제</li>
  <li>footer-widget-basic/widget.css : 기본 스타일</li>
  <li>footer-widget-advanced/index.html : 그리드 레이아웃이 적용된 고급 위젯</li>
  <li>footer-widget-advanced/widget.css : 반응형 스타일</li>
</ul>
<p>
이 코드는 데스크톱과 모바일 블로그 화면 모두에서 자연스럽게 보이도록 구성되어 있습니다.
</p>

스크린샷 예시: 위젯 파일 소개 섹션

전자책에서는 “공유 파일 소개”라는 소제목 아래에 위와 같은 리스트가 보이는 화면을 캡처해 두면 좋습니다.

<img src="images/4-1-widget-intro.png"
     alt="블로그 하단 GitHub 위젯 예제 파일 소개 화면">

4-2. 설치 및 사용 방법 – 하단 위젯 적용하기

다음으로, 구독자가 예제를 그대로 자신의 블로그에 붙여 넣을 수 있도록 단계별 설치·사용 방법을 정리합니다.

1) 단계별 설치 가이드 HTML

<h2>설치 및 사용 방법</h2>
<ol>
  <li>아래 다운로드 버튼을 클릭해 위젯 예제 ZIP 파일을 내려받습니다.</li>
  <li>압축을 해제한 뒤, <code>footer-widget-basic/index.html</code> 파일을 엽니다.</li>
  <li>코드 중 &lt;!-- 링크 영역 시작 --&gt;와 &lt;!-- 링크 영역 끝 --&gt; 사이 부분을 확인합니다.</li>
  <li>각 항목의 href 속성에 자신의 GitHub 예제 리포지토리 링크를 넣습니다.</li>
  <li>전체 위젯 코드를 블로그 글의 하단 또는 공통 서식 영역에 붙여넣습니다.</li>
  <li>원하는 경우, <code>widget.css</code> 내용을 블로그 CSS 설정에 추가하여 디자인을 맞춥니다.</li>
</ol>

2) 위젯 HTML 코드 예시

아래는 블로그 하단에 넣을 수 있는 간단한 GitHub 예제 위젯 코드입니다.

<div class="github-widget">
  <h2>관련 GitHub 예제 더 보기</h2>
  <ul>
    <li>
      <a href="https://github.com/사용자명/blog-download-examples">
        블로그 다운로드 버튼 예제
      </a>
    </li>
    <li>
      <a href="https://github.com/사용자명/blog-github-widgets">
        블로그 하단 GitHub 위젯 모음
      </a>
    </li>
    <li>
      <a href="https://github.com/사용자명/blog-code-snippets">
        블로그 코드 스니펫 모음
      </a>
    </li>
  </ul>
</div>

3) 기본 스타일(CSS) 예시

위젯을 조금 더 보기 좋게 만들기 위한 최소 스타일 예시입니다.

<style>
.github-widget {
  border-top: 1px solid #e0e0e0;
  margin-top: 32px;
  padding-top: 16px;
}
.github-widget h2 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.github-widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.github-widget li + li {
  margin-top: 4px;
}
.github-widget a {
  color: #1a73e8;
  text-decoration: none;
}
.github-widget a:hover {
  text-decoration: underline;
}
</style>

스크린샷 예시: 하단 위젯이 적용된 화면

전자책에는 다음과 같은 화면을 캡처해 넣을 수 있습니다.

본문 끝에 “관련 GitHub 예제 더 보기” 제목과 리스트가 보이는 장면
모바일 화면에서 리스트가 세로로 정렬된 장면

<img src="images/4-2-footer-widget.png"
     alt="블로그 하단에 GitHub 예제 위젯이 적용된 화면">

4-3. 블로그용 샘플 본문 – 하단 위젯까지 포함한 완성 예시

마지막으로, 지금까지의 구성 요소를 모두 합쳐 실제 블로그에 바로 붙여넣어 쓸 수 있는 샘플 본문을 만들어 보겠습니다.

1) 전체 샘플 본문 HTML

<h1>[무료 공유] 블로그 하단에 GitHub 예제 모음 위젯 달기</h1>

<p>
블로그에 GitHub 예제를 하나둘 올리다 보면,
“이전에 공유했던 예제들”을 한 번에 보여주고 싶을 때가 있습니다.
이번 글에서는 블로그 글 하단에 <strong>GitHub 예제 모음 위젯</strong>을 설치하는 방법을 정리했습니다.
</p>

<h2>공유 파일 소개</h2>
<p>
이 자료는 블로그 하단에 여러 GitHub 예제를 한 번에 보여주는 HTML 위젯 예제입니다.
기본 버전과 고급 버전 두 가지를 제공하며, 데스크톱과 모바일에서 모두 자연스럽게 표시되도록 구성했습니다.
</p>
<ul>
  <li>footer-widget-basic/index.html : 기본 위젯 구조 예제</li>
  <li>footer-widget-basic/widget.css : 기본 스타일</li>
  <li>footer-widget-advanced/index.html : 그리드 레이아웃 적용 버전</li>
  <li>footer-widget-advanced/widget.css : 반응형 스타일</li>
</ul>

<h2>설치 및 사용 방법</h2>
<ol>
  <li>아래 다운로드 버튼을 눌러 예제 ZIP 파일을 내려받습니다.</li>
  <li>압축을 해제한 뒤, footer-widget-basic/index.html 파일을 엽니다.</li>
  <li>코드 중 리스트 부분의 href를 자신의 GitHub 예제 링크로 교체합니다.</li>
  <li>전체 &lt;div class="github-widget"&gt; 블록을 블로그 글 하단에 붙여넣습니다.</li>
  <li>원한다면 widget.css 내용을 블로그 CSS 설정에 복사하여 디자인을 통일합니다.</li>
</ol>

<h2>예제 소스코드 다운로드</h2>
<p>아래 버튼을 눌러 위젯 예제를 통째로 받아 보세요.</p>
<a href="https://github.com/사용자명/blog-github-widgets/archive/refs/heads/main.zip"
   style="display:inline-block;padding:10px 18px;
          background:#1a73e8;color:#ffffff;
          text-decoration:none;border-radius:4px;
          font-weight:600;">
  GitHub 위젯 예제 다운로드 (.zip)
</a>

<h2>블로그 하단 위젯 HTML 미리보기</h2>
<pre><code>&lt;div class="github-widget"&gt;
  &lt;h2&gt;관련 GitHub 예제 더 보기&lt;/h2&gt;
  &lt;ul&gt;
    &lt;li&gt;
      &lt;a href="https://github.com/사용자명/blog-download-examples"&gt;
        블로그 다운로드 버튼 예제
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="https://github.com/사용자명/blog-github-widgets"&gt;
        블로그 하단 GitHub 위젯 모음
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<h2>마무리 안내</h2>
<p>
앞으로도 블로그에서 자주 쓰는 GitHub 예제를 계속 추가해 나갈 예정입니다.
필요한 위젯이나 버튼 유형이 있다면 댓글로 요청을 남겨 주세요.
요청이 많았던 기능은 다음 예제와 전자책 업데이트에 우선 반영하겠습니다.
</p>

2) 스크린샷 예시: 전체 구조가 보이는 화면

마지막으로, 샘플 본문을 실제 블로그에 적용했을 때 제목 → 소개 → 설치 방법 → 다운로드 → 하단 위젯 순으로 보이는 전체 화면을 한 번에 캡처합니다.

<img src="images/4-3-full-post.png"
     alt="하단 GitHub 위젯까지 포함된 블로그 샘플 글 전체 화면">

4장 정리

4장에서는 3장에서 다룬 구조를 다시 한 번, 다른 예제로 연습해 보면서 파일 소개, 설치·사용 방법, 샘플 본문을 하나의 “다운로드 포스트”로 완성하는 과정을 살펴봤습니다. 5장에서는 구독자 경험을 더 높이기 위해 스크린샷, FAQ, 오류 대응 섹션을 어떻게 붙여 넣을지 구체적으로 다뤄 보겠습니다.

4장. 다운로드용 블로그 글 구조, 한 번에 완성하기 `

#가나 투데이 #ganatoday

9장. HTML 원고를 전자책(ePub)으로 변환하기

9장. HTML 원고를 전자책(ePub)으로 변환하기

1~8장에서 만든 HTML 챕터와 템플릿은 그대로 전자책의 본문이 될 수 있습니다. 9장에서는 이 원고들을 ePub 전자책 형식으로 묶어 내보낼 때 알아야 할 HTML·이미지·링크·검수 주의사항을 정리합니다.

9-1. ePub이 이해하는 HTML 구조

ePub은 본질적으로 여러 개의 HTML(XHTML) 파일과 이미지·스타일을 ZIP으로 압축한 형식입니다. 그래서 HTML 태그 구조가 깔끔할수록 뷰어에서 깨끗하게 표시되고, 서점 심사에서도 오류를 줄일 수 있습니다.

1) 기본 HTML 뼈대

전자책용 HTML 파일 하나는 다음과 같은 구조를 갖는 것이 안전합니다.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
<head>
  <meta charset="UTF-8" />
  <title>3장. 파일 소개와 설치·사용 방법</title>
  <link rel="stylesheet" type="text/css" href="../Styles/style.css" />
</head>
<body>

  <h1>3장. 파일 소개와 설치·사용 방법</h1>
  <p>여기에 본문 내용이 들어갑니다.</p>

</body>
</html>

ePub에서는 HTML5보다는 XHTML 스타일(태그 닫기, 속성 쌍따옴표 등)을 권장하기 때문에, <br />, <img />처럼 태그를 정확히 닫아 주는 것이 좋습니다.

2) 제목과 문단 태그 사용 원칙

<h1> : 챕터 제목(각 파일당 1개)
<h2> : 소제목(섹션 제목)
<h3> : 소소제목(FAQ 항목 등)
<p> : 일반 본문 문단

줄바꿈마다 <br />를 남발하기보다는, 의미 있는 단위마다 <p> 태그로 감싸야 전자책 뷰어에서 문단이 올바르게 인식됩니다.

9-2. 이미지와 링크 넣을 때 주의사항

전자책에서 이미지는 독서 경험을 풍부하게 하지만, 경로 설정이나 용량 때문에 오류가 나는 경우가 많습니다. 링크 역시 내부·외부 링크 구분과 경로를 정확히 맞추는 것이 중요합니다.

1) 이미지 파일 배치와 경로

일반적인 ePub 프로젝트 구조는 다음과 비슷합니다.

OEBPS/
├─ Text/
│  ├─ chapter1.xhtml
│  ├─ chapter2.xhtml
│  └─ chapter3.xhtml
├─ Images/
│  ├─ cover.jpg
│  ├─ screenshot-3-1.png
│  └─ screenshot-5-2.png
├─ Styles/
│  └─ style.css
└─ content.opf

본문에서 이미지를 불러올 때는 보통 ../Images/파일명 형태의 상대 경로를 사용합니다.

<figure>
  <img src="../Images/screenshot-3-1.png" alt="GitHub Download ZIP 위치" />
  <figcaption>그림 3-1. GitHub Download ZIP 버튼 위치</figcaption>
</figure>

파일명 대소문자를 정확히 맞춘다. (Windows에서는 보이지만, 일부 뷰어에서는 오류)
이미지 크기는 너무 크지 않게, 보통 긴 변 4000px 미만, 5MB 이하를 권장한다.
JPG, PNG는 대부분 안전하게 지원된다.

2) 내부 링크(장/절 간 이동)

같은 파일 안에서 섹션으로 이동할 때는 id 속성을 사용합니다.

<a href="#chapter3-section1">3장 1절로 이동</a>

<h2 id="chapter3-section1">3-1. 파일 소개 섹션 구성</h2>

다른 챕터 파일로 이동할 때는 파일명 + 앵커를 함께 사용합니다.

<a href="chapter5.xhtml#faq-section">5장 FAQ 섹션으로 이동</a>

<!-- chapter5.xhtml 내부 -->
<h2 id="faq-section">5-2. 자주 묻는 질문(FAQ)</h2>

3) 외부 링크(GitHub, 블로그 등)

전자책에서 외부 링크는 클릭하면 브라우저로 넘어가야 하기 때문에, URL을 정확히 적고, 내용상 꼭 필요한 것만 사용하는 편이 좋습니다.

<a href="https://github.com/사용자명/blog-download-examples">
  GitHub 예제 리포지토리 바로가기
</a>

9-3. CSS와 스타일링: 심플하게, 호환성 위주로

웹에서는 flex, grid, 애니메이션 등 다양한 CSS를 사용할 수 있지만, 전자책 뷰어는 지원 범위가 제한적인 경우가 많습니다. 그래서 ePub에서는 “심플한 레이아웃 + 최소한의 스타일”을 기준으로 잡는 것이 안전합니다.

1) 기본 스타일 예시

/* Styles/style.css */

body {
  font-family: sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0 1em;
}

h1 {
  font-size: 1.6em;
  margin: 0.8em 0 0.6em;
}

h2 {
  font-size: 1.3em;
  margin: 1em 0 0.5em;
}

p {
  margin: 0.4em 0 0.6em;
}

pre {
  background: #f5f5f5;
  padding: 0.8em;
  overflow-x: auto;
  font-size: 0.9em;
}

figure {
  margin: 1em 0;
  text-align: center;
}

figcaption {
  font-size: 0.85em;
  color: #666666;
}

전자책에서는 한 파일 안에서 <style> 태그로 CSS를 직접 넣기보다는, Styles/style.css 파일을 하나 두고 모든 챕터에서 링크해 사용하는 것이 일반적입니다.

2) 피해야 할 스타일들

과도한 position, float 조합, 복잡한 레이아웃
뷰어마다 다르게 동작할 수 있는 고급 CSS 효과
너무 정확한 픽셀 단위 레이아웃(뷰어 화면 크기가 제각각)

전자책은 여러 기기와 뷰어에서 읽히므로, “반응형 웹”이 아니라 “유동 레이아웃 텍스트”에 맞춘 최소 스타일이 유리합니다.

9-4. 변환과 검수: Sigil, Calibre, EPUBCheck 활용

HTML 원고와 이미지, CSS를 준비했다면, 이제 ePub 패키지를 만들어 검사하는 단계가 필요합니다.

1) Sigil로 ePub 구조 잡기

Sigil을 열고 새 ePub 2.0 프로젝트를 생성합니다.
Book Browser에서 Text 폴더에 챕터 HTML 파일들을 추가합니다.
Images 폴더에 본문 이미지 파일들을 추가합니다.
Styles 폴더에 style.css를 추가하고, 각 HTML의 head에서 링크를 연결합니다.
목차(TOC) 메뉴에서 h1/h2 기반으로 자동 목차를 생성합니다.

2) Calibre 등으로 최종 미리보기

ePub 파일을 내보낸 후에는 Calibre 같은 전자책 뷰어로 열어, PC/태블릿/모바일 화면에서 문단, 이미지, 링크가 정상적으로 표시되는지 확인합니다.

3) EPUBCheck와 최종 체크리스트

주요 전자책 서점은 EPUBCheck 통과 여부를 중요하게 보므로, 출간 전에 오류를 확인해 두면 반려 가능성을 줄일 수 있습니다.

출간 전 체크리스트 예시

- 모든 HTML 태그가 올바르게 닫혀 있는가?
- h1, h2, h3 구조가 논리적으로 맞는가?
- 내부 링크(장/절 이동)가 정상 작동하는가?
- 이미지 경로와 파일명이 일치하는가?
- 이미지 용량과 크기가 과도하게 크지 않은가?
- CSS가 무리한 레이아웃을 사용하지 않는가?

9장 정리

9장에서는 HTML 챕터를 ePub 전자책으로 변환할 때 필요한 기본 HTML 구조, 이미지와 링크 처리, CSS 스타일링, 그리고 도구를 활용한 검수 과정까지 살펴봤습니다. 10장에서는 이렇게 완성된 전자책을 업데이트하고, 후속 콘텐츠·후속판 전자책으로 확장하는 장기 운영 전략을 다룰 수 있습니다. 커밍순~~

9장. HTML 원고를 전자책(ePub)으로 변환하기 이제 거의 전자책 전체 뼈대가 다 나온 상태라, 마지막으로 10장을 “장기 운영·업데이트 전략”으로 채우거나, index.html(전체 목차 페이지) 예시를 만들어 두면 완전한 패키지가 됩니다. 어느 쪽을 먼저 보고 싶으신가요?

#가나 투데이 #ganatoday

블로그 글에서 GitHub 파일 공유하기(1장~10장)

블로그 글에서 GitHub 파일 공유하기

다운로드 포스트 구조, GitHub 연동, 전자책 수익화까지 한 번에 배우는 실전 가이드

차례

1장. 왜 블로그와 GitHub를 함께 써야 할까? – 이메일·카페 첨부의 한계와 배포 허브 개념
2장. GitHub 리포지토리 만들기와 첫 업로드 – 새 저장소 생성, 예제 파일 구조, ZIP 링크 확보
3장. 파일 소개와 설치·사용 방법, 샘플 본문 – 공유 파일 소개 섹션, 설치 가이드, 블로그용 예시 글
4장. 하단 위젯까지 포함한 다운로드 포스트 – GitHub 예제 위젯, 설치 방법, 완성형 샘플 본문
5장. 스크린샷, FAQ, 오류 대응으로 막힘 없이 안내하기 – 단계별 화면 캡처, FAQ 구조, 트러블슈팅 섹션
6장. 시리즈 구조와 내부 링크로 흐름 잇기 – 시리즈 포스트 설계, 목차 블록, 전자책 내부 링크
7장. 무료 예제에서 유료 전자책·강의로 수익화하기 – 무료/유료 구분, 전자책 안내 블록, 패키지 구성
8장. 템플릿과 자동화로 작업 시간 줄이기 – 블로그·챕터 HTML 템플릿, 스니펫, 간단 자동화
9장. HTML 원고를 전자책(ePub)으로 변환하기 – ePub용 HTML 구조, 이미지·CSS·링크 주의사항
10장. 전자책과 블로그를 함께 성장시키는 장기 운영 전략 – 버전 관리, 피드백 반영, 후속 콘텐츠·후속편 기획

블로그에서 GitHub 파일 공유하기 – 전자책 목차

#가나 투데이 #ganatoday

구글 GSC 커버리지 보고서 전체 분석 체크리스트

By prfparkst3월 24, 2026알고리즘

구글 GSC 커버리지 보고서 전체 분석 체크리스트

구글 GSC GSC 커버리지 보고서 전체 분석우선순위 체크리스트 (복사해서 사용하세요)우선순위 체크리스트 (복사해서 사용하세요)

순위	작업 항목	예상 소요 시간	완료 체크	비고 / 목표 지표
1	GSC 커버리지 보고서 전체 분석	1~2일	☐	제외 사유 90% 이해
2	페이지 속도 모바일 80점 이상 만들기	3~7일	☐	PageSpeed Insights 점수 기록
3	사이트맵 재제출 & robots.txt 확인	1일	☐	제출 완료 & 색인 요청
4	상위 30~50개 글 선별 완료	3~5일	☐	엑셀에 목록 정리
5	선별 글 10개 리라이팅 완료	2~3주	☐	1개당 3000자↑ + 이미지·표 추가
6	저품질 글 200개 이상 noindex 또는 삭제	1~2주	☐	GSC 제거 요청 완료
7	CTR 낮은 키워드 제목·메타 30개 수정	1~2주	☐	수정 후 2주간 CTR 변화 관찰
8	내부 링크 대폭 추가 (글당 최소 5개)	3~4주	☐	주요 허브 페이지 3~5개 생성
9	외부 공유 시작 (X, 커뮤니티 등)	지속	☐	주 3~5회 공유 목표
10	매주 GSC 데이터 리뷰 & 다음 우선순위 조정	매주 1시간	☐	노출량·클릭률·평균 순위 기록

이 순서대로 1~8번까지 집중하면 24개월 안에 구글 노출량이 눈에 띄게 늘어납니다.
(실제로 비슷한 상황의 사이트들에서 이 패턴으로 3~5배 노출 증가 사례가 많습니다.)

결론

필요하면 지금 GSC 커버리지 보고서나 PageSpeed 점수 스크린샷을 공유해 주시면 더 정확한 다음 단계를 제안드릴 수 있어요.
한 번에 다 하려 하지 말고, 한 주에 2~3개 항목씩 체크해 나가세요.
화이팅입니다!

#가나 투데이 #ganatoday