내맘대로의 EPUB 제작 가이드

지원사업 때문에 일이 몰려서 한동안 정신 없었네요.

많이 쓰는 스타일이 들어와 소개합니다.

이런 세로 제목 스타일이에요.

유통 중인 책을 보면 이런 제목은 이미지로 많이 넣던데,

텍스트로 간단히 스타일을 잡을 수 있습니다.

전자책으로는 이렇게 보여요.

CSS 속성은 이렇습니다.

h3 {

    writing-mode: vertical-lr;

    font-family: "제목";

    font-size: 1.3em;

    color: #EC7289;

    ...

    ...

}

writing-mode라는 속성을 사용했어요.

이 속성이 글자를 세로로 표현해 줍니다.

그런데 영문이나 문장부호는 가로로 놓일 거예요.

그래서

.txt_eng_spacing {

letter-spacing : 0;

writing-mode: initial;

}

이렇게 영문 스타일은 writing-mode가 적용되지 않도록 스타일을 잡았지요.

Writing-mode는 국내 유통사 뷰어에서 문제가 생겨 거의 안썼는데

지금은 리디북스 안드로이드 뷰어 외에는 잘 표현됩니다.

리디 안드로이드 뷰어도 몇가지 설정만 해 주면 잘 나오고요.

세로로 글자를 표현하고 싶을 때 writing-mode를 잊지 마세요~

재미있는 스타일을 문의 주신 분이 있어 만들어 봤습니다.

스타일은 이렇게 2종류예요.

프롤로그 제목은 위에처럼 화살표가 있고 제목이 들어갑니다.

장제목은 화살표 앞에 번호가 붙어야 하고요.

제목 옆에 선이 들어간 스타일은 많이 만들어봤는데, 

선 끝에 화살표 처럼 포인트가 들어간 스타일은 선을 넣는 스타일과 다릅니다. 

선을 넣는 것 보다 까다롭지요.

전자책이기 때문에 화면 크기가 늘었다 줄었다 할 수 있지요.

그리고 장 제목 글자 수도 일정하지 않습니다.

책에 따라 장 번호가 1, 01, 001 처럼 여러 자리일 수도 있어요.

스타일을 만드는 방법은 수백가지예요.

편집자에 따라 중요하게 생각하는 포인트가 다를거고,

그에 따라 스타일도 달라집니다.

저 제목 스타일을 봤을 때 제가 중요하게 생각한 부분은 장제목이었어요.

화살표 길이는 폭에 따라 늘었다 줄었다 해도 되지만, 제목은 가능한 한줄로 표시되야 한다고 생각했습니다.

장 제목과 장 번호는 글자 수에 따라 늘었다 줄었다 하지만, 뷰어 폭에는 영향을 받지 않아야 합니다.

뷰어 폭이 제목의 폭보다 좁다면 줄이 바뀌어야 하지만, 

한 줄에 제목이 들어갈 정도의 폭이라면 제목은 한 줄로 표시하고 싶었습니다.

그리고 제목 글자 수가 바뀌더라도 화살표 길이가 알아서 조절돼야겠지요.

각 장 제목마다 폭을 하나씩 맞추기는 귀찮으니까요.

화살표도 중요합니다. 처음엔 간단히 이미지를 넣으면 되겠지 생각했는데

화살표 길이를 뷰어 폭에 자동으로 맞추려면 이미지로 넣으면 안되더라구요.

이미지 가로 길이를 100%로 하면 화살표 머리 부분이 가로로 찌그러지고, 가로, 세로를 100%로 맞추면 선의 폭이 두꺼워지면서 화살표 머리가 커집니다.

제가 생각한 해결책은, 화살표를 아주 길게 만들어 웬만한 뷰어 가로 폭에서도 잘리지 않도록 하고

배경으로 넣는 방법입니다.

이 외에도 다른 여러 방법이 있어요.

