본문 바로가기

전자책만들기11

[전자책 디자인] 페이지 오른쪽에 부가정보 넣기 1. 문제 오늘 만든 전자책은 『괴테 시선 6』입니다. 1권부터 시작해 6권까지 나올 정도로 괴테의 시들은 많습니다. 그중에서도 이번 6권은 괴테의 대표작이라고도 할 수 있는 '서동시집'이 들어 있습니다. 유명하기도 하고 재치 있고 깊은 의미가 담긴 시들이 많지만, 전자책으로 만들기에는 까다로운 요소들이 제법 있습니다. 그중에 하나가 '시행 번호'를 표기한 것입니다. 종이책 제작을 위한 PDF 파일을 보면 이렇습니다. 페이지 오른쪽 여백 부분에 5, 10 등이 써져 있습니다. 이 시의 몇 번째 행인지를 알아보기 쉽게 하는 것인데, 전자책은 일반적으로 화면에 텍스트가 가득 차기 때문에 저렇게 여백을 활용하기가 쉽지 않습니다. 그리고 왼쪽부터 시작하는 시 본문 텍스트와 달리 시행 번호는 항상 화면 오른쪽에 .. 2022. 1. 19.
epub 2를 epub 3로 변환, 플러그인 0. 먼저 소개하는 글 https://leeebook.tistory.com/39 1. epub 3 위에 링크한 글에서, epub 3는 epub 2의 기본 요소에 더해서 좀 더 다양한 기능을 구현할 수 있다고 말씀드렸는데요. 그렇다면 왜 대부분 전자책을 epub 3로 만들지 않고 epub 2로 만들까요? 고정된 레이아웃이나 멀티미디어 지원 등 epub 3에서만 고유하게 구현되는 기능들 중 대부분이, 텍스트와 간단한 이미지 위주의 기존 대부분 전자책에서는 쓰이지 않기 때문일 것 같습니다. 제작이 조금 더 어려워진다는 점도 물론 이유가 될 수 있겠습니다. epub 2 수준에서 충분히 제작이 가능한데 굳이 epub 3를 만들 필요가 크지 않다는 뜻입니다. 그래도 위 소개한 글에 나온 것처럼, ruby 태그를 사.. 2021. 5. 29.
[전자책 디자인] 본문 강조점 찍기, ruby 태그 1. 강조점 1900년대 초중반에 발표된 한국 근대 소설들을 보면 본문에 강조점을 찍어서 표기한 곳들이 많습니다. 강•조•점•이•란• 이•렇•게• 글•씨• 위•에• 점•을• 찍•은• 것•들•을• 말•합•니•다•. 이런 강조점들은 태그와 태그를 이용해서 만듭니다. 일본어에서 한자 위에 음을 달아 놓은 것들, '후리가나'라고 하는 것도 이 태그를 이용해서 만들 수 있습니다. 태그는 이렇게 글자 위에 별도의 표시를 해야 하는 부분 전체에 적용하고, 태그는 그 표시 부분에 실제로 들어갈 내용을 입력합니다. 예를 들면, 기본적으로는 아래와 같이 씁니다. 강조점가나다 그러면 이렇게 나옵니다. 강조점가나다 그런데 위의 코드는, '강조점'이라는 텍스트 전체에 대해서 '가나다'라는 보조 텍스트를 입력한 형태입니다. 그래.. 2021. 5. 29.
[전자책 디자인]이미지 최대 너비 지정하기, max-width (2) 예전에 쓴 글에서 이미지(그래프) 최대 너비 지정하는 법을 쓰고, https://leeebook.tistory.com/21 [전자책 디자인]그래프 최대 너비 지정하기, max-width 최근에 그래프가 많이 들어가 있는 책을 전자책으로 만들었습니다. 이 그래프 넣는 것을 놓고 고민을 좀 했습니다. 그냥 생각 없이 width=100%로 속성을 부여해 100% 너비로 지정하면, 화면을 가로로 leeebook.tistory.com max-width로 이미지 최대 너비를 지정하는 방법이 알라딘 PC뷰어에서는 제대로 적용이 되지 않는다고 쓴 적이 있습니다. 그때도 max-width가 이미지에는 적용되지 않지만 표에는 제대로 적용된다는 점을 이용해서, max-width 적용된 표 안에 이미지를 넣는 편법을 생각해 .. 2021. 5. 14.
[전자책 디자인] 여백 간격을 항상 동일하게 하기, rem 단위 사용 1. 문제 전자책을 만들 때, 글씨 크기나 줄간격, 여백 등등은 기본으로 em이라는 단위를 사용한다고 말씀드린 적이 있습니다. 그런데 em 단위를 쓰다가 문득 이상하게 느껴질 때가 있습니다. 아래 사진을 보면, 첫 단락도 좌우 여백이 1em이고 다음 단락도 좌우 여백이 1em인데, 실제로 보이는 좌우 여백에는 차이가 있습니다. 두 단락은 글씨 크기가 다를 뿐, 좌우 여백은 동일하게 설정되어 있습니다. 그렇다면 실제 나타난 형태에서 좌우 여백에 차이가 나는 이유는 글씨 크기 때문이라는 것을 짐작할 수 있습니다. em이라는 단위는 그 단위가 쓰인 부분의 글씨 크기에 영향을 받는다고 합니다. (참고 : webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when.. 2021. 4. 11.