본 블로그에서 이미지가 간혹 로드되지 않는 문제가 있었습니다. 이 문제를 발견하게 된 계기와 해결 방법, 그리고 정확한 원리를 함께 작성해 보았습니다.

본 블로그에서 이미지를 처리하는 방법

필자는 이미지를 두 가지 유형으로 나누어서 보고 있습니다. HiDPI라는 표시 방식의 도입 때문입니다.

먼저 HiDPI에 대해 간단하게 설명을 드리겠습니다. HiDPI는 같은 영역에 더 많은 픽셀 수를 넣음으로서 화면의 선명도를 높히는 표시 방식입니다.

이미지가 보여주려는 내용은 같은데 비 HiDPI 이미지 대비 이미지의 픽셀 수가 보통 2배 이상 많게 되는 것입니다.

이런 특성 덕분에 HiDPI 이미지를 크기 그대로 웹에 렌더링하게 되면 이미지가 의도와 다르게 커져서 나와버립니다.

예를 들어 작은 메뉴 사진을 하나 첨부했는데 허용된 화면 폭을 전부 채울 정도로 크게 나올 수 있습니다.

본 블로그에서 이미지를 처리하는 방법을 시각적으로 나타낸 사진 자료

그래서 필자는 HiDPI 이미지를 별도로 처리하기 위해 alt attribute 맨 앞에 (HIDPI)라는 접두어가 있는 img element에 한하여 width는 원본 크기의 2분의 1로, height는 자동 조정하는 스크립트를 작성했습니다.

결과적으로 이미지는 의도한 화면처럼 잘 출력되고 있었습니다. 추후 HiDPI 배율에 따른 이미지 조정 기능도 추가해야 하지만요.


문제를 발견하게 된 계기

GitHub Pages를 위해 commit하게 되면 실제로 반영되는데 시간이 소요됩니다. 이때 필자는 빠르게 결과물을 보고 싶은 나머지 Ctrl + Shift + R 을 반복적으로 누름으로서 캐시를 모두 지운 채로 새로고침되는 기능을 사용하게 됐습니다.

따라서 때때로 이미지가 로드되지 않는 문제를 발견할 수 있었습니다.

처음에는 원인을 파악하지 못하고 개발자 도구만을 계속 살펴보며… “상태 코드가 200이나 304면 문제가 없을텐데! 정말 알 수 없는 문제네…” 라는 생각만 했습니다.

우연히 tag의 attribute를 살펴보던 중 의도와는 다른 width가 적용되고 있음을 확인할 수 있었습니다. width 값이 0px로 설정되어 있던 것입니다.

그래서 임의로 width 값을 조정해본 결과 이미지가 잘 표시되고 있었습니다.


문제의 원인

문제는 지난 번에 HiDPI 이미지를 별도 처리하기 위해 작성한 스크립트 때문이었습니다.

이미지가 로드되는데 걸리는 시간보다 documentDOMContentLoaded event가 발생하는 시간이 더 일렀던 것입니다.

다시 말하자면, HiDPI 이미지 크기 조정 스크립트는 documentDOMContentLoaded event가 발생할 때 구동되는 형식이었기 때문에 원본 이미지의 width 값이 0이므로 0을 2로 나눴을 때 0px가 됐던 것입니다.


해결한 방법

img element의 이미지가 로드되었을 때 발생하는 event는 load 입니다. 이 event가 발생했을 때 이미지가 완전히 로드되었다는 것으로 간주하고, 그때 조정이 일어날 수 있게 이미지 크기 조정 함수의 실행 타이밍을 변경했습니다.

한 술 더 떠서 수정하는 김에 Airbnb의 JavaScript Style Guide에 맞게 다듬기도 했습니다.

(HiDPI)코드 개선 전 후 비교


마치며

블로그를 디자인하고 개발할 때 매우 급했었습니다. “빨리 블로그를 만들어서 글을 써야지” 라는 생각이었을 것입니다.

이번 일을 기회로 코드를 무성의하게 작성했을 당시를 반성하며 전반적으로 코드를 다듬고, 이번 글과 같이 원인 보고서를 자체적으로 작성하며 스스로 학습하고 나름대로 자숙의 시간을 가져볼까 합니다.