삼각형을 오른쪽 끝에 정렬하고, 삼각형 왼쪽에 이미지로 선을 넣은 후 글자 간격을 없애던가,

테이블 속성을 이용해 상자 2개를 붙여 왼쪽은 선을, 오른쪽은 삼각형을 넣던가,

border로 선을 만들고, 선 끝에 삼각형을 넣은 후 margin으로 겹치게 해도 되겠네요.

제가 만든 스타일은 이렇습니다.

  <style>

div.box_title {

width : 100%;

display : flex;

}

.arrow {

background-image: url("../Images/aaa.png");

background-position : right top;

background-repeat : no-repeat;

flex-basis : 100%;

min-width : 2em;

height : 1em;

-ms-flex: 1;

flex: 1;

}

.txt_chap_title {

    text-align: right;

margin-left : 1em;

}

.txt_chap_No {

font-size : 2em;

color : grey;

    font-style: italic;

margin-right : 0.5em;

}

.txt_grey_small {

    color: grey;

    font-weight: bold;

    font-size: 0.8em;

}

</style>

flex를 이용해 div 박스 3개를 가로로 놓고, 가운데 상자 크기가 자동으로 조절되도록 했습니다.

장 번호와 제목 상자는 글자 양에 따라 폭이 알아서 바뀌고요.

스타일을 적용하면 이렇게 보입니다.

가로 폭이 넓으면 화살표만 길어져요.

그리고 화살표 상자에 min-width를 둬서가로 폭이 아주 좁아져도 화살표가 사라지지 않게 했습니다.

화살표가 남으면 제목이 줄바꿈 되지요.

리디 PC 뷰어에서 div 태그에 margin 속성이 적용되지 않는 문제가 있습니다.

.test-style {

margin-bottom : 5em;

}

<div class="test-style">내용</div>

<p>본문</p>

이렇게 하면 p 태그와 div 태그 사이에 마진이 생겨야 하는데 리디북스 PC 뷰어에사만 마진이 적용되지 않습니다.

처음엔 속성 상속이 꼬여 그런가보다 생각해 빈줄 추가로 해결했는데 같은 혆상이 반복되니 귀찮네요.

이런 스타일 만들려면 margin이 먹혀야 하는데 안먹혀서 <p><br/></p>를 넣는 귀찮은 작업을 해야돼요 ㅜ.ㅜ

오래 전에 K뷰어 만들 때 똑같은 현상을 경험한 적이 있습니다.

뷰어에도 자체적인 태그와 스타일이 있어요.

뷰어 화면 그릴 때 div  태그를 쓰는데, 이 뷰어 div 태그에 속성이 잘못 들어가면 CSS 상속이 되면서 이런 현상이 생깁니다. 쉽게 말해, 뷰어 오류예요. 구 버전에서는 이런 문제가 없다가 어느 순간부터 생긴걸 보면 개발자가 실수한거 같아요.

담당자가 이걸 발견하면 바로 고치겠지만, 누가 알려주기 전엔 발견하기 어려울테니 수정이 언제 될지 모릅니다. 그래도 전자책은 만들어야 하니, 해결 방법 알려드립니다.

.test-style {

margin-bottom : 5em !important;

}

<div class="test-style">내용</div>

<p>본문</p>

간단하지요?

스타일 상속이 문제니까, 상속받은 스타일 보다 내 스타일이 더 중요하다고 뷰어한테 알려주는 속성이에요.

두개 이상 속성이 충돌할 때 !important 속성이 우선적으로 적용됩니다.

!important는 안쓰는게 좋아요. CSS가 충돌을 할 일은 거의 없거든요.편집자가 만든 스타일이 아무 문제가 없다면 !important는 절대 쓸 일이 없습니다.

하지만 리디북스  PC 뷰어처럼 편집자의 손을 벗어났을 때 종종 도움이 됩니다. 

예를 들면, 교보 뷰어나 iBooks 뷰어는 주석을 강제로 숨기지요.

