집사람이 부탁한 영어단어장을 만들려고 시작한 java프로그래밍이, 어느덧 이지뷰어 모바일 버전까지 오게 되었습니다. ^^a
이지뷰어를 만들면서, 텍스트 문서와 이미지, pdf등을 지원하고보니 뭔가 아쉬운 기분이 들더군요.
이번 기회에 epub를 제대로 지원해봐?
그간 epub를 지원하긴 했지만, 그건 단순한 텍스트 내용만 보여줄 뿐이었고, 제대로된 epub지원이라고 보기엔 힘들었죠.
일단 epub문서의 글꼴과 이미지 파일을 지원해봅니다.
html문서를 읽어서 구문분석한다음 image태그에서 이미지 파일을 추출해줍니다.
그런데, 이렇게 압축해제한 이미지 파일을 어떻게 텍스트 파일내에서 보여줄지가 막막하더군요.
이미지를 읽어서 텍스트 사이에 뿌려주면 되지만, 그렇게되면 속도가 너무 느려지게 됩니다.
이미지가 잔뜩 들어있는 epub파일을 열어서 스크롤 시켰을 때,
잘 만들어진 극히 일부 epub뷰어를 제외하고, 대다수 epub를 지원한다는 뷰어들은 스크롤 속도도 느려지고 화면이 부들부들 떨리는 것을 볼 수 있습니다.
속도와 개발 편의성 때문에, 이미지뷰어와 텍스트 뷰어 모드로 나누어 처리하고 있었는데,
epub의 이미지 파일을 지원하려고 보니, 이미지 뷰어와 텍스트 뷰어의 경계가 좀 모호해지는 감이 없잖아 있습니다.
1. 이미지의 크기 정보 읽어오기
이미지가 표시될 영역만큼 텍스트를 밀어내야 하므로, 이미지 크기정보를 읽어옵니다.
하지만, 1~10개정도면 문제가 없는데, 간혹 수백개의 이미지가 들어있는 epub의 경우 압축해제하는데도 시간이 걸리거니와, 이미지를 읽어서 크기정보를 가져오는데도 상당한 시간이 소요됩니다.
이미지 1개당 0.1초만 걸려도, 300개면 30초나 걸리는 셈입니다.
거기에 epub의 html문서 파싱에 시간이 소요되고, 줄바꿈 처리하는데도 시간이 걸리고...
이래저래 걸리는 것들이 많네요.
이미지 크기정보를 읽지 않으면 수십초가 절약되니깐,
간혹 일부 뷰어들은 이미지 크기정보를 읽지 않고, 스마트폰 화면의 일정 영역만큼을 미리 이미지 영역으로 할당하고 처리하는 앱들도 있더군요.
이지뷰어도 처음엔 위 방식을 사용했지만, 앱을 사용하면 할수록 뭔가 아니다 싶은 생각이 들었습니다.
이왕 지원하려면 제대로 지원하는게 좋겠죠.
2. css 지원
단순히 epub의 텍스트만 보여주는 앱들만 사용해와서 그런지, 뷰어앱들을 사용하면서 한번도 이상하다는 생각을 해본적이 없었는데요.
어느날 한 사용자분께서 추천하신 앱을 다운받아 사용해보니....
와~~ 신세계였습니다.
눈이 번쩍 떠지더군요.
아... 이지뷰어는 아직도 멀었구나 싶었습니다.
단순 텍스트만 지원하는 뷰어에서 본 epub책과, 추천받은 앱으로 본 epub책은 같은 내용인데 완전히 다른 화면을 보여줬습니다.
아... 이 책이 이런 모습이었구나... 싶을 정도로요.
이지뷰어도 제대로 지원해보고 싶어졌습니다.
일단 스타일시트 파일인 css 파일들을 분석해봅니다.
정말 엄청 복잡하네요.
당최 무슨말인지도 모르겠고..
| section section section > header, nav section section > header { background: transparent; border: none; padding: 0em; margin: 0em; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } |
| div.center { margin: 0px auto 0px auto; text-align: center; } |
덕분에 html공부를 하게 되었습니다.
html에 대해서 좀 공부를 하고 나니, 드디어 css가 눈에 들어오기 시작하네요. ^^
css 로딩 및 구문분석 클래스를 만들고, 이 정보를 html 파서 클래스와 연동하는 로직을 추가했습니다.
생각보다 css를 적용하는게 까다롭더라구요.
조금이라도 실수해서 닫기 태그를 깜빡 빠뜨리고 처리하지 않는다거나 처리로직에 오류가 있는 경우, 글들이 가운데 정렬되거나 굵은 글씨가 되는 일도 있었고...
epub 2.0, 3.0버전별로 지원되는 기능들이 조금씩 달라서 신경써줘야 하는 부분도 많았구요.
원본 모습과 가장 비슷하게 보여주는 것은 왼쪽 앱입니다.
화면이 작은 휴대폰 특성상, 이미지와 텍스트를 함께 배치하면 시인성이 나빠져 책을 읽기 힘들어지기 때문에, 이지뷰어에서는 되도록 이미지와 텍스트를 독립적으로 처리하고 있습니다. (라고 위안을 삼습니다. ㅠ.ㅠ)
그래도 이번 경우에는 왼쪽 앱처럼 보여주는 것도 나쁘지 않은 것 같습니다.
오히려 너무 훌륭하네요. ^^
css파일을 읽어서 글꼴 모양이나 색상을 지원해주니깐 한결 책처럼 보이는 것 같습니다.
이제는 css를 지원하지 않는 앱으로 책을 보려니 너무 밋밋하게 느껴질 정도입니다.
문**앱에서 지원되는 문단정렬 기능을 보고 이지뷰어에서도 구현해보았습니다.
확실히 문단 정렬과 글자 속성을 지원하고 안하고의 차이가 꽤 큰 것 같습니다.
어느정도 css지원로직을 마무리하고보니, 글꼴 크기에 대한 정의를 새로 해야겠다는 생각이 들었습니다.
epub에 들어있는 그대로 글자크기를 보여주게되면 너무 큰 글씨거나 너무 작아서 보기 힘든 경우도 많더라구요.
이지뷰어는 주로 휴대폰에서 사용하는 앱이니만큼 휴대폰에 맞춰서 글자 크기를 제한할 필요가 있었습니다.
카카오페이지에서 자주 소설을 읽는 편인데, 간혹가다가 제목 글씨가 너무 커서 보기 흉한 소설들이 있더군요.
조금만 줄여도 괜찮을 것 같은데...
근데 태블릿이나 PC에서 보면 또 괜찮아 보이고...
암튼 휴대폰에서는 글꼴 크기에 신경을 써야 할 것 같습니다.
css정보에 따라서 원본에 가장 비슷하게 보여주는 앱은 왼쪽 앱입니다.
하지만, 글자크기가 너무 커서 보기에도 불편하고 좀 어색한 느낌입니다.
가운데 앱은 이미지 처리가 미흡한 탓에, 이미지가 잘린데다가 글자까지 가려버렸네요.
이런 이유로 이지뷰어에서는 글자크기를 제한하여 글씨를 너무 크게 보여주지 않도록 했습니다.
왼쪽 앱은 원본에 가장 가깝게 epub문서를 보여주고 있습니다.
화면이 큰 PC에서는 왼쪽처럼 처리하는게 맞습니다만, 아무래도 화면이 작은 휴대폰에서는 왼쪽 사진의 경우 오히려 읽기가 불편할 수도 있습니다.
근데 솔직히 왼쪽처럼 구현해보고 싶긴합니다. ^^a
3. 테이블 지원
css지원까지 마무리되니, 이제는 테이블 처리가 거슬리기 시작합니다.
지금까지는 테이블 태그는 그냥 탭문자로 구분해서 내용을 보여줬거든요.
대부분 다른 앱들도 이렇게 하니깐 별 문제가 없어보였는데,
1~2위를 다투는 앱에서 테이블이 들어있는 epub를 보니...
으.. 역시나 테이블도 제대로 처리해서 보여주더군요.
내친김에 이지뷰어도 테이블까지 지원해봐야죠.
<td>태그처리용 Cell클래스를 만들고, 이를 멤버로 <tr>라인을 담당하는 Line클래스를 만들었습니다.
그리고 line클래스를 멤버로 table클래스를 만들었습니다.
Cell클래스는 align, bold등의 속성태그를 지원할 수 있도록 했습니다.
html파서에서 <table>, <tr>, <td>, <th>등의 태그를 만날때마다 table클래스를 호출해서 add하는 것보다는,
<table> ~ </table>의 테이블 버퍼를 집어넣으면 알아서 테이블 정보를 변환해주도록 하는게 더 편할 것 같습니다.
내친김에 table에 테이블 파서 로직도 추가해봅니다.
예전에는 테이블 정보를 글자만 보여줬었는데, 문**앱을 보고 테이블 정보를 제대로 보여주려고 노력했습니다.
테이블 처리 만큼은 이지뷰어가 쬐끔 더 나은 것 같습니다. ^^a
이제 epub관련해서 어느정도 얼추 마무리 된 것 같습니다.
새로 추가된 epub기능을 간단하게 테스트해봅니다.
ePub 샘플 파일입니다.
 |
