무료로 사용할 수 있는 전자책 글꼴(무료 폰트) Guide

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

http://epubguide.net/245


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

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


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



❖ 판올림 내용

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





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

설정

트랙백

댓글

[CSS3] EPUB2에 애니메이션, 그라데이션 등 다양한 효과 주기

화려한 효과는 EPUB3만 가능한게 아닙니다.

EPUB2에도 표준을 지키며 간단한 애니메이션을 넣을 수 있습니다. 

스크립트를 쓰지 않고 CSS만 사용해 효과를 낼 수 있지요.


많은 분들이 이런 '화려한' 효과에 관심을 보입니다.

그런데 '화려한' 효과를 왜 쓰는지 잘 생각해 보셔야되요.

화려한 효과는 책을 보지 않는 사람에게는 '와~' 하는 감탄을 불러내겠지만


글자가 왔다 갔다 하고, 번쩍이고, 네온사인처럼 색이 바뀌면

독자들이 책에 집중할 수 있을까요?


'화려한' 효과는 얼마든지 넣을 수 있습니다. 어렵지 않아요.

EPUB2와 CSS3만 이용해도 본문 위에 벗꽃이 흩날리게 만들 수 있어요.

뷰어에 따라 제한이 있지만 교보, 알라딘, 리디, iBooks등의 뷰어에서 돌아갑니다.


애니메이션 등의 화려한 효과를 찾는 분들이 많아 샘플을 올리는데

이런 화려한 효과가 정말 책에 필요한건지 진지하게 고민을 해 보세요.

제대로 기획을 해서 꼭 필요한 곳에 이런 효과를 넣어야지 기획 없이 '화려함'만 찾는건 독서에 방해가 될 수 있어요.



첨부한 파일은 독특한 효과를 주는 CSS3 속성 샘플입니다.






설정

트랙백

댓글

무료로 사용할 수 있는 전자책 글꼴 Guide v0.4


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

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




판올림 내용


- 본문 스타일을 적용했습니다.

- 저작권, 무료폰트, 이 책을 보는 방법 등 설명이 수정/추가 됐습니다.

- 코펍 폰트가 추가됐습니다.

- 목차 업데이트를 했습니다. 뷰어의 목차 기능을 이용해 원하는 글꼴을 찾을 수 있습니다.

- 본문 예제에 기울임, 진하게 스타일을 추가했습니다.

- 포함된 글꼴

   * 구글 노토  Sans, Serif 한글(KR)

   * 네이버 나눔 글꼴

   * NHN고도 글꼴

   * KCC 김훈체, 은영체

   * 코펍 서체

   * 서체는 계속 추가됩니다.


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



* 글꼴파일 그룹 제작처의 라이선스 전문과 라이선스를 확인할 수 있는 경로, 글꼴 파일을 받을 수 있는 경로를 표시합니다.


* 글꼴 파일이 지원하는 언어 및 특수문자를 글꼴 디자인으로 확인할 수 있습니다. 만약 글꼴파일이 지원하지 않는 언어가 있다면 아래 [나눔명조]의 '한글 고어'처럼 글자가 깨지거나 [나눔 펜]의 한자 처럼 아무것도 나타나지 않을 수 있습니다. 이는 내용이 없는 것이 아니고 글꼴파일이 지원하지 않아 표시되지 않는 것입니다. 





* 글꼴의 글자 크기별, 꾸밈별 모양을 확인할 수 있습니다. 글자 크기는 스타일을 적용하지 않은 1em을 기준으로 합니다. 글꼴에 따라 1em의 글자 크기가 커보이거나 작아보일 수 있지만 이는 모두 1em입니다. 글자의 특성에 따라 같은 1em이라도 글자 크기가 달라보일 수 있습니다. 



(캘리버에서 캡쳐한 화면)



* 글꼴은 가장 많이 사용되는 Regular, Medium 등의 대표 글꼴 하나만 사용했습니다. 아래 글꼴 스타일은 기본 글꼴에 글자 꾸밈 태그를 적용한 것입니다. 위 이미지처럼 캘리버 같은 일부 뷰어에서 이런 스타일이 제대로 표현되지 않을 수 있습니다.

국내 유통사의 표현성에 대한 내용은 이곳을 참고하시기 바랍니다 : http://epubguide.net/241

(iBooks에서 캡쳐한 화면)



* 본문에서 글꼴이 어떻게 보이는지를 확인할 수 있습니다. 본문 편집시 많이 사용하는 윗첨자 형태의 설명이나 괄호 설명을 참고할 수 있게 스타일을 추가했습니다. 글꼴에 따라 본문 느낌이 달라져 본문 편집을 위한 원하는 글꼴을 찾을 때 참고할 수 있습니다. 



설정

트랙백

댓글

모르는 사람이 의외로 많은 CSS 문법 (2)

앞의 글에서 선택자 만드는 규칙을 알려드렸습니다.


1. 태그 선택자 : HTML 태그를 스타일 선택자로 사용

2. 클래스 선택자 : .classname 으로 사용자가 필요한 스타일 선택자 생성

3. ID 선택자 : HTML요소에 고유한 성격을 부여하는 ID를 선택자로 활용


여기에 추가로, 


1. 활용할 수 있는 HTML 태그가 있으면 적극 활용하고

2. 예약어(태그, 속성 등에 쓰이는 단어)는 가급적 선택자로 사용하지 말아야 한다.


는 주의사항까지 정리해 드렸습니다.

긴 글을 쓴 것 같은데 이 몇줄로 간단히 요약이 되네요 ㅜ.ㅜ


이번 글에서는 특수 선택자를 간단히 정리해 보겠습니다.

특수 선택자란 태그, 클래스, ID 선택자와는 달리 특수한 목적을 위해 사용하는 선택자를 의미합니다. 특수 선택자라는 용어는 뜻이 명확히 규정되어 있지 않아 제가 설명드리는 범위와 다른 설명에서 사용하는 범위가 다를 수 있습니다. 여기에서 얘기하는 '특수 선택자'는 태그, 클래스, ID를 제외한 특수한 목적으로 지정된 선택자를 의미합니다.


1. @page Rule


전자책 스타일에서 간혹 보이는 선택자입니다. 참고로 @가 붙으면 선택자라고 하지 않고 Rule이라고 합니다. @font-family Rule, @page Rule 하는 식으로요.


@page는 인쇄를 위한 규칙입니다. HTML은 '가변형 화면' 즉 폭과 높이가 바뀌는 화면에 내용을 표현하기 위한 언어입니다. 그런데 화면을 인쇄하려면 A4, B5처럼 정해진 크기에 맞춰야하지요. 지금 보고 계신 이 내용을 A4용지 프린터로 인쇄하면 어떻게 나올가요? 보이는 그대로 나올까요?(궁금하면 해보세요 ^^)


@page는 인쇄를 할 때 여백을 지정하기 위한 규칙입니다. 그래서 인쇄에 필요한 페이지 사이즈(size), 상하좌우 여백(margin) 등 제한적인 속성만 사용할 수 있어요. 


전자책 전체 페이지의 마진을 줄 때 사용할 수 있지만, 그리 권해드리고 싶은 속성은 아닙니다. page-break처럼 인쇄를 목적으로 만든 규칙이라 다양한 화면에서 보는 전자책에 어울리지는 않습니다. 그래도 마진은 문제 없이 지정되니 '쓰면 안된다' 정도는 아니에요.


@page에 대한 자세한 설명은 이 글을 참고하세요.

https://developer.mozilla.org/ko/docs/Web/CSS/@page


2. * 전체 선택자


앞에 곱하기(*) 기호는 오타가 아닙니다. 이 선택자가 * 예요.


* {

margin : 0;

padding : 0;

font-family : '명조';

font-size : 1.2em;

...

}


전체 선택자로 문서 전체에 영향을 주는 스타일을 지정할 수 있습니다.

만약 책의 모든 글씨체를 '명조'로, 글자 크기를 1.2em으로 지정하고 싶다면 위 스타일을 넣어보세요.

모든 CSS 선택자에 '명조'를 지정하지 않아도 알아서 명조가 지정이 될거예요.


책 전체에 적용해야 하는 기본 설정이 있다면 전체 선택자를 사용할 수 있습니다. @page 속성 대신 여백을 줄 때 주로 사용해요. 그리고 줄간격, 문단간격을 없애려고 모든 선택자에 margin : 0; padding : 0;을 추가하는 수고도 덜 수 있습니다.


3. Pseudo-class 선택자(가상 클래스 선택자)


가상 클래스 선택자는 특정 항목이 특수한 상태일 때만 속성을 부여하는 선택자입니다.

예를 들어, 링크를 생각해 보세요.


링크 텍스트 : 파란색 밑줄

링크 클릭상태 : 빨간색 밑줄

클릭했던 링크 : 갈색 밑줄


링크 속성에는 이렇게 3가지 스타일이 있습니다.

이 스타일을 변경하려면 a 태그 스타일을 수정해 주면 되요.

a {

color : #000000;

text-decoration : none;

}


이러면 밑줄이 사라지고 글자 색은 검정색이 됩니다. 


문제는, 링크를 클릭한 상태에서도, 링크를 다녀와도 항상 밑줄 없는 검정색이라는거예요.

각 상태별로 다른 스타일(예를 들어 링크를 클릭하고 있을 때 노란 바탕색)을 주고 싶으면?


이럴 때 가상 클래스 선택자를 사용할 수 있습니다.


a:link {

/*링크가 걸린 텍스트의 스타일*/

}


a:visited {

/*방문했던 링크 텍스트의 스타일*/

}


a:hover {

/*링크 위에 마우스를 올렸을 때 스타일. 터치 모니터에서는 효과를 나타내기 어려움*/

}


a:active {

/*링크를 누르고 있는 상태에서 텍스트의 스타일*/

}


이 외에도 다양한 가상 클래스 선택자가 있습니다.


p::first-letter {

color : red; /*문단의 첫 글자만 빨간색으로*/

}


p::first-line {

color : red; /*문단의 첫번째 줄만 빨간색*/

}


p::before, p::after {

content :("!!경고!!");/*문단의 앞뒤에 !!경고!! 문구 자동 삽입*/

}


가상 클래스는 종류가 다양해서 제가 자주 쓰는 몇가지만 여기에 소개합니다. 

이 중에 ::before, ::after는 정말 활용도가 높습니다.

더 자세히 알고싶다면 이곳을 참고하세요.

https://www.w3schools.com/css/css_pseudo_classes.asp


오늘은 여기까지.

다음 글에는 복합선택자(Combinator)를 설명할게요. 이전 글에서도 몇번 설명한 적이 있는데 전체적으로 다시 정리하겠습니다. 

설정

트랙백

댓글

모르는 사람이 의외로 많은 CSS 문법 (1)

최근에 전자책 제작 강의를 많이 하고 있습니다.


완전 초보부터 윙크나 시길로 전자책을 만들다 한계에 부딪힌 분들까지 대상이 다양한데요, 전자책을 많이 만들어 봤다는 분들조차 아주 기본적인 CSS 문법을 모르는 경우가 많았습니다. 


그래서 기본적인 CSS 문법을 정리해 봅니다.


1. 선택자 만들기


선택자는 스타일의 그룹입니다. 여러개의 스타일을 하나로 묶어놓고 이 스타일의 이름을 붙이잖아요. 이걸 선택자(selector)라고 합니다. 


.my_background_color {   /* <--my_background_color가 선택자예요 */

background-color : #FF0000;

margin : 1em;

font-family : "굴림";

}


선택자를 만드는 규칙은 단순하지 않습니다. 복잡한 규칙이지만 잘 활용하면 아주 편해요. 서로 다른 스타일이지만 쓰임이 같다면 같은 이름을 줄 수 도 있지요.


예를 들어, 제목의 고딕체는 빨간색, 문단의 고딕체는 노란색으로 스타일을 적용한다면 선택자 이름을 2개 만들어야 합니다.


.title_gothic {

color : red;

}


.para_gothic {

color : yellow;

}


그런데 이렇게 만들 수도 있어요.


h1.gothic {

color : red;

}


p.gothic {

color : yellow;

}


이렇게 하면 같은 이름의 선택자라도 태그에 따라 다른 스타일이 적용됩니다.

선택자 만드는 규칙은 CSS의 가장 기본입니다. 선택자는 Cascade의 기본이기 때문에 선택자 규칙을 모르면 CSS를 제대로 만들 수 없습니다. 



선택자 만드는 규칙


1.1 태그 자체


p, h1, h2, strong, bold 등의 태그에 스타일을 직접 적용할 수 있습니다. 태그 자체에 스타일을 적용하면 태그에 클래스를 붙일 필요가 없어 편해요.


p { text-indent : 1em; }


이렇게 하면 모든 p 태그에 들여쓰기가 됩니다. 


1.2 class 선택자


사용자가 임의로 이름을 지정해서 선택자를 만들 수 있습니다. 선택자 앞에 점(.)을 붙여 사용합니다.


.my_style {


}


영문, 숫자, 언더바(_) 하이픈(-)을 조합해 어떤 이름이라도 지정할 수 있습니다. 언더바와 하이픈 이외에도 몇가지 기호를 더 사용할 수 있지만 사용할 수 없는 기호가 더 많으니 언더바와 하이픈만 이용하는게 좋아요.


선택자를 특정 태그에 종속시킬 수 있습니다. 이렇게 하면 같은 이름이라도 태그에 따라 다른 스타일을 사용할 수 있어요.


h2.title {

font-size : 1.5em;

text-align : center;

}


h3.title {

font-size : 1.2em;

text-align : right;

}


