해상도를 '이해'하고 계신가요?

전자책 출판정보/출판계 소식
posted by 내.맘.대.로 2017. 5. 29. 10:33

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

해상도


이미지 출처 : https://ko.wikipedia.org/wiki/%ED%95%B4%EC%83%81%EB%8F%84


'해상도'의 개념도 모르고 전자책을 만드는 분들이 많은 것 같습니다. 전자책 만드는데 해상도를 왜 알아야 하냐고 반문을 하신다면, 전자책 만들기 전에 디지털 콘텐츠의 개념부터 먼저 공부를 하세요.

똑같은 EPUB파일이라 해도 어떤 해상도에서 보느냐에 따라 편집이 달라집니다. 그래서 책을 보는 독자들이 주로 사용하는 기기가 무엇인지를 고려해 전자책을 만들어야 합니다. 전자책은 컴퓨터, 태블릿, 스마트폰, TV등 다양한 화면에서 보기 때문에 '디스플레이'를 고려하지 않고는 만들 수 없습니다. '디스플레이'에서 가장 신경써야 하는게 '해상도'지요.

해상도가 뭔지 안다고 하는 분들 중에서도 해상도의 개념을 제대로 알고 있는 분은 많지 않습니다. VGA, XGA, HD, FHD, UHD 등의 용어가 뭔지 알고 있어도 의미하는 바가 무엇인지는 제대로 알지 못하더라구요. '더 선명한' 화면 정도로 알고 있다면 해상도 공부를 다시 해야합니다.

해상도에 대해 제대로 알고 있는지를 확인하는 간단한 질문.

1. VGA, FHD, UHD 셋 중 어떤 해상도의 화면이 가장 클까요?
2. FHD와 UHD 중 더 선명한 화질의 해상도는?

바보같은 질문이라고 생각하신다면, 해상도에 대해 다시 공부를 하셔야 합니다. 이렇게 기본적인 질문에 제대로 답변을 하는 전자책 편집자를 찾기 힘들어요. 1번, 2번 모두 UHD라고 답을 하신 분이라면 해상도에 대해 제대로 모르는 분이예요.

1번, 2번 모두 '알 수 없다'가 정답입니다.

해상도 = 화질 이라고 생각는 사람들이 많은데 이는 반만 맞습니다. 정확히 얘기하면 '같은 거리에 있는 같은 크기의 화면에서 UHD가 FHD보다 화질이 선명하다'고 해야합니다. 같은 100인치라면 UHD가 선명하지만, 100인치 UHD 보다 10인치 FHD가 화질이 더 선명합니다.

FHD와 UHD는 똑같이 100인치가 될 수도 있고, 50인치 UHD와 100인치 FHD도 있습니다. FHD와 UHD중 누가 화면이 더 크냐는 질문은 질문 자체가 잘못된 것이지요.

어떤 분들은 FHD보다 UHD로 더 큰 화면을 만들 수 있는게 아니냐고 합니다. 이것도 틀립니다. 라스베가스에 가면 CGA보다 낮은 해상도로 만든 400미터짜리 디스플레이가 있습니다.

그럼 전자책으로 돌아와서....

현재 시중에 유통되는 스마트폰은 WXGA급 이상이 대부분입니다. 저가 스마트폰은 WXGA가 많고, 갤S8같은 상위기종은 WQHD급보다 해상도가 높습니다. 해상도는 같은데 화면 크기는 5~6인치고요. 이게 전자책 편집에 어떤 영향을 줄까요?

같은 5인치인데 글자 크기는 WXGA가 WQHD보다 큽니다. 이해하기 쉽게 설명하자면 본문 글자 크기를 1em 으로 했을 때 6인치 WXGA는 한 줄에 18자, 15줄이 들어간다면 WQHD는 한 줄에 25자, 30줄이 들어갈 수 있다는 얘기지요. 종이책은 편집자가 한줄에 들어갈 글자 수를 정하지만 전자책은 '해상도'와 화면 크기가 한 줄에 들어갈 글자 수를 정하게 됩니다.

이미지 크기도 해상도와 화면 크기에 영향을 받습니다. 가로 폭 1280픽셀 이미지는 WXGA에서는 화면 가득 보이지만 WQHD에서는 화면의 1/2밖에 안됩니다. 종이책처럼 편집자가 이미지의 크기와 선명도를 마음대로 정할 수 없다는 얘기에요.

