내맘대로의 EPUB 제작 가이드

전자책에서 단어나 문장에 밑줄을 긋는 방법은 여러가지가 있습니다.

하지만 밑줄을 긋기 전어, 어떤 밑줄을 그을 것인지부터 정확히 알아야 합니다.

많은 사람들이, 밑줄을 긋고 싶다고 얘기하지 어떤 밑줄을 긋고 시픈지는 얘기하지 않아요.

1. 그냥 밑줄

아무 설명 없이 '밑줄을 그리고 싶다'고 한다면, text-decoration을 사용하세요.

text-decoration은 밑줄을 그리는 속성입니다.

색상, 두께, 모양 등을 지정 할 수 있습니다.

2.  밑줄의 모양을 보다 유연하게 편집하고 싶다면 border-bottom을 사용하세요.

text-decoration은 한계가 있습니다. 글자와 여백 조절이 어렵고, 인라인 스타일의 밑줄만 그릴 수 있습니다.

전자책을 만들다 보면 가장 먼저 두 가지 형태의 밑줄을 고민하게 됩니다.

인라인 스타일의 밑줄은 줄이 바뀔 때 같이 줄이 바뀝니다.

일라인 스타일의 밑줄은

줄이 바뀔 때 같이 줄이 바뀝니다.

이러게 문장이나 문단의 줄이 바뀔 때 밑줄도 같이 행갈이를 하고 싶다면 인라인 속성의 태그로 밑줄을 그리면 됩니다.

본문 내에 특정 문장의 밑줄을 그을 때 적합합니다.

<p><span class="txt_underline">인라인 스타일의 밑줄은 줄이 바뀔 때 같이 줄이 바뀝니다.</span></p>

.txt_underline {

    border-bottom : 1px solid #000000;

}

블럭 스타일은 줄이 바뀌어도 블럭 하단에만 줄이 표시됩니다.

블럭 스타일은 줄이 바뀌어도

블럭 하단에만 줄이 표시됩니다.

이렇게 문장이 줄을 바꿔도 아래에만 밑줄을 그리고 싶다면 블럭 스타일의 밑줄을 사용합니다.

주로, 제목 하단에 밑줄을 그릴 때 사용합니다.

<p class="txt_underline">블럭 스타일은 줄이 바뀌어도 블럭 하단에만 줄이 표시됩니다.</p>

.txt_underline {

    border-bottom : 1px solid #000000;

}

3. 물결무늬나 연필, 크레파스로 그은 것 같은 밑줄은 background-image를 사용하세요.

이런 밑줄은 background-image를 사용하면 쉽게 그릴 수 있습니다.

형광펜 스타일도 있습니다. 이 역시 background-image를 이용해 그릴 수 있습니다.

시길을 이용해 EPUB에 글꼴을 추가했는데 적용이 되지 않을 때가 있습니다.

이 설명을 위해 예시로 드는 글꼴은  [박물관문화재단클래식]이에요. 

최근에 개선이 됐는지는 모르겠지만, 이 글꼴에 문제가 있습니다.

글꼴을 적용하면 이렇게 보여야해요.

그런데 시길에서 글꼴을 적용하면 이렇게 보입니다.

이런 글꼴이 생각보다 많아요. 윈도우 PC에서는 글꼴이 잘 보이지만 EPUB에 넣으면 반영이 되지 않습니다.

윈도우에서 잘 보이니 폰트 문제라 생각 안하고 Sigil이 문제거나 CSS를 잘못 적용했다고 생각할 수 있어요.

어설픈 (자칭) 전문가들은 아는 척을 하기 위해 OTF와 TTF 차이가 어쩌구 하며 EPUB에서는 TTF만 써야 한다는 황당한 소리도 하지요. 그런데 예시로 든 박문관문화재단클래식 폰트는 TTF를 쓴거예요. EPUB은 OTF, TTF 다 써도 됩니다.

그럼 뭐가 문제냐.

폰트가 문제예요.

저도 폰트의 어떤 부분이 문제인지는 몰라요. 그건 폰트 전문가에게 물어보세요.

제가 아는 건 일부 폰트가 윈도우에서는 제대로 보이지만 안드로이드/아이폰 같은 모바일 OS나  Sigil같은 일부 프로그램(아마 웹 엔진 문제가 아닐까...) 같은 곳에서는 제대로 보이지 않는 다는 것이에요.

그럼 폰트 문제인지 어떻게 확인할 수 있을까.

Sigil의 폰트 뷰어를 이용하면 돼요.

책 탐색기에서 폰트를 더블 클릭 하면 코드 보기 창에 폰트 뷰어가 열려요.

여기에서 글꼴이 제대로 보이지 않으면 폰트 문제예요.

같은 글꼴을 수정하면 이렇게 제대로 보입니다.

폰트 뷰어에서 글꼴이 제대로 보이면 사용할 수 있는 글꼴이고,

폰트 뷰어에서 글꼴이 제대로 보이지 않으면 글꼴 문제예요.

글꼴이 문제라면 글꼴 배포처에 문의해서 글꼴을 수정해 달라고 하세요.

만약 글꼴 뷰어에서 제대로 보이는데 반영이 되지 않는다.

그럼 CSS 문제일 거예요. 오타거나, 대소문자 구분 문제가 대부분이지요.

CSS 값 중 max와 min이라는 값이 있습니다.

이미지 폭을 조절할 때, 일정 해상도 까지는 화면에 맞춰 키우고,

일정 폭을 넘어가면 고정 값으로 하고 싶을 때,

width : 고정값;

max-width : 100%;

이렇게 하면 됩니다.

이 의미는 이미지를 고정값으로 보줘라.

하지만 고정값 보다 폭이 작으면 폭에 맞춰 100%로 맞춰라.

입니다.

이걸 한 줄로 표현을 하면

width : min( 고정값, 100%)

이렇게 할 수 있어요.

하지만 교보ebook(PC), 예스24(PC)는 이 값을 지원하지 않습니다.

이 값을 사용하면 문제가 생길 수 있어 두 유통사가 해결하기 전까지는 사용하지 않는 것이 좋습니다.

배경이미지를 깔고 텍스트를 넣으니 글씨가 잘 보이지 않습니다.

그래서 배경색을 넣었더니 이번엔 배경이미지가 보이지 않아요.

그래서 배경색을 투명하게 넣고싶습니다.

이럴 때 쓰는 속성이 opacity입니다.

opacity를 넣으면 배경색 뒤로 배경이미지가 보여 좋긴 한데, 글자도 흐릿해지네요.

글자를 선명하게 넣고 싶은데 방법이 없는걸까요?

이럴 때 쓸 수 있는 속성이 rgba입니다.

rgba는 배경색을 투명하게 하면서 글자는 선명하게 유지할 수 있어요.

rgba와 opacity의 차이가 느껴지나요?

둘의 차이를 확실히 비교해 볼 수 있도록 opacity와 rgba를 반반씩 붙여봤어요.

왼쪽이 opacity, 오른쪽이 rgba입니다.

rgba의 글자가 확실히 선명하지요?