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장에서는 이렇게 완성된 전자책을 업데이트하고, 후속 콘텐츠·후속판 전자책으로 확장하는 장기 운영 전략을 다룰 수 있습니다. 커밍순~~
#가나 투데이 #ganatoday
그린아프로