썸네일 이미지를 선명하고, 내가 원하는 데로 지정하는 방법

블로그스팟에서 원하는 이미지로 대표 썸네일을 만드는 방법과 업로드한 이미지의 품질을 보존하는 방법을 소개합니다. 많은 블로거들이 글쓰기를 할 때 이미지와 관련된 여러 문제로 불편함을 겪곤 합니다. 이번 글에서는 이러한 문제를 해결하는 방법을 단계별로 안내하겠습니다.

썸네일 설정의 어려움

Blogger에서 게시물을 작성할 때, 썸네일은 기본적으로 가장 처음 업로드된 이미지로 자동 설정됩니다. 하지만 이 과정에서 몇 가지 문제가 발생할 수 있습니다.

업로드된 이미지의 화질이 떨어져 흐릿하게 보입니다.
원본 크기를 선택하면 이미지가 본문 밖으로 탈출해 버립니다.

이러한 문제를 해결하기 위해서는 HTML 편집 모드에서 직접 수동으로 수정해야 합니다. 편집기에서 몇 번의 클릭으로 해결할 수 있는 방법은 없으니, 약간의 인내가 필요합니다.

썸네일을 내 마음대로 지정하기

썸네일 이미지를 원하는 대로 설정하려면 다음 단계를 따라주세요:

게시물 편집기에서 아이콘 클릭: 게시물 편집기 화면의 가장 왼쪽에 있는 아이콘을 클릭합니다.
HTML 보기 선택: 'HTML 보기'를 선택합니다.

썸네일 이미지 업로드: 썸네일로 사용할 이미지를 상단에 업로드합니다. 이때 업로드된 이미지는 아래와 같은 형식으로 표시됩니다.

<div class="separator" style="clear: both;">
    <a href="https://이미지경로/s1280/image.webp" style="display: block; padding: 1em 0; text-align: center;">
        <img alt="" border="0" width="1280" data-original-height="720" data-original-width="1280" src="https://이미지경로/s1280/image.webp"/>
    </a>
</div>

CSS 수정: 위 코드에서 style="display: block; padding: 1em 0; text-align: center; 뒤에 display: none;을 추가합니다. 수정된 코드는 다음과 같습니다.

<div class="separator" style="clear: both;">
    <a href="https://이미지경로/s1280/image.webp" style="display: block; padding: 1em 0; text-align: center; display:none;">
        <img alt="" border="0" width="1280" data-original-height="720" data-original-width="1280" src="https://이미지경로/s1280/image.webp"/>
    </a>
</div>

저장 및 확인: 이제 글을 저장한 후 본문과 글 목록 페이지를 확인해 보세요. 썸네일이 원하는 대로 설정되었는지 확인할 수 있습니다.

더 간단한 방법

조금 더 간단한 방법으로 썸네일을 설정할 수도 있습니다.

Blogger 대시보드에서 테마 클릭: 대시보드에서 '테마'를 클릭합니다.
맞춤 설정 버튼 클릭: 맞춤 설정 버튼을 클릭합니다.
CSS 추가: '고급' 메뉴에서 'CSS 추가'로 이동하여 .hidden{display:none;}을 추가하고 저장합니다.

게시물 편집기에서 이미지 업로드: 이미지를 업로드할 때 생성되는 div에 hidden 클래스를 추가합니다. 예를 들어.

<div class="separator hidden" style="clear: both;">
    <a href="https://이미지경로/s1280/image.webp" style="display: block; padding: 1em 0; text-align: center;">
        <img alt="" border="0" width="320" data-original-height="192" data-original-width="192" src="https://이미지경로/s320/image.webp"/>
    </a>
</div>

업로드한 이미지 화질 보존하기

블로그스팟은 좋은 품질의 이미지를 업로드하더라도 저화질로 리사이즈해서 출력하는 경우가 많습니다. 원본 품질을 그대로 유지하기 위해서는 몇 가지 조치를 취해야 합니다. 물론, 이 작업은 썸네일 설정보다 훨씬 번거롭습니다. 하지만 품질을 포기할 수는 없죠.

이미지 품질 보존 방법

게시물 편집기에서 아이콘 클릭: 게시물 편집기 화면의 가장 왼쪽에 있는 아이콘을 클릭합니다.
HTML 보기 선택: 'HTML 보기'를 선택합니다.

이미지 업로드: 이미지를 업로드합니다. '새 글 작성 보기' 상태에서 업로드해도 괜찮지만, 어차피 다시 HTML 편집 모드로 돌아와야 하므로 HTML 편집 모드에서 작업하는 것을 추천합니다.

<div class="separator" style="clear: both;">
    <a href="https://이미지경로/s320/image.webp" style="display: block; padding: 1em 0; text-align: center;">
        <img alt="" border="0" width="320" data-original-height="192" data-original-width="192" src="https://이미지경로/s320/image.webp"/>
    </a>
</div>

URL 확인: 이미지 URL이 두 개인 것을 확인할 수 있습니다. a 태그가 ~~img~~ 태그를 감싸고 있습니다. a 태그를 지우고 ~~img~~ 태그만 남겨두면 라이트박스가 작동하지 않기 때문에 두 개의 URL을 그대로 두어야 합니다.
URL 수정: ~~img~~ 태그 URL에서 형광펜으로 표시된 부분을 s0으로 수정합니다. 이때, 이미지의 너비가 320px로 매우 작게 출력될 것입니다. 노란색 형광펜으로 표시된 width="320"의 값을 원본과 같거나 본문 너비 정도로 변경해 주세요.

미리 보기로 확인

이제 미리 보기를 통해 이미지의 품질과 크기를 확인해 보세요. 원하는 품질로 출력되었는지 확인하는 것이 중요합니다.

마무리

이번 글에서는 블로그스팟에서 썸네일을 마음대로 지정하고 이미지 품질을 보존하는 방법을 소개했습니다. 이러한 과정은 처음에는 번거롭게 느껴질 수 있지만, 한 번 익숙해지면 블로그에 대한 전반적인 품질을 향상하는 데 큰 도움이 될 것입니다. 여러분의 블로그가 더욱 매력적이고 전문적으로 보일 수 있도록 지속적인 관리와 개선을 해보세요.