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

By prfparkst3월 25, 2026전자책

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

그린아프로

Share: Facebook Twitter Google+

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

By prfparkst3월 25, 2026전자책

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

그린아프로

Share: Facebook Twitter Google+

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

그린아프로

Share: Facebook Twitter Google+

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

그린아프로

Share: Facebook Twitter Google+

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

By prfparkst3월 25, 2026전자책

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

그린아프로

Share: Facebook Twitter Google+

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

By prfparkst3월 25, 2026전자책

블로그 글에서 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

그린아프로

Share: Facebook Twitter Google+

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

By prfparkst3월 25, 2026전자책

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

그린아프로

Share: Facebook Twitter Google+

쿠팡파트너스-빅세일

전체 페이지뷰

Most Popular

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

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

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

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

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

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

1) FAQ 작성 원칙

2) FAQ HTML 구조 예시

3) 전자책용 FAQ 블록

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

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

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

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

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

5장 정리

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

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

1) 시리즈 전체 흐름 설계

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

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

1) 시리즈 목차 HTML 예시

2) 간단한 스타일 예시

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

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

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

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

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

6장 정리

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

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

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

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

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

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

2) 안내 블록 스타일 예시

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

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

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

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

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

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

1) 판매 채널 예시

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

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

7장 정리

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

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

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

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

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

1) 챕터 공통 HTML 템플릿

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

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

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

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

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

8장 정리

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

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

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

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

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

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

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

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

1장 정리

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

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

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

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

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

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

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

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

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

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

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