선택자를 만들다 보면 이런 저런 이름을 붙이고 더 붙일 단어가 생각 안나 스타일 이름은 뭐로 하지 고민하게 되는데 태그에 따라 같은 내용, 다른 모양이라면 이렇게 똑같은 이름을 쓸 수 있습니다.


클래스 선택자는 속성을 지정할 때 class="class_selector"라는 형식으로 태그에 값을 넣습니다.


<h2 class="title">부 제목</p>




1.3 ID 선택자


ID는 말 그대로 고유한 이름입니다. 그래서 ID는 한 챕터 안에 딱 한번 사용을 합니다. 절대로 한번 이상 나와서는 안되지요.


ID 는 속성을 지정하기 위한 목적보다 문서 내에 있는 특정 값이나 위치를 표시하기 위해 사용합니다. 예를 들어 주석을 링크로 연결한다면 이렇게 되요.


<p> ID<a href="#foot_note01">1)</a>는 문서 내에 딱 한번 사용할 수 있습니다</p>


<p id="foot_note01"> ID : Identification의 약자</p>



여기서 ID는 <p id="foot_note01"> 입니다. a 태그에 있는 foot_note01은 ID를 지시하는 값이지 ID가 아닙니다. 만약 ID가 1번 이상 나온다면  a 링크는 어디로 가야할지 알 수 없게 되지요. 그래서 ID는 문서 내에 반드시 한번만 나와야 합니다. 


<p> ID<a href="#foot_note01">1)</a>는 문서 내에 딱 한번 사용할 수 있습니다</p>


<p id="foot_note01"> ID : Identification의 약자</p>


<p id="foot_note01"> ID : I Do의 약자</p>


그런데 이렇게 ID를 지정하고, 스타일을 바꾸고 싶을 때 어떻게 할까요? 

ID에 스타일을 적용할 수 있습니다.


#foot_note01 {

font-color : blue;

}


ID 스타일은 페이지 내에서 딱 한번만 사용할 수 있습니다. ID가 한번밖에 나올 수 없으니까요. 그리고 위 예에서 설명드린 주석 스타일을 ID로 적용하는건 권해드리지 않습니다. 주석이 10번 나온다면 각 ID마다 스타일을 지정해 줘야 하거든요.


EPUB2에서는 ID 스타일을 쓸 일이 많지 않습니다. 하지만 EPUB3로 사진 앨범을 만든다면 ID 스타일을 쓰게 됩니다. 


여기까지가 선택자를 만드는 가장 기본적인 방법입니다.


선택자를 만들 때 주의해야 할 점이 있어요.


a. HTML 태그가 있다면 태그를 써라.


어떤 분들은 모든 태그에 클래스 선택자를 붙입니다. 예를 들어 본문에 장제목 스타일이 딱 하나(수십번 반복될 수 있지만) 있다고 생각해 보세요.


.chap_title {

/*장제목 스타일*/

}


<h3 class="chap_title">장제목 1</h3>

<h3 class="chap_title">장제목 2</h3>

<h3 class="chap_title">장제목 3</h3>


이건 자원 낭비예요. 편집 시간도 늘어나고, 파일 용량도 늘고 코드도 복잡해집니다.

사용할 수 있는 태그가 있다면 태그를 쓰면 됩니다.


h3 {

/*장 제목 스타일*/

}


<h3>장 제목 1</h3>

<h3>장 제목 2</h3>

<h3>장 제목 3</h3>


만약 프롤로그 처럼 장 제목과 같은 레벨인데 스타일이 다르다면, 본문에 가장 많이 나오는 스타일을 h3에 지정하고, 앞과 끝에만 나오는 프롤로그 에필로그 스타일을 클래스로 지정하면 됩니다. 


b. HTML 태그와 기타 예약어는 클래스나 ID 선택자명으로 사용하지 말아라.


.strong {color : red;}


.address {font-family : "고딕"}


.button {  }


.small {   }


.img {   }


.color { }


.line-height {   }


.word-wrap {   }


보기엔 아무 문제 없어 보입니다. 그리고 이렇게 해도 문제가 생기지 않습니다. 하지만 이 선택자 이름은 전부 예약어입니다. HTML과 CSS에서 태그나 속성으로 사용하는 단어들입니다.


예약어를 써도 정상적으로 스타일이 적용되고 epubcheck에 오류가 발생하지 않습니다. 하지만 이건 가장 기본적인 규칙이에요. 너무 당연한거라 설명이 필요 없을 정도인데 생각보다 예약어를 선택자로 쓰는 분들이 많더라구요. 


한번에 정리하려 했는데 생각보다 내용이 길어졌네요.

다음 글에는 복합적인 선택자에 대해 설명하겠습니다. 언제가 될지는 모르겠지만... ^^;

설정

트랙백

댓글

복잡한 코드를 정리해 주는 유용한 텍스트 편집 태그

전자책을 편집하다 보면 수많은 스타일을 사용하게 됩니다. 그런데 스타일을 span 태그로 적용을 하면 코드가 복잡해지고, 스타일 선택자를 기억하기도 어렵고, 코드도 길어지고.... 불편한 점이 많아요.


영문 표기를 예로 들어 볼까요?


EPUB(electronic publication)은 국제 디지털 출판 포럼(IDPF, International Digital Publishing Forum)에서 제정한 개방형 자유 전자서적 표준이다. EPUB은 자동공간조정(reflowable)이 가능하게 끔 디자인 되었다.


책에서 흔히 보는 편집입니다. 이런 편집을 span 태그로 스타일을 적용하면 이렇게 되요.


<p>EPUB<span class="txt_small">(electronic publication)</span>은 국제 디지털 출판 포럼<span class="txt_small">(IDPF, <span class="txt_italic">italicInternational Digital Publishing Forum</span>)</span>에서 제정한 개방형 자유 전자서적 표준이다. EPUB은 자동공간조정<span class="txt_small">(reflowable)</span>이 가능하게 끔 디자인 되었다.</p>


깔끔함을 떠나서 입력해야 하는 태그와 속성이 너무 많습니다. 당연히 입력 시간이 오래 걸릴 수 밖에 없어요. 그리고 태그와 스타일 속성 역시 파일 크기에 영향을 줍니다. 본문 텍스트 파일은 100kb밖에 안되는데 HTML로 편집하면 200kb가 될 수도 있어요. 파일 용량이 커지면 뷰어 로딩 시간이 길어집니다. 챕터 넘어갈 때 보이는 로딩 표시를 짧게 하려면 파일 용량을 줄이는게 가장 효과적이에요.


어떤 분들은 선택자 이름이 길다고 t1, t2 이렇게 선택자 이름을 짧게 만들어요. 이것도 방법은 되겠지만 추천하고 싶지는 않습니다. 개념 잡힌 편집자(프로그래밍 개발자도 마찬가지고)라면 선택자(개발에서는 변수) 이름은 누가 봐도 쉽게 이해할 수 있는 이름을 사용합니다. 


그럼 선택자 이름을 고치지 않고 위 코드를 어떻게 정리할 수 있을까요?


<p>EPUB<sub>(electronic publication)</sub>은 국제 디지털 출판 포럼<sub>(IDPF, <i>International Digital Publishing Forum</i>)</sub>에서 제정한 개방형 자유 전자서적 표준이다. EPUB은 자동공간조정<sub>(reflowable)</sub>이 가능하게 끔 디자인 되었다.


이 코드는 어때요? 훨씬 깔끔해 졌지요?

span 태그를 쓸 때보다 파일 용량도 훨씬 줄일 수 있고, 보기에도 더 깔끔해 보입니다. 그런데 '누가 봐도 쉽게 이해할 수 있는 이름'인가요?

HTML을 조금만 안다면 <sub>와 <i>태그가 의미하는 바를 정확히 알 수 있을거예요. 


그런데 <sub>는 아래첨자낳아요. 그럼 EPUB(electronic publication) 이렇게 보이지 않나요?


<sub>를 그대로 쓰면 아래첨자로 보이겠지요. 그래서 CSS로 <sub>태그의 기본 스타일을 수정해 줍니다.


 sub { font-size : 0.8em; vertical-align : baseline; }


이렇게 스타일을 수정하면 아래첨자가 아니라 본문 텍스트에 맞춰 작은 글씨로 보이게 되지요.


HTML에는 이렇게 활용할 수 있는 기본 태그가 많이 있습니다.

IDPF의 '공개 출판 구조(OPS) 2.0' '2.2.1 필수모듈'을 보면 xhtml에서 사용 가능한 태그 목록이 나와 있습니다(http://www.odpf.or.kr:8080/wp/?page_id=192#221) 이것만 써야 한다는건 아니고, 최소한 이 태그들을 뷰어가 표현해야 한다는 거예요.


이 태그들 중 텍스트 편집에 활용할 만한 것들을 몇가지 소개합니다. 여기 소개한 태그보다 훨씬 많지만 책 한권 편집하는데 이정도만 사용해도 span 태그를 거의 쓸 일이 없습니다. 본문 안에 다른 종류의 글자가 얼마나 많이 들어가는지 생각해 보세요. 본문, 외국어 표기, 인용구, 이미지 설명(캡션) 등등. 이런 요소가 20개씩 들어가는 책은 찾아보기 힘들잖아요. 아주 복잡한 책이 아니라면 10개 정도 스타일로 본문에 쓰인 텍스트를 대부분 표현할 수 있습니다. 


태그 

기능 및 활용

스타일 예

 <sub>

- 본래 기능은 아래첨자

- 스타일을 주면 외국어 병용 표기[영어English]나 괄호 설명[IDPF(국제 디지털 출판 포럼)] 처럼 본문 글자 아래쪽으로 정렬된 작은 글씨를 표현 가능

 sub {

 font-size : 0.8em;

 vertical-align : baseline;

}

 <sup>

- 본래 기능은 윗첨자

- sub와 비슷하나 위로 정렬된 작은 글씨를 표현 가능 IDPF(국제 디지털 출판 포럼)

 sup {

 font-size : 0.8em;

 vertical-align : 30%;

}

 <cite>

- 문장 내 짧은 인용구(HTML5에서는 작품의 제목)를 표현할 때 사용

- 기본 스타일은 이탤릭이나 CSS 수정 가능

예) 빈 센트 반 고흐 해바라기

예) IDPF(EPUB 전자책 표준을 제안했다)

cite {

 font-style : normal;

 font-size : 0.9em;

}

 <i>

- 기울임

- 기울임 스타일에 사용

- 기울임 글꼴에 다른 속성(색, 글자크기)을 지정해 사용할 수 있음

- 기울임 속성은 유지하기를 권함

i {

 font-style : italic;

 font-size : 1.2em;

 color : blue;

}

 <em>

- 강조(기울임으로 표현)

- 기본 스타일은 <i>처럼 기울임으로 표현되는데 '강조'를 위한 태그임

- 기울임 속성을 지우고 스타일을 지정해 '강조'가 필요한 글자에 사용 가능

