일반적으로 이펍이라 하면 이펍2(epub2.1)를 뜻합니다. 대부분의 이펍 전자책은 이펍2로 제작되어 유통되고 있습니다. 이펍3(epub3.0)은 이펍2의 확장판으로서 보다 다양한 기능이 가능하지만, 그를 뒷받침할 뷰어 프로그램의 개발 또한 필요해집니다. 현재 국내에서 이펍3을 지원하는 서점은 교보문고뿐으로, 그 외 서점에선 판매가 불가능합니다. 이러한 단점을 보완하기 위하여 하나의 도서를 이펍3과 이펍2, 두 버전 모두 제작하는 경우도 있습니다.

 

《 제작 과정 》

이펍3 준비하기 > 이펍3에서 가능한 구조 > 이펍3에서 가능한 꾸미기 효과

 

 

1. 이펍3 준비하기

시길에서도 이펍3을 제작할 수 있습니다. 시길은 설치 시 기본 이펍2 버전을 만들도록 설정되어 있으므로, 이를 이펍3으로 바꾸어주어야 합니다.

 

① 상단 Edit > Preferences 항목을 선택합니다. 해당 과정은 단축키 [F5]로 빠르게 진행할 수 있습니다.

② 나타난 Preferences 창의 'Create New or Empty Epubs as:' 항목에서 'Version 3'을 선택한 후, 오른쪽 아래에 'OK'를 누릅니다.

 

1. 이펍3 준비하기 - ①~②

 

 

③ 해당 설정은 현재 파일이 아닌, 새 파일부터 적용되므로 상단 File > New 항목을 눌러 새 파일을 만듭니다. (단축키 [Ctrl+N]을 사용해도 좋습니다) 또는 간단하게 시길을 껐다가 다시 켜도 됩니다.

④ 시길의 새 파일이 열리면, 상단 상태표시바에서 'epub3.0'으로 표시되어 있는 것을 볼 수 있습니다.

 

1. 이펍3 준비하기 - ③~④

 

 

해당 과정을 통해 시길의 기본 설정이 이펍3으로 바뀌었습니다. 이 이후로는 시길을 켜면 바로 이펍3 버전으로 생성되게 됩니다. 다시 이펍2를 제작하려면 앞서와 동일한 방법을 통해 설정을 'Version 2'로 바꾸어주면 됩니다.

 

 

2. 이펍3에서 가능한 구조

이펍3은 이펍2의 확장판이므로, 이펍2에서 사용할 수 있는 기능은 기본적으로 전부 사용 가능합니다. 여기선 이펍3에서만 가능한 주요 기능들에 대해 소개합니다.

 

(1) 음원 및 영상

이펍3 전자책은 링크를 통해 다른 사이트로 이동할 필요 없이, 보고 있는 페이지에서 바로 음원이나 영상 파일을 재생할 수 있습니다.

제작 시 음원 또는 영상 파일의 취급은 이미지 파일과 동일합니다.

음원은 Audio 폴더에, 영상은 Video 폴더에 'Add Existing Files' 버튼으로 파일을 먼저 넣습니다. 한 번에 여러 종류의 파일들을 넣으려 한다면 ① 도구막대의 'Add Existing Files' 버튼 또는 ② 상단 메뉴 FIle > Add > Existing Files 항목을 이용합니다.

③ 다양한 파일들을 한 번에 선택하여 넣으면, 각각 적합한 폴더에 자동으로 분류되어 들어갑니다.

 

2. 이펍3에서 가능한 구조 - ① 음원 및 영상파일 넣기

 

 

파일이 전부 들어갔다면 'Insert file' 버튼(단축키 [Ctrl+Shift+I])을 이용하여 본문 페이지 속으로 넣습니다. 이 부분은 예전 포스팅 {④ 그림 넣기}에서 상세히 설명하였으므로 참고하시길 바랍니다.