전자책의 글자 크기, 한 줄에 들어가는 글자수, 한 화면에 들어가는 줄 수, 이미지의 선명도는 편집자가 정할 수 없습니다. 이걸 정하는건 '해상도'와 '화면 크기'입니다.

전자책을 편집할 때 '종이책'을 기준으로 편집하지 말라는 이유가 이것입니다. 전자책은 절대로 종이책처럼 편집할 수 없습니다. '이 전자책은 1024*768해상도에 최적화 되어 있습니다.'라는 얘기는 '이 전자책은 2017년에 출시된 최신 휴대폰에서는 엉망으로 보일 수 있습니다'라는 말과 다르지 않습니다. 그러니 편집자가 책이 최적으로 보이는 해상도와 화면 크기를 특정해사는 안된다는 얘기입니다.

여전히 '종이책'을 편집하던 생각의 틀에 맞춰 전자책을 편집하려는 분들이 많이 있습니다. 전자책을 만들고 싶다면 '전자책'으로 만드세요. '종이책 같은 전자책'을 만들려고 노력하지 마시고요.


반응형
저작자표시 비영리 변경금지 (새창열림)

'전자책 출판정보 > 출판계 소식' 카테고리의 다른 글

전자책은 PDF가 아니다. https://brunch.co.kr/@trip/64  (0) 2018.08.29
2017 국민 독서 실태 조사 자료  (0) 2018.02.07
[미국인들 "책은 종이가 제맛"] 정말 그럴까?  (0) 2016.09.08
검색이 된 사전  (2) 2016.06.13
통신 3사 통합 앱마켓 원스토어, 전자책 플랫폼 ‘ONE books’ 런칭  (0) 2016.06.02

이미지에 캡션 달기

Tip&Tech/실전! 전자책 제작
posted by 내.맘.대.로 2017. 5. 24. 12:32

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.


오랜만에 글을 올리네요.

4월 28일에 글을 올리고 거의 한달만입니다. 강의도 있고, 긴급히 제작해야 하는 전자책도 생기고 해서 정신이 없었어요.


오늘은 이미지에 캡션 다는 스타일을 알려드리려고 해요.

CSS가 익숙한 분들이야 별거 아니겠지만, 이미지 캡션이 처음인 분들은 막막할거예요.

방명록에 캡션을 달았는데 몇가지 문제가 생긴다고 해결 방법을 묻는 글이 올라와서 한번 정리해 보겠습니다.


이미지에 캡션이 달린 책을 몇권 봤는데 많은 분들이 사용하는 방식은 이런거였습니다.


<div class="img_style"><img.....></div>

<p class="img_caption"> 캡션 내용</p>

<p>본문</p>


가장 간단한 방법이긴 한데, 이미지와 캡션 한 묶음으로 움직이지 않아요. 그리고 float : left; float:right;를 했을 때 제대로 적용되지 않고요. 캡션 내용이 엄청나게 많아져도 문제가 됩니다. 문의 주신 분은 이 부분의 문제를 해결하지 못하셨던 것 같아요.


제가 쓰는 캡션 스타일은 이렇습니다. 샘플파일 다운로드 하면 뷰어에서 확인이 가능해요.


sample.epub

img {

width : 100%;

}


.img_caption {

font-size : 0.7em;

text-align : justify;

display : block;

margin : 0 0.5em 0 0.5em;

}


.img_center {

width : 100%;

text-align : center;

text-indent : 0;

}


.img_left {

float : left;

text-indent : 0;

text-align : left;

margin : 1em;

padding-right : 1em;

width : 45%;

}


.img_right {

float : right;

text-indent : 0;

text-align : right;

margin : 1em;

padding-left : 1em;

width : 45%;

}


<p class="img_right"><img alt="img007" src="../Images/img007.png"/><span class="img_caption">앨리스는 이내 토끼가 부채와 하얀 양가죽 장갑을 찾고 있다는 걸 알아챘다. </span></p>


/*p태그 대신 div 태그를 사용해도 됩니다.*/



줄간격, 여백, 글자색 등 스타일은 편집자가 원하는 대로 수정이 가능하니 책에 맞게 수정해서 사용하세요.


