전자책에서 이미지 삽입과 스타일링 – 깨짐 없이 적용하기

전자책 제작에서 이미지는 중요한 역할을 합니다.
표지, 본문 속 삽화, 사진 자료 등은 글만 있는 책보다 훨씬 풍부한 독서 경험을 제공합니다.

하지만 의외로 전자책 제작에서 이미지가 가장 많이 오류가 나는 부분이기도 합니다.
이번 편에서는 <img> 태그 기본 사용법부터, CSS로 크기와 정렬을 조정하는 방법까지 정리하겠습니다.

 

 

1. Sigil에서 이미지 불러오기 (메뉴 차이)
전자책에서 이미지는 단순히 HTML에 경로만 입력한다고 보이지 않습니다.
반드시 Sigil 내부의 Images 폴더에 파일을 추가해야 전자책에 포함됩니다.

1) 한글판 Sigil 
→ 메뉴: 도구 → 추가 → 파일 추가

2) 영문판 Sigil 
→ Tools 메뉴에는 Add Cover만 있고, 일반 이미지는 다음 경로로 추가합니다:

 

---

→ 일반 이미지 추가

① 왼쪽 Book Browser에서 Images 폴더를 찾기
② Images 폴더를 우클릭
③ Add Existing Files… 선택
④ 이미지 파일 불러오기

👉 이렇게 해야 Images 폴더에 파일이 등록되고, ePub 내에 포함됩니다.
👉 단순히 <img src="…">만 적으면 ePub 생성 시 이미지 누락 오류가 발생합니다.

 

 

2. <img> 태그 기본 구조

아래는 CSS를 적용하지 않은 상태입니다. 이미지가 원본 크기 그대로 들어가 있어, 화면보다 커져버리는 경우도 있습니다.

<img src="../Images/sample.jpg" alt="예시 이미지" />

- src : 이미지 경로 (전자책 구조에서는 보통 ../Images/파일명.jpg)
- alt : 대체 텍스트 (이미지를 불러올 수 없을 때 표시)
- /> : 전자책 규격은 XHTML을 따르므로 반드시 닫는 형태로 작성해야 합니다.
👉 alt 속성은 시각장애인을 위한 스크린리더 접근성에도 필요합니다.

 

 

3. CSS로 이미지 크기 조정

기본 <img> 태그만 쓰면 원본 크기 그대로 표시됩니다.
전자책에서는 화면 크기가 제한적이므로 CSS로 크기를 조정하는 게 좋습니다.

 

아래는 CSS를 적용한 상태입니다. 이미지가 화면에 맞게 자동 조정되고, 중앙에 정렬되어 보기 깔끔해집니다.

img {
max-width: 100%; /* 화면보다 크면 자동 줄임 */
height: auto; /* 비율 유지 */
display: block; /* 줄바꿈 적용 */
margin: 0 auto; /* 가운데 정렬 */
}

👉 이렇게 하면 이미지가 화면 너비를 넘어가지 않고, 항상 가운데 정렬됩니다.

 

 

4. 이미지 깨짐/경로 오류 해결 팁

- 이미지 파일은 반드시 Images 폴더 안에 넣어야 합니다.
- HTML에서 경로를 적을 때는 대소문자 구분에 주의하세요. (Sample.jpg ≠ sample.jpg)
- ePub은 상대 경로를 쓰는 것이 원칙입니다. (../Images/파일명.jpg)
- PNG, JPG는 대부분 지원하지만, GIF는 일부 뷰어에서 안 보일 수 있습니다.

 

 

📌 제가 겪은 시행착오
저는 처음에 이미지를 Word에서 복사-붙여넣기 했는데, Sigil에서 열어보니 전혀 표시되지 않았습니다.
그 이유는 이미지가 실제 파일로 들어간 게 아니라 “링크 정보”만 복사되었기 때문이었죠.

그 후부터는 반드시 Sigil → [도구] → [추가] → [파일 추가]로 이미지를 불러와서 Images 폴더에 넣고, 경로를 HTML에서 지정하는 습관을 들였습니다.

 

---

 

✅ 오늘의 정리
- <img> 태그는 반드시 src와 alt 속성을 포함해야 한다.
- 전자책에서는 CSS로 크기와 정렬을 조정하는 게 필수다.
- 이미지는 Images 폴더에 넣고, 경로는 상대 경로(../Images/파일명)로 지정한다.
- PNG, JPG는 안전하지만 GIF는 제한적이다.

 

 

---

👉 지난 글 :  제목과 소제목 꾸미기

전자책에서 제목과 소제목 꾸미기 – Heading 태그 활용법

 

👉 다음 글 : 문서 나누기와 내부 링크 연결하기

전자책에서 문서 나누기와 내부 링크 연결하기