em {

  font-style : normal;

  font-size : 1.1em;

  color : red;

 <strong>, <b>

- 강조, 진한 글씨체

- 진한 글씨체로 강조를 해야할 때 사용(진한 글씨체(bold) 속성은 유지하기를 권함. 다른 속성 부여할 수 있음)

 strong, b {

  font-size : 0.8em;

  font-family : '굴림';

}

 <small>

- 본문 보다 작은 글씨체

- 작은 글씨체 속성은 그대로 유지하고 다른 스타일을 적용할 수 있음

 
 <big>

- 본문 보다 큰 글씨체

- 큰 글씨체 속성은 그대로 유지하고 다른 스타일을 적용할 수 있음

 


이정도만 사용해도 웬만한 책은 편집할 수 있을거예요. 

본문보다 작은 글씨체로 외국어 동시 표기가 필요하고, 다른 스타일로 괄호 설명을 넣어야 한다면 <sub>와 <cite>를 쓰는 식으로요.


이렇게 기본 태그를 사용해도 다른 스타일이 필요하다면 그때 <span> 태그를 활용하면 되요. 


중요!!!

태그는 편집자가 CSS에서 어떤 스타일이든 적용할 수 있습니다. 예를 들어 이탤릭 태그인 <i>에 font-style : normal;을 적용하면 기울임이 사라져요. 


하지만 태그 고유의 속성은 그대로 살려두는게 좋습니다. <sub>를 아래첨자 대신 본문글씨 아래쪽에 배치된 작은 글씨체로 사용해도 되지만 본문 위쪽에 배치된 작은 글씨로 사용하는건 피해야 한다는 소리예요. 본문글씨 위쪽에 배치하려면 <sup> 태그가 있습니다. <sub> 태그에 스타일을 적용하면 윗첨자로 사용할 수 있다고 해서 윗첨자로 사용을 하면 '누가 봐도 쉽게 이해할 수 있는' 코드가 아니거든요.


<b> 태그는 진한 글씨체bold 태그인데 bold 속성을 둔 채로 기울임을 적용하는건 괜찮지만 bold 속성을 없애고 기울임 속성만 남기는건 피해야 되요. 기울임 태그<i>가 있는데 <b> 태그로 진한 글씨체 없이 기울임만 적용하면 오류가 나지는 않지만 다른 편집자가 수정할 때 당황할 수 있습니다.


오류가 나지 않는다는 보장도 없어요. 예를 들어 뷰어에서 EPUB 내부의 CSS를 무시하고 뷰어 스타일을 강제 적용 시킬 경우 태그의 원래 속성이 반영될 수 있어요. 뷰어에서 '사용자 설정'을 사용하면 전자책 자체의 스타일을 무시하기도 합니다. 그럼 이탤릭만 설정한 <b>태그가 진한 글씨로 보이게 되지요. 그래서 태그의 원래 기능은 그대로 살려두는게 좋아요.








설정

트랙백

댓글

전자책 제작을 하며 많은 사람들이 하는 실수들

모 출판사의 요청으로 오류가 있는 EPUB을 수정을 했습니다.

유통사에 등록을 하는데 오류가 생긴 콘텐츠 20여종을 봐달라고 하더라고요.

대부분 구글 플레이북 등록시 오류가 나는 콘텐츠였고, 일부는 리디북스 같은 국내 유통사에서도 문제가 됐다고 합니다. 


구글은 EPUB2, EPUB3 모두 등록 가능한데 IDPF에서 제공하는 EPUBCheck에 오류(Error, Warning)가 없어야합니다. 오류가 하나라도 있으면 등록이 되지 않습니다. 반면 국내 유통사는 오류가 나도 뷰어에서 보는데 문제가 없다면 받아주기 때문에 EPUBCheck에서 오류가 있어도 정상등록되는 파일이 많습니다. 그래서 국내 유통사에 정상 등록 됐는데 구글에 등록하면서 오류가 발생한 파일들이 대부분 수정 대상이었습니다.


구글과 국내 유통사의 정책 중 어느게 옳다고 단정지을 수는 없어요. 까다롭게 표준을 지키느냐(구글), 표준에 벗어나더라도 일정 부분은 허용을 하느냐(국내 유통사)의 문제인데 양쪽 모두 수긍할 만한 이유가 있습니다.


구글은 표준에 위배되면 등록 자체를 막습니다. 구글 뷰어에서 아무 이상이 없어도 등록을 할 수 없습니다. 표준을 우선으로 하는 건데, 필요에 의해 표준에서 벗어난 편집을 하면 구글에는 등록할 수 없습니다. 예를 들어 국내 유통사 중 EPUB3 파일을 받아주지 않는 유통사가 많습니다. 그래서 ruby, mark, epub:type 같은 EPUB2에서 허용하지 않는 태그나 속성을 EPUB2에 쓰는 경우가 있습니다. 이렇게 만든 EPUB2 파일은 구글에 등록할 수 없는 것이지요. 국내 뷰어가 EPUB3를 지원하면 문제가 해결된다고 볼 수 있지만, 그리 쉬운 얘기가 아닙니다. 구글도 EPUB3를 제대로 지원하지 않는 반쪽짜리인데 EPUB3 파일을 받아주고 있어요. 복잡한 스크립트, mathML, SVG 등을 포함한 EPUB3 파일을 구글 플레이북 뷰어에서 열면 제대로 구현되지 않는 경우가 많습니다. EPUB3를 제대로 지원하지 못하면서 EPUB3 파일을 받아들이는 것도 EPUB2 표준에서 허용하지 않지만 필요에 의해 뷰어에서 허용하는 것과 별 차이가 없습니다. 

양쪽 모두 필요에 의해 양쪽 모두 필요에 의해 기능을 제한한 EPUB3를 받거나, EPUB2의 기능에 일부 EPUB3를 허용하는 등의 반쪽짜리 뷰어입니다.


얘기가 딴 방향으로 벗어났는데, 구글은 받아주지 않는데 국내 뷰어는 받아준다고 해서 어느쪽이 더 좋다고 말할 수 없다는 거예요.


어째든, 오류가 나는 콘텐츠는 수정을 해야합니다. 

빈번하게 발견되면서 간단히 수정 가능한 오류를 몇가지 알려드릴게요.


1. <br/> <img...>


이 두 태그는 단독으로 사용할 수 없습니다. 반드시 다른 태그 안에 포함이 되야하는 태그예요. 그런데 많은 편집자들이 이 태그를 단독으로 사용합니다. 


<p>본문 내용</p>

<br/>

<p>본문 내용</p>

<img src="sample.jpg" alt="sample" />


위 코드는 문법에 어긋나있습니다. 이 코드가 아무 문제 없다고 생각하는 분들이 생각 외로 많아요. 심지어 HTML 을 공부했다는 분들조차 저게 문제가 아니라고 얘기하는 경우가 있습니다. 뷰어에서 보면 아무 문제 없는 코드예요. 



*** Col: 57: ERROR(RSC-005): Error while parsing file 'element "img" not allowed here; expected element "address", "blockquote", "del", "div", "dl", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "ins", "noscript", "ns:svg", "ol", "p", "pre", "script", "table" or "ul" (with xmlns:ns="http://www.w3.org/2000/svg")'.


*** Col: 6: ERROR(RSC-005): Error while parsing file 'element "br" not allowed here; expected the element end-tag or element "address", "blockquote", "del", "div", "dl", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "ins", "noscript", "ns:svg", "ol", "p", "pre", "script", "table" or "ul" (with xmlns:ns="http://www.w3.org/2000/svg")'.


EPUBCheck로 오류 검사를 하면 이런 오류가 나옵니다.

오류 메시지 내용은 '여기에는 허용되지 않는 태그'라는 것인데, p, h1~h6, blockquote, address, div 등의 태그 사이에만 허용되기 때문이에요. 저 코드는 이렇게 고칠 수 있습니다.



<p>본문 내용</p>

<p><br/></p>

<p>본문 내용</p>

<p><img src="sample.jpg" alt="sample" /></p>

<div><img src="sample.jpg" alt="sample" /></div>


img 태그는 p나 div로 묶어줄 수 있고, br 태그도 div를 사용해도 오류는 나지 않지만 div를 사용해야 하는 이유가 없다면 문단 태그인 p 태그로 묶어주는걸 권합니다.


이 외에도 비슷한 오류가 나는 태그가 있어요. 단독으로 사용할 수 없고 다른 태그 안에 반드시 포함되야 하는 태그입니다.


* 짝이 있는 태그

<li> - 반드시 <ol> 태그 안에 붂여야 함

<tr> <td> - 반드시 <table> 태그 안에 묶여야 함


* 잘못된 코드

<div>

<li>리스트1</li>

<li>리스트2</li>

</div>


* 수정된 코드

<ol>

<li>리스트1</li>

<li>리스트2</li>

</ol>



* 텍스트 편집 태그

<i>, <em>, <strong> 등 - 반드시 p, div, blockquote 등 단독으로 사용 가능한 태그 안에 포함되야 함.


*잘못된 코드

<em>제목1</em>

<p>본문 내용</p>


*수정된 코드

<p><em>제목1</em></p>

<p>본문 내용</p>



2. 필수 메타데이터


국내 유통사 뷰어는 메타데이터를 필수로 요구하지 않습니다. 그래서 EPUB2 표준에서 '필수(must, should)'로 추가하라고 나와있는 메타데이터가 없어도 받아줍니다. 편집자들이 메타데이터를 입력하지 않아서이기도 하고, 책을 등록할 때 서지정보를 별도로 받아서이기도 합니다. 메타데이터만 제대로 입력되어 있어도 책을 등록할 때 책 제목, 저자명, 출간일, ISBN 등의 정보는 자동으로 서지에 입력할 수 있을텐데, 유통사가 요구를 하지 않으니 출판사는 메타정보를 신경쓰지 않고, 유통사도 메타정보에 대해 까다롭게 굴면 출판사에서 귀찮아 하고 서지정보를 별도로 받으니 필요를 느끼지 못해 제대로 관리를 안하는 것 같아요.


필수 메타데이터를 제대로 입력하지 않으면 이런 오류가 나옵니다. 이 정보 없어도 책 보는데 아무 문제 없습니다. 하지만 이 정보는 책의 '판권면' 같은 역할을 합니다. 판권면 관심 갖는 독자가 없어도 판권면을 넣는 것처럼 책 보는데 아무 지장 없어도 메타데이터는 꼭 입력을 해야되요.


*** Col: 14: ERROR(RSC-005): Error while parsing file 'element "metadata" incomplete; missing required elements "dc:language" and "dc:title"'.


메타데이터 오류는 입력을 하지 않아 생기는 문제, 잘못 입력해 생기는 문제 두가지로 나옵니다. Sigil 같은 편집 프로그램은 오류를 막기 위해 언어 설정과 제목을 무조건 추가합니다. 그런데 '설정'에서 한국어(ko)가 아닌 영어(en)로 두는 경우가 있어요. 


전자책 만든 후 테스트를 하려고 iBooks에 넣었는데 책 제목이 [No data]로 보였다면 책 제목을 수정하지 않은거예요.

그리고 일부 뷰어(외국에서 만든)에서 한글이 깨진다면 언어설정 문제일 수 있습니다. 


언어, 책 제목에 추가로 ISBN이 들어가야 합니다. 대부분의 편집 프로그램에서 UUID라는 identifier를 강제로 추가하기 때문에 오류는 나지 않지만, ISBN도 반드시 들어가야 하는 정보입니다.


3. img 태그에 alt는 필수 항목


img 태그는 2가지 속성이 반드시 포함되야 합니다. src는 이미지의 위치를 지정하는 속성이기 때문에 이 속성이 없으면 이미지가 보이지 않습니다. 그래서 이 속성을 빼먹을 일은 없지요. 하지만 alt 속성은 빼먹는 분들이 많더라구요. alt 속성이 없어도 문제는 없지만 표준에 어긋나기 때문에 반드시 포함시켜야 합니다.



*** Col: 79: ERROR(RSC-005): Error while parsing file 'element "img" missing required attribute "alt"'.


alt 속성이 없다면 이런 오류가 납니다. alt의 값은 이미지에 대한 설명입니다. 이 이미지가 어떤 내용을 담고 있는지를 구체적으로 적어야 합니다. alt는 첫째, 이미지에 문제가 생겨 표시되지 않았을 때 alt의 설명이 이미지 위치에 표시돼 이미지가 없더라도 어떤 내용인지 알 수 있게 해주고, 두번째는 장애인 등 이미지를 볼 수 없는 사람이 TTS등을 통해 이미지 내용을 확인할 수 있게 해주는 역할을 합니다. 하지만 열악한 제작비용(?)으로 이미지에 대한 설명을 담기는 힘들지요. 그래서 Sigil은 이미지를 삽입할 때 이미지 파일명을 alt 값으로 추가합니다. 장애인 접근성을 고려한다면 이 값을 이미지가 담고 있는 의미를 풀어 수정해 주는게 좋습니다....만 저도 현실과 타협을 하게 되네요 ㅜ.ㅜ


* 잘못된 코드

<p><img src="../Images/img5.jpg"/></p>


* 수정된 코드

<p><img src="../Images/img5.jpg"/ alt="광화문 사거리에서 경복궁 방향으로 찍은 세종대왕 동상 사진"></p>



4. p 태그 대신 div 태그 사용


이건 엄밀히 말해 오류라고 할 수 없고, 오류로 표시되지도 않습니다. 하지만 문단 태그<p>대신 그룹 태그<div>를 쓰는건 웹 표준에 위배됩니다. Sigil에서 이런 오류를 종종 볼 수 있어요. 아래 이미지처럼 Sigil에서 body 태그 사이에 아무 것도 넣지 않은 상태에서 '책보기' 창에 텍스트를 입력하면 <p>태그 대신 <div>태그로 내용이 들어갑니다.



1. body 태그 사이를 공백으로 둔다.


2. 책보기 화면에서 내용을 입력한다.


3. 코드보기 화면을 보면 p태그 대신 div 태그로 문단이 추가된 것을 볼 수 있다.


이런 책이 생각보다 많습니다. 텍스트 중심의 로맨스, 판타지, 무협 같은 편집이 간단한 책에서 이런 오류를 자주 보게 됩니다. 텍스트 원고를 복사 > 붙여넣기하고 코드를 확인하지 않고 저장해서 이런 문제가 생긴다고 짐작이 되요. 이게 왜 문제가 되냐고 되묻는 분들도 계시더라구요. 뷰어에서 아무 문제 없이 보이고 EPUBCheck로도 오류가 없습니다. 독자들이 책을 보는데 아무 지장이 없습니다. 그러면 문제 없는거 아니냐... 하면 할 말은 없는데, HTML의 규칙이 그렇습니다. 문단 태그는 <p> <div>태그는 그룹이나. 특정 영역을 분할(division)할 때 사용하도록 되어 있습니다. 

Sigil에서 복사 > 붙여넣기로 작업을 하는 분들은 p태그 대신 div태그가 사용되지 않았는지 꼭 확인을 해보세요.


5. <p>본문 <p>본문 </p>본문 </p>

모 유통사 뷰어에서 주석을 처리하는데 p태그 안에 다시 p태그를 쓰는 변형된 규칙을 사용하도록 했습니다. 개발자가 HTML을 모르지는 않았을 테고, IDPF에서 제안하는 <aside epub:type="footnote">를 쓰자니 EPUB2에서는 오류가 나서 그러지 않았을까 하는 생각이 들더라구요. 


똑같이 표준을 위반하지만 허용 가능한게 있고 허용하면 안되는게 있습니다. 


예를 들어 EPUB2에서 ruby 태그를 썼다면 이건 EPUBCheck에서 오류가 나도 이해할 수 있습니다. 웹 표준은 지켰지만 EPUB2에서 허용하지 않기 때문에 발생한 오류, 그리고 ruby가 아니면 표현할 수 없는 편집의 충돌이니까요. 


EPUB2는 네트워크에 연결되지 않은 흑백 화면에서 텍스트 콘텐츠를 보는데 아무 문제 없도록 표준을 만들었기 때문에 항상 네트워크에 연결된 스마트폰에서 볼 수 있는 콘텐츠를 만드는데 제약이 아주 심합니다. 그래서 저도 상위 표준을 지키면서 일부 EPUB2의 표준을 어길 때가 있어요. ruby 태그나 주석 처리를 위한 epub:type 속성이 그렇습니다. 


EPUB2의 제한으로 생긴 오류는 EPUB3에서는 허용하기 때문에 파일 형식만 EPUB3로 바꾸면 아무 문제가 생기지 않아요. 


하지만 <p>태그 안에 다시 <p>태그를 쓰는건 웹 표준 자체를 위반합니다. p태그 안에 p태그를 쓰면 EPUB2 뿐 아니라 EPUB3에서도 오류가 발생해요. 그래서 이런 위반은 반드시 피해야 합니다. 


*** Col: 7: ERROR(RSC-005): Error while parsing file 'element "p" not allowed here; expected the element end-tag, text or element "a", "abbr", "acronym", "applet", "b", "bdo", "big", "br", "cite", "code", "del", "dfn", "em", "i", "iframe", "img", "ins", "kbd", "map", "noscript", "ns:svg", "object", "q", "samp", "script", "small", "span", "strong", "sub", "sup", "tt" or "var" (with xmlns:ns="http://www.w3.org/2000/svg")'.


* 잘못된 코드

<p>본문 내용<p>본문 내용</p>본문 내용</p>

<p>본문 내용<div>본문 내용</div>본문 내용</p>


p태그 안에 P태그를 사용하면 이런 오류가 발생해요. 위에 예로 들었던 주석 처리가 아니더라도 이런 오류가 있는 콘텐츠가 종종 보입니다. <p>태그 얘기를 했는데 div태그 역시 p태그 안에 들어갈 수 없습니다. div 안에 p가 들어갈 수 있어도 p 안에 div는 들어갈 수 없습니다. 업데이트 된 Sigil에서는 이런 오류 자체를 허용하지 않기 때문에 문제가 생기진 않겠지만 혹시라도 이런 코드를 썼다면 꼭 수정을 해주세요.



편집하면서 종종 봤던 오류를 몇개 정리해 봤습니다. 

전자책 편집하면서 오류가 생겼는데 해결이 안되신다면 오류 메시지와 함께 코드를 알려주세요. 오류 원인과 해결 방법을 알려드릴게요 ^^




설정

트랙백

댓글

5. 편집하고 바로 읽는 EPUB 3

EPUB 편집 가이드 2016.02.16 15:50


1. EPUB이란

2. EPUB 만들 때 이것만은

3. EPUB 제작을 위한 쉽고 간단한 HTML

4. CSS, 전자책 편집의 시작과 끝

5. 편집하고 바로 읽는 EPUB 3

국내에 유통되는 전자책은 대부분 EPUB 2이다. EPUB 2는 텍스트와 이미지 기반의 전자책을 만들기 위한 포멧이기 때문에 최신 모바일 기기에서 활용 가능한 다양한 유형의 전자책을 제작할 수는 없다. 일부 출판사는 모바일 앱을 만들어 ‘앱북'이라는 형태로 전자책 만드는 시도를 했다. 앱북은 다양한 기능을 추가할 수 있지만 책 한 권이 앱 하나로 만들어진 경우가 많고, 전자책 서점에서 판매를 할 수 없으며, 제작비가 비싸기 때문에 전자책의 대안으로는 적합하지 않았다.


EPUB 3은 정지된 이미지와 텍스트로 이루어졌던 책이 멀티미디어, 인터렉션, 심지어 프로그래밍까지 요구하는 수준으로 발전하면서 이에 대응하기 위해 제안됐다. EPUB 3은 HTML5와 CSS3를 기반으로 하는 전자책 표준이다. EPUB 2에서 제한을 두었던 동영상, 오디오 같은 멀티미디어를 지원하고, SVG와 스크립트를 이용해 플래시 같은 애니메이션 구현이 가능하다. 뿐만 아니라 HTML5와 CSS를 활용해 간단한 게임이나 문제 풀이(답을 찍으면 맞는지 확인해 주고, 틀리면 설명을 보여주는 등)도 할 수 있다. 앱으로만 구현하던 기능도 EPUB 3로 가능해 졌다. 여행용 책에 실시간으로 길을 안내해 주는 지도를 추가하고, 요리책을 쇼핑몰과 연결해 요리에 필요한 재료를 주문하게 만들 수도 있다. 아동용 책에는 동영상과 움직이는 이미지뿐 아니라 간단한 게임을 넣을 수 있다.


하지만 EPUB 3에 한계가 있다. EPUB 3 콘텐츠는 일부 뷰어에서만 지원한다. 국내 전자책 서점들이 EPUB 3을 지원한다고 발표했지만 동영상과 오디오를 포함하는 수준이고 고정 레이아웃(Fixed Layout), 스크립트, MathML, 미디어 오버레이 등을 제대로 지원하는 뷰어는 없다.


펍트리, 깃든 뷰어 등 EPUB 3을 지원하는 뷰어도 모든 기능을 사용할 수 있는 수준은 아니다. 수학 공식을 표현하는 언어인 mathML은 지원을 하지만 제대로 구현할 수 있는 뷰어가 없다. mathML을 지원한다는 뷰어에 복잡한 수학공식을 한페이지 분량만 넣으면 로딩에 오랜 시간이 걸리고, 경우에 따라 뷰어가 강제종료되기도 한다. Media Overlay를 콘텐츠에 구현하기 위해서는 전자책 제작 비용이 기하급수적으로 높아진다. 따라서 EPUB 3의 기능에 집중할 것이 아니라 지금 바로 사용 가능한 기능을 전자책에 어떻게 적용할 것인지를 고민해야 한다.


EPUB 3을 만들기 전에 가장 먼저 뷰어가 EPUB 3의 어떤 기능을 지원하는지 확인해야 한다. 국내 유통사 중 EPUB 3을 지원하는 뷰어는 공통적으로 HTML5, CSS3, 동영상, 오디오, SVG, aside, Script, Fixed Layout를 지원한다. 그 외의 기능은 뷰어에 따라 다르기 때문에 국내 유통을 고려한다면 이 외의 기능은 가급적 사용하지 않아야 한다.


이번 장에서는 국내 유통사에서 바로 사용할 수 있는 EPUB 3 기능을 살펴보고 어떻게 적용할지 설명한다. 여기서 설명하는 기능 중에 뷰어에 따라 지원하지 않을 수 있다. 그래서 앞부분은 대부분의 유통사에서 지원하는 항목을, 뒤쪽은 교보문고, 예스24 등 일부 유통사에서 지원하는 항목으로 설명을 하니 전자책 제작시 참고하기 바란다.


1. EPUB 3 만들기


EPUB 2 파일을 EPUB 3파일로 바꾸려면 모든 내용을 수정하지 않고 파일 몇개만 수정하면 된다. 여기서는 EPUB 2와 EPUB 3 파일의 차이점을 설명하고 EPUB 2 편집자가 EPUB 3을 만들 때 주의할 부분을 살펴보겠다.


가. OPF version=“3.0”

EPUB 파일이 2.0인지 3.0인지는 OPF 파일에서 확인할 수 있다. 여기서 지정한 정보에 따라 뷰어는 EPUB 2인지 EPUB 3인지를 구분한다.


<?xml version="1.0" encoding="utf-8" standalone="yes"?>

<package xmlns="http://www.idpf.org/2007/opf" unique-identifier="uid" version="3.0">


OPF 파일의 제일 위쪽에 있는 package 정보를 보면 EPUB 2.0 문서는 version=”2.0”으로 되어 있다. 이 부분을 version=“3.0”으로 수정해 주면 뷰어는 이 전자책 파일을 EPUB 3.0으로 생각한다.


나. 책 창작자를 세분화한 메타데이터

제대로 된 EPUB 3.0 편집기가 없던 때에 EPUB 2.0 파일을 텍스트 편집기로 EPUB 3.0 파일로 바꾸면서 가장 당혹스러웠던 부분이 메타데이터 오류였다. 분명 제대로 정보가 입력되어 있는데 EPUB Checker에서 계속 오류가 보였다. 한참을 EPUB 3 표준 문서를 본 후에야 원인을 찾을 수 있었다. EPUB 3은 opf:role이라는 속성을 사용하지 않는다. 시길로 EPUB을 만들었다면 아래처럼 메타데이터가 들어간다.


<dc:creator opf:role="aut">홍길동</dc:contributor>


이 메타데이터는 콘텐츠의 창작자(dc:creator) 정보를 담는다. 책의 창작자는 여러 종류일 수 있다. 책을 썼다면 저자가 되고, 삽화를 그렸다면 아티스트나 일러스트레이터가 된다. EPUB 3은 이를 자세히 구분한다. 아래 메타데이터는 EPUB 3에서 사용하는 방식으로 opf:role을 사용하지 않고 porperty 속성을 사용했다.


<dc:creator id="creator">Gildong Hong(영문 표기)</dc:creator>

<meta refines="#creator" property="role" scheme="marc:relators" id="role">aut</meta>

<meta refines="#creator" property="alternate-script" xml:lang="ko">홍길동(한글 표기)</meta>

<meta refines="#creator" property="file-as">Hong, Gildong</meta>


다. manifest의 properties

manifest 항목에서 가장 크게 달라진 점은 properties 속성일 것이다. EPUB 2에서는 메타데이터에서 표지 이미지를 지정했다면 EPUB 3에서는 manifest의 item에서 properties로 지정이 가능하다. properties는 EPUB 내에 있는 파일이 목차인지, 스크립트가 사용됐는지 등의 속성을 지정해 준다. ncx가 navigation으로 대체되면서 아래처럼 반드시 properties="nav"가 지정되야 한다. nav 속성이 없으면 뷰어는 목차 파일을 불러올 수 없게 된다.


이 외에도 몇가지 수정 항목이 있지만 EPUB 2 파일에서 위에 언급한 내용만 수정해도 EPUB 3 파일이 된다. 그리고 나모의 펍트리(Pubtree), 오렌지디지트의 뷰포터(ViewPorter) 같은 EPUB 3 에디터를 사용하면 손쉽게 메타데이터나 manifest가 자동으로 만들어지기 때문에 이정도만 알고 있어도 EPUB 3를 만들 수 있을 것이다. 그렇지만 EPUB 2 파일을 EPUB 3로 변환할 때는 오류가 발생할 수 있으니 EPUB 2와 EPUB 3 파일의 구조적인 차이점을 알아두는게 좋다.



2. EPUB 3 기능 활용하기


EPUB 3하면 멀티미디어를 삽입하거나 인터렉션 기능을 생각해서 어렵다고 느끼는 편집자가 많은 것 같다. 동영상 파일을 추가하고 EPUB 3라고 얘기하거나 종이책을 전자책으로 전환할 때는 EPUB 3로 만들 필요가 없다고 생각하기도 한다. 하지만 간단한 몇가지 기능들을 활용하면 멀티미디어보다 효과적이고 독자들이 편리하게 사용할 수 있는 EPUB 3 전자책을 만들 수 있다.


가. CSS 3를 활용한 전자책 편집

CSS3를 사용하면 움직이는 글자, 모서리가 둥근 글상자, 한 페이지에 여러장의 이미지를 보여줄 수 있는 이미지 앨범처럼 보다 풍부한 표현이 가능해 진다. 4장에서 설명했던 글상자 모서리를 둥글게 만들어 주는 border-radius도 CSS3에서 추가된 속성이다. CSS3는 대부분의 유통사 뷰어에서 지원하기 때문에 바로 사용할 수 있다. 그리고 EPUB 2로 제작된 전자책에서도 사용할 수 있어 EPUB 3이 아니라도 CSS3를 활용한 다양한 편집이 가능하다.


1) border-image 속성