캡션을 넣을 때 이미지가 들어가는 상자를 하나 만들고 그 안에 이미지와 캡션을 같이 넣어 이미지와 캡션이 항상 한 묶음으로 움직이도록 만들어 놨습니다. 그래서 캡션 내용이 길어 다음 페이지로 넘어가더라도 캡션이 본문과 섞이지 않고 이미지 상자 안에 남아있게 됩니다.


샘플파일을 뷰어에서 보면 이렇게 나옵니다.


문의 주신 분의 설명 내용을 구현해 보려고 캡션을 과장되게 넣어봤습니다.


샘플은 [심야책방 세계문학 시리즈 '이상한 나라의 앨리스']에서 텍스트를 일부 발췌해 사용했습니다.





이 스타일이 실제 적용된 책입니다.



[시대의창 : 서울, 도시의 품격]



[시대의창 : 권력에 맞선 상상력 - 문화운동 연대기]


반응형
저작자표시 비영리 변경금지 (새창열림)

'Tip&Tech > 실전! 전자책 제작' 카테고리의 다른 글

EPUB2를 EPUB3로 변환해 보자 - 2) Sigil로 변환하기  (4) 2017.06.02
EPUB2를 EPUB3로 변환해 보자 - 1) 왜 변환해야 하지?  (0) 2017.06.02
복잡한 이미지+텍스트 편집 : shape-outside  (2) 2017.03.29
[국중] 전자책 제작 실습  (0) 2017.03.17
[제작샘플링] 영한대역 이상한 나라의 앨리스  (0) 2017.01.19

초간단! EPUB3에 360도 사진 넣기

Tip&Tech
posted by 내.맘.대.로 2017. 4. 28. 18:00

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

360도 사진을 EPUB3에서 구현해 봤습니다.

구글 API를 이용한 간단한 코드고 네트워크에 연결되어 있어야 볼 수 있습니다.


360vrPhoto.epub



오래 전에 설명을 한 적이 있는 방법인데 교보eBook, 알라딘, 예스24 등의 뷰어에서 볼 수 있습니다. 교보eBook 뷰어에서 가장 깔끔하게 보이고요.


이건 구글 API를 이용했기 때문에 네트워크에 연결돼 있어야 볼 수 있습니다. 구글 스트리트 사진이어서 여행책 만들 때 활용하면 좋을거예요.


하지만 네트워크에 연결되지 않은 상태에서 EPUB에 포함된 사진을 보려면 360도 사진용 스크립트가 필요합니다.

