전자책만들기/전자책 디자인7 [전자책 디자인] 페이지 오른쪽에 부가정보 넣기 1. 문제 오늘 만든 전자책은 『괴테 시선 6』입니다. 1권부터 시작해 6권까지 나올 정도로 괴테의 시들은 많습니다. 그중에서도 이번 6권은 괴테의 대표작이라고도 할 수 있는 '서동시집'이 들어 있습니다. 유명하기도 하고 재치 있고 깊은 의미가 담긴 시들이 많지만, 전자책으로 만들기에는 까다로운 요소들이 제법 있습니다. 그중에 하나가 '시행 번호'를 표기한 것입니다. 종이책 제작을 위한 PDF 파일을 보면 이렇습니다. 페이지 오른쪽 여백 부분에 5, 10 등이 써져 있습니다. 이 시의 몇 번째 행인지를 알아보기 쉽게 하는 것인데, 전자책은 일반적으로 화면에 텍스트가 가득 차기 때문에 저렇게 여백을 활용하기가 쉽지 않습니다. 그리고 왼쪽부터 시작하는 시 본문 텍스트와 달리 시행 번호는 항상 화면 오른쪽에 .. 2022. 1. 19. [전자책 디자인] 본문 강조점 찍기, 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. [전자책 디자인] 배경이 하얀색인 이미지는 png로 1. 글과 그림의 조화! 전자책에 그림이나 삽화 등 이미지가 들어갈 때는 본문 텍스트와 이미지가 잘 어울리는지를 확인해야 합니다. 글과 조화를 이루는 이미지는 독서를 더욱 즐겁게 해 주지만, 그렇지 않으면 자꾸만 눈에 거슬리는 이미지 때문에 읽기 흐름이 끊어지고 몰입을 방해할 것입니다. 특히 배경이 하얀 이미지가 있을 때 이 어울림 문제가 중요합니다. 종이책은 절대다수의 책이 하얀색 종이를 쓰기 때문에 이미지 배경이 하얀색인 것은 문제가 없지만, 전자책은 뷰어의 배경색을 다양하게 바꿀 수 있어서 이미지의 하얀색이 도드라져 보일 수 있습니다. 요즘은 눈 건강을 위해서 배경을 바꾸거나 조명을 조절해서 보시는 분들이 많은데요, 독자가 보기를 원하는 환경에 최대한 맞춰 주는 것은 전자책의 기본입니다. 위 그림에.. 2021. 4. 28. [전자책 디자인] 여백 간격을 항상 동일하게 하기, rem 단위 사용 1. 문제 전자책을 만들 때, 글씨 크기나 줄간격, 여백 등등은 기본으로 em이라는 단위를 사용한다고 말씀드린 적이 있습니다. 그런데 em 단위를 쓰다가 문득 이상하게 느껴질 때가 있습니다. 아래 사진을 보면, 첫 단락도 좌우 여백이 1em이고 다음 단락도 좌우 여백이 1em인데, 실제로 보이는 좌우 여백에는 차이가 있습니다. 두 단락은 글씨 크기가 다를 뿐, 좌우 여백은 동일하게 설정되어 있습니다. 그렇다면 실제 나타난 형태에서 좌우 여백에 차이가 나는 이유는 글씨 크기 때문이라는 것을 짐작할 수 있습니다. em이라는 단위는 그 단위가 쓰인 부분의 글씨 크기에 영향을 받는다고 합니다. (참고 : webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when.. 2021. 4. 11. 이전 1 2 다음
