블로그 빌드가 멈췄다면? 이미지 변환 작업의 숨은 함정

어느 날 갑자기 시작된 빌드 지옥

지난겨울, 나는 약 15년간 운영해온 블로그를 Gatsby에서 Jekyll Chirpy 테마로 이전하기로 결심했다. 은퇴 후 한가로운 시간에 기술 블로그를 정리하고 싶었던 참이었다. 처음 몇 개 포스트는 잘 올라갔다. 그런데 고해상도 사진 몇 장을 추가한 후부터 이상한 일이 일어났다.

빌드 프로세스가 “running jobs (image transformation)”에서 꼼짝도 하지 않는 것이다. 처음엔 네트워크 문제인 줄 알고 커피를 마시며 기다렸다. 5분, 10분, 심지어 30분이 지나도 진행상황이 없었다. 이전 직장에서 배운 문제 해결 능력을 발휘할 시간이 왔다.

이미지 변환 작업의 불가피한 병목

Jekyll과 Chirpy 테마는 블로그 성능을 위해 업로드된 이미지를 자동으로 여러 해상도로 변환한다. 반응형 웹디자인에 맞춰 모바일, 태블릿, 데스크톱용으로 각각 최적화된 버전을 생성하는 것이다. 이는 사용자 경험 측면에서는 훌륭하지만, 빌드 서버 입장에서는 상당한 부담이 된다.

내가 직면한 문제는 다음과 같았다. 첫째, 5MB 이상의 고해상도 사진을 한 번에 여러 장 업로드했다는 점. 둘째, GitHub Pages의 빌드 환경에서 이미지 처리에 할당된 메모리가 충분하지 않았다는 점. 셋째, 타임아웃 설정이 기본값이어서 복잡한 변환 작업을 완료하지 못했다는 점이었다.

여러 오픈이슈를 뒤져본 결과, 이 문제는 나만의 불운이 아니었다. Gatsby 커뮤니티와 Jekyll 사용자들 사이에서 꾸준히 보고되어온 문제였다. 특히 대량의 이미지를 처리하거나 고해상도 파일을 다룰 때 더욱 심했다.

현명한 해결책들

먼저 가장 즉각적인 대응책은 이미지 사전 최적화다. 업로드 전에 로컬에서 이미지를 압축하는 것이다. 나는 ImageMagick 같은 도구를 사용해 사진들을 1920x1080 이하로 리사이징했다. 파일 크기도 300KB 미만으로 줄였다. 이렇게 하니 빌드 시간이 3분대로 단축되었다.

둘째, 빌드 타임아웃을 연장하는 방법도 있다. GitHub Actions의 workflow 파일에서 타임아웃 값을 기본 360초에서 600초 이상으로 설정할 수 있다. 이는 .github/workflows/jekyll.yml 파일에서 timeout-minutes 항목을 수정하면 된다. 물론 이것도 근본적인 해결책은 아니다.

셋째, 이미지를 포스트 내에 임베드하지 말고 외부 CDN(Content Delivery Network)을 활용하는 방법도 있다. Cloudinary나 Imgix 같은 서비스에 이미지를 호스팅하면 빌드 프로세스의 부담을 크게 줄일 수 있다. 나는 결국 이 방법으로 최종 정착했다.

더 이상 미루지 말고 시작하세요

당신의 블로그 빌드도 이미지 변환 단계에서 멈춰있나요? 지금 바로 위의 세 가지 방법 중 하나를 시도해보세요. 이미지 최적화는 그 자체로도 SEO와 사용자 경험을 개선하는 좋은 습관입니다. 댓글 섹션에서 당신이 시도한 해결책과 결과를 공유해주신다면, 같은 문제로 고민하는 다른 분들에게 큰 도움이 될 것입니다.