지난 이야기

• 바로학습AI 서비스를 개발하는데 학습지 미리 보기를 보여주어야 하고, 인쇄도 하고, 다운로드도 해야 했다.
• 문제 1: 미리 보기를 보여주어야 하며 정확히 인쇄해야 한다
  • 종이 매체를 위한 CSS 스펙과 paged.js 라이브러리를 이용하여 해결
• 문제 2: 학습지를 PDF로 다운로드할 수 있어야 한다.
  • 미리 보기를 위해 만들어지는 HTML로부터 PDF가 만들어지면 좋겠다.
  • jsPDF의 html 모듈과 html2canvas를 사용하는 방법으로 실마리가 보이는데...

어떻게 문제를 해결했는가?

문제 3) PDF에 점선(dotted)이 표현되지 않는다.

그림 13. 응, 안 돼. 한 번에 되게 해줄 생각 없어. 돌아가.

신나는 마음으로 적용 후 확인한 결과는.. 🤦 아, 이런, PDF에 점선의 표현이 안되더군요. 문제 2를 해결하기 위한 새로운 문제 3이 생겨버렸어요.

그림 14. 정슬기 전임님, 감사합니다!

우선, 해당 부분은 이미지 태그로 처리하는 걸로 협의하고 개발 일정을 소화하면서 방법을 찾아봅니다. 문제는 html2canvas에서 발생을 했습니다. html2canvas에서 border-style: solid만 지원하고 그 외 스타일은 지원을 하고 있지 않았습니다.

html2canvas issue와 PR을 뒤져봅니다. 누군가 dotted와 dashed를 지원하는 PR을 올려둔 것을 찾을 수 있습니다. 곧바로 Fork 한 후에 해당 PR의 내용으로 패치를 해봅니다. 그리고, 이미지 태그를 사용하기 전 마크업을 이용하여 PDF를 생성해 보았습니다.

그림 15. PDF에서 점선(dotted)가 표현되고 있다

드디어! PDF에서 점선이 표현됩니다. 이때, "국어 받아쓰기 학습지"를 개발 완료하고 "국어 받아쓰기 급수표"를 개발하고 있던 중이었는데요. "국어 받아쓰기 급수표"도 제대로 만들어지는지 확인해 봅니다. (참고로 html2canvas의 PR 내용은 버그도 존재하고 있어서 추가로 수정해 주었습니다)

그림 16. 국어 받아쓰기 급수표의 PDF 생성 중 오류가 발생

🤦 아.. 이번에는 국어 받아쓰기 급수표의 PDF를 생성하다 오류가 발생합니다..

오류 내용을 살펴볼까요? this.ctx.setLineDash is not a function이라고 되어 있습니다. 아무래도 jsPDF의 context2d 모듈이 line dash를 지원하지 않는 것 같습니다.확인해 보니 역시나 setLineDash 함수가 없습니다. 문제 2를 해결하다 발생한 문제 3을 해결하니 이제 문제 4가 생겼습니다.

문제 4) jsPDF의 context2d 모듈이 line dash를 지원하지 않는다.

context2d의 setLineDash 함수는 선을 그릴 때 점선의 패턴을 지정할 수 있는 함수입니다. MDN의 문서를 참고하여 캔버스의 동작과 동일하게 동작할 수 있도록 setLineDash 함수를 jsPDF의 context2d 모듈에 추가해 주었습니다. (그런데, 위의 html2canvas의 PR은 line dash가 되지 않는데 어떻게 동작한 것일까요? 알고 봤더니, dotted는 circle을 이용해서 일정 간격으로 그리도록 구현하였더군요.)

Context2D.prototype.setLineDash = function (dashArray) {
    this.pdf.setLineDash(dashArray);
};

코드 4. jsPDF/src/modules/context2d.js에 setLineDash추가

그림 17. 야호! PDF에서도 점선(dashed)이 표현된다

이제, 완벽합니다. 마크업 개발자에게 국어 받아쓰기 학습지의 점선을 다시 border-style로 변경해달라고 요청합니다. 그리고 기왕에 고친 김에 PR을 올려볼까 생각이 들었습니다.

context2d에는 setLineDash 함수 외에 line dash와 관련된 getLineDash 함수, lineDashOffset 프로퍼티가 있습니다. 추가로 해당 함수와 프로퍼티에 대해 코드를 추가하고, 테스트 코드를 작성한 후에 PR(https://github.com/MrRio/jsPDF/pull/3169)을 올려봅니다. 실로 간만의 오픈소스 기여였습니다. (찾아보니 마지막이 2015년에 angular-permission에 기여(PR1, PR2) 한 거네요. 하지만 angular는 이제 기억도 안 납니다...)

jsPDF는 기업에서 관리하는 오픈소스에요. 그래서 그런지 반응이 굉장히 빠르더군요. 피드백이 몇 번 핑퐁 한 다음, 머지가 되었습니다.

재밌는 서비스도 개발하고 오픈소스에도 기여하여 뿌듯함도 느끼고, 이런 맛에 개발자 하는 거 아닌가요?

이제 남은 영역을 쭉쭉 개발하면 됩니다. "국어 맞춤법 학습지"는 "국어 받아쓰기 학습지"와 유사합니다. 고로 아무 문제 없이 개발 완료. 이제 "국어 맞춤법 퀴즈"를 개발해 봅니다. 여기도 이제 PDF를 생성해 보아야겠죠?

그림 18. 아니, 저기요? 저한테 왜 이러세요?

다음에 계속...