three.js(https://threejs.org/)를 이용한 공개되어 있는 360도 사진용 스크립트가 많이 있어 구현을 해 봤는데 교보eBook 뷰어에서 작동이 됩니다.


오늘은 이런게 가능하다 정도만 소개해 드리고, 구글 API를 이용해 구글 스트리트에 있는 360도 사진을 전자책에 넣는 방법, 스크립트를 이용해 EPUB에 포함되어 있는 360도 사진을 전자책에 넣는 방법은 다시 설명드릴게요.


참고로 구글 스트리트에 있는 사진을 넣는 방법은 여기를 참고해 주세요.


http://epubguide.net/134



반응형
저작자표시 비영리 변경금지 (새창열림)

'Tip&Tech' 카테고리의 다른 글

jpg vs png 그리고 EPUB에서 사용할 수 있는 이미지  (4) 2017.08.24
전자출판에 대한 모든 강의가 모여있는 '디지털퍼블리싱 학교'  (5) 2017.06.30
[TIP] 2% 부족한 '설민석의 조선왕조 실록'  (0) 2016.11.11
[TIP] 페러그린과 이상한 아이들의 집 FirstLetter 스타일  (2) 2016.11.11
[TIP] 텍스트 그라데이션 스타일  (0) 2016.11.08

국립중앙도서관 전자책 제작 실습 교육

EPUB 제작의 기초
posted by 내.맘.대.로 2017. 4. 28. 11:54

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.



수강 신청 http://www.nl.go.kr/nl/service/meet/edu_view.jsp?eduCode=240


국중 전자책 제작 교육 신청 공지가 올라왔습니다.

[이상한 나라의 앨리스]로 소설 수준의 쉬운 난이도 전자책을 처음부터 끝까지 직접 만들어 보는 수업입니다.

초급 수준의 편집으로 본문 제목을 어떻게 꾸밀지, 이미지는 어떻게 넣는지, 주석이나 인용구 등 본문과 다른 내용은 어떻게 꾸미는지 등의 간단한 스타일 편집을 익힐 수 있을거예요.


초급자 대상이지만 HTML과 CSS로 편집을 하기 때문에 전자책을 전혀 다뤄보지 않은 분들은 조금 힘들 수도 있어요. Sigil이나 윙크 등으로 전자책을 만들어보신 분들 중에 

1. 본문(제목, 이미지, 인용구 등)을 좀 더 보기 좋게 꾸며보고 싶다 생각하신 분들, 

2. 편집기에서 제공하는 편집 방식으로는 본인이 원하는 스타일을 표현하기 부족하다고 느끼신 분들, 

3. EPUBCheck에서 오류가 났는데 뭐가 문제인지 감이 안오는 분들

이런 분들이 들으면 초급에서 초중급, 중급으로 한단계 올라서실 수 있을거예요. 

아래 내용 보시고 관심있는 분들은 신청해주세요 ^^


 
              
 전자책 제작 실습-전자책으로 만드는 '이상한 나라의 앨리스'
 
국립중앙도서관에서는 전자책 제작에 대한 이해를 돕는 강좌를 다음과 같이 진행합니다.
관심 있는 분들의 많은 참석 바랍니다.
 


원활한 교육운영을 위해 교육신청서 작성시 아래의 질문에 답변 부탁드리겠습니다.


 1. 전자책 제작, 검수, 유통 등 현재 전자책 관련 업무를 하고 계신가요?
 2. 전자책 편집 프로그램(SIgil, Wink2.0, 이북스타일리스트 등)을 사용해 보신적이 있나요? 


  3. 잘 다루지는 못해도 HTML, CSS가 무엇인지 알고 계신가요?


ㅇ교육명: 전자채 제작 실습-전자책으로 만드는'이상한 나라의 앨리스'
ㅇ일  시: 2017.5.10/12/17/19/24/26(수,금) 6회 14:00~17:00
ㅇ장  소: 국립중앙도서관 디지털 도서관 소회의실(지하2층)
ㅇ대  상: 도서관 이용자 및 일반인(16세이상) 35명
ㅇ강  사: 박웅영(토네이도미디어그룹 기획팀장)
            - 교보문고 근무(2003~2014)
            - 전자출판 표준화포럼 EPUB PG에디터 및 간사
            - KERIS 주관 전자출판과 교육 기술 융합 표준(EDUPUB)동향 조사 및 분석 연구 참여
            - <교보문고가 제공하는 EPUB 제작 가이드> 저술     
ㅇ문  의: 02-3483-8846
ㅇ교육내용
   1일차(5.10) Sigil에 대한 소개 및 전자책 제작에 대한 전반적인 설명
   2일차(5.12) 편집기초-전자책을 위한 HTML (HTML 기초문법 및 주요 태그)
   3일차(5.17) 편집기초 전자책을 위한 CSS (CSS기초 문법 및 주요 속성)
   4일차(5.19) 전자책 편집-이상한 나라의 앨리스(1)-HTML과 CSS로 스타일 편집하기
   5일차(5.24) 전자책 편집-이상한 나라의 앨리스(2)-HTML과 CSS로 스타일 편집하기
   6일차(5.26) 고급 편집 기술 활용-Clips, 정규표현식, 플러그인 활용하기
※ 협조사항 
   교육 신청이 승인되신 분에 한해 교육 참석이 가능합니다. (승인여부 확인 : 도서관 홈페이지>내서재>신청내역>이용자교육)


반응형
저작자표시 비영리 변경금지 (새창열림)

'EPUB 제작의 기초' 카테고리의 다른 글

일본어 세로보기시 페이지 오른쪽에서 왼쪽으로 넘김  (0) 2022.12.12
EPUCheck5.0, 그리고 새로 추가된 내용 번역  (0) 2022.11.29
컴퓨터 기초를 모르면 전자책 제작을 배울 수 없습니다.  (0) 2021.04.25

티스토리툴바