brunch

10. epub 만들기_6

마무리하기

by 오은오

3. 가독성 챙기기

전자책이 어떻게 보일지는 결국 눈으로 확인해야 한다. css창과 본문 미리보기 화면을 오가며, 가독성과 리듬을 조정하는 작업이 필요하다. 이 작업의 핵심은 직접 눈으로 확인하면서 미세하게 조정하는 과정이다.

제목과 부제목 사이 간격, <p> 태그로 묶인 본문의 줄간격, 자간, 들여쓰기 같은 요소를 수십 번씩 조정해가며 균형을 맞춘다. 글을 쓰는 일이 아닌, 본문을 다듬는 일이기 때문에, 직접 눈으로 확인하는 과정은 필수다.


가독성 잡기_수정전.png 수정 전


처음 설정한 css를 적용한 원고는 전체적으로 간격이 좁고 정렬이 들쭉날쭉해 답답한 인상을 준다.

'2. 전자책 출판 프로세스 (공동집필, 나만의 비법)'이라는 h1 대제목과 본문 사이에는 여백이 더 필요하다.

반대로'1) 주제 정하기 또는 글감 찾기'라는 h2는 그 아래 h3와 조금 더 붙어 있는 편이 자연스럽다.

h3인 '① 내가 하는 모든 것이 글감_오은오, 일기 쓰기'는 가운데 정렬보다 왼쪽 정렬이 더 자연스럽다.

이런 점들을 반영해, 처음 설정한 css를 수정했다.



가독성 잡기_수정후.png 수정 후

css 수정 값

h1: 본문과의 간격을 넓히기 위해 margin-bottom 값을 1em*에서 8em으로 조정

h2: 단락 구분을 명확히 하기 위해 margin-top을 2em에서 5em으로 확대

h3: text-align: center → left로 변경하고, margin-top은 2em으로 맞춤

em: 상대적인 크기 단위로, 현재 요소의 글꼴 크기를 기준으로 한 배수를 뜻함
1em = 현재 글꼴 크기와 같음 (예: 폰트 크기가 16px이면, 1em은 16px)
2em = 현재 글꼴 크기의 2배 (예: 폰트 크기 16px이면, 2em 은 32px)

전자책은 다양한 기기에서 읽히기 때문에, px보다 em이 훨씬 유연하다.

수정한 css는 원고 전체에 적용되기 때문에, 모든 헤더가 한 번에 바뀐다. 처음에 굳이 헤더를 지정한 이유도, 모든 제목과 부제목을 하나하나 수정하지 않고 일괄 변경하기 위해서다.


css 속성 설명은 생략했다. 쉬운 내용이기도 하고, 정리하자면 분량이 많다.

궁금하다면 gpt에게 이렇게 물어보자. "sigil 작업에서 자주 쓰는 css 속성 알려줘!"




여기까지 잘 따라왔다면, 이제 전자책의 뼈대는 거의 완성된 셈이다.

굵직굵직한 디자인을 마무리했으니 디테일한 부분을 만져주면 된다. 사실 이 정도만 익혀도, sigil로 전자책을 만들기에 부족함이 없다. 제목 구조를 잡고, 예외적인 서식을 다루고, 가독성을 위한 기본적인 조정만 해도 읽기 편한 전자책이 완성된다. 나머지는 해보면서 하나씩 익혀도 늦지 않다. 전자책 편집은 몇 가지 기본만 알아도 충분히 시작할 수 있는 작업이다.




4. 페이지 나누기

현재 모든 내용은 하나의 페이지에 이어져 있다. 마무리 작업으로 각 장이나 단원이 끝나는 지점에서 ctrl + enter를 눌러 페이지를 구분해주자.



5. 목차 설정하기

헤더를 지정한 이유가 여기서도 한 번 더 빛난다. 지정한 헤더는 자동으로 목차가 된다. 상단에 느낌표 네 개를 눕힌 듯한 아이콘을 클릭하면 현재 목차 구조를 확인할 수 있다.

목차지정.png

이렇게 목차를 설정해 두어야, 독자가 원하는 내용을 쉽게 찾아갈 수 있다.






컴퓨터로 글을 쓰나, 먹을 갈아 붓으로 글을 쓰나 ‘글을 쓰는 행위’는 같다. 이것도 마찬가지다. 책을 만드는 맥락은 같다. 다만 sigil은 먹을 갈고 붓을 드는 방식처럼, html과 css라는 도구로 작업해야 하기에 조금 더 손이 가고, 조금 더 귀찮을 뿐이다. 책은 결국, 만들면 완성된다.




keyword
이전 10화9. epub 만들기_5