검색결과 리스트
Tip&Tech에 해당되는 글 74건
- 2019.12.18 리디움 Cloud Reader로 홈페이지에 전자책 뷰어 만들기
- 2019.08.26 구 버전 Quark 압축 파일(sit) 압축 풀고 변환하는 방법
- 2018.09.21 [샘플]EPUB에서 그림을 그리자~ 그림판 샘플
- 2018.07.27 전자책 만들 때, 혹은 검수할 때 꼭 확인하고 주의해야 하는 사항들
- 2018.06.26 제목에 테두리가 있는 글상자 만들기
- 2018.05.28 [문의]재미있는 제목 스타일
- 2018.04.27 네이버 뷰어용 전자책 제작시 필독!!
- 2018.04.24 분명 표지를 넣었는데 서재에서 표지 이미지가 보이지 않을 때
- 2018.04.20 EPUB2로 해결할 수 없는 문제
- 2018.04.19 나에게 어울리는 삶을 살기로 했다 - 여름오후
글
리디움 Cloud Reader로 홈페이지에 전자책 뷰어 만들기
홈페이지에 전자책 뷰어를 만들어 전자책을 올리고 싶다는 문의가 종종 들어오네요.
다양한 목적이 있기 때문에 목적에 딱 맞는 방법을 모두 설명드리긴 어렵겠지만,
간단히 전자책 뷰어를 만들어 올리는 방법을 소개해 드리려고 합니다.
제가 이용하려는 뷰어는 Readium에서 개발하고 있는 Cloud Reader입니다.
Readium 뷰어는 다양한 환경에 적용 가능한 EPUB3 표준 뷰어입니다.
많은 전자책 뷰어가 리디움 소스를 활용하고 있고,
W3C EPUB PUB 워킹그룹에 적극적으로 활동하며 EPUB3 표준을 준수하고 있습니다.
그리고 오픈소스여서 무료로 누구나 쉽게 뷰어를 만들 수 있지요.
물론, 상업적인 용도로 쓰려면 어마어마한 회원 가입비가 들긴 하지만요 ^^
홈페이지에 전자책 뷰어를 만들어 전자책을 올리고 싶다는 문의가 종종 들어오네요.
다양한 목적이 있기 때문에 목적에 딱 맞는 방법을 모두 설명드리긴 어렵겠지만,
간단히 전자책 뷰어를 만들어 올리는 방법을 소개해 드리려고 합니다.
제가 이용하려는 뷰어는 Readium에서 개발하고 있는 Cloud Reader입니다.
Readium 뷰어는 다양한 환경에 적용 가능한 EPUB3 표준 뷰어입니다.
많은 전자책 뷰어가 리디움 소스를 활용하고 있고,
W3C EPUB PUB 워킹그룹에 적극적으로 활동하며 EPUB3 표준을 준수하고 있습니다.
그리고 오픈소스여서 무료로 누구나 쉽게 뷰어를 만들 수 있지요.
물론, 상업적인 용도로 쓰려면 어마어마한 회원 가입비가 들긴 하지만요 ^^
리디움 뷰어 공식 샘플
https://readium.firebaseapp.com/?
리디움 Cloud Reader 를 이용하면 누구나 이런 홈페이지를 만들 수 있습니다.
기본 세팅 하는데 30분도 안걸려요. 물론 책 목록을 넣으려면 시간이 좀 걸리지만요.
1. Readium Cloud Reader 소스 파일을 다운로드 받습니다.
https://github.com/readium/readium-js-viewer/releases
2. 다운 받은 파일을 압축을 풀어 홈페이지에 올립니다. Cloud-Reader, Readium 등 폴더를 만들어 올리는게 좋아요.
3. http://homepageurl/cloud-reader/index.html을 입력합니다.
4. 그럼 리디움 뷰어가 보일거예요.
참 쉽지요 ^^
그런데 Readium Cloud Reader는 아직 책 업로드를 지원하지 않습니다.
크롬 뷰어를 쓰면 업로드가 될것 같긴 한데... 나중에 시간 되면 Worker 파일을 뜯어볼까 생각중이에요.
하지만 아직은 파일 업로드가 되지 않아요.
그래서 책을 넣으려면 추가 작업이 필요합니다.
5. EPUB파일 하나를 압축 해제합니다.
6. Cloud-Reader 하위 폴더에 epub_content 라는 폴더를 만드세요.
- cloud-reader 대신 다른 폴더명을 썼다면 그 폴더에 풀면 돼요.
- epub_content일 필요는 없습니다. 하지만 폴더명을 바꾸면 다른 설정도 바꿔야 하니 편히 가려면 epub_content 로 만드세요 ^^
7.epub_content 펄더에 압축 해제한 파일을 업로드 합니다.
여기까지 했다면
http://homepageurl/Cloud-Reader/index1.html?epub=epub_content/Content-Folder
브라우저 주소 창에 이렇게 입력해 보세요.
당연히 Clound-Reader와 Content-Folder명은 제대로 입력을 해 줘야되요.
이렇게 입력하면 책이 보일거예요.
http://lesiles.synology.me/cloud-reader/index1.html?epub=epub_content/MO_mobydick
이렇게요.
여기까지 따라왔다면 90% 끝났습니다.
이제 서재 목록을 만들어 줘야되요.
8. 첨부 파일을 다운받으세요
- epub_lib_test.opds : 제가 테스트용으로 사용한 모비딕 서재 목록
- epub_library.opds : 리디움 공식 샘플(https://readium.firebaseapp.com/?)에 사용한 서재 목록
9. 파일명은 epub_library.opds 이걸 사용하세요. 저처럼 파일명을 바꾸려면 index.html 파일을 수정해 줘야합니다.
<entry>
<title>Mobydick</title>
<author>
<name>test</name>
</author>
<link type="image/jpeg" href="http://lesiles.synology.me/cloud-reader/epub_content/MO_mobydick/OEBPS/Images/Moby-Dick_FE_title_page.jpg" rel="http://opds-spec.org/image/thumbnail"/>
<link type="application/epub" href="http://lesiles.synology.me/cloud-reader/epub_content/MO_mobydick/" rel="http://opds-spec.org/acquisition"/>
<updated>2016-02-12T00:00:00Z</updated>
<id>READIUM_OPDS_0123456789_1</id>
</entry>
이게 책 하나의 세트입니다.
- 책 제목
<title>Mobydick</title>
- 저자 명
<author>
<name>test</name>
</author>
- 서재의 섬네일 표지 이미지
<link type="image/jpeg" href="http://lesiles.synology.me/cloud-reader/epub_content/MO_mobydick/OEBPS/Images/Moby-Dick_FE_title_page.jpg" rel="http://opds-spec.org/image/thumbnail"/>
- 콘텐츠 URL
<link type="application/epub" href="http://lesiles.synology.me/cloud-reader/epub_content/MO_mobydick/" rel="http://opds-spec.org/acquisition"/>
- 업데이트 날짜(등록 날짜를 쓰면 됩니다. 안써도 돼요)
<updated>2016-02-12T00:00:00Z</updated>
- 책 ID(ISBN이나 UID를 쓰면 됩니다)
<id>READIUM_OPDS_0123456789_1</id>
10. opds 파일을 만들었다면 'epub_content' 폴더에 업로드 하세요.
11. 이제 서재 목록을 다시 들어가 보세요.
http://homepageurl/cloud-reader/index.html
이렇게 입력하면 책 표지가 보일거예요. 그리고 표지를 누르면 책이 열립니다.
http://lesiles.synology.me/cloud-reader/index1.html
이렇게 보이면 제대로 만든거예요^^
홈페이지에 서재 만들기 어렵지 않지요^^?
'Tip&Tech' 카테고리의 다른 글
| 리디움 Cloud Reader로 홈페이지에 전자책 뷰어 만들기 (0) | 2019.12.18 |
|---|---|
| 구 버전 Quark 압축 파일(sit) 압축 풀고 변환하는 방법 (0) | 2019.08.26 |
| 네이버 뷰어용 전자책 제작시 필독!! (0) | 2018.04.27 |
| 국내 주요 유통사 뷰어 스타일 표현성 비교 https://goo.gl/QqqfKD (0) | 2017.09.28 |
| jpg vs png 그리고 EPUB에서 사용할 수 있는 이미지 (0) | 2017.08.24 |
| 전자출판에 대한 모든 강의가 모여있는 '디지털퍼블리싱 학교' (5) | 2017.06.30 |
글
구 버전 Quark 압축 파일(sit) 압축 풀고 변환하는 방법
안녕하세요~
오늘은 sit로 압축된 구 버전 Quark 파일을 변환하는 방법 알려드릴게요.
쓸 일은 거의 없는데, 제가 거래하는 출판사 몇 곳에서 쿽 6.0 이전 파일을 사용합니다.
작년까지는 저도 맥을 이용해 작업을 했는데, 맥북 가격이 말도 안되게 올라 올 초부터 윈도우 노트북으로 갈아탓어요.
그러다 보니 구 버전 Quark 파일, 그것도 sit로 압축된 파일을 받으면 난감하더라구요.
저처럼 구형 맥에서 작업한 쿽 sit 압축 파일을 받고 난감해 하실 분이 계실까 싶어
제가 찾아낸 방법 공유드리려고 합니다.
방법은 아주 아주 간단해요.
1. aladdin Expander를 설치하세요.
https://winworldpc.com/product/aladdin-expander/6x
아주 오래된 앱인데 윈도우 10에서도 잘 작동합니다.
sit expander를 여러개 설치해 봤는데 이 파일이 가장 간단하고 압축이 잘 풀려요.
2. aladdin Expander 설치 폴더에 stuffit5.engine-5.1.dll 파일을 복사해 넣습니다.
인터넷 검색하면 쉽게 다운로드 받을 수 있습니다.
인터넷 검색에 익숙하지 않은 분들을 위해 파일 첨부했어요.
파일 다운로드 받아서 aladdin Expander 폴더에 복사합니다.
3. aladdin Expander를 실행시키고 sit 파일을 불러옵니다.
압축 파일은 sit 파일이 있는 폴더에 풀려요. 그러니 압축 풀기 전에 폴더를 만들고 그 안에 Sit 파일을 넣은 다음 압축을 푸는게 좋아요.
4. 그럼 이렇게 이상한 파일이 생깁니다.
확장자가 붙지 않은 파일을 살펴보면 용량이 큰 파일이 보입니다.
파일에 따라 조금씩 차이는 나는데, 가장 큰 파일이 Quark 파일인 경우가 99%네요.
이 파일의 확장자를 qxp로 바꿔줍니다.
5. 이 파일을 인디자인으로 불러 오면 끝~~~인 경우가 있습니다.
폰트 문제가 없으면 제대로 보일거예요.
그런데 최신 Quark을 사용하거나, 글꼴이 깨지고 이상한 일본어 글자로 보인다면 변환 작업을 해야합니다.
Quark 최신 버전을 쓰거나 인디자인으로 열었을 때 해결이 안되면 최신 Quark 파일로 변환을 해주세요.
http://www.quark.com/en/Support/Downloads/Details.aspx?fid=289
Quark 파일 컨버터를 다운받아 qxp 파일을 변환해 줍니다.
6. 변환 프로그램으로 변환을 하면 이렇게 Quark 9x 버전의 qxp 파일이 생깁니다.
이 파일은 최신 Quark에서 열려요.
끝으로...
인디자인이나 최신 quark으로 종이책 조판을 하는 방법은, 제 분야가 아니에요 ^^;
이쪽에 실력 있는 분들 많이 계시니 바통을 넘겨드리고,
전자책으로 편집을 하려면
Quark에서 EPUB으로 변환을 한 후 Sigil 같은 편집 프로그램으로 편집하면 됩니다.
구형 Quark 파일은 EPUB으로 변환하면 심각한 문제가 많이 생깁니다.
특히 본문 태그가 전부 div예요. 본문 태그는 반드시 p를 써야하는거 아시지요?
편집자 성향에 따라 수천개의 span 태그가 포함되고, 불필요한 스타일이 가득합니다.
본문 태그는 모두 p로 바꿔 주시고, 불필요한 코드는 전부 정리해 주세요.
아주 간단하지만, 모를 때는 정말 난감한 구 버전 sit(Quark 압축 파일) 변환 방법이었습니다.
'Tip&Tech' 카테고리의 다른 글
| 리디움 Cloud Reader로 홈페이지에 전자책 뷰어 만들기 (0) | 2019.12.18 |
|---|---|
| 구 버전 Quark 압축 파일(sit) 압축 풀고 변환하는 방법 (0) | 2019.08.26 |
| 네이버 뷰어용 전자책 제작시 필독!! (0) | 2018.04.27 |
| 국내 주요 유통사 뷰어 스타일 표현성 비교 https://goo.gl/QqqfKD (0) | 2017.09.28 |
| jpg vs png 그리고 EPUB에서 사용할 수 있는 이미지 (0) | 2017.08.24 |
| 전자출판에 대한 모든 강의가 모여있는 '디지털퍼블리싱 학교' (5) | 2017.06.30 |
글
[샘플]EPUB에서 그림을 그리자~ 그림판 샘플
그림판_ v06.epub
'Tip&Tech > 실전! 전자책 제작' 카테고리의 다른 글
| [샘플]EPUB에서 그림을 그리자~ 그림판 샘플 (0) | 2018.09.21 |
|---|---|
| 전자책 만들 때, 혹은 검수할 때 꼭 확인하고 주의해야 하는 사항들 (0) | 2018.07.27 |
| 제목에 테두리가 있는 글상자 만들기 (0) | 2018.06.26 |
| [문의]재미있는 제목 스타일 (0) | 2018.05.28 |
| 분명 표지를 넣었는데 서재에서 표지 이미지가 보이지 않을 때 (0) | 2018.04.24 |
| EPUB2로 해결할 수 없는 문제 (0) | 2018.04.20 |
글
전자책 만들 때, 혹은 검수할 때 꼭 확인하고 주의해야 하는 사항들
전자책을 만들거나 검수할 때 주의해야 하는 내용이 있습니다.
<div>앨리스는 언니와 함께 강둑에 앉아 있었다. 아무 것도 하지 않고 있자니 점차 몹시 지루해졌다. 언니가 읽는 책을 한두 번 흘깃 보았는데 거기엔 그림도 없고 대화도 없었다. “그림도 없고 대화도 없으면 책이 도대체 무슨 쓸모가 있는거지?”라고 앨리스는 생각했다.</div>
<div>그래서 앨리스는 일어나는 것보다 데이지 꽃다발이나 만드는 게 낫겠다고 생각하고는 (뜨거운 날씨 때문에 몹시 졸리고 바보가 된 느낌이라서 당연히 그럴 수 있었을 것이다), 데이지 꽃을 뽑기 시작했다. 그때, 갑자기 분홍 빛 눈의 하얀 토끼 한 마리가 가까이 뛰어왔다.</div>
<p>앨리스는 언니와 함께 강둑에 앉아 있었다. 아무 것도 하지 않고 있자니 점차 몹시 지루해졌다. 언니가 읽는 책을 한두 번 흘깃 보았는데 거기엔 그림도 없고 대화도 없었다. “그림도 없고 대화도 없으면 책이 도대체 무슨 쓸모가 있는거지?”라고 앨리스는 생각했다.
<br/>
그래서 앨리스는 일어나는 것보다 데이지 꽃다발이나 만드는 게 낫겠다고 생각하고는 (뜨거운 날씨 때문에 몹시 졸리고 바보가 된 느낌이라서 당연히 그럴 수 있었을 것이다), 데이지 꽃을 뽑기 시작했다. 그때, 갑자기 분홍 빛 눈의 하얀 토끼 한 마리가 가까이 뛰어왔다.
<br/>
그게 딱히 특별할 것이라고는 없었다.---중략--- 그리고 운좋게도 토끼가 울타리 바로 밑의 큰 토끼굴로 쏙 들어가는 것을 볼 수 있었다.
<br/>
그 즉시, 앨리스는 도대체 어떻게 다시 빠져 나올 건지는 생각조차 안하고 토끼를 쫓아 굴로 뛰어들었다.
<br/>
토끼굴은 터널처럼 곧게 이어지는듯 하더니 갑자기 아래로 푹 꺼져버렸다. 너무 갑작스러워 멈추어야 겠다는 생각조차 할 시간이 없어서, 상황을 알아차렸을 때에는 이미 아주 깊은 우물속으로 떨어지고 있었다.</p>
<h4>제1장</h4>
<h2>토끼굴 속으로</h2>
'Tip&Tech > 실전! 전자책 제작' 카테고리의 다른 글
| [샘플]EPUB에서 그림을 그리자~ 그림판 샘플 (0) | 2018.09.21 |
|---|---|
| 전자책 만들 때, 혹은 검수할 때 꼭 확인하고 주의해야 하는 사항들 (0) | 2018.07.27 |
| 제목에 테두리가 있는 글상자 만들기 (0) | 2018.06.26 |
| [문의]재미있는 제목 스타일 (0) | 2018.05.28 |
| 분명 표지를 넣었는데 서재에서 표지 이미지가 보이지 않을 때 (0) | 2018.04.24 |
| EPUB2로 해결할 수 없는 문제 (0) | 2018.04.20 |
글
제목에 테두리가 있는 글상자 만들기
스타일을 잡다 보면 이런 글상자가 종종 나옵니다.
글상자 제목과 내용이 있는 아주 일반적인 형태의 글상자입니다.
책 만들 때 많이 쓰이기도 하고요.
글상자 자체는 만들기 어렵지 않습니다.
아래처럼 제목에 꾸밈을 주는 경우가 있어요.
꾸밈의 형태는 다양합니다. 포스트잇을 붙여놓은 것 같은 스타일도 있고
제목 앞에 전구나 물음표 같은 불릿이 들어가기도 합니다.
그리고 이렇게 제목이 가운데 나오고, 양 옆으로 특정 패턴의 선이 나오기도 하지요.
이런 패턴은 좀 까다롭습니다.
글자에 맞게 제목 상자 크기가 바뀌어야 되요.
종이책에서는 한번 고정되면 그만이지만 전자책은 가로 폭이 일정하지 않습니다.
그래서 전자책은 제목 상자 옆에 있는 줄이 폭에 맞춰 자동으로 조정되야 하지요.
이런 스타일을 만드는 방식은 여러개예요.
예전에 소개한 적이 있는데
선을 긋고
margin-top을 (-)로 줘서 제목 상자를 선 위로 올리는 방법이 가장 간단합니다.
테이블을 이용할 수도 있어요.
왼쪽, 가운데, 오른쪽 3개짜리 테이블을 만든 후
가운데 셀에 border로 테두리를 그리고 왼쪽, 오른쪽에 선을 그을 수도 있습니다.
하지만 테이블은 셀 크기 조절이 까다로와요.
테이블과 비슷하지만 셀 크기 조절이 쉬운 방법으로는
flex 속성을 이용하는거예요. div 태그를 가로로 3개 늘어놓고 가운데 셀만 flex : 1;을 주면(0이었나???) 가운데 셀은 글자 크기에 맞게 칸이 조절되고, 좌우 셀은 크기가 동일하게 배치됩니다.
오늘 설명드릴건 이보다 조금 쉬운 방식이에요.
.box_tip_title {
background-image : url("../Images/box_top_line.png");
background-position : center;
background-size : 15px;
line-height : 0;
margin : 0 0 1em 0;
}
.tip_title {
text-align : center;
display : table;
margin-left : auto;
margin-right : auto;
background-color : #FFFFFF;
border: 15px solid #F67E68;
-webkit-border-image: url("../Images/box_top_border.png") round;
-webkit-border-image-slice: 30%;
border-image: url("../Images/box_top_border.png") round;
border-image-slice: 30%;
}
<div class="box_tip_title">
<p class="tip_title">알맞은 조명을 고르기 위한 tip</p>
</div>
테두리 모양은 여러가지로 응용이 가능합니다.
줄무늬, 물결무늬, border-bottom을 쓰면 아래에만 줄을 그을 수 있어요.
이 스타일만 있으면 제목 상자 테두리에 특정한 무늬가 들어간 대부분의 글상자를 만들 수 있습니다.
뿐만 아니라, 특정한 테두리를 가진 제목에도 활용할 수 있지요.
'Tip&Tech > 실전! 전자책 제작' 카테고리의 다른 글
| [샘플]EPUB에서 그림을 그리자~ 그림판 샘플 (0) | 2018.09.21 |
|---|---|
| 전자책 만들 때, 혹은 검수할 때 꼭 확인하고 주의해야 하는 사항들 (0) | 2018.07.27 |
| 제목에 테두리가 있는 글상자 만들기 (0) | 2018.06.26 |
| [문의]재미있는 제목 스타일 (0) | 2018.05.28 |
| 분명 표지를 넣었는데 서재에서 표지 이미지가 보이지 않을 때 (0) | 2018.04.24 |
| EPUB2로 해결할 수 없는 문제 (0) | 2018.04.20 |
글
[문의]재미있는 제목 스타일
재미있는 제목 스타일 문의가 들어와 소개해 드립니다.
제목 위, 아래에 크기가 다른 둥근 점이 들어간 제목이에요.
Sigil에서 제목을 자동으로 생성하려면 [오늘의 사색]이라는 제목은 하나의 제목 태그로 묶여야 합니다.
중요한 포인트는, 위쪽 큰 동그라미는 제목의 첫번째 단어에, 아래쪽 작은 동그라미는 마지막 단어에 일정한 거리를 유지해야 한다는 점이에요.
이렇게 제목이 길어지면 그에 맞춰 동그라미 위치도 바뀌어야 합니다.
제목의 위, 아래 길이는 알 수 없고, 1줄이 될 수도 있습니다.
제목이 어떻게 배치되어 있든 첫번째 단어에서 1자 거리 위에,
마지막 단어에서 1자 거리 아래에 원이 표시되야 합니다.
처음엔 코드가 엄청 복잡할 줄 알았는데 의외로 간단한 해결 방법이 있더라구요.
제약(점이 글자를 따라다녀야 한다, 제목을 한번에 표현해야한다 등)을 하나씩 생각하면서 스타일을 만들려다 보니 이런 저런 속성과 스타일이 여러개 들어갔는데 마음에 드는 결과가 나오지 않았습니다.
그러다, 가장 기본적인 원리를 떠올렸지요.
가장 심플하게~
그래서 다시 생각을 해 보니, 정말 간단한 해결책이 있더라구요.
스타일과 HTML 코드는 이렇습니다.
* 글꼴이 미생체다 보니 기본 글꼴 크기가 작네요. 글자 크기를 미생체에 맞춰 다른 글꼴로 바꿀 경우 제목 크기가 아주 커질 수 있습니다. 원문자 크기 역시 글꼴에 따라 차이가 날 수 있기 때문에 글자 크기 조절이 필요합니다.
h3 {
text-align : center;
font-family: "Sandoll MiSaeng";
font-size : 1.8em;
margin-top : 2em;
margin-left : -1em;
margin-bottom : 5em;
color : #B794CA;
}
h3:before {
content : "●";
font-size : 1.2em;
vertical-align : 110%;
}
h3:after {
content : "●";
font-size : 0.7em;
vertical-align : -140%;
}
.left_m{
margin-left : 1.5em;
}
<h3>토끼굴 <br/><span class="left_m"></span>속으로</h3>
스타일을 적용한 결과입니다.
목차를 자동 생성하면 이렇게 나옵니다.
샘플 파일 다운로드 받아서 확인해 보세요~
'Tip&Tech > 실전! 전자책 제작' 카테고리의 다른 글
| 전자책 만들 때, 혹은 검수할 때 꼭 확인하고 주의해야 하는 사항들 (0) | 2018.07.27 |
|---|---|
| 제목에 테두리가 있는 글상자 만들기 (0) | 2018.06.26 |
| [문의]재미있는 제목 스타일 (0) | 2018.05.28 |
| 분명 표지를 넣었는데 서재에서 표지 이미지가 보이지 않을 때 (0) | 2018.04.24 |
| EPUB2로 해결할 수 없는 문제 (0) | 2018.04.20 |
| [문의] 대논쟁 철학베틀 스타일 (0) | 2018.03.21 |
글
네이버 뷰어용 전자책 제작시 필독!!
어제 메일 하나를 받았어요.
font-size는 글꼴의 크기를 지정할 때 사용한다. font-size에는 em, %, px 등의 값이 올 수 있다. 하지만 글꼴의 크기를 뷰어의 설정에서 조정하는 경우가 많기 때문에 크기를 변경할 수 있는 가변 사이즈(em, %) 사용을 권장한다. 뷰어에 따라 처리하는 방식이 다른데 일부 뷰어는 강제로 px를 뷰어 설정에 맞추는 경우가 있고, px는 글자 크기를 변경하지 않을 수도 있다. 그래서 px를 사용하게 되면 일부 글자가 아주 작거나 아주 크게 나올 수 있다.
1em과 100%는 기기의 기본 글꼴 크기에 맞춰진다. 1em이나 100%를 기준으로 하면 크기나 해상도에 관계 없이 가독성이 보장된다. 하지만 px로 크기를 맞추면 5인치의 고해상도 기기에서는 글자가 아주 작게 표현되고, 10인치의 저해상도에서는 글자가 아주 크게 표현되는 등 일정한 크기를 보장할 수 없기 때문에 글자 크기가 내용에 직접적인 영향을 주는 경우가 아니라면 px는 피하는게 좋다.
'Tip&Tech' 카테고리의 다른 글
| 리디움 Cloud Reader로 홈페이지에 전자책 뷰어 만들기 (0) | 2019.12.18 |
|---|---|
| 구 버전 Quark 압축 파일(sit) 압축 풀고 변환하는 방법 (0) | 2019.08.26 |
| 네이버 뷰어용 전자책 제작시 필독!! (0) | 2018.04.27 |
| 국내 주요 유통사 뷰어 스타일 표현성 비교 https://goo.gl/QqqfKD (0) | 2017.09.28 |
| jpg vs png 그리고 EPUB에서 사용할 수 있는 이미지 (0) | 2017.08.24 |
| 전자출판에 대한 모든 강의가 모여있는 '디지털퍼블리싱 학교' (5) | 2017.06.30 |
글
분명 표지를 넣었는데 서재에서 표지 이미지가 보이지 않을 때
윈도우에서도 표지가 보이는지 모르겠지만, 맥에서는 표지 설정이 안된 책은 이렇게 보입니다.
표지가 보이지 않는 책을 Sigil로 열어주세요.
그럼 이렇게 바로가기 메뉴가 뜨고 중간 쯤에 [Add Semantics...]라는 메뉴가 나옵니다.
[Add Semantics...]의 대화창입니다.
아직 끝이 아닙니다.
뷰어에 따라 표지.xhtml 파일과 표지 이미지 중 하나를 표지로 보여줍니다.
그리고 서재에서도 표지가 표시됩니다.
'Tip&Tech > 실전! 전자책 제작' 카테고리의 다른 글
| 제목에 테두리가 있는 글상자 만들기 (0) | 2018.06.26 |
|---|---|
| [문의]재미있는 제목 스타일 (0) | 2018.05.28 |
| 분명 표지를 넣었는데 서재에서 표지 이미지가 보이지 않을 때 (0) | 2018.04.24 |
| EPUB2로 해결할 수 없는 문제 (0) | 2018.04.20 |
| [문의] 대논쟁 철학베틀 스타일 (0) | 2018.03.21 |
| [문의]패턴(웨이브)을 넣은 테두리 (0) | 2018.03.21 |
글
EPUB2로 해결할 수 없는 문제
안녕하세요~
오늘은 전자책으로 해결할 수 없는 문제를 짚어보려고합니다.
메일로 어떤 분이 문의를 주셨어요.
왼쪽 페이지 아래에 이미지가 들어가야 하는데 왼쪽엔 공백이 생기고 이미지가 오른쪽으로 넘어가는 문제였습니다.
조금 다급하셨던 것 같은데 해결 방법이 없어 이미지를 줄이거나, 왼쪽/오른쪽 어울림 처리로 편집을 수정하시라는 답변을 드렸습니다.
오늘은 왜 이런 형태는 해결 방법이 없는지 설명드리려고 합니다.
해결 방법이 아주 없는건 아니에요. @media 룰을 이용해 화면 크기에 따라 다르게 대응하거나 Javascript 를 이용해 해결할 수 있습니다. 하지만 @media룰도, Javascript도 모두 EPUB3에서 사용할 수 있습니다. EPUB2에서는 사용할 수 없어요.
결론은 편집을 바꾸는 방법 외에 EPUB2로는 해결할 수 없습니다.
이미지는 텍스트에 따라 위치가 바뀝니다. 종이책도 마찬가지예요. 모든 편집자들이 이렇게 텍스트와 텍스트 사이에 이미지가 배치되기를 원합니다.
그런데 텍스트가 많아 이미지가 들어갈 수 있는 영역이 이렇게 작다면 어떡해야 할까요?
종이책에서는 텍스트를 옮겨 해결할 수 있습니다. 텍스트를 오른쪽 페이지로 옮기고 이미자가 들어갈 위치를 만들 수 있지요.
종이책을 편집하던 분들은 전자책에서도 이렇게 해달라고 요구를 합니다. 저도 이런 요구를 많이 받았어요.
그런데 EPUB은 '가변적'입니다.
종이책은 편집이 끝나 종이에 인쇄를 하면 우주가 멸망해도 편집이 바뀌지 않습니다. 신이 장난을 친다면 모를까 절대 편집이 바뀔 일이 없지요.
종이책 편집자의 요구를 반영해 텍스트를 페이지 오른쪽에 옮겨봅니다.
그런데 독자가 글자 크기를 키운다면?
똑같은 문제가 다시 생깁니다.
독자가 글자 크기를 줄이면 문제가 있던 부분이 해결이 될 수 있습니다.
독자는 전자책을 볼 때 글자 크기를 몇으로 놓고 볼까요?
100명의 독자가 전자책을 본다면 100명 모두 다른 형태로 전자책을 봅니다. 똑같은 전자책을 보는 독자는 단 한명도 없습니다.
글자 크기, 줄간격, 화면 여백, 글꼴 배경색 등 독자가 원하는 형태로 바꿔 보기 때문에 특정 뷰어에서 특정 글자크기로 볼 때 편집이 이상해도 99%의 독자는 아무 이상 없이 볼 수 있고, 특정 뷰어, 특정 글자 크기에서 아무 문제가 없어도 99%의 독자는 편집이 엉망인 책을 볼 수 있습니다.
오늘 문의를 받은 이미지는 위에 설명한 상황보다 더 안좋았습니다. 이미지가 화면 한 페이지를 거의 차지할 정도로 컸거든요.
이런 상황이면 거의 모든 뷰어에서 이렇게 보일거예요. 뷰어 위쪽에 1~2줄만 텍스트가 들어가도 이미지는 다음 페이지로 넘어갈 수 밖에 없습니다.
이럴 때 저는 제작을 의뢰한 분께 설명을 드립니다.
이미지가 얼마나 중요하냐, 이미지의 편집을 바꿔도 되냐?
이미지의 위치를 바꿔도 문제가 없느냐?
편집자를 설득하기 어려운 경우도 있지만, 결과물을 보여주고 글자 크기를 조절해 가며 어떤 문제가 생기는지를 설명하면 대부분은 이해를 해줍니다.
본문 중간에 들어가는 이미지는 이렇게 왼쪽/오른쪽 어울림 처리를 하거나, 이미지 크기를 줄여서 해결합니다. 이미지 크기를 줄여도 본문 아래에 공백이 나오는 문제는 생깁니다. 하지만 텍스트가 화면의 1/2 이상 들어가기 때문에 위에 1~2줄 텍스트가 보이고 나머지는 텅 빈 공백으로 남는 것 보다는 보기 좋지요.
이렇게 편집한 책이 있습니다. 얼마 전에 제작 과정 소개해 드린 책이에요.
여름오후 출판사에서 나온 '나에게 어울리는 삶을 살기로 했다'는 책의 본문 중간에 한페이지 짜리 삽화가 들어갑니다.
하지만 위와 같은 문제가 생길 수 있어 본문 제일 끝에 삽화를 넣었습니다.
삽화가 본문의 특정 내용과 연결이 되지만, 본문 전체 맥락과도 연결되어 있어 본문 끝부분어 넣오도 어색하지 않았습니다.
두 페이지로 보면 이렇고, 스마트폰으로 본다면 '갖다 놓으면 더 좋고요.'를 보고 다음 페이지에 삽화가 나오겠지요.
만약 이 삽화가 본문 중간에 나온다면 고민을 해야합니다. 이 이미지는 1/2 크기로 줄일 수도, 오른쪽/왼쪽 어울림 처리도 할 수 없거든요.
이런 상황이면 이미지 부분을 자르고 텍스트는 캡션으로 넣었을 것 같아요. 삽화 위에 텍스트가 얹힌 부분을 잘라내면 이미지 높이(height)가 1/2로 줄어듧니다. 그럼 왼쪽 빈 공간에 이미지가 들어가겠지요. 텍스트는 캡션 스타일을 잘 만들어 이미지 아래에 넣으면 어떨까요?
아니면 왼쪽 공백을 무시하고 한 페이지로 들어가는 것도 하나의 해결 방법입니다.
EPUB2에서는 이런 문제들이 종종 생깁니다. EPUB은 HTML로 구조를 만드는데 HTML은 페이지가 아닌 스크롤을 고려해 만든 언어예요. 그래서 스크롤 화면에서는 문제가 없지만 페이지 화면에서는 생기는 문제가 있습니다.
이런 문제를 해결하는 방법은 '그에 맞는 편집을 찾는다'인 것 같아요.
그래도, HTML과 CSS로 저 문제를 해결할 방법을 고민해 봐야겠네요 ^^
성공하면 공유하겠습니다~
'Tip&Tech > 실전! 전자책 제작' 카테고리의 다른 글
| [문의]재미있는 제목 스타일 (0) | 2018.05.28 |
|---|---|
| 분명 표지를 넣었는데 서재에서 표지 이미지가 보이지 않을 때 (0) | 2018.04.24 |
| EPUB2로 해결할 수 없는 문제 (0) | 2018.04.20 |
| [문의] 대논쟁 철학베틀 스타일 (0) | 2018.03.21 |
| [문의]패턴(웨이브)을 넣은 테두리 (0) | 2018.03.21 |
| 테이블(table) 안쪽 여백(padding)과 가운데 정렬하기 (0) | 2017.10.13 |
글
나에게 어울리는 삶을 살기로 했다 - 여름오후
제목 : 나에게 어울리는 삶을 살기로 했다
출판사 : 여름오후
제작기간 : 2일
2도 인쇄용 PDF를 받아 이미지 색을 다시 설정하느라 이미지 편집 시간이 걸렸습니다. 본문에도 재미있는 스타일이 있어요.
목차는 단순해 보이지만 느낌을 그대로 살리려면 조금 까다로와요. 장 번호 모양을 그대로 살리면서 장 제목과 절 제목 배치를 해야되서 약간 트릭(?)을 썼습니다. 하늘색은 2도 인쇄용이라 실제 종이책 색상은 보라색이에요.
전자책에서는 이렇게 보입니다.
종이책에 2페이지로 편집된건 전자책에서 1페이지로 느낌을 살려야 합니다.
역시 색은 보라색이에요.
전자책에서는 이렇게 보입니다.
2페이지로 된 테두리를 1페이지로 처리했어요. 테두리는 단순합니다. border로 만들면 되요.
본문은 약간 손이 가는 부분이 있었지만 스타일 자체는 다른 책과 큰 차이가 없습니다. 첫단락 들여쓰기 없고, 인용구, 목록 등 많이 쓰이는 스타일입니다.
그런데 절 제목 아래에 이런 점이 붙어있어요.
총 9장, 각 장마다 5개의 절이 있어 총 45개 절입니다.
제목 아래에 45번 똑같은 코드를 반복해서 넣어야 할 때 사용할 수 있는 스타일을 설명드린 적이 있어요.
의사클래스(Pseudo-class)를 활용하면 코드를 넣지 않아도 제목 아래에 자동으로 점이 들어갑니다.
의사 클래스는 여기를 참고하세요
h3:after 클래스를 사용해 스타일을 잡으면 HTML 태그는 이렇게 됩니다.
아래 코드를 보면 <h3>내 삶을...</h3> 밑에 점을 넣는 코드가 보이지 않아요.
하지만 책보기나 미리보기로 보면 이렇게 점이 들어갑니다.
점을 넣지 않아도 되고, 점 대신 다른 문장이나 기호로 바꿀 일이 생겨도 CSS에서 코드 한줄만 수정하면 모든 제목에 적용되기 때문에 편집 시간을 절약할 수 있어요.
전자책으로는 이렇게 보입니다.
복잡한 스타일은 아니지만 재미있는 속성을 사용한 책이에요.
여름오후 출판사의 첫번째 책이니 전자책으로도 많이 봐주세요 ^^
'Tip&Tech > 이렇게 만들었어요' 카테고리의 다른 글
| 나에게 어울리는 삶을 살기로 했다 - 여름오후 (0) | 2018.04.19 |
|---|---|
| 지금 하지 않으면 언제 하겠는가 - 토네이도 (0) | 2018.04.18 |
| 알츠하이머의 종말 (0) | 2018.03.13 |
| 분노유발 심리학 (0) | 2017.11.08 |
| 일개미 자서전 (0) | 2017.11.03 |
| 복잡하지만 활용도 높은 스타일 - 엄마 같지 않은 엄마 (0) | 2016.12.22 |