코드 편집 화면으로 바꾸어 보면 video 태그와 audio 태그가 생성되고, 각 시작 태그에 재생하려는 파일의 경로(src)가 입력되어 있는 것을 볼 수 있습니다. 또한 컨트롤러를 만드는 구문(controls="controls")도 들어있습니다. 이렇게 기본적인 삽입은 시길의 메뉴를 사용하면 되지만 보다 상세한 설정은 코드 편집 화면에서 직접 입력해 줘야 합니다.

 

① 컨트롤러 표시(controls="controls")와 같은 재생 설정과 관련된 옵션은 html 코드에서 지정할 수 있습니다. 대표적으로 자동 재생(autoplay="autoplay"), 반복 재생(loop="loop"), 음소거(muted="muted") 등이 가능합니다. 영상의 경우 별도의 이미지 파일을 섬네일로 지정할 수 있습니다. (poster="파일 경로") 해당 내용들은 시작 태그에 각각 입력합니다.

② 태그 안쪽에는 대체 텍스트를 넣을 수 있습니다. 대체 텍스트는 일반적인 상황에선 보이지 않으며, 뷰어에서 해당 태그를 지원하지 못할 경우에 나타납니다.

 

2. 이펍3에서 가능한 구조 - 음원 및 영상 HTML 코드

 

2. 이펍3에서 가능한 구조 - 음원 및 영상 (교보문고 PC 뷰어)

 

 

* source 태그

태그 안쪽은 대체 텍스트 외에도, 예비용 파일을 준비하는 곳이기도 합니다. 원래는 브라우저별로 다른 지원 포맷에 대응하기 위하여 사용하는 방법입니다. 국내 유통을 목적으로 한다면 이펍3 뷰어는 교보문고가 유일하므로 이러한 부분이 크게 문제가 되지는 않습니다.

이와 비슷한 문제로 컨트롤러 디자인 역시 뷰어에 의해 결정됩니다. 단, 자바스크립트를 이용하면 어느 정도의 디자인이 가능합니다.

 

source 태그의 사용

 

 

(2) 외부 문서 사용

이펍3에선 iframe 태그를 사용할 수 있습니다. 해당 태그를 사용하면, 링크를 통해 다른 사이트를 방문하던 것과 달리, 전자책 페이지 내에서 타 웹사이트나 직접 제작한 HTML 문서를 이용할 수 있습니다. 단, 타 웹사이트의 경우 해당 사이트가 가진 정책에 따라 이용이 거절될 수 있습니다. 반대로 공유 기능을 통해 태그 채로 제공해 주는 사이트도 있습니다.

 

2. 이펍3에서 가능한 구조 - 외부 문서 사용을 위한 iframe 태그

 

 

(3) 장애인 접근성

이펍3에선 장애인 접근성을 위해 고려된 다양한 HTML 태그들을 사용할 수 있습니다. 이 부분은 설명하자면 끝이 없으므로 국립장애인도서관 사이트에 게시된 제작 지침을 확인해 보시기 바랍니다.

 

(4) 자바스크립트 또는 제이쿼리 구문 사용

이펍3에선 HTML 내 script 태그 사용이 가능합니다. 또한 자바스크립트 또는 제이쿼리 구문을 넣은 js 문서 파일 등을 Misc 폴더에 넣어 사용할 수도 있습니다.

 

* 목차 문서 nav.xhtml

이펍3 제작을 위해 시길을 열면 Text 폴더 안에 nav.xhtml 문서가 들어있는 것을 볼 수 있습니다. 이펍2와 달리 이펍3은 nav.xhtml 파일에 목차 정보를 담으며, 해당 파일을 기반으로 뷰어 프로그램용 목차 기능을 생성합니다. 목차 생성 자체는 이펍2와 동일하게 'Generate Table Of Contents' 기능을 사용하면 됩니다. 해당 기능으로 'Table Of Contents' 창과 nav 문서 모두에 목차가 생성되지만, 실제 사용되는 것은 nav 문서뿐입니다. 또한 어디까지나 목차 생성을 위한 자료 파일이므로 본문을 읽을 때 nav 문서는 보이지 않도록 처리됩니다. 하지만 이펍3에서 nav 문서는 필수이므로 혹시라도 훼손되지 않도록 작업 시 주의합니다.

 

