[Tip] 폰트 진하게(볼드), 기울임(이탤릭) 처리

‪#‎전자책‬ ‪#‎CSS‬ ‪#‎sigil‬

‪#‎전자책_편집을_위한_HTML_CSS‬ 해시태그로 간단한 HTML CSS 강의를 시작합니다. 전자책 편집을 하는 분들에게 자주 받은 질문을 정리하려고 해요. 아주 쉬운 내용인데 모르면 헤매는 내용이라 초보 편집자들에게 유용하리라 생각합니다. 

전자책 편집을 하다 막히는게 있거나 궁금한 점이 있으면 댓글을 남겨주세요. 단, 질문은 '제대로' 해주셔야해요. 본인만 이해할 수 있는 질문 말고, 답변할 사람이 이해할 수 있는 질문으로요^^

편집기는 Sigil을 사용합니다. 하지만 모든 편집기에서 동일하게 적용할 수 있습니다.

이번 내용은 Tip이라기 보다는 정보에 가깝습니다.

'습관이란게 무서운 거더군~~'

어느 노래 가사인데 이 가사에 딱 맞는 상황을 어제 경험했어요.

어떤 분이 올린 전자책 편집하면서 진하게, 기울임을 적용해도 Sigil에서는 반영이 안된다는 글을 봤습니다. 저는 아무 생각 없이 '원래 안되요~'라고 쓰려다가 혹시나 하는 마음에 테스트를 해봤어요.

전자책이 확산되던 시기에 사람들이 주로 사용한 기기는 안드로이드 4.0 이전 버전, IOS 4.x대 이전 버전이었습니다. 아이폰 3GS와 갤럭시 S, 갤럭시 S2를 많이 썼지요. 이 버전에 포함된 웹킷에서는 폰트의 진하게, 기울임이 제대로 반영되지 않았습니다. 웹킷이란 브라우저 엔진이에요. 크롬이나 사파리 브라우저로 웹페이지를 열때 웹킷이라는 엔진이 HTML과 CSS를 분석해서 보여줍니다. 전자책 뷰어도 이 웹킷을 사용해요.

어째든, 전자책을 만들 때 <i></i> 태그와 <b></b> 태그, 그리고 CSS의 font-weight, font-style 속성이 반영되지 않았습니다. 그래서 코펍이나 네이버 나눔글꼴은 light, medium, bold, extrabold 처럼 같은 폰트여도 여러 두께를 만들어 배포를 했습니다. 전자책을 만들면서 진한 글씨 처리가 필요하면 bold 폰트와 medium 폰트 2개를 사용해야 했습니다.

그리고 지금까지 버릇처럼 진한 글씨가 필요할 때는 bold 폰트를 포함시켰습니다.

폰트 하나 포함시키는게 뭐가 어려운 일이라고... 하고 생각하실 수 있지만, 소설은 텍스트와 표지만 들어가면 용량이 1mb도 되지 않습니다. 여기에 폰트가 하나 들어가면 5mb가 되요. 배보다 배꼽이 더 커지는거예요. 그런데 폰트를 하나 더 추가한다면? 1mb밖에 안되는 본문에 폰트 용량만 10mb가 넘어갈 수 있습니다. 그래서 진하게, 기울임이 처리되는지가 중요합니다.

그런데... 이게 언제부터인지 바뀌었네요.

이제 뷰어에서(정확히는 웹킷이) font-weight을 처리해 줍니다.

진한 글씨가 필요하면 bold 폰트를 넣지 않고 <b> </b> 태그나 font-weight : bold; 스타일을 적용해 주세요.

**중요**

모든 뷰어가 진하게, 기울임 스타일을 반영하지는 않습니다. 제가 갖고있는 기기늕 2종 뿐이어서 안드로이드 6.0버전에서는 교보, 리디, 알라딘, 예스24, 네이버 뷰어에서 스타일이 반영되는 걸 확인했습니다. 안드로이드 4.0.4버전에서는 교보, 리디 뷰어에서 스타일이 반영되지 않았습니다. 2곳만 테스트를 했는데 다른 뷰어도 동일할 거예요.

안드로이드 4.1에서 진하게, 기울임이 반영되는걸 확인했지만 100% 보장은 할 수 없습니다. 안드로이드 4.x 버전에서 스타일이 적용되지 않을 가능성이 높습니다.

https://developer.android.com/about/dashboards/index.html

이건 안드로이드 버전별 점유율입니다. 여전히 4.x 버전 비중이 높습니다.

결론!! 전자책 만들 때 아주 중요한 내용이어서 기울임이나 진하게 스타일을 적용했다면 별도의 bold, italic 폰트를 사용하세요. '낮은 버전 사용자들은 어쩔 수 없지'라고 결정을 하셨다면 용량 많이 차지하는 폰트를 추가할 필요 없이 태그와 스타일로 기울임, 진하게 편집을 하셔도 됩니다.

- 태그와 스타일로 기울임, 진하게 처리(교보, 리디 뷰어)-