저는 제 블로그에 올라오는 글이 읽기 편하게 조정하기 위해 노력하고 있습니다. HiDPI 이미지를 업로드하여 표시하면 화질이 떨어지고, 이미지가 지나치게 커 보인다는 문제가 있었습니다. 그리고 제 모든 컴퓨터에는 HiDPI(Apple 기기의 경우 Retina Display)가 적용되어 있습니다. 결과적으로 거의 모든 스크린샷을 지저분하게 표시해야 하는 문제가 생긴 것입니다. HiDPI가 적용된 이미지는 실제 이미지의 해상도의 반 만큼 줄여서 보여줘야 화질도 높으면서 사이즈도 적당합니다. 저는 CSS만으로 이 문제를 해결하려고 했지만 HiDPI가 적용된 이미지인지 아닌지 구분할 방법이 없었습니다. 결국 JavaScript를 응용하여 최대한 가벼운 방법으로 이 문제를 해결하게 되었습니다. 사실 복잡하거나 대단하지 않지만 많은 블로그 운영자분들께서 JavaScript 사용에 능숙하지 않다는 점을 고려하여 참고 사항이 될 수 있게 이 방법을 공유합니다. 미리 말씀드리자면, 이 글에는 HiDPI 이미지의 사이즈를 조정하지 않고 그대로 표시했을 때 어떤 불편한 현상이 생기는지 사진을 첨부하진 않았습니다.


사용하게 될 요소들

옵션

이러한 것들을 어떻게 불러야 좋을 지 애매모호해서 우선 옵션이라는 이름을 사용했습니다. 정확한 이름이 있다면 알려주시면 수정하겠습니다.

함수


원리

위에서 말씀드린 것처럼 이 방법은 그렇게 대단하지 않습니다. Markdown에서 이미지를 삽입할 때 ![이미지 설명](이미지 주소)의 형태로 입력하면 <img src="이미지 주소" alt="이미지 설명">로 변환됩니다. 이미지를 첨부할 때 첨부할 이미지가 HiDPI인지 아닌지 알 수 있게 이미지 설명 맨 앞에 (HiDPI)라는 문구를 삽입합니다.

Github Pages Jekyll 기준으로 /_layout/post.html은 글을 표시하는 레이아웃입니다. 여기에 JavaScript를 작성하게 될 것인데, img 요소 중 (HiDPI)라는 문구가 삽입되어 있는지 확인하고 width를 조정할 것입니다.


예제 코드

주석을 꼭 참고해 주세요.

// 사이트나 블로그에 img가 본문 외의 영역에도 사용되고 있을 수 있으니 본문에만 적용되게 합니다.
document.querySelectorAll('.donghoony1-v1.post .post-content img').forEach(element => {
    // 이미지의 설명 앞에 (HiDPI)가 있는지 확인합니다.
    if(element.alt.substring(0, 7) == '(HIDPI)') {
        // 이미지의 사이즈를 실제 해상도보다 작게 반으로 쪼갭니다.
        element.style.width = (element.naturalWidth / 2) + 'px';
        // 이미지 설명 앞에 있는 (HiDPI)를 제거합니다.
        element.alt = element.alt.substring(7, element.alt.length);
    }
});

참고 사항

width를 실제 이미지 해상도의 반으로 줄였을 때 실제 이미지 해상도의 절반 너비가 본문 영역의 너비보다 크면 이미지가 벗어나버릴 수 있습니다. max-width를 100%과 같이 적절히 조절하여 본문 영역을 넘치지 않게 설정해야 합니다.


마치며

CSS에 .parent .child의 형태로 있을 때 .parent 요소를 선택할 수 있게 해 주는 선택자가 있으면 좋을 것 같다는 생각이 듭니다. 얼마나 더 써먹을 데가 있을지는 잘 모르겠지만요. 하지만 본문에서의 발상을 하게 된 계기는 이러한 선택자가 없었기 때문입니다. 혹시라도 제가 모르고 있는 선택자가 있나 싶어서 다시 조사해 봐도 없었습니다.

여담

여담으로 필자가 C++를 자주 사용하다보니 JavaScript에서 substring() 함수의 인자를 착각하는 실수를 했었습니다. 본문에는 고쳐서 작성했습니다만, 원래 JavaScript에서의 인자는 substring(start pos, end pos) 이지만 C++에서는 substr(start pos, length) 입니다. 그래서 자연스럽게 substring(7, element.alt.length - 7)을 사용했었네요…