9. epub 만들기_5
헤더 설정과 본문 스타일 조정
요즘 한화 야구가 심상치 않다. 지는 방법을 까먹은 것 같다. 선발진은 퀄리티 스타트를 찍어내고 불펜은 철벽 방어를 자랑한다. 와이스는 대전 예수가 됐고, 폰세의 긍정 에너지는 갈수록 호감이다. 류현진은 팀의 기둥이 된 거 같다. 든든하다. 이런 형들을 따르는 문동주도 참 이쁘다. 상백이는 화이팅이다. 아 그리고 타자들도 너무 잘친다! 이 기세라면 오늘부터 시작하는 두산 3연전을 이기고 15연승 할 거 같다.
최.강.한.화내 고향은 대전이다. 그래서 한화 팬이다. 고등학교 땐 류현진이 은행동 맥도날드에서 햄버거 먹고 있는 걸 본 적도 있다. 한화 경기는 그냥 일상이었다. 보는 것도, 결과를 확인하는 것도. 그런데 요즘은 좀 다르다. 모든 선수가 제 몫을 해내고, 흐름도 매끄럽다. 그리고 역전도 한다! 보다 보면 이런 생각이 든다. '감독님이 뭔 일을 내려나보다.' 김경문 감독 특유의 손질이 팀 곳곳에 들어간 것 같다. 크게 드러나진 않지만, 조율이 잘된 경기를 하고 있다.
지금 할 작업도 마찬가지다. '조율'이 필요하다. 하나의 section에 모든 본문 내용이 있다. 내용은 이미 다듬어져 있고, 순서도 잘 정리돼 있다. 그런데 모든 문장이 <p> 태그 하나로만 묶여 있다 보니, 어디가 제목이고 어디가 부제목인지 구분이 없다. 구조가 없으면 시선이 흘러가지 않는다.
그렇다고 작업물을 갈아엎을 필요는 없다. 다만 타순을 살짝 조정하는 정도의 작업이 필요하다. 중심을 잡아야 할 문장 제목은 h1, 흐름을 나누는 부제목은 h2, 그 아래 단락을 요약하는 소단락 제목은 h3. 더 세분화된 구분이 필요하면 h4나 h5까지도 쓸 수 있다. 감독이 흐름을 보고 순서를 정리하듯, 나는 문장마다 역할을 부여하는 중이다. 지금 내 역할은 그런 조율이다.
1. 단축키로 제목, 부제목, 소단락 제목, 소제목 이하 단위 지정하기
앞 챕터에서 스타일시트로 헤더(h1 ~ h5)를 디자인했다. 그걸 실제 본문에 적용할 순서다. 방법은 무지하게 간단하다. 해당 줄을 클릭해서 커서가 깜빡이면 'Ctrl + 1 / 2 / 3 / 4 / 5'를 누르면 된다.
단축키로 헤더를 지정한 모습이다.여기서 포인트는 빠르게 툭툭 넘어가듯 지정하는 것이다. 단축키를 써야 속도가 붙는다. 클릭으로 메뉴를 열고 지정하려 하면 오래 걸린다. 하나씩 정리할 때마다 구조가 또렷하게 드러난다.
2. 기울임, 색상, 박스, 표 같은 예외 요소챙기기
헤더로 구조를 다 잡았다고 끝은 아니다. 책 한 권을 읽다 보면 ‘이건 강조하고 싶은데?’, ‘여긴 색을 넣고 싶은데?’ 같은 순간이 꼭 생긴다. 어떤 문장은 기울여야 하고, 어떤 문장은 눈에 띄게 색을 줘야 하고, 어떤 부분은 박스로 따로 빼고 싶다. 표처럼 줄을 맞춰 정리해야 하는 정보도 있다. 이건 제목처럼 ‘구조’로 해결할 수 있는 게 아니다. 작고 사소하지만, 이게 없으면 책 전체가 밋밋해진다.
1) 볼드, 기울기, 밑줄 (<b>, <i>, <u>)
앞전에서 잠깐 언급했는데, 볼드/기울기/밑줄은 단축키로 설정 가능하다. 변경 문장을 드래그하고 단축키를 눌러준다.
볼드: Ctrl + B / 기울기: Ctrl + I / 밑줄: Ctrl + U
2) span (<span>)
색 지정은 span 태그를 이용한다. span 태그는 문장 내에서 특정 부분만 골라 스타일을 적용하고 싶을 때 사용하는 '보이지 않는 형광펜' 태그다. 색상은 css에 class로 등록해도 되고, 아래처럼 직접 지정해도 된다.
예시: <span style="color: red;">이 부분은 정말 중요하다.</span>
3) div (<div>)
정리된 말, 따로 보여주고 싶은 메모, 저자 노트 같은 건 박스로 묶는다.
예시: <div class="box">이건 챕터 요약입니다.</div>
css에서 .box를 예쁘게 꾸며두면, 박스가 생긴다. 배경색, 안쪽 여백, 둥근 모서리. 다 css에서 해결된다.
4) table (<table> <tr> <td>)
표는 조심해서 써야 한다. 너무 많은 줄과 셀을 넣으면 화면에서 읽기 어려워진다. 하지만 정보를 간결하게 정리할 때는 매우 유용하다. 아래는 가장 기본적인 3×3 표 예시다.
예시:
<table>
<tr>
<td>선수</td>
<td>포지션</td>
<td>비고</td>
</tr>
<tr>
<td>류현진</td>
<td>선발투수</td>
<td>3선발</td>
</tr>
<tr>
<td>와이스</td>
<td>선발투수</td>
<td>2선발</td>
</tr>
</table>
이 표는 <table> 태그를 이용해 만든 가장 기본적인 구조다. 행은 <tr>, 셀은 <td>로 구분된다. 너무 많은 정보를 한 표에 담으면 가독성이 떨어지니, 꼭 필요한 내용만 간결하게 정리하는 데 쓰는 게 좋다. (내용이 많이 들어간 표는 table 태그로 표현하는 것보다 이미지로 표현하는 방법이 더 좋다)
3. 가독성 챙기기
어떻게 보일지는 결국 눈으로 확인해야 한다. 그래서 css 창과 본문 미리보기 화면을 오가며, 가독성과 리듬을 조정하는 작업이 필요하다. 이 작업의 핵심은 ‘눈으로 확인하면서 미세하게 조정하는’ 과정이다.
제목과 부제목 사이의 간격, <p> 태그로 묶인 본문 줄간격, 자간, 들여쓰기 같은 요소들을 수십 번씩 조정하며 균형을 맞춰야 한다. 글이 아니라 화면을 보면서 맞추는 일이기 때문에, 직접 눈으로 확인하는 과정이 필수다.
다음 챕터에서 계속...