2. 이펍3에서 가능한 구조 - 목차 문서(Book View)

 

 

3. 이펍3에서 가능한 꾸미기 효과

이펍3에서 가능한 CSS 코드에 대해서도 알아봅시다.

 

① 위치(position) 및 정렬 순서(z-index)

위치 속성을 통해 보다 자유로운 배치나 고정형 레이아웃 등의 구현이 가능합니다.

위치 속성의 속성값은 절대좌표(absolute), 고정좌표(fixed), 상대좌표(relative)가 있습니다. 각 좌표별 기준점과 측정 기준이 다르니 잘 고려하여 사용해야 합니다.

위치 지정은 시작 방면(top, bottom, left, right)을 지정한 후 거기서부터의 이동 거리를 고정단위나 가변단위로 넣습니다. 덧붙여 이동 거리는 음수 및 양수 모두 가능하며 양수는 시작 방면의 맞은편으로 나아가는 방향, 음수는 시작 방면을 넘어서는 방향으로 움직입니다.

절대좌표(absolute)는 현재 문서 크기를 기준으로 위치를 측정합니다. 단, 위치 속성이 적용된 조상 요소(바깥쪽에서 둘러싸고 있는 태그)가 있다면, 해당 요소의 크기를 위치 측정 기준으로 삼습니다.

고정좌표(fixed)는 현재 뷰어 크기(뷰포트 크기)를 기준으로 위치를 측정합니다. 해당 문서 파일(xhtml 파일)이 끝나고 다음 문서로 넘어갈 때까지 계속 모습을 나타냅니다.

상대좌표(relative)는 위치 속성을 적용한 대상의 현재 위치(위치 속성을 적용하기 전 상태의 위치)를 기준으로 합니다. 또한 위의 두 값과 다르게 원래 있던 위치가 사라지지 않고 남아 있습니다.

위치 속성으로 인하여 겹치는 요소들이 나올 경우, 겹치는 순서-즉 정렬 순서(z-index)를 이용해 정리할 수 있습니다. 정렬 순서는 정숫값을 넣어 순서를 지정하며 숫자가 클수록 앞으로 나오도록, 가려지지 않고 보이도록 합니다. 반대로 숫자가 작을수록 다른 요소보다 뒤로, 가려지게 됩니다. 또한 정렬 순서 값이 같은 요소끼리는 코드가 보다 나중에, 즉 보다 아랫줄에 적힌 요소가 화면상 더 앞으로 나오게 됩니다.

 

3. 이펍3에서 가능한 꾸미기 효과 - ① CSS 코드

 

3. 이펍3에서 가능한 꾸미기 효과 - ① 결과 (교보문고 PC 뷰어)

 

 

② 변형(transform)

간단한 이동이나 크기 등의 변형을 구현할 수 있으며, 속성값은 어떤 변형을 할 것인지 나타내는 값과 하려는 정도를 나타내는 단위값, 두 가지 요소로 구성됩니다. 주의할 점은 변형 속성이 적용된 요소의 전체 크기가 똑바로 인식되지 않을 때가 있다는 점입니다. 이로 인해 화면이나 페이지 넘김 부분에서 그대로 잘려나가버리는 상황이 생길 수 있으니 주의합니다.

②-1 이동 ( translate(a, b), translateX(a), translateY(b) )

x, y축을 기반으로 하여 이동시킵니다.

 

3. 이펍3에서 가능한 꾸미기 효과 - ②-1 CSS 코드

 

 

②-2 크기 ( scale(a, b), scaleX(a), scaleY(b) )

