시길(sigil) 사용법 : 본문 이미지 삽입

안녕하세요 탐구소년입니다. 

전자책 제작 프로그램 시길(sigil) 사용법 시리즈는 계속됩니다. 오늘은 본문에 이미지를 추가하여 좀 더 잘 읽히고 상품성 좋은 전자책을 만드는 방법에 대해 알아보도록 하겠습니다. 

 

 

먼저 준비물입니다. 전자책에 추가하고자 하는 이미지를 하나 준비해야 하고요. 당연한 얘기지만 전자책 파일(epub)이 필요합니다. 위의 이미지는 무료 이미지 서비스 페이지인 pixabay라는 웹페이지에서 아무거나 골라 다운로드한 것입니다. 

 

 

샘플 파일의 본문 코딩은 위와 같이 되어 있습니다. 미리보기로 보면 아래와 같습니다. 위 파일을 만드는 방법은 제 블로그의 다른 글( https://penguingoon.tistory.com/148 )에서 확인해보실 수 있습니다. 

 

 

이렇게 달랑 글자만 적혀 있는 전자책입니다. 뭔가 허전하죠? 이제 우리가 할 일은 이 페이지에 이미지를 추가해주는 것입니다. 그럼 먼저, 파일에 이미지를 추가해주겠습니다.

 

 

프로그램 왼쪽에 있는 'Book Browser'를 보면, 여러 종류의 폴더 중 Images 라는 폴더가 있습니다. 여기에 본문에 넣고자 하는 이미지를 추가해주시면 됩니다. 이미지 추가 과정은 

 

1. Images 폴더를 마우스 오른쪽 버튼 클릭한다.

2. Add Exsiting Files.. 를 클릭한다.

3. 탐색기에서 추가할 이미지를 골라 추가한다.

 

입니다. 아주 기본적인 과정이기에 이미지는 생략하였습니다. 

이미지가 잘 추가되었다면, 이제 본문으로 돌아와 이미지 추가하는 코드를 작성해줍니다. 코드는 아래와 같습니다. 

 

 

16번 줄부터 20번 줄까지를 작성해주면 됩니다. 줄 번호는 크게 의미없고, 내용만 같으면 됩니다. 복사용 텍스트도 아래에 제공합니다. 

 

<div style="text-align:center;margin-top:20px;">

<img src="../Images/rabbit.png" alt="토끼 일러스트" width="50%" height="auto"/></div>

</div>

 

코드 설명을 간단하게 하겠습니다. 

 

먼저 <div>라는 태그를 추가했습니다. 이 태그는 새로운 영역을 만들고자 할 때 사용하는 태그입니다. 이미지가 들어갈 영역을 담당하게 되는 것입니다. 이 태그에는 style 이라는 속성이 추가 작성되어 있습니다. 코드를 보면 style 속성의 내용으로 다음과 같이 되어 있습니다. 

 

"text-align:center;margin-top:20px;"

 

이는 이미지를 가운데(center)에 정렬시킴과 동시에 윗부분(top)에 여백(margin)을 20픽셀 두겠다는 의미입니다. 

 

그 다음에는 <img> 태그가 등장합니다. 이 태그는 이름처럼 이미지를 집어넣는 역할을 합니다. 여기에는 여러가지 속성이 추가되어 있는데, 자세히 한번 살펴보도록 하겠습니다. 

 

src="../Images/rabbit.png" alt="토끼 일러스트" width="50%" height="auto"

 

src에는 사용할 이미지를 정확하게 지정해주어야 합니다. Images 폴더에 있는 rabbit.png 파일을 정확하게 지정했죠?

alt는 이미지 설명을 써 주면 되는 부분이라 생략해주어도 됩니다. 

width는 폭을 의미하는데, 50%라고 지정해주었기 때문에 전자책 페이지의 딱 절반 정도 크기를 차지하게 됩니다. 

height는 높이인데, auto로 지정해주게 되면 폭에 맞게 알아서 크기가 조정됩니다. 

 

자 그럼 오타없이 코드를 작성했다는 가정 하에, 결과를 확인해보도록 하겠습니다. 

 

 

네. 이렇게 전자책 본문에 이미지가 추가되는 것을 확인할 수 있습니다. 가운데 정렬이 되어 있고, 폭이 전자책 전체 폭의 절반 정도이죠. 만일 결과가 제대로 나오지 않으신다면, 오타를 의심해보시는 게 좋겠습니다. 

 

여기까집니다. 시길(sigil) 사용법을 계속 올리다 보니 점점 난이도가 높아진다는 느낌이 드네요. 그렇지만 그만큼 전자책 제작 능력도 늘어가는 거라고 생각하면 나쁘지 않은 것 같습니다. 아직 조회수가 너무 낮은 블로그가 그런 분들이 안 계시리라 생각은 들지만, 혹-시나 전자책 제작 관련 알고싶은 내용이 있으시거나 질문이 있으신 경우에는 댓글을 남겨주세요. 읽고서 글 쓸 때 참고하도록 하겠습니다.

 

자! 됐습니다. 그럼 오늘은 여기까지 하고요. 다음 번에는 더 유용한 정보를 준비해서 돌아오도록 하겠습니다. 코로나 바이러스 조심하시고, 좋은 밤 보내시길 바랍니다. 감사합니다.