테두리를 보다 멋지게 꾸미고 싶다면 border-image를 써보자. border-image는 이미지 하나로 속성을 어떻게 주느냐에 따라 다양한 형태의 테두리를 꾸밀 수 있게 해준다. border-image 속성의 값을 어떻게 주느냐에 따라 배경 이미지 하나로 전혀 다른 모양의 글상자를 만들 수 있다.


테두리 배경 샘플


▷ CSS 예제

.border_img {

border: 9px solid transparent;

padding: 15px;

border-image: url("../Images/border.png") 30 round;

}


테두리 배경 샘플 이미지와 CSS 예제를 사용하면 위와 같은 글상자를 만들 수 있다.


2) transform 속성

transform 속성을 사용하면 EPUB 2에서는 이미지로 넣을 수 밖에 없던 글자나 글상자 모양을 만들 수 있다. 글상자 모양을 회전시키거나 찌그러진 모양, 상하가 뒤집히거나 거울에 비친 글자처럼 거꾸로 쓰인 글자 표현이 가능해 진다.


3) animation 속성

@keyframes, animation-name, animation-duration 등 animation 속성을 사용하면 글상자의 색을 바꾸고 위치를 이동시키는 애니메이션을 구현할 수 있다. CSS 만으로 마우스를 클릭하면 실행되는 애니메이션을 표현할 수 있기 때문에 JavaScript를 사용하지 않고 사진 앨범이나 애니메이션이 들어간 아동용 동화책을 만들 수 있게 됐다.


아래 예제는 스크립트 없이 CSS만 이용해서 글상자가 왼쪽에서 오른쪽으로 100px씩 천천히 이동하면서 글자 색이 노랑에서 빨강, 파랑, 초록으로 바뀌는 애니메이션이다.


왼쪽에서 오른쪽으로 글상자 색이 바뀌며 이동한다.


▷ CSS 예제

div {

    width: 120px;

    height: 50px;

    text-align : center;

    background-color: yellow;

    position: relative;

    animation-name: example;

    animation-duration: 15s;

}


/* Standard syntax */

@keyframes example {

    0%   {background-color:yellow; left:0px; top:0px;}

    25%  {background-color:red; left:100px; top:0px;}

    50%  {background-color:blue; left:200px; top:0px;}

    75%  {background-color:green; left:300px; top:0px;}

}


