8장. 템플릿과 자동화로 작업 시간 줄이기
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 전자책으로 변환하는 과정과, 출판 시 주의할 점을 다룹니다.
#가나 투데이 #ganatoday
그린아프로
