HTML, CSS, Node.js로 이미지 PDF 변환기를 만들어보며 배운 것

예전에 이미지 여러 장을 하나의 PDF로 변환하는 기능이 필요했던 적이 있었다.

처음에는 당연히 PDF 생성 라이브러리부터 찾았다. 이미 잘 만들어진 패키지도 많았고 구현 자체도 어렵지 않아 보였다.

그런데 막상 요구사항을 정리해보니 생각보다 단순하지 않았다.

처음에는 PDF를 직접 생성하는 방향으로 접근했지만, 구현을 진행할수록 다른 방법이 더 적합하다는 생각이 들었다.

결국 HTML과 CSS로 레이아웃을 만들고, Node.js 환경에서 이를 PDF로 변환하는 방식으로 구현하게 되었다.

HTML을 PDF 템플릿처럼 사용했다

처음에는 PDF 문서를 직접 그리려고 했다.

하지만 페이지 수가 늘어나면서 생각보다 고려해야 할 것들이 많았다.

하나하나 직접 계산하려고 하니 금방 복잡해졌다.

반면 HTML과 CSS는 원래 문서를 표현하기 위해 만들어진 기술이다.

레이아웃을 잡고, 요소를 배치하고, 페이지를 구성하는 일은 이미 브라우저가 잘하고 있었다.

그래서 PDF를 만드는 대신 웹 페이지를 만들고 그것을 PDF로 출력하는 방식으로 접근했다.

결과적으로 구현 난이도도 낮아졌고 유지보수도 훨씬 쉬워졌다.

웹 개발을 하다 보면 브라우저의 렌더링 엔진을 너무 당연하게 생각하게 된다.

하지만 PDF 작업을 하면서 다시 한번 느꼈다.

브라우저는 원래 문서를 표현하는 데 특화된 도구다.

우리가 직접 계산하려고 했던 많은 것들을 이미 CSS가 해결해주고 있었다.

특히 출력 결과물이 중요할수록 브라우저의 강점을 활용하는 편이 훨씬 효율적이었다.

이미지 몇 장 정도는 큰 문제가 없었다.

하지만 수십 장의 고해상도 이미지가 들어가기 시작하니 상황이 달라졌다.

PDF 생성 시간이 길어지고 메모리 사용량도 눈에 띄게 증가했다.

이 과정에서 이미지 최적화의 중요성을 많이 느꼈다.

좋은 품질을 유지하는 것도 중요하지만 사용자가 기다리는 시간도 중요한 사용자 경험이기 때문이다.

결국 적절한 해상도와 품질 사이에서 균형을 찾는 과정이 필요했다.

돌아보면 가장 큰 배움은 기술적인 부분이 아니었다.

처음에는 이렇게 생각했다.

PDF를 생성해야 한다.

하지만 실제로 해결해야 했던 문제는 조금 달랐다.

사용자가 원하는 형태의 문서를 다운로드할 수 있어야 한다.

문제를 다시 정의하니 접근 방식도 자연스럽게 바뀌었다.

PDF 생성 라이브러리를 깊게 파고드는 대신, 브라우저가 이미 잘하는 일을 활용할 수 있었다.

작은 프로젝트였지만 생각보다 많은 것을 배웠다.

특히 어떤 기술을 사용할 것인가보다 지금 해결해야 하는 문제가 무엇인지 먼저 정의하는 것이 더 중요하다는 사실을 다시 느꼈다.

개발을 하다 보면 모든 것을 직접 만들어야 할 것처럼 느껴질 때가 있다.

하지만 실제로는 이미 누군가 해결해둔 문제도 많고, 우리가 매일 사용하는 도구들도 생각보다 훨씬 강력하다.

이번 경험을 통해 새로운 기술을 배우는 것만큼이나,

이미 존재하는 도구를 제대로 이해하고 활용하는 것이 중요하다는 것을 배웠다.

좋은 개발자는 모든 것을 직접 만드는 사람이 아니라, 문제를 가장 효율적으로 해결하는 사람에 더 가깝지 않을까 생각한다.