이 외에도 글자에 그림자를 주는 text-shadow, 화면 크기에 맞춰 글자와 이미지 배치를 자동으로 조절해 주는 media queries 등 간단하지만 다양한 효과를 줄 수 있는 CSS3 속성을 사용할 수 있다. CSS3에 대한 내용은 관련 서적이나 www.w3schools.com 같은 사이트를 참고하기 바란다.



나. aside를 활용한 주석 처리

EPUB 2에서는 주석을 본문 아래쪽에 넣거나 책의 제일 뒤쪽에 챕터를 추가해서 링크를 걸었다. 전자책은 종이책처럼 페이지를 쉽게 이동할 수 없기 때문에 이런 형태의 주석은 가독성을 떨어트린다.

EPUB 3에서는 EPUB 2에 없던 주석(annotation) 처리에 대한 규칙을 마련해 놓았다. 그리고 이 규칙을 바탕으로 대부분의 EPUB 3 뷰어가 팝업 주석을 지원하고 있다.

   

리디북스(왼쪽)와 교보문고(오른쪽) 전자책 뷰어는 aside를 사용한 주석을 지원한다.(img_004-1, img_004-2)


국내 유통사 뷰어 중 IDPF에서 권고하는 방식의 주석을 팝업으로 보여주는 것은 리디북스와 교보문고 뷰어가 있다. 다른 업체들도 팝업 주석을 지원한다고 되어 있지만 aside를 사용하는 방식이 아닌 뷰어에서 지정한 방식을 사용하기 때문에 여기서는 IDPF에서 샘플로 제공하고 교보문고, 리디북스, 구글 플레이북, 애플 iBooks 등 대부분의 뷰어에서 지원하는 aside 방식으로 설명을 하겠다.


<aside> 태그는 HTML5에 새로 추가된 태그다. 단어 의미 그대로 본문과 관련되었지만 본문과 구분해야 하는 내용을 추가할 때 사용한다. 가장 대표적인 예가 주석이다.


<p> … <a  epub:type="noteref" href="#n1">1</a> …  </p>   

<aside epub:type="footnote"  id="n1">

…   

</aside>

(IDPF의 EPUB 3 콘텐츠 문서 3.0 주석(footnote) 예제)


<aside> 태그로 주석을 표현하려면 본문 주석 제목에 <a> 태그로 링크를 걸고 이 링크의 속성이 주석을 참고한다는 epub:type=”noteref” 속성을 지정해 줘야 한다. 그렇지 않을 경우 뷰어는 단순 링크로 생각하고 링크로 이동을 할 수 있다. 그리고 링크 주소는 주석 제목이 어떤 주석을 참고해야 하는지 알려주는 ID를 추가한다. 이때 ID 앞에는 반드시 #이 들어가야 한다.


<p>EPUB은 <a epub:type="noteref" href="note.html#note01">IDPF</a>에서 제정한 전자책 표준이다.</p>

(주석 제목 ‘IDPF’를 링크로 연결한 코드)


주석 제목이 연결되었다면 주석 설명을 <aside>태그로 묶어준다. 주석 설명에도 역시 이 내용이 주석 설명이라는 epub:type="footnote" 속성과 주석 제목과 연결되는 주석 ID를 추가한다. 이때 주석 ID는 반드시 하나여야 한다. <aside> 안에는 HTML 태그를 사용해 자유롭게 내용을 추가할 수 있는데 뷰어에 따라 스타일이 적용되지 않을 수 있다.


<aside epub:type="footnote" id="note01">

<h4>IDPF</h4>

<p> International Digital Publishing Forum</p>

<p> 국제 전자 출판 포럼</p>

</aside>

(주석 설명 코드)


여기까지 하면 팝업 주석이 표현된다. 하지만 팝업 주석을 지원하지 않는 뷰어에서는 링크에 epub:type:”noteref”를 추가해도 단순 링크로 인식해 주석 설명 영역으로 넘어갈 수 있다. 국내에서는 EPUB 2만 지원하는 뷰어도 많기 때문에 EPUB 2, EPUB 3 뷰어에서 모두 사용해야 하는 전자책이라면 양쪽 모두 불편 없이 사용할 수 있도록 해야 한다.


<a epub:type="noteref" id=”anno01” href="note.html#note01">


EPUB 2를 위해서 주석 제목에 되돌아 올 수 있는 ID를 추가했다. 그리고 주석 설명에 주석 제목 위치로 돌아올 수 있는 링크를 추가해 준다.


<aside epub:type="footnote" id="note01">

<h4><a href=”section.html#anno01”>IDPF</a></h4>

...

</aside>


이렇게 주석 제목에 ID를 추가하고 주석 설명에 링크를 걸어 주면 팝업 주석을 지원하는 EPUB 3 뷰어는 팝업을 띄우고 지원하지 않는 EPUB 2 뷰어는 링크로 이동하게 한다.



5.2.3 동영상, MP3 삽입하기

동영상과 MP3는 가장 손쉽게 추가할 수 있는 멀티미디어 요소이다. EPUB 2에서는 사용을 권장하지 않았는데 EPUB 3에서 공식적으로 지원한다.


<audio controls="controls">

<source src=".sample.mp3" type="video/mp3”/>

Mp3를 지원하지 않는 뷰어입니다.

</audio>


<audio src="sample.mp3"  controls="controls">MP3을 지원하지 않는 뷰어입니다.</audio>


오디오는 이렇게 두가지 방식으로 추가할 수 있다. controls="controls" 속성을 추가하면 오디오 파일을 실행하나 볼륨을 조절하는 컨트롤러가 자동으로 추가되는데 뷰어에 따라 모양이 다를 수 있다. 오디오를 지원하지 않는 뷰어는 ‘MP3를 지원하지 않는 뷰어입니다'라는 메시지를 표시하는데 이 메시지는 편집자가 원하는 내용으로 수정을 할 수 있다.


컨트롤러는 뷰어에 따라 모양이 다를 수 있다.(img_005-1, img005-2)


비디오는 화면 크기를 지정하는 속성이 추가되는 것 외에는 오디오와 비슷하다. 비디오 역시 컨트롤러가 자동으로 제공되지만 뷰어에 따라 처리하는 방식이 다르다. 어떤 뷰어는 동영상을 책 안에서 재생하고 어느 뷰어는 전체화면으로 재생한다.


<video width="640" height="480"  controls autoplay loop>

  <source src="sample.mp4" type="audio/mp4">

  비디오를 지원하지 않는 뷰어입니다.

</video>


<video width="640" height="480" src="sample.mp4"  controls="controls">동영상을 지원하지 않는 뷰어입니다.</video>


기본 코드는 오디오나 비디오를 처음부터 실행한다. 그리고 컨트롤러도 뷰어에서 제공하는 것을 사용해야 한다. 컨트롤러를 보다 예쁘게 꾸미고 싶다면 JavaScript나 epub:trigger를 사용할 수 있다. epub:trigger는 자바스크립트를 사용하지 않고도 비디오, 오디오를 제어할 수 있게 해준다. trigger에 대한 내용은 [IDPF EPUB 3 콘텐츠 문서 3.0]을 참고하기 바란다.


JavaScript를 사용하면 MP3파일의 듣고싶은 부분만 실행되도록 할 수도 있다. 아래 코드는 컨트롤러 모양을 바꾸고, 초 단위로 원하는 구간을 실행시킬 수 있는 JavaScript의 예제다. playSegment(3,8)의 괄호 안의 숫자는 3초 ~ 8초 사이 구간을 실행시라는 의미이다. 이 부분을 수정하면 원하는 구간을 실행할 수 있다. 버튼 모양은 텍스트나 이미지로 바꿀 수 있다.



<audio controls="controls">

<source src=".sample.mp3" type="vmp3”/>

MP3를 지원하지 않는 뷰어입니다.

</audio>


<audio src="sample.mp3"  controls="controls">MP3를 지원하지 않는 뷰어입니다.</audio>


<p>모두 듣기

    <button onclick="playAll()">▶</button>

    <button onclick="playStop()">■</button>

    <button onclick="volUp()">+</button>

    <button onclick="volDown()">-</button></p>


<p>3초 ~ 8초 사이

    <button onclick="playSegment(3,8)">▶</button></p>


<p>10초 ~ 15초 사이

    <button onclick="playSegment(10,15)">▶</button></p>


<p>

    <button onclick="playStop()">stop</button></p>

</p>

<script>

var myAudio=document.getElementById("sample1");


var segEnd;

myAudio.addEventListener("timeupdate", function () {

        if (myAudio.currentTime >= segEnd) {

                myAudio.pause();

        }  

        console.log(myAudio.currentTime);

}, false);


function playSegment(startTime, endTime) {

        segEnd = endTime;

        myAudio.currentTime = startTime;

        myAudio.play();

}


function playAll() {

        myAudio.currentTime=0;

        myAudio.play();

}