팝업 주석 처리 되니 주석이 없어도 되지만, 이 책에서는 주석 목록을 모두 보여줘야 한다 싶을 때 !important로 뷰어가 주석을 숨기지 못하게 할 수 있어요. 

- 사족. 제목에 !important는 중요한 글이라는 의미가 아닙니다 ^^;

연 초부터 재미있는 스타일(?)로 편집된 책이 많이 들어오네요.

스타일을 어떻게 잡을까 고민하는 재미는 있지만, 제작 시간(ㅜ.ㅜ)이 늘어나 납기 맞추느라 애먹고 있습니다.

책 한권을 2~3일에 끝내야 하는데 스타일 고민하며 장난(?)하다 보면 한두시간이 금방 지나가네요.

PDF에서 캡쳐한 이미지입니다.

이렇게 제목 좌우를 커다란 중괄호로 감싼 스타일이에요.

이미지로 넣으면 간단하겠지만, 이미지 보다는 텍스트가 깔끔하기 때문에 어떻게 넣을가 고민해 봤습니다.

고민 결과는 이렇습니다.

HTML 코드는 간단해요.

<h3 class="title_prologue"><span class="title_prologue_body">프롤로그</span></h3>

참 쉽지요^^?

이렇게 쉬운데 방법을 생각하는데까지 시간이 오래 걸리네요.

비슷한 스타일이 또 있습니다.

목차 페이지에서는 장 제목을 이렇게 감쌌어요.

PDF 캡쳐 이미지입니다.

이 스타일 역시 HTML 코드는 간단합니다.

<p class="TOC_chap_title_orange"><span class="TOC_chap_title">1장_ <br/>여기 여자들도 일하고 있습니다</span></p>

이런 스타일을 만들 때 신경써야 할 부분은 상하 중앙 정렬이에요.

중앙 정렬은 한번 설명한 적이 있으니 궁금하신 분은 참고하세요.

https://www.epubguide.net/290

HTML 코드가 단순하다는 것은 CSS가 복잡하다는 뜻입니다.

보기엔 간단해 보이지만 CSS는 좀 복잡해요.

어려운 CSS 속성이 들어가지는 않았습니다.

제가 한번 이상 설명한 속성들 뿐이지요.

그런 속성을 어떻게 조합하느냐에 따라 다양한 효과를 낼 수있어요.

전자책 책공장 회원님들은 이런 스타일을 어떻게 표현하시겠어요?

오랜만에 팁 하나 올립니다^^

전자책 편집 하면서 독자들이 신경쓰지 않을것 같은 페이지는

가독성만 보장 되면 편집은 신경을 많이 쓰지 않습니다.

그래서 이런 스타일이 나오면 그냥 상단에 가운데 정렬 정도로 편집을 했어요.

독자들이 신경쓸 것 같지 않고,

이 페이지는 1초도 안보고 넘길테니 전달하려는 내용만 확실히 전달 되면 편집 스타일은 중요하지 않다고 생각한 것이지요.

그런데 이런 부분에 신경을 쓰는 편집자가 생각보다 많더라구요.

이런건 어떻게 해야 하냐고 여러번 문의를 받았는데 그때 마다 '간단히 처리하세요' 정도로 알려드렸어요.

종이책과 비교하며 보지 않는 이상

페이지 위쪽에 나와도 어색하지 않아요.

페이지 위에 놓는게 싫다면 빈줄<p><br/></p> 5개 정도 추가하면 되지요.

이정도만 해도 별 문제 없다고 생각을 합니다. 

하지만 질문이 많이 들어온다는건 그만큼 신경쓰는 분들이 많다는 뜻이라

'간단히 처리하세요' 정도로는 부족한게 아닐까 생각이 들더라구요.

얼마 전에도 비슷한 문의가 들어와서 이번엔 제대로 스타일을 잡아봤습니다. 

이런 스타일은 중요한 포인트가 있어요.