epub 무료 다운로드 사이트에서 받은 파일인데, 이미지도 적당히 들어있고, 테이블도 있고... 여러모로 테스트해보기 괜찮은 파일인 것 같습니다. 근데 영어가 짧아서 무슨 내용인지는 저도 잘 모릅니다. ^^a |
 |
일어 독음인 후리가나가 사용된 예제 파일입니다. 이건 1~2페이지정도의 작은 파일이지만, 이미지랑 후리가나, 링크등 다양한 기능이 들어있어요. |
 |
다들 잘 알고 계실 어린왕자 입니다. 내용수정만 하지 않는다면 배포해도 괜찮다고 해서 올려봅니다. 어린 왕자는 글자색, align, 이미지등 다양하게 테스트가 가능합니다. |
 |
이미지, css등 좀더 복잡한 기능을 사용하는 예제입니다. 물론 이지뷰어는 당연하게도(?) 지원 안합니다. PC에서 이걸 지원하는건 문제가 없는데, 쬐그마한 휴대폰에서 지원하면 난리가 나거든요. 실제로 이 기능을 지원하는 문**앱에 파일을 열면 엉망이라서 책을 읽을 수 없을 정도입니다. 휴대폰이니깐 너무 복잡하거나, 작은 화면을 사용하면 안 될 것 같습니다. |
 |
예전에 TV에도 자주 나오셨던 한의사 분이 쓰신 책인데, 여백 및 링크, 목차등 다양한 기능들을 테스트하기에 좋은 예제라고 생각합니다. 이지뷰어의 경우 이 파일로 여백 지원 테스트를 많이 했어요. |
위 5개 파일 정도만 있으면 epub 기능 테스트를 해보기 좋을 것 같습니다.