function playStop() {

        myAudio.currentTime=0;

        myAudio.pause();

function volUp() {

        myAudio.volume+=0.2

}

function volDown() {

        myAudio.volume-=0.2

}

</script>



5.2.4 ruby


루비 문자는 일본어에서 단어나 글자(주로 한자)의 읽는 법을 표기할 때 사용하는 문자이다. 일본어 책을 보면 한자 위에 작은 글씨체로 히라가나나 가타카나로 발음이 표기되어 있는데 이런 인쇄물에 붙은 글자를 루비라고 불렀다. 웹이나 전자책에서 이런 글자를 표기하는 태그가 루비 태그<ruby>이다. 루비 태그는 일본어 표기 이외에도 활용도가 높다. 한국어 고어나 중국어 한자의 성조를 표현하거나 외국어 발음,간단한 주석 등을 루비 태그로 표현할 수 있다.


▷ <ruby> 태그 문법

<ruby>원문 글자<rt>발음(혹은 설명)</rt></ruby>


<ruby>태그는 <rt>와 한 쌍으로 사용한다. 발음이나 설명이 필요한 단어 옆에 <rt>태그로 발음이나 설명을 달고 <ruby> 태그로 전체를 감싸면 된다. 아래는 세종대왕의 묘호와 시호를 한글로 적고 한자를 <ruby> 태그로 추가한 예제이다. ‘영문예무인성명효대왕(英文睿武仁聖明孝大王)’처럼 괄호를 이용할 때보다 깔끔하게 표현되고 가독성이 높다. 다만 안드로이드 4.0 이전 버전에서는 제대로 표현되지 않을 수 있다.


<p>세종은 <ruby>묘호<rt>廟號</rt></ruby>이며, <ruby>시호<rt>諡號</rt></ruby>는 <ruby>영문예무인성명효대왕<rt>英文睿武仁聖明孝大王</rt></ruby>이고, 명에서 받은 시호는 <ruby>장헌<rt>莊憲</rt></ruby>이다.</p>

<p><br/></p>


(img_008)


이번 장에서 설명한 내용은 시중에 유통되고 있는 책에 적용할 수 있는 EPUB 3 기능이다. 소개한 기능은 교보문고, 예스24, 리디북스 등의 유통사 뷰어에서 구현된다. 편집 방법도 간단하여 EPUB 2를 만들어 본 사람은 쉽게 익힐 수 있을 것이다.


8월부터 지금까지 EPUB의 개념부터 만드는 법과 스타일 편집까지 훑었다. 깊이있게 들어가지 못했지만 EPUB 제작에 필요한 내용은 모두 담았다고 생각한다. 지면의 한계로 담지 못한 내용은 www.epubguide.net을 방문하면 볼 수 있다. EPUB 전자책을 전문적으로 편집하고 싶다면 IDPF의 표준 문서(www.odpf.or.kr에서 한글 번역본을 볼 수 있다)를 참고하고 HTML과 CSS를 살펴보길 바란다.



'EPUB 편집 가이드' 카테고리의 다른 글

5. 편집하고 바로 읽는 EPUB 3  (0) 2016.02.16
4. CSS, 전자책 편집의 시작과 끝  (2) 2016.01.19
3. EPUB 제작을 위한 쉽고 간단한 HTML  (0) 2016.01.14
2. EPUB 만들 때 이것만은  (1) 2016.01.11
1. EPUB이란?  (3) 2016.01.08

설정

트랙백

댓글

4. CSS, 전자책 편집의 시작과 끝

EPUB 편집 가이드 2016.01.19 09:01

1. EPUB이란

2. EPUB 만들 때 이것만은

3. EPUB 제작을 위한 쉽고 간단한 HTML

4. CSS, 전자책 편집의 시작과 끝

5. 편집하고 바로 읽는 EPUB 3


HTML이 글자와 이미지를 뷰어에 나타나도록 해준다면 CSS는 글자와 이미지를 어떤 모습으로 보여줄지 결정한다. 이 장의 제목을 [CSS, 전자책 편집의 시작과 끝]이라고 지은 것은 CSS를 다루는 게 편집자의 편집 능력을 결정짓는 중요한 요소이기 때문이다. 마크업 언어가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리 같은 꾸미는 역할을 담당한다. , HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다.(https://ko.wikipedia.org/wiki/종속형시트 참조)

 

초보 전자책 편집자가 실수를 가장 많이 하는 부분이 CSS이고, 전자책의 코드가 지저분해지는 이유 역시 CSS 때문인 경우가 많은데 이번 장에서는 CSS를 사용할 때 주의할 내용과 전자책 편집에 많이 쓰이는 CSS 속성과 사용법을 알아본다.

 

CSS

CSS는 웹문서를 꾸미기 위한 서식, 도구모음이다. 다만 워드프로세서의 서식은 마우스로 선택해서 지정하지만 CSS{font-size : #112233;}처럼 코드로 입력한다는 차이가 있다.

웹문서 편집기도 이런 기능을 제공한다. 그러나 종이에 인쇄를 목적으로 스타일이 고정된 일반 문서와 달리 웹문서는 화면 크기, 해상도, 다양한 액션(마우스 클릭, 슬라이드, 터치 등)에 따라 스타일이 달라지기 때문에 서식과 도구모음으로 표현하기에 한계가 있다. 전자책 역시 웹문서처럼 다양한 기기에서 다양한 스타일이 적용되기 때문에 기본 제공 서식으로는 표현할 수 없는 스타일이 많이 있다. 그래서 Sigil같은 전자책 편집 프로그램은 최소한의 기본 서식만 제공하고 코드창에서 편집자가 CSS를 직접 편집하는 기능을 제공한다.

 

CSS 사용시 주의사항

기본 편집 기능에 의존하지 말자 컴퓨터 프로그래밍을 해보지 않은 전자책 편집자들은 CSS의 개념을 이해하기 어려워한다. 그 때문에 기존 문서 프로그램과 비슷한 위지윅 기반의 전자책 편집 프로그램을 사용하는 편집자가 있는데 HTMLCSS를 모르고 편집 기능에만 의존하면 아래 그림처럼 코드가 엉망이 된다. 이런 코드는 뷰어에서 오류를 일으키며 뷰어의 사용자 지정 스타일과 충돌한다.


스타일 지정이 잘못된 코드의 예


코드는 간결하게! CSS는 최대한 간결하게 정리하는 것이 좋다. 거듭해 말하지만, 코드가 간단할수록 문제가 발생할 가능성이 줄어들기 때문이다. 그리고 편집시간도 준다. 코드가 복잡하다고 해서 편집이 정교해지는 것이 아니며, 간결할수록 편집 결과물이 정교하다.

 

 

여러 태그에 3개 스타일 사용, 2개 태그에 2개 스타일 사용

 

다양한 기기를 고려하자 전자책 편집이 어려운 이유 중 하나는 다양한 환경을 고려해야 한다는 점이다. 4인치 스마트폰에서 40인치 TV까지 어떤 기기에서도 전자책을 볼 수 있다. 20대 학생은 10포인트로 읽을 테고 60대 독자는 20포인트로 글자를 본다.

책 편집자라면 텍스트에 담긴 의미 뿐 아니라 텍스트가 어떻게 보이는지도 책 내용을 전달하는데 중요하다는 걸 알 것이다. 스타일을 잘못 지정하면 편집자가 전달하고자 하는 책의 모양을 제대로 담을 수 없다. 여기서 또 한번 스타일이 간결해야 하는 이유가 나온다. 위에서 예로 든 복잡한 스타일과 간결한 스타일의 결과를 보면 아래와 같다.

 

스타일이 잘못 지정하면 같은 책이라도 다르게 보인다.(같은 스타일, 뷰어 글자 크기 변경)



 

화면이나 글자 크기가 바뀌더라도 일정한 패턴을 보여준다.

 

기본 태그를 최대한 활용하자 HTML은 다양한 기능의 태그를 제공한다. 제목(h1~h6), 본문(p), 첨자/주석(sup, sub), 인용(cite, blocquote), 강조(strong, em) 등 책 편집에 필요한 태그가 있다. 이 태그는 기본 스타일이 지정돼 있지만 CSS로 스타일을 바꿀 수 있다. 기본 태그를 사용하면 편집 시간을 줄이고 코드를 간결하게 할 수 있다.

 

외부 스타일을 사용하자 스타일을 인라인, 내부, 외부 스타일 이렇게 세가지 방법으로 지정할 수 있다. 인라인 스타일은 태그 안에 직접 스타일을 지정한다. 태그별로 스타일을 지정해야 하기 때문에 편집 시간이 오래 걸린다. 내부 스타일HTML 파일의 헤더<head> 영역에 스타일을 지정해 사용한다. 각각의 HTML 파일에 스타일을 지정해서 인라인 스타일보다 편집하기 쉽다. 외부 스타일은 별도의 CSS 파일을 만들어 쓰는데 이 CSS파일 하나만 수정하면 문서 전체의 스타일이 바뀐다.

스타일은 책이 열리는 속도에도 큰 영향을 준다. 외부스타일은 뷰어가 한번만 분석하면 되기 때문에 인라인이나 내부 스타일보다 빠르고 안정적으로 책이 열릴 수 있다. 그렇기 때문에 특별한 경우가 아니라면 외부스타일을 사용하기를 권한다.

 

인라인 스타일

<p style="font-size : 1em;">글자 크기 1em</p>

 

내부 스타일

<head>

<style>

p {font-size : 1em;}

</style>

</head>

<body>

<p>글자 크기 1em</p>

</body>

 

외부 스타일

style.css

p {font-size : 1em;}

 

sample.html

<p>글자 크기 1em</p>

 

CSS 기본 문법

CSS는 구조가 간단하다. 선택자, 속성, 값 세 개의 구성 요소로 되어 있고, 하나의 선택자에 여러개의 값과 속성이 올 수 있다.

 

CSS 구조(016)

 

선택자는 여러개의 속성과 값을 문서에 반영하는 역할을 한다. HTML 태그나 사용자가 임의로 만든 클래스를 사용하는데 클래스를 만들 때는 점(.)으로 시작하고 영문, 숫자, 하이픈(-), 언더바(_) 등을 사용할 수 있다. 속성은 글자 모양, 줄간격, , 배경 등 180여개가 있다. 값 역시 속성별로 정해져 있는데 값에도 규칙이 있어 속성별로 어떤 값이 들어가야 하는지는 CSS를 몇 번 이용해 보면 쉽게 알 수 있다. 크기, 간격에 해당하는 속성이라면 1em, 1px, 1cm, 1%등 길이나 크기에 대한 값이 오고, 색이 필요한 속성이라면 blue, #0000FF처럼 색에 대한 값이 온다.

 

@font-face 전자책에서 쓸 글꼴을 정하는 속성으로 font-family 글꼴의 이름을 지정하고 영문, 한글, 숫자에 모두 사용 가능하고 공백을 포함할 수 있다. 공백을 포함할 때는 반드시 따옴표(“”)로 묶어줘야 한다. src: url(...)은 글꼴 파일의 위치를 알려주는데 경로와 파일명은 영문, 숫자를 사용하고 반드시 대소문자를 구분해서 쓴다.

@font-face {

font-family: “기본 글꼴”;

src: url(../Fonts/NanumPen.ttf);

}

 

font-size : 글자 크기를 조절 크기를 조절하는 값은 %, em, px, cm 등을 사용할 수 있다. 기기의 기본 글꼴에 따라 크기가 조절되는 %em을 사용을 권한다.

 

사용 방법

p { font-size : 1.5em; }

 

본문에 사용

<p>기본 글자보다 1.5배 커집니다.</p>

 


 

text-align : 글자를 왼쪽, 가운데, 오른쪽, 양쪽 정렬

 

사용 방법

p { text-align : justify; }

.txt_left { text-align : left; }

.txt_center { text-align : center; }

.txt_right { text-align : right; }

 

본문에 사용

<p>문단의 오른쪽 끝이 균일하게 정리됩니다. 문단의 기본 스타일로 지정하는 것을 권합니다. </p>

<p class="txt_left">단어나 문장이 왼쪽으로 정렬됩니다. </p>

<p class="txt_center">단어나 문장이 가운데로 정렬됩니다.</p>

<p class="txt_right">단어나 문장이 가운데로 정렬됩니다.</p>

 


 

text-indent : 들여쓰기 들여쓰기는 내어쓰기로 활용할 수 있다. CSS에서는 들여쓰기(text-indent) 속성만 있고 내어쓰기 속성은 없는 대신 들여쓰기에 마이너스(-1em) 값을 줄 수 있다. , 내어쓰기를 할때는 왼쪽에 padding으로 여백을 둬야한다. 여백을 두지 않거나 margin으로 여백을 둘 경우 독자들 눈에는 보이지 않지만 뷰어는 아래와 같은 편집 오류가 발생한다.

 

사용 방법

p { text-indent : 1em; }

.txt_outdent { text-indent : -1em; padding-left : 1em; }

 

본문에 사용

<p>들여쓰기를 하면 문단이 처음 시작되는 부분에 편집자가 지정한 간격만큼 들여쓰기 됩니다. </p>

<p class="txt_outdent">들여쓰기 속성으로 내어쓰기를 할 수도 있습니다. 내어쓰기를 할 때는 마이너스 값(-1em;)을 줍니다.</p>

 


 

margin을 적용하거나 여백을 두지 않으면 테두리를 그렸을 때 편집 오류를 확인할 수 있다.

 

line-height : 줄 간격을 조절함

 

사용 방법

p { line-height : 1.8em; }

 

본문에 사용

<p>HTML의 기본 줄간격은 가독성이 좋지 않습니다. 뷰어에 따라 차이가 나지만 1.5em ~ 1.8em으로 줄간격을 설정하면 가독성이 높아집니다.</p>

 


 

4.4.2 글상자에 사용하는 속성

 

margin, padding 글상자 바깥쪽, 안쪽 여백을 규정하는 marginpadding은 쓰임이 완전히 다르다. 이 차이를 잘 구분해야 하는데 HTML 태그로 글자를 표현하면 가상의 글상자 안에 글자가 들어간다. 이 글상자는 border 속성을 사용해 테두리를 그리면 눈에 보이는데 margin은 글상자 바깥쪽, padding은 글상자 안쪽 여백을 지정한다. 위에서 설명한 text-indent에서 padding을 사용해 여백을 줘야 하는 이유도 이 때문이다.

 

margin은 상하좌우 4가지 속성으로 구분해서 쓴다. margin-top, margin-bottom, margin-left, margin-right으로 원하는 방향만 여백을 줄 수 있다. 또한 margin 하나에 2, 3, 4개 값을 사용할 수도 있다.

 

사용 방법

.box_margin_2 { margin : 2em; }

.box_padding_2 { padding : 2em; }

 

본문에 사용

<p class="box_margin_2">margin은 글상자 바깥쪽의 여백을 지정하는 속성입니다.</p>

<p class="box_padding_2">padding은 글상자 안쪽의 여백을 지정하는 속성입니다.</p>


 

테두리를 그려 보면 marginpadding의 차이를 알 수 있다.

 

border : 글상자 바깥쪽, 안쪽 여백 border는 여러 값이 모두 포함되야 하는 속성이다. 이중 선의 종류는 반드시 넣어야 한다. 두께, 색은 기본값이 정해져 있지만 선은 정해져 있지 않기 때문에 선 종류를 지정하지 않으면 테두리가 표현되지 않는다.

 

사용 방법

.txt_box { border : solid 2px red; }

 

본문에 사용

<div class="txt_box">

<p>글상자는 선 종류, 두께, 색깔 이렇게 3가지 값을 갖습니다.</p>

</div>


 

 

구분

기본값

선 종류

(style)

필수항목

solid(실선)

dotted(점선)

dashed(

double(이중 실선)

groove, ridge, inset, outset

두께

(width)

medium

medium

thin

thick

px(숫자로 입력)

(color)

#000000(검정)

혹은 상속 값

#000000

rgb(0,0,0)

black

 

border는 각각의 값을 나눠서 표현할 수 있다. border-color, boder-style, boder-width로 구분해 표현이 가능하다. 이렇게 구분을 하면 margin에서처럼 상하좌우 값을 다르게 적용하는 것도 가능하다. 또한 이 속성들은 border-left-color처럼 상하좌우를 개별적으로 지정할 수 있다.

 

예제

.txt_box { border-style : solid dotted dashed double; }

<div class="txt_box">

<p>border-style을 사용하면 상하좌우 스타일을 다르게 지정할 수 있다.</p>

</div>

(024-1)

 

border-radious : 둥근 모서리 border-radius는 글상자 테두리를 둥글게 처리해 주는 속성이다. border-radius의 값을 조절하면 모서리의 둥근 정도를 조절할 수 있다.

 

사용 방법

.txt_box_round { border : solid 2px red; border-radius : 25px }

 

본문에 사용

<div class="txt_box_round">

<p>글상자의 모서리를 둥글게 처리하고 싶다면 border-radius를 사용한다.</p>

</div>



 

CSS 활용법. 나만의 템플릿 만들기

style.css 파일 만들기 메모장이나 sigil 등 텍스트 파일일 편집할 수 있는 프로그램으로 style.css 파일을 만든다. 메모장을 열고 [파일 > 새이름으로 저장]을 하거나 sigil에서 [빈 스타일 시트 추가]를 한다. 파일이름은 원하는대로 지정하되 영문과 숫자만 사용한다. 새로 만든 스타일 시트(여기서는 style.css)에 다음에 설명하는 속성들을 모두 추가한다.

 

공통 속성 공통 속성으로 marginpadding0으로 설정한다. HTML의 기본 문단 간격은 줄간격보다 넓다. 공통속성으로 marginpadding0으로 설정하면 이 문제를 해결할 수 있다. 선택자 *를 사용하면 모든 태그에 속성이 상속된다.

 

* { margin : 0; padding : 0;}

 

 

HTML의 기본 문단 간격은 줄간격보다 넓다. 공통 속성으로 margin과 padding 간격을 조절해 해결할 수 있다.

 

기본 글꼴 설정 많은 편집자들이 글꼴을 지정할 때 [font-family : “나눔명조”]처럼 글꼴 이름으로 설정한다. 이렇게 하면 코펍바탕으로 글꼴을 바꿀 때 CSS의 다른 항목들도 모두 바꿔야 한다. 글꼴 이름을 기본 글꼴”, “본문 글꼴‘, ”강조 글꼴처럼 쓰임에 따라 지정을 하면 글꼴을 변경하고 CSS를 수정하는 불편을 해결할 수 있다.

@font-face {

font-family: “기본 글꼴”;

src: url(../Fonts/NanumMyeongjo.ttf);

}

 

제목 스타일 제목은 h1 ~ h6 태그 중 하나를 선택한다. 책 제목은 h1, 장 제목은 h2h3를 절이나 소단락 제목은 h4~h6를 쓰면 좋다. 제목과 본문 간격을 두기 위해 빈 문단(<p><br></p>)4~5칸 삽입하는 편집자가 많은데 제목 태그에 margin-bottom을 주면 간단히 해결할 수 있다. 글꼴이나 글자 크기 등은 제목 모양에 따라 변경하자.

h2 {

font-family : “기본 글꼴”;

font-size : 1.5em;

text-align : center;

margin-bottom : 5em;

margin-top : 2em;

}

 

본문 기본 스타일 시중에 유통되는 전자책들이 들여쓰기, 양쪽 정렬을 하지 않아 뷰어에서 강제로 스타일을 적용한다. 뷰어가 처리해 주니 편해 보이지만, 들여쓰기, 양쪽정렬을 하면 안되는 편집까지 강제로 적용되는 문제가 생긴다. 책을 만들 때 본문 들여쓰기, 양쪽 정렬이 필요한 책이라면 반드시 본문 기본 스타일을 추가해 주도록 하자. 줄간격 1.8em은 국내 유통사 뷰어에서 가독성이 가장 좋다고 생각하는 수치다. 책의 성격이나 편집자 취향에 따라 수정하면 된다.

p {

font-family : “기본 글꼴”;

text-indent : 1em;

line-height : 1.8em;

text-align : justify;

}

 

텍스트 정렬 편집을 하다 보면 텍스트 정렬은 수시로 사용하게 된다. 이런 스타일은 기본으로 CSS에 추가해 두면 편집이 편해진다. 왼쪽 정렬과 오른쪽 정렬은 [text-indent : 0;] 속성을 추가했다. 본문 기본 스타일에 들여쓰기를 설정했기 때문에 정렬 스타일에 들여쓰기를 0으로 하지 않으면 왼쪽으로 약간 치우친다. 가운데 정렬을 했는데 중앙에서 약간 벗어나 보이면 들여쓰기를 했는지 확인해 보자.

.txt_left { text-indent : 0; text-align : left; }

.txt_center { text-indent : 0; text-align : center; }

.txt_right { text-align : right; }

 

 


들여쓰기를 0으로 주지 않으면 왼쪽으로 치우친다.

 

글상자 이 스타일을 이용하면 테두리와 배경색이 있는 글상자를 쉽게 만들 수 있다. 스타일을 CSS 파일에 복사해 넣고 원하는 속성 값만 수정하면 된다. 속성이 필요 없다면 값을 0으로 주거나 삭제를 하면 된다.

.txt_box {

border : solid 1px #999999; /* 선 종류, 두께, */

background-color: #dddddd; /* 배경색 */

border-radius : 20px; /* 모서리 둥글게 처리 */

padding : 1em; /* 안쪽 여백 */

}

 

나만의 style.css 템플릿 이제 위에서 설명한 내용들을 하나의 style.css 파일에 정리를 해 보겠다. 이 스타일만 있어도 소설처럼 편집이 간단한 전자책을 만들 수 있다. 아래 스타일시트 파일은 위에서 설명한 내용에 파란색 테두리 글상자 하나를 추가한 파일이다. 이처럼 기본 스타일에 약간씩 변형을 가하면 누구나 새로운 스타일 시트 탬플릿을 만들 수 있다.

 

style.css 탬플릿 파일

* { margin : 0; padding : 0;}

 

/* 폰트를 추가하고 싶다면 이 항목을 복사한 후 url을 변경한다 */

@font-face {

font-family: “기본 글꼴”;

src: url(../Fonts/NanumMyeongjo.ttf); }

 

h2 {

font-family : “기본 글꼴”;

font-size : 1.5em;

text-align : center;

margin-bottom : 5em;

margin-top : 2em; }

 

p {

font-family : “기본 글꼴”;

text-indent : 1em;

line-height : 1.8em;

text-align : justify; }

 

.txt_left { text-indent : 0; text-align : left; }

.txt_center { text-indent : 0; text-align : center; }

.txt_right { text-align : right; }

 

.txt_box {

border : solid 1px #999999; /* 선 종류, 두께, */

background-color: #dddddd; /* 배경색 */

border-radius : 20px; /* 모서리 둥글게 처리 */

padding : 1em; /* 안쪽 여백 */ }

 

/* 파란색 테두리에 흰색 배경의 글상자 추가 */

.txt_box_blue {

border : solid 1px #000099;

background-color: #ffffff;

border-radius : 5px;

padding : 1em; }

 

style.css 탬플릿을 적용한 HTML 코드

<h2>4.5.7 나만의 style.css 템플릿</h2>

 

<p>이제 위에서 설명한 내용들을 하나의 style.css 파일에 정리를 해 보겠다. 이 스타일만 있어도 소설처럼 편집이 간단한 전자책을 만들 수 있다. </p>

 

<p>아래 스타일시트 파일은 위에서 설명한 내용에 파란색 테두리 글상자 하나를 추가한 파일이다. 이처럼 기본 스타일에 약간씩 변형을 가하면 누구나 새로운 스타일 시트 탬플릿을 만들 수 있다. </p>

 

<div class="txt_box">

<p class="txt_left">왼쪽 정렬</p>

 

<p class="txt_center">가운데 정렬</p>

 

<p class="txt_right">오른쪽 정렬</p>

</div>

 

<p><br/></p>

 

<div class="txt_box_blue">

<p>간단한 수정으로 새로운 글상자를 만들 수 있다.</p>

</div>

style.css 탬플릿을 적용한 결과

 

180개 정도의 CSS 중에 style.css 템플릿에 있는 속성만 잘 활용해도 소설, 인문 같은 텍스트 중심의 책은 대부분 편집이 가능하다. 그림을 글자와 자연스럽게 배치해 주는 float, 글자의 수직 정렬을 해주는 vertical-align, 글상자에 입체감을 주는 box-shadow처럼 몇 가지 고급 속성을 익힌다면 종이로 인쇄된 책은 대부분 전자책으로 편집할 수 있다. 전자책 전문 편집자가 되고 싶다면 3회와 이번 회에 소개한 HTMLCSS를 익히고 지면 관계상 소개하지 못했지만 책 편집에 사용할 수 있는 몇가지 태그와 스타일 속성을 공부하기 바란다

'EPUB 편집 가이드' 카테고리의 다른 글

5. 편집하고 바로 읽는 EPUB 3  (0) 2016.02.16
4. CSS, 전자책 편집의 시작과 끝  (2) 2016.01.19
3. EPUB 제작을 위한 쉽고 간단한 HTML  (0) 2016.01.14
2. EPUB 만들 때 이것만은  (1) 2016.01.11
1. EPUB이란?  (3) 2016.01.08

설정

트랙백

댓글

3. EPUB 제작을 위한 쉽고 간단한 HTML

EPUB 편집 가이드 2016.01.14 12:32

1. EPUB이란

2. EPUB 만들 때 이것만은

3. EPUB 제작을 위한 쉽고 간단한 HTML

4. CSS, 전자책 편집의 시작과 끝

5. 편집하고 바로 읽는 EPUB 3


이번 회부터는 EPUB 제작에 필요한 HTML에 대해 알아본다. EPUB은 홈페이지를 만들 때 사용하는 웹 기술(HTML, CSS)을 사용한다. EPUB으로 책을 만든는 과정은 홈페이지에 책을 올리는 과정과 비슷하다.

다양한 편집 프로그램이 있고 편집프로그램이 제공해 주는 기본 편집 기능만 사용해 책을 만들 수 있다. 하지만 편집 디자이너가 인디자인으로 다양한 편집을 하듯이 전자책을 편집하기에는 기본 편집 프로그램이 부족하게 느껴질 것이다. 이때 간단한 HTML과 CSS를 알고 있어도 편집 프로그램의 부족한 부분을 채울 수 있다.



3. EPUB 제작을 위한 쉽고 간단한 HTML


3.1 HTML이란?


HTML은 Hyper Text Markup Language의 약어로 웹페이지를 만들 때 사용하는 언어다. 컴퓨터 언어지만 다른 언어들 보다 구조가 간단해서 쉽게 익힐 수 있다. 웹페이지에 보이는 내용들은 모두 HTML로 편집을 한다.

HTML은 100개가 넘는 태그로 이루어져 있다. 각각의 태그들은 제목, 본문, 강조, 기울임 등 문서 편집에 필요한 속성이 담겨있고, 이 속성을 이용해 편집자가 원하는 형태로 문서를 만들 수 있다.


HTML 태그의 구조


HTML 태그는 [여는 태그]와 [닫는 태그]가 한 쌍으로 구성된다. 여는 태그와 닫는 태그 사이에 있는 [본문 내용]이 뷰어에 표시되는 부분이다. [속성]은 본문 내용을 꾸밀 때 사용하는데 필요에 따라 넣거나 뺄 수 있다.


태그는 항상 여는 태그와 닫는 태그가 함께 와야 하지만 혼자 사용하는 태그도 있다. 이미지 태그<img />나 줄바꿈 태그<br />는 혼자 사용한다. 닫는 태그가 없는 대신 태그 끝에 슬래시(/)를 넣는다.*


여는 태그와 닫는 태그 사이에는 콘텐츠의 내용이나 다른 태그를 넣을 수 있다. 태그 사이에 다른 태그를 넣을 때는 열고 닫는 순서가 매우 중요하다. 반드시 여는 태그와 닫는 태그 사이에 다른 태그가 포함 되야 하며 태그가 서로 교차되서는 안된다.


다른 태그를 넣을 때는 열고 닫는 순서가 매우 중요하다


잘못된 태그 사용



* HTML에서는 <br>처럼 태그 끝에 슬래시(/)를 넣지 않지만 EPUB은 XHTML을 사용하기 때문에 혼자 사용하는 태그 끝에 항상 슬래시(/)를 넣어 줘야 한다.



3.2 EPUB 편집을 위한 태그


EPUB 편집에 사용하는 HTML 태그는 그리 많지 않다. 아무리 편집이 복잡한 책이라도 10개 안팎의 태그만 알면 만들 수 있다. 소설처럼 편집이 단순한 책이라면 본문 태그인 <p>와 표지를 넣을 때 필요한 이미지 태그 <img>만 있어도 충분하다.

여기에서는 EPUB 편집에 주로 사용되는 태그와 특징을 알아보고 각 실제 편집에서 어떻게 활용할 수 있는지를 알아보려고 한다.


EPUB 제작에 많이 사용하는 태그 목록

구분

태그

설명

제목

<h1>제목</h1>

* h1 ~ h6 사용 가능

부, 장, 절 등의 제목에 사용한다.

본문

<p>문단</p>

본문의 문단을 감싸는 태그다. 문단은 반드시 <p> 태그로 감싸야 한다.

<br />

문단 내에서 강제로 줄바꿈이 필요할 때 사용한다.

강조/꾸밈

<sup>위첨자</sup>

각주나 미주 같은 주석표시에 많이 사용한다.

<sub>아래첨자</sub>

H2O처럼 아래첨자를 표현할 때 사용한다.

<strong>진하게</strong>

<em>기울임</em>

<u>밑줄</u>

<mark>형광펜</mark>

본문 내 단어나 문장을 강조할 때 사용한다.

스타일

<span></span>

기능이 없는 태그지만 활용도가 높다. 스타일을 적용하거나 ID를 부여하는 등 다양한 용도로 사용된다.

그룹/글상자

<div></div>

여러 문단이나 태그를 그룹으로 묶어 스타일을 적용하거나 글상자를 만들 때 사용한다.

이미지

<img src="img.jpg" alt="설명“ />

이미지를 넣을 때 사용한다.

링크

<a href="링크 주소“>링크</a>

이미지나 글자에 링크를 연결할 때 사용한다. EPUB에서는 팝업 주석을 추가할 때 사용한다.

* 일부 태그의 EPUB 제작을 기준으로 설명을 했기 때문에 웹페이지를 제작할 때와 쓰임이 다를 수 있다.



3.2.1 제목 태그 <h1> ~ <h6>

HTML은 제목을 표현하기 위해 6단계의 제목 태그(Heading)를 제공한다. 큰 제목 <h1>부터 작은 제목 <h6>까지 사용할 수 있고, 단계별로 글자 크기가 달라진다.

제목 태그는 기본 스타일이 지정돼있어서 다양한 스타일로 제목을 꾸미지 못한다고 생각하는 편집자들이 의외로 많다. HTML의 태그는 대부분 역할에 따른 스타일이 지정되어 있지만, CSS를 통해 스타일을 쉽게 변경할 수 있다.


▷ 태그 사용법

<h1>h1은 가장 큰 제목에 사용합니다.</h1>

<h2>h2는 두번째 큰 제목에 사용합니다.</h2>

<h3>h3은 세번째 큰 제목에 사용합니다.</h3>

<h4>h4는 소 제목에 사용합니다.</h4>

<p>본문 글자 크기입니다.</p>

<h5>h5는 본문보다 글자 크기가 작습니다.</h5>

<h6>h6이 가장 작은 제목 태그입니다.</h6>


▷ 결과



제목 태그를 사용하면 문서 구조가 명확해져 편집 시간을 줄일 수 있다. <h1>을 책 제목, <h2>를 장 제목, <h3>를 절 제목으로 정해 놓으면 제목을 편집할 때 아무 고민 없이 장에는 <h2>, 절에는 <h3>를 사용하면 된다. 그리고 전자책 편집 프로그램들은 대부분 제목 태그로 목차를 자동으로 만들어 주기 때문에 <p> 태그에 제목 스타일을 지정할 때보다 목차 정리를 쉽게 할 수 있다.


시중에 유통되고 있는 전자책을 열어보면 <p>태그에 스타일을 지정해 제목으로 사용한 것을 많이 볼 수 있다. <p> 태그를 제목으로 사용하려면 제목 스타일의 CSS 클래스를 만들어야 하고, 이를 다시 태그에 추가해야 한다.

뷰어 화면에 보이는 결과만 확인하면 원하는 대로 잘 편집된 것처럼 보여도 아래 그림처럼 코드가 복잡해 진다. 코드가 복잡하다는 것은 편집 시간이 오래 걸리고, 뷰어에서 열리는데 시간이 오래 걸리며, 오류가 발생할 가능성이 높다는 의미이다.



시중에 유통중인 <p> 태그로 제목을 편집한 전자책



같은 책을 제목 태그를 이용해 한줄로 수정한 코드




<p>태그와 <h3>태그에 같은 CSS 스타일을 지정하면 뷰어에서 보이는 결과는 동일하다.




3.2.2 문단 태그 <p></p>


문단 태그는 주로 책의 한 문단을 표현할 때 사용한다. HWP나 MS 워드에서 엔터로 줄을 바꿔 문단을 새로 시작하는 것과 같다. 전자책 편집에서 가장 기본이 되는 태그로 가장 많이 사용하는 태그이기도 하다.

일부 ePUB 편집자는 문단을 <div></div>태그로 구분을 하는데 <div></div>태그는 여러 문단을 묶어 스타일을 적용하거나 레이어를 만들때 사용하는 태그이기 때문에 뷰어에서 심각한 오류가 발생할 수 있다. 문단을 구분하는 태그는 반드시 <p></p>를 사용하고 <div></div>는 사용을 하면 안된다.


시중에 유통중인 <div>태그로 문단을 편집한 전자책


<p></p>태그에 스타일을 붙여 제목, 주석 등을 표현하는 것도 가급적 피하는게 좋다. <p></p>태그를 꾸미는 CSS가 무한정으로 늘어나고, 다른 사람이 수정을 할 때 CSS만 보고 용도를 알 수 없는 경우가 많기 때문에 제목이나 주석 등 제공되는 기본 태그가 있다면 <p></p>태그보다는 해당 목적의 태그를 사용하는 것이 좋다.


▷ 태그 사용법

<p>문단을 표현하는 태그입니다.</p>

<p>문단과 문단 사이는 뷰어(브라우저)의 설정에 따라 지정된 문단 간격이 있으며 CSS로 간격을 조절할 수 있습니다.</p>


▷ 결과




3.2.3 줄바꿈 태그 <br />


<br />은 문단 내에서 줄을 바꿀 필요가 있을 때 사용한다. HWP나 MS 워드에서 시프트(Shift)+엔터로 강제 줄바꿈을 하는 것과 같다. <p>태그와 <br/>태그는 모두 줄을 바꿔주기 때문에 간혹 <br/>태그로 문단을 구분하는 경우가 있는데 절대로 사용하면 안되는 잘못된 편집이다.

<br /> 태그는 닫는 태그 없이 단독으로 사용한다. HTML에서는 <br> 슬래시(/) 없이 사용할 수 있고 XHTML에서는 <br />처럼 여는 태그이면서 동시에 닫는 태그임을 표시해주는 슬래시(/)를 넣어야 한다. EPUB은 XHTML을 기반으로 하기 때문에 슬래시를 넣어 닫는 태그 표시를 해줘야 한다.


▷ 태그 사용법

<p>&lt;br /&gt;은 문단 내에서 줄을 바꿀 필요가 있을 때 사용한다. <br />HWP나 MS 워드에서 시프트(Shift)+엔터로 강제 줄바꿈을 하는 것과 같다. </p>



▷ 결과



3.2.4 강조/꾸밈을 위한 태그


메모장 같은 기본적인 편집기에도 굵게, 기울임, 밑줄 같은 편집 기능이 포함돼 있다. HTML에서도 이런 기본 태그를 제공한다. 이 태그들은 고유의 속성이 포함되어 있어 쓰임이 제한되 보일 수 있지만 CSS를 활용해 잘 활용하면 전자책 편집 시간을 크게 절약할 수 있다.


- 윗첨자, 아랫첨자 태그 <sup>윗첨자</sup> <sub>아랫첨자</sub>

쓰임이 명확한 태그다. 윗첨자는 주석 표시를 할 때 많이 사용하고, 아랫첨자는 H2O처럼 특수한 기호를 표현할 때 많이 사용한다. 하지만 이 용도로 사용할 필요는 없다. ‘아래첨자용 태그(<sub> 태그)’처럼 간단한 설명을 붙일 때 사용하면 편리하다.


▷ 태그 사용법

<p>sup는 윗첨자로 E=MC<sup>2</sup> 처럼 본문 글자의 위쪽에 붙고, sub는 아랫첨자로 H<sub>2</sub>O 처럼 본문 글자의 아랫쪽에 붙는다.</p>

<p>태그를 반드시 제시된 용도로 사용할 필요는 없다. HTML<sup>(Hyper Text Markup Language)</sup> 처럼 필요에 따라 다양하게 활용이 가능하다. </p>

▷ 결과



<참고>

기본 태그 사용을 권하는 이유

기본 태그를 사용하면 불필요한 스타일이나 코딩을 줄여 편집 시간을 절약할 수 있다. 아래 예는 같은 편집을 기본 태그와 CSS 선택자로 코딩한 것이다.


<p>HTML<sup>Hyper Text Markup Language</sup></p>

<p>HTML<span class="superscript">Hyper Text Markup Language</span></p>


기본 태그를 사용했을 때 코드도 간결해지고, 입력해야 하는 내용도 짧아진다. <spu>와 superscript의 CSS 속성이 같다면 결과는 완전히 동일하다.



- 강조용 태그 <strong></strong>, <em></em>, <u></u>, <mark></mark>

본문 내에서 단어나 문장을 강조할 때 사용하는 태그들이다. 이 태그 역시 기본 속성은 있지만 CSS로 속성을 변경할 수 있다.


▷ 태그 사용법

<p>본문에서 <strong>굵은 글씨</strong><em>기울임 글씨</em>로 강조를 할 때는 강조용 태그를 사용한다.</p>

<p>단어나 문장에 <u>밑줄</u>을 긋거나 <mark>형광펜</mark> 스타일로 강조를 할 수도 있다.</p>

▷ 결과


<참고>

다양한 강조/꾸밈을 위한 태그

HTML에서는 이 외에도 다양한 편집용 태그를 제공한다. <pre>, <code>, <samp>, <kbd>, <ins>, <del> 등이 있는데 스타일이 유사하거나(<del>과 <u>는 밑줄을 긋는다) 일부 뷰어에서 편집이 깨지는 태그(<pre>태그는 잘못 사용하면 편집이 틀어진다)가 있어 사용할 때 주의해야 한다. 보다 상세한 태그 목록은 IDPF 표준 문서를 참고하기 바란다.



3.2.5 CSS 스타일을 지정해 주는 태그 <span></span>


<span>태그는 전자책을 편집할 때 CSS 스타일 지정에 많이 사용되지만 보다 다양한 기능을 갖고 있다. 여기서는 전자책 편집시 많이 사용하는 기능에 대해 설명하려고 한다.

<span>태그는 기본 속성이 없고, 다른 태그 안에 제한 없이 사용할 수 있다. 그래서 CSS에 사용자가 지정한 속성을 그대로 본문에 반영된다. 예를 들어 밑줄 태그인 <u>에 기울임 속성을 부여했다면 <u> 태그는 밑줄+기울임 속성을 갖게 된다. 하지만 <span>태그로 기울임 속성을 부여하면 다른 속성 없이 기울임만 적용된다.

<span>태그는 다양한 형태로 사용되기 때문에 태그 자체에 속성을 부여할 수 없다. <span> 태그로 속성을 지정하려면 style 속성을 사용하거나 CSS에서 선택자에 속성을 지정한 후 <span> 태그에 클래스를 추가해야 한다. 선택자와 클래스에 대해서는 CSS 장에서 자세히 설명할 예정이다.


▷ 태그 사용법

<p>span 태그는 <span>기본 속성이 없고, 다른 태그 안에 제한 없이 사용할 수 있다.</span></p>

<p>span 태그에 속성을 지정하려면 <span style="color:blue;">style 속성을 사용</span>하거나 <span class="txt_color_red">클래스를 추가</span>해야 한다.</p>

▷ 결과



3.2.6 그룹, 글상자용 태그 <div></div>


<div>태그는 <p>와 <span>태그 다음으로 많이 사용한다. <div>는 <span>처럼 기본 속성은 없지만 다른 태그 안쪽에 사용하지 않고, 반대로 태그들을 그룹으로 묶는 역할을 한다.

전자책을 편집할 때 <div>태그는 두가지 용도로 많이 쓰인다. 하나는 여러 태그를 그룹으로 묶어 스타일을 지정하는 것이다. 그룹으로 묶으면 여러 단락에 같은 스타일을 지정할 수 있어 편집 시간을 줄일 수 있다.


   

그룹으로 묶으면 여러 단락에 동일한 스타일을 적용할 수 있다.

그룹으로 묶지 않으면 단락마다 스타일을 적용해 편집 시간이 오래 걸린다.


다른 하나는 테두리와 배경색을 지정해서 글상자를 만드는 것이다. 글상자는 전자책을 편집할 때 빈번하게 사용되기 때문에 <div>태그의 사용법을 알아두는게 좋다.




<div>태그는 CSS와 함께 사용해야 한다. <div>태그만으로는 그룹 스타일을 지정하거나 글상자를 만들 수 없다.


▷ 태그 사용법

<div class="txt_box red">

<p>div 태그는 단락을 그룹으로 묶어준다.</p>

<p>그룹으로 묶어 글상자를 만들 수 있다.</p>

</div>


<div>

<p>div 태그는 기본 속성이 없어 CSS와 함께 사용한다.</p>

</div>

▷ 결과




3.2.6 이미지 태그 <img src="URL" alt="설명“ />


<img /> 태그는 문서에 이미지를 삽입할 때 사용하고 <br />처럼 닫는 태그 없이 단독으로 사용된다. <img> 태그는 반드시 src="url" 속성을 함께 사용해야 하며 이미지를 표현할 수 없을 때 나타나는 대체 설명인 alt=“설명” 속성을 함께 사용하는 것이 좋다.

전자책을 편집할 때는 <p>태그나 <div>태그로 묶어 다양한 스타일을 지정할 수 있다. 단독으로 사용이 가능하지만 가급적 <p> 태그나 <div>태그와 함께 사용하기를 권한다.


▷ 태그 사용법

<p>이미지 태그는 이미지 경로를 지정하는 src와 이미지 설명을 포함하는 alt 속성을 반드시 지정해야 한다. </p>

<p><img src="sample.png" alt=""샘플이미지. ODPF 로고"></p>


<p>alt 속성은 이미지가 없거나 이미지를 표시할 수 없을 때 표시되는 설명이다.</p>

<p><img src="noimage.png" alt="이미지를 표시할 수 없을 때“></p>


▷ 결과



3.2.7 링크 태그 <a href="URL"></a>


<a> 태그는 책 밖에 있는 다른 문서 혹은 책 안에 있는 다른 위치로 이동을 할 수 있도록 링크를 거는 태그다. <a> 태그는 파란 글자색에 밑줄이 기본 속성으로 되어 있지만 CSS에서 속성을 변경할 수 있다.

전자책에서 <a>태그는 링크 외에 내부 링크에 필요한 식별자(앵커)를 추가하거나 주석을 표현할 때 사용한다. 주석을 링크로 연결하면 팝업주석이 지원되는 뷰어는 링크를 따라 이동하지 않고, 팝업창에 링크를 표시한다.


<a> 태그는 팝업 주석에 사용할 수 있다.



<참고>

팝업 주석은 HTML5에서 새로 추가된 <aside> 태그를 이용해 EPUB3로 제작을 해야하기 때문에 여기서는 자세히 다루지 않는다. 팝업 주석에 대한 내용은 IDPF의 EPUB3 문서를 참고하기 바란다.


▷ 태그 사용법

<p>링크를 클릭하면 <a href="https://www.imaso.co.kr/">마이크로소프트웨어 홈페이</a>로 이동할 수 있다.</p>


<p>주석 처럼  <a name="special_location">특정 위치</a>에 링크를 걸기 위해 식별자(앵커)를 표시할 때도 사용할 수 있다.</p>


<p>URL 대신 #식별자를 이용하면 <a href="#special_location">특정 위치로 이동</a> 이 가능하다.</p>


▷ 결과



지금까지 전자책 편집을 위한 HTML 태그의 용도와 사용법을 알아봤다. 종이책을 전자책으로 변환하거나 로맨스 같이 단순한 구조의 전자책이라면 여기에 설명한 태그만 알아도 충분히 만들 수 있다. 다음 연재에서는 전자책 편집의 꽃인 CSS를 이용해 편집자가 원하는 형태로 본문을 편집하는 방법에 대해 알아보도록 하겠다.

'EPUB 편집 가이드' 카테고리의 다른 글

5. 편집하고 바로 읽는 EPUB 3  (0) 2016.02.16
4. CSS, 전자책 편집의 시작과 끝  (2) 2016.01.19
3. EPUB 제작을 위한 쉽고 간단한 HTML  (0) 2016.01.14
2. EPUB 만들 때 이것만은  (1) 2016.01.11
1. EPUB이란?  (3) 2016.01.08

설정

트랙백

댓글


티스토리 툴바