어떤 경우라도 글자가 다음 페이지로 넘어가서는 안된다.

물론, 글자 크기를 엄청나게 키워서 한 페이지에 글자가 모두 담길 수 없다면 다음 페이지로 넘어갈거예요.

뷰어 높이가 아주 좁아서 한번에 2줄만 표시된다고 해도 다음페이지로 넘어가겠지요.

이런 특수한 경우가 아니라면 다음 페이지로 넘어가지 않아야 되요.

이런 스타일은 쉬워 보이지만 생각보다 까다롭습니다.

CSS를 잘 모르는 사람들은 vertical-align을 쓰면 된다고 생각해요.

vertical-align으로도 가능하지만, 그냥 되지는 않아요.

vertical-align로 직접 편집해 보세요.

팁을 드리자면 table 관련 스타일을 함께 적용해야 합니다.

저는 box-orient라는 속성을 사용했어요.

이 속성은 문제가 하나 있습니다. 표준 CSS 속성이 아니에요.

하지만, 국내 유통사 뷰어는 대부분 이 속성을 지원합니다.

box-orient는 수평 혹은 수직으로 레이어를 관리할 수 있도록 하는 속성이에요.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-orient

box-pack이라는 속성과 함께 사용하면 글상자 안의 도다른 글상자나 block 속성의 태그를 좌우, 혹은 상하로 정렬할 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-pack

그런데 세로 속성을 줄 때 문제가 생겨요.

글상자에 테두리를 그리고 높이 100%(height : 100%)을 하면, 페이지가 가득 찰 것 같은데 텍스트가 있는 부분 까지만 테두리가 생기지요.

이 문제를 해결하려면 vh라는 단위를 써야되요.

vh는 현재 디스플레이 크기에 따른 비율이에요.

현재 디스플레이 해상도의 높이가 100vh지요.

그래서 width : 100vh;  하면 화면 가득 테두리가 그려집니다.

하지만, 이 역시 문제가 있어요.

리디북스는 100vh가 여백을 제외하고 현재 화면 높이에 맞게 그려지는데 교보뷰어는 100vh로 할 경우 여백까지 포함해 버리지요. 현재 화면 크기가 100이고, 뷰어 기본 여백이 5라면 교보 뷰어는 105가 되는거예요. 그래서 100vh로 놓으면 교보 뷰어에서는 일부 내용이 다음페이지로 넘어갑니다.

이 문제는 간단한 트릭으로 해결할 수 있어요.

100vh가 아닌 80vh 정도로 놓으면 되요. 80vh ~ 85vh 정도면 문제 없을거예요.

그래서 이런 스타일이 나옵니다.

<body>

<div class="box_license">

<div class="box_bottom">

<p>화면 하단에 놓일 내용</p>

</div>

</div>

</body>

.box_license {

height : 80vh;

display: box;

box-orient: vertical;

box-pack: end;

box-align: center;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-box-pack: end;

-webkit-box-align: center;

display: -moz-box;

-moz-box-orient: vertical;

-moz-box-pack: end;

-moz-box-align: center;

}

높이의 80%만 적용되서 화면 아래가 살짝 뜨긴 해요.

그래도 빈 줄을 10개씩 넣어가며 화면 아래에 맞추는 것 보다는 깔끔하게 처리될거예요.

이전 내용은 이곳에서 확인하시기 바랍니다.

http://epubguide.net/245

전자책에 무료로 쓸 수 있는 글꼴을 모았습니다.

글꼴의 저작권(라이선스), 제작처, 받을 수 있는 경로, 그리고 글꼴파일이 지원하는 언어(한중일, 한글 고어, 기본 특수문자 세트 등), 글자 크기별 모양 등을 한번에 확인할 수 있습니다. 

다운로드 https://goo.gl/98udBq
바로보기 : 

http://193.122.179.74/book/100바로보기2 http://193.122.179.74/book/101

 

 

❖ 