x, y축을 따라 확대나 축소가 가능합니다. 단위는 입력하지 않으며, 자동으로 비율값으로 처리됩니다. 즉 값이 1일 경우 1배율로서 원래 크기를 뜻하며, 값이 2일 경우는 두 배 증가, 0.5는 0.5배로서 절반으로 감소하게 되는 것입니다.

 

3. 이펍3에서 가능한 꾸미기 효과 - ②-2 CSS 코드

 

 

②-3 기울임 ( skew(a, b), skewX(a), skewY(b) )

x, y축 방향으로 기울입니다. 단위는 deg(각도)를 사용합니다.

 

3. 이펍3에서 가능한 꾸미기 효과 - ②-3 CSS 코드

 

 

②-4 회전 ( rotate(o) )

요소의 중심점을 기준으로 입력값이 양수일 때 시계방향 회전, 음수일 때 반시계 방향 회전이 됩니다. 단위는 deg(각도)를 사용합니다.

 

3. 이펍3에서 가능한 꾸미기 효과 - ②-4 CSS 코드

 

 

②-5 변형 기준점 ( origin(a, b) )

변형을 가할 때 기준 되는 위치나 점을 변경할 수 있습니다. 기본값은 요소의 중앙(50%, 50%)으로 설정되어 있습니다. 기준점의 변경은 x, y축 방향으로 얼마나 이동하는지를 값으로 합니다. top, bottom, center, left, right 값으로도 지정할 수 있습니다. px이나 % 등의 단위값을 넣을 때는 왼쪽 상단(0, 0)이 이동의 시작점이며 x축 방향으로 오른쪽 이동 또는 y축 방향으로 아래쪽 이동을 원할 땐 양수 값을, x축상 왼쪽 이동, y축상 위쪽 이동을 원할 땐 음수 값을 사용합니다.

 

3. 이펍3에서 가능한 꾸미기 효과 - ②-5 CSS 코드

 

3. 이펍3에서 가능한 꾸미기 효과 - ②-1~②-5 예시 (교보문고 PC 뷰어)

 

 

②-6 3D 변형

3D 변형은 z축을 사용하는 변형입니다. 3D 변형을 적용할 때는 원근거리(perspective) 속성을 함께 적용해야 합니다. 원근거리 속성은 변형을 가하는 대상을 감싸고 있는 바깥 대상(부모 요소)에 적용합니다.

②-6.1 회전 ( rotateX(a), rotateY(b) )

x축 또는 y축을 중심으로 하여 z축 방향으로 회전합니다.

 

3. 이펍3에서 가능한 꾸미기 효과 - ②-6.1 CSS 코드

 

3. 이펍3에서 가능한 꾸미기 효과 - ②-6.1 회전 예시 (교보문고 PC 뷰어)

 

 

②-6.2 z축 이동 ( translateZ(c) )

z축 방향으로의 이동이 가능합니다. 시각적으로는 물체가 정면으로 가까이 오거나 멀어지는 것처럼 보입니다.

 

3. 이펍3에서 가능한 꾸미기 효과 - ②-6.2 CSS 코드

 

3. 이펍3에서 가능한 꾸미기 효과 - ②-6.2 z축 이동 예시 (교보문고 PC 뷰어)

 

 

③ 전환 ( transition(-property / -duration / -delay / -timing-function) )

css 속성이 변화할 때 해당 변화 과정을 일정 시간에 걸쳐 일어나도록 할 수 있습니다. 기본적으로 적용 범위(-property)와 적용 시간(-duration)을 입력합니다.

적용 범위는 변화하는 css 속성이 무엇인지를 입력하는 것으로, 해당하는 속성만을 그대로 적어주거나 전체(all)를 선택할 수도 있습니다.

적용 시간은 변화가 일어나서 완료되는 시간으로, 보통 초 단위(s) 값을 입력합니다.

이 외에도 변화 시작 전까지의 지연시간(-delay)을 지정할 수 있으며 적용 시간과 동일하게 초 단위 값을 사용합니다.

