https://escaper.netlify.com/
바로가기 생성기
이름은 epub shortcut creater의 앞 글자를 따서 ESC라고 하려 했는데, 이제는 리디북스 책 말고 다른것들도 보고싶다ㅠㅠ라는 의미로 탈출!의 뜻을 함께 담아 Escaper라고 지었습니다.
전자책 기기에서 인터넷을 쉽게 사용할 수 있게 해주는 서비스입니다. 인터넷 링크를 담은 ePub 파일을 생성해주며, 생성된 파일을 전자책 기기에 넣어주면 됩니다.
실 구동 사진이 없습니다. 테스트한 기기는 "리디북스 페이퍼 프로"이며, 다른 기기들에 사용하신다면 꼭 후기 부탁드리겠습니다.
잘 되는것들
- 구글독스 개별문서
- Gist
- URL Scheme
반쯤 되는 것들
- 나무위키: 가끔 새로고침됩니다
- 카카오페이지: 로그인이 안됩니다
안되는 것들
- Notion
미확인
- 문피아
기술 얘기
저장소: https://github.com/rycont/escaper
Netlify
처음으로 Netlify를 사용해봤습니다. 처음 사용해본 느낌은 정말 환상적이였습니다. Github Page와 다르게 별다른 설정이 필요 없이 빌드와 배포까지 한번에 처리해줬습니다. TS를 사용했는데, 그것도 한번에 잘 처리해줘서 놀랐습니다.
그리고 커스텀 도메인을 무료로 할 수 있다는 점도 마음에 들었습니다.(abc.netlify.com)
깃헙과 연동이 돼서 push시에 배포가 이루어진다는 점도 편리했습니다.
Vue
평소 React를 주력으로 사용하다가, 어쩌다 한번 Vue를 사용해봤습니다. 저는 Vue의 event emit?이 싫어서 컴포넌트 구조가 깊이 들어갈 프로젝트는 애초에 Vue는 생각도 안하는데, 이번 프로젝트는 정말 단순한 구조였기에 Vue와 223줄의 코드만으로 완성할 수 있었습니다. (그치만 시국이 시국인 만큼 앞으로는 주의하기로) 그치만 뭔가 Vue와 TS는 살짝 미묘하게 지원이 안되던 부분이 있어서 아쉽기도 했습니다. 조금 아쉬운 점이라면, 외부 컴포넌트를 불러오고, Vue.component로 등록해야 했다는 점..
Ant-design
디자인은 [https://banner.godori.dev/](Velog 배너 생성기)를 모티브로 삼았으며, 동일한 디자인 라이브러리인 Ant Design를 사용했습니다. 예뻤습니다. 사용하기도 간편했습니다. 앞으로 애용해야겠습니다.
JSZip과 file-saver
ePub는 HTML과 다른 파일들을 ZIP으로 묶은 단순한 구조를 채용하고있습니다. 웹에서 ZIP을 만들기 위해 JSZip 라이브러리를 사용하였습니다. (npm 만세!) 이전의 프로젝트에서 JS로 파일을 만지는데 진절머리가 났던지라 이번에도 어떤 난리를 피울까 걱정이 많았습니다. 그치만 JSZip은 쉬운 API를 가지고 있어서, zipper.file(name, content)과 zipper.generateAsync({type}) //Promise만 사용해서 편하게 ZIP 파일을 생성할 수 있었습니다.
생성한 ZIP 파일을 로컬에 다운로드 하기 위해서 사용한 file-saver는 더 쉬운 API를 가지고 있어서, saveAs(content, name)만 기억하면 됐었습니다.
여담: ePub
위에서 말씀드렸듯이, ePub는 HTML과 몇가지 추가 파일들을 zip으로 압축한 포맷입니다. ePub를 압축 프로그램으로 풀면 내용물이 드러나고, 반대로 규칙을 지켜서 zip을 만들고 확장자만 ePub로 바꿔주어도 잘 작동합니다.
우여곡절
- 뷰어들은 ePub 파일의 어디가 오류가 났는지 알려주지 않아서 ePub 파일 만드는데 어려움이 있었습니다ㅠㅠ 뷰어는 IDE가 아니니까요...
- 처음에 svelte를 썼었는데, 아... 아직은 아닌것같다 싶어서 vue로 왔습니다. vue같이 적당한 지배감이 있으면 모를까.. Svelte는 정형화되지 않은듯 했는데 이게 저의 취향과는 안맞았습니다. 그리고 아직 TS 지원도 잘 안되고요.
- Vue님,,, CLI에서 프로젝트 만들 때 TS 기본 지원하는줄 모르고 좀 헤맸어요
- 리디북스 페이퍼 프로는 컬러잉크 액정이 아닌데,,, 빨간색 테두리 해놓고 왜 검정이야ㅠㅠㅠㅠ 하고 엄청 헤매서 좀 억울했습니다,,,
추후 수정할 것
- 상세 ePub 설정
- 이미지 자동 생성
- 다른 단말기 테스트