내맘대로의 EPUB 제작 가이드

Sigil에서 본문 검색을 하는데 태그만 찾을 때가 있습니다.

클래스 이름에 찾고 싶은 단어가 들어갔거나

p*, i* 처럼 정규식을 쓰면 이런 문제가 생기지요.

​

예를 들어, 본문에 있는 영어 단어만 찾아 첨자 스타일을 적용하고 싶다.

​

([a-zA-z]++)

​

찾기에 정규식을 이렇게 넣으면,

본문의 단어보다 p, div, sub 같은 태그가 더 많이 걸립니다.

​

<p class="style_name">본문에 있는 영어 단어keyword 찾기</p>

​

이런 코드가 있고, 찾고 싶은 내용은 keyword인데,

정규식에서 영문자만 찾으라고 식을 넣어 검색하면

​

p, class, style, name를 모두 찾습니다.

이러면 정규식을 쓰는 것 보다 하나씩 확인해 스타일을 적용하는게 빠르겠다는 생각이 들지요.

​

이럴 때 쓰는 정규식 설정이 [텍스트]예요.

[텍스트] 설정의 기능은 이렇습니다.

HTML 파일에서 태그는 제외하고 검색을 하는 기능이지요.

​

이렇게 설정을 한 후

​

<p class="style_name">본문에 있는 영어 단어keyword 찾기</p>

​

이런 코드에서 찾기를 하면

태그와 태그 안의 class, id, title 등의 요소는 무시하고 본문에 있는 영어 단어만 찾습니다.

재미있는 스타일 몇개 소개해 드립니다.

​

먼저 대본 스타일 본문인데, 앞에 캐릭터 이미지가 들어가있어요.

텍스트로 이름만 들어있어면 좀 더 간단한데, 이미지까지 들어가고, 이미지폭도 전부 제각각이라 편집이 조금 더 복잡해지네요.(왼쪽이 EPUB)

​

이 스타일의 포인트는 위에 박혀있는 column이에요.(오른쪽이 EPUB)

저렇게 딱 붙여도 몇몇 뷰어에서는 강제 여백이 생기고, 강제 여백을 막는 강제 스타일 적용 코드 넣어주고...

유통사가 그냥 CSS에 장난치지 않았으면 하다가도,

유통사에서 뷰어 기획하던 시절에 봤던 그 엄청난 쓰레기 EPUB을 생각하면 유통사 뷰어 담당자 마음도 이해가 가고...

​

column과 비슷한 스타일이 [정리]예요.

만드는 방법은 똑같지요.

배경 전체를 핑크로 넣을까 하다가, 어차피 body 스타일 안먹는 뷰어에서는 더 지저분해지니 텍스트가 들어간 곳만 핑크로.

물론, 편집자가 '전체 배경 넣어주세요' 하면 수정을 해야겠지만...

끝으로,

전자책은 예쁘지 않다.

텍스트와 이미지 대충 배열하면 된다는 소리를 여전히 듣고 있네요.

​

"그런거 다 할 수 있어요."

하면

"그런거 할 수 없다고 했다. 절대로 할 수 없다."

이런 소리나 하고...

​

'고정 판형'과 '가변 판형'의 차이로 인한 스타일 문제가 아니라면

종이책에서 가능한 건 전자책에서도 가능해요.

전자책이 예쁘지 않은 것은

전자책을 대충 만들기 때문이지

전자책을 예쁘게 만들 수 없어서는 아니에요.

전자책 만들다 보면 다양한 테두리를 그리게 됩니다.

테두리 모양은 전부 제각각이라 초보 편집자에게 종종 질문을 받아요.

테두리는 아무리 복잡해도 '기본'만 알면 쉽게 그릴 수 있습니다.

그 기본이란,

border(border와 연결된 속성 전부)

border-image

background(background와 연결된 속성 전부)

​

이렇게 3개.

이 3개가 어떻게 쓰이는지 예시로 보여드릴게요.

​

아래 예시 이미지는 모두 왼쪽이 종이책(PDF), 오른쪽이 전자책입니다.

​

1. 패턴이 들어간 테두리 선, 그리고 안쪽 영역 라운딩 처리

​

이런 테두리는 background-image를 사용합니다.

박스를 2개 그리지요. 패턴 이미지가 있는 바깥쪽 상자, 그리고 흰색 안쪽 상자.

안쪽 상자에 border-top-left-radius를 주면 라운드 처리를 할 수 있지요.

​

2. 너무 쉬운데 의외로 그릴 줄 아는 사람이 별로 없는 테두리

이런 테두리는 아주 그리기 쉽습니다.

border와 border-radius 속성만 있으면 됩니다. 상자도 하나면 되고요.

border-radius를 어떻게 쓰는지 공부하면, 아주 쉽게 그릴 수 있는 테두리입니다.

이 테두리는 여러가지로 활용을 할 수 있습니다.

예를 들어 이런거.

앞쪽에 있는 반달 모양의 원형 테두리 역시 border와 border-radius로 만들 수 있어요.

위, 아래, 좌, 우, 타원형, 원형 등 어떤 형태로든 만들 수 있기 때문에

연 평균 200~300권 만들다 보면 10번 정도 쓰게 되는 스타일입니다. 이정도면 엄청 높은 빈도예요.

3. 팁상자/상자형 각주 스타일

이건 단순하게 border만 이용하면 됩니다.

너무 쉬워서 설명할 필요도 없을 것 같지만,

의외로 float 속성을 모르는 사람들이 많아 가볍게 언급합니다.

float은 이미지에만 사용하는 줄 아는 초보 편집자가 많아요. float은 block, inline 속성 태그면 어디든 쓸 수 있어요.

4. border로 그릴 수 없을 때는 border-image로 그리면 된다

이런 테두리는 border로 그릴 수 없습니다.

위, 왼쪽은 2줄, 각 모서리 모양이 모두 다르고, 오른쪽 아래에는 돋보기 아이콘까지 들어있지요.

이런 테두리를 그리라고 하면 상자를 여러개 중첩시킬 생각을 하는데,

그냥 border-image를 쓰면 간단해요.

5. border와 background의 활용

이건 2번에서 설명한 테두리와 똑같아요. border와 border-radius를 이용했지요.

그런데 왼쪽 위에 연필 아이콘이 있습니다.

이렇게 연필 아이콘이 있으면, 이미지를 직접 삽입하는 분들이 많더라구요.

그냥 background-image를 쓰세요.

왜? 간단하니까.

​

종이책(PDF)

전자책(EPUB)

이미지를 직접 삽입한다면 태그가

<div class="border-box">

<div class="bullet_image">

<img src="../Images/bullet.jpg" alt="bullet image">

</div>

</div>

이렇게 되고

배경이미지를 쓰면

<div class="border-box"></div>

이렇게 끝나거든요.

​

6. 한쪽 모양만 다른 테두리

4개 면은 border로 그릴 수 있는데 한쪽만 그릴 수 없다면?

이렇게 복잡하게 생각하지 마세요.

그냥, 이건 border-image로 그리면 됩니다.

4번이랑 이거랑 똑같아요. 4개 면이 다르던, 한쪽 면이 다르던

border로 그릴 수 없다면 border-image를 쓰면 됩니다.

​