판올림 내용- 태폰트 3종 추가   * 태흘림   * 태조각   * 태으뜸

 

Set03 무료 서체 목록(일반 기업, 지자체 등)

• 가비아 글꼴
• 가비아 봄바람
• 가비아 납작블럭
• 가비아 솔미체
• 미생체
• 야놀자 야체
• tvN 즐거운 이야기체
• 아리따 글꼴
• 아리따 부리
• 아리따 돋움
• 아리따 Sans(로마자)
• 아리따 흑체(중국어)
• 배달의민족
• 배민 한나체
• 배민 주아체
• 배민 도현체
• 배민 한나는열한살체
• 배민 기랑해랑체
• 배민 연성체
• 티몬
• 티몬 몬소리
• 티몬 티움(영문전용)
• 고양
• 고양체
• 고양덕양체
• 고양일산체

 

• 태폰트
• 태흘림
• 태조각
• 태으뜸

Set02 무료 서체 목록(은글꼴)

• 은글꼴
• 은바탕
• 은돋움
• 은그래픽
• 은궁서
• 은필기
• 은디나루
• 은자모바탕
• 은자모돋움
• 은자모노벨
• 은자모소라
• 은펜
• 은펜흘림
• 은필기a
• 은신문
• 은타자
• 은바다
• 은옛글

Set01 무료 서체 목록(국가기관, 네이버, 구글 등)

• 구글 노토(Google Noto)
  • Noto Sans KR
  • Noto Sans Mono KR
  • Noto Serif KR
• 네이버 나눔 글꼴
  • 나눔명조
  • 나눔고딕
  • 나눔바른고딕
  • 나눔펜
  • 나눔바른펜
  • 나눔브러시
  • 나눔스퀘어
  • 나눔스퀘어라운드
  • 나눔바른고딕-옛한글
• NHN 고도 글꼴
  • 고도 마음(godo Maum)
  • 고도 Rounded-L
  • 고도 Rounden-R
• 저작권위원회 KCC 글꼴
• KCC 김훈체
• KCC 은영체
• 문화체육관광부, 출판인회의 코펍(Kopub) 글꼴
• 코펍 바탕(Kopub Batang)
• 코펍 돋움(Kopub Dotum)
• 만화진흥원(한국콘텐츠진흥원) 글꼴
• 만화진흥원체
• 서울시 서울 서체
• 서울 남산체(정체)
• 서울 한강체(정체)
• 서울 남산체(장체)
• 서울 한강체(장체)

 

1. 목차에서 글꼴의 모양을 확인할 수 있습니다.

글꼴 이름을 누르면 글꼴의 상세 정보로 이동합니다. 

2. 글꼴의 저작권 정보와 배포처, 다운로드 경로를 확인할 수 있습니다.

3. 글꼴의 상세한 내용을 확인할 수 있습니다.

한글, 옛한글, 영문, 일본어, 한자, 기타 언어(스페인, 독일, 프랑스, 러시아)의 지원 여부를 알 수 있고 특수문자 세트가 포함되어 있는지 확인할 수 있습니다. 

4. 한글, 영문 문단이 어떻게 보이는지 확인할 수 있으며 글자 크기에 따른 모양, 스타일(기울임, 진하게)을 적용했을 때의 모양을 알 수있습니다. 

5. 전자책 본문으로 썼을 때 글자가 어떻게 보이는지 알 수 있습니다. 본문 내에서 진하게, 기울임, 윗첨자, 괄호설명 등의 스타일이 어떻게 표현되는지 알 수 있습니다.

아직 본문 디자인은 편집중이고, 무료로 사용 가능한 글꼴 중 일부만 작업이 되었습니다. 시간 나는 대로 업데이트하고 있습니다. 글꼴에 대해 추가로 확인하고 싶은 내용이 있거나 더 추가하고 싶은 무료 글꼴이 있으면 언제든 댓글이나 이메일로 남겨 주십시오. 확인하는 대로 추가하겠습니다.