Sigil로 그림 동화책을 EPUB으로 만들 때,
그림과 텍스트가 흐트러지지 않도록
페이지 레이아웃을 정확하게 설계하는 것이 중요해요.
특히 삽화가 중심인 그림책은 4:3 비율,
텍스트 박스 위치, 여백, 삽화 크기 조정 등이 핵심이에요.
이 글에서는 실제로 활용 가능한
HTML + CSS 통합 코드를 제공하고,
어떤 구조로 작성해야 다양한 전자책 뷰어에서도
깨지지 않는지 실무 기준으로 정리해드릴게요.
1. 구조 설명
| 영역 | 비율 | 용도 |
| 상단 75% | 삽화 삽입 영역 | 그림을 가운데 정렬 |
| 하단 25% | 텍스트 박스 영역 | 설명글 또는 대사 삽입 |
2. 통합 HTML + CSS 코드 (Sigil용)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>그림 동화책 페이지</title>
<!-- ▼▼▼ 여기부터 CSS 영역입니다 ▼▼▼ -->
<style>
.page {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20mm 15mm;
box-sizing: border-box;
}
.image-area {
height: 75%;
display: flex;
justify-content: center;
align-items: center;
}
.image-area img {
max-width: 100%;
max-height: 100%;
object-fit: contain; /* 비율 유지하며 가운데 정렬 */
}
.text-area {
height: 25%;
background-color: rgba(255, 255, 255, 0.85); /* 반투명 박스 */
border-radius: 12px;
padding: 16px;
font-size: 1.1em;
line-height: 1.5;
text-align: center;
}
</style>
<!-- ▲▲▲ 여기까지 CSS 영역입니다 ▲▲▲ -->
</head>
<body>
<!-- ▼▼▼ 여기부터 HTML 콘텐츠 영역입니다 ▼▼▼ -->
<div class="page">
<div class="image-area">
<!-- 이미지 경로를 아래에 입력하세요 (예: ../Images/page1.png) -->
<img src="../Images/page1.png" alt="루루가 걷는 장면" />
</div>
<div class="text-area">
<p>루루는 조용히 중얼거렸어요.<br />“정말 내가 할 수 있을까?”</p>
</div>
</div>
<!-- ▲▲▲ 여기까지 HTML 콘텐츠 영역입니다 ▲▲▲ -->
</body>
</html>3. 실무 Tip
- vw / vh 단위를 사용하면 4:3 화면비율 유지가 쉬워요
- object-fit: contain을 사용하면 삽화 비율 유지 + 가운데 정렬이 돼요
- 텍스트 박스는 반투명 배경, 라운드 처리로 가독성을 높이는 게 좋아요
- 이 구조를 템플릿으로 복사해 다른 페이지에도 반복해서 활용하면 좋아요
'전자책 소책자 출판' 카테고리의 다른 글
| 나도 구글폼 하나 만들어볼까? (0) | 2025.05.17 |
|---|---|
| [동화책] AI와 함께 만드는 삽화 이미지｜시각 연속성 체크 & 자산 고정 가이드 (0) | 2025.05.10 |
| 그림 동화책 제작과정 한눈에 (2) | 2025.05.09 |
| [Sigil ]사용법부터 출간 준비까지 ｜ EPUB 전자책 만드는 법 (1) | 2025.05.09 |
| [소책자 제작] 시화집 제작 기획 (2) | 2025.05.08 |