시간 함수(-timing-function)를 통해 구간별 변화 속도를 조절할 수도 있습니다. 기본은 ease 값이며, 그밖에 ease-in, ease-out, ease-in-out, linear 등의 값이 있습니다. 또한 직접 설정값을 만들 수도 있습니다. 시간 함수는 자세히 설명해놓은 사이트가 많으므로 직접 검색해서 찾아보시는 것을 추천드립니다.

 

3. 이펍3에서 가능한 꾸미기 효과 - ③ CSS 코드

 

 

④ 애니메이션 (@keyframes, animation)

키프레임을 통해 구간과 움직임을 만들고, 애니메이션 속성을 통해 적용하여 다양한 동적 효과를 연출할 수 있습니다.

④-1 키프레임(@keyframes) 설정

키프레임이란 영화의 프레임과 같이 구간별로 요소가 어떻게 움직일지를 지정하는 것입니다.

모든 키프레임은 중복되지 않는 저마다의 이름을 지정해 줘야 합니다. 이후 %값으로 단계를 설정합니다. 첫 시작 단계는 0%이며 마지막 단계는 100%입니다. 0과 100 사이의 값으로 원하는 만큼 구간 길이와 단계가 되도록 지정합니다. 전부 정해지면 각 단계별로 필요한 CSS 속성, 즉 해당 시간에 어떤 모습일지를 입력합니다.

④-2 애니메이션 세부 속성 (-name / -duration / -iteration-count / -direction / -delay / -timing-function)

키프레임을 통해 동적 효과의 구성이 끝났다면, 실제 적용은 애니메이션 속성을 이용합니다. 기본적으로 설정해야할 부분은 적용하려는 키프레임의 이름(-name)과 재생시간(-duration), 반복 횟수(-iteration-count)입니다.

이름은 앞서 설정했던 키프레임의 이름을 그대로 입력하면 됩니다. 재생시간은 초 단위 값으로 입력하며, 반복 횟수는 반복하려는 횟수나 infinite(무한 반복) 값을 넣을 수 있습니다.

이 3가지 값이 기본이자 필수 속성이며 이 외에도 부가적인 상세한 설정이 가능합니다.

진행 방향(-direction) 속성으로 키프레임에서 만들었던 단계의 1회 재생 시 진행 순서를 설정할 수 있습니다.

기본은 normal(0%→100%)로 되어 있으며, reverse(100%→0%), alternate(0%→100%→0%), alternate-reverse(100%→0%→100%) 등의 값으로 바꿀 수 있습니다.

지연 시간(-delay) 속성은 첫 재생 시작 전까지 기다리는 시간을 지정하는 속성입니다. 여러 번 반복 재생으로 설정되어 있어도 지연시간은 맨 처음 재생 때에만, 즉 딱 한 번만 적용됩니다. 값은 초 단위의 값을 입력하면 됩니다.

시간 함수(-timing-function)은 앞서 전환(transition)에서 설명했던 것과 같으므로 생략합니다.

 

3. 이펍3에서 가능한 꾸미기 효과 - ④ CSS 코드

 

 

⑤ 미디어 쿼리 (@media-query)

미디어 쿼리는 PC와 모바일 모두에 사용 가능한 '반응형 웹'을 만들 때 사용되는 기술입니다. 화면 크기에 따른 구간을 정해, 구간별로 적용되는 CSS 속성을 달라지게 합니다. 간단히 말하자면 PC 일 때의 모습과 모바일 일 때의 모습을 전혀 다르게 만들 수 있다는 것입니다.

이펍3에서도 이러한 미디어 쿼리의 적용이 가능합니다. 이를 통하여 제한적이었던 편집 디자인을 보다 자유롭게 설정할 수 있습니다. 그러나 미디어 쿼리는, 코드 자체는 단순하나 실제 사용에 있어 방대한 지식을 필요로 하는 경우가 많습니다. 어느 정도 전문적인 지식을 익힌 후에 사용해 보는 것을 추천드립니다.