구글 블로그 스팟 썸네일 이미지를 내 마음대로 넣어보자

한국의 블로그만 하던 사람이 구글 블로그를 접하면 당황스러운 것이 기능이 너무 없다는 것이다. 그중 한 가지가 썸네일 이미지를 내 맘대로 지정할 수 없다는 것. 그래서 이번엔 썸네일 이미지에 대해 몇자 적어본다.

1. 구글 블로그가 인식하는 썸네일용 이미지

구글 블로그는 무조건 첫 번째에 나온 이미지를 썸네일용 이미지로 인식을한다. 그리고 썸네일용 이미지로 인식했다고 해도 그게 항시 고정이 아니라 포스팅을 올리고 나서 나중에 맨 위에 (기존의 첫번째 이미지 위로) 이미지를 넣으면, 다시 그 첫 번째 이미지를 썸네일 이미지로 인식을 한다.

구체적인 내용은 모르겠지만 게시물 목록을 로딩할때 첫번째 이미지를 보고 썸네일 이미지가 없으면, 썸네일 이미지를 생성하고, 썸네일 이미지랑, 첫번째 이미지가 다른경우 새로운 첫번째 이미지로 썸네일 이미지를 재 생성해서 저장 하는것 같다.

2. 구글 블로그가 이미지를 저장하는 방식

구글 블로그에 이미지를 삽입하면 이미지는 https://blogger.googleusercontent.com/ 의 주소로 올라가는데, 우리가 알 수 없는 코드 뒤에 이미지의 크기를 접미어로 붙여서 저장을 한다.

아마도 첫 번째 이미지가 바뀌었는지의 판단은 파일 이름이 아닐까 싶다. 필자도 잘 아는것은 아니지만 뜯어보니 썸네일로 만들어진 이미지 파일이름 뒤에 "w385-h253-p-k-no-nu" 이런 접미사가 붙어 있는 것을 확인했다.

딱 봐도 385x253 픽셀이 구글 블로그가 저장하는 썸네일 이미지 크기이다. 물론 스킨에 따라 보여지는 썸네일 이미지 크기는 다를 수 있다. 아무튼 이 크기는 잘 기억해 두자

이것은 스킨마다 필요한 크기로 저장한다. 접미사도 해당 이미지 크기로 저장한다

(23.08.27 수정)

3. 썸네일용 이미지 넣기

구글 블로그는 편집기를 두가지를 제공한다. 글 쓰기에 들어가면 좌측상단 맨 왼쪽 아이콘을 눌러보자 보통 "새글 작성 보기" 모드를 사용할 것이다. 여기서 시작하면 된다.

구글 블로그의 2가지 편집기 (HTML보기와 새글 작성 보기)

글을 대충 몇 줄 넣어주고 미리 만들어 놓은 썸네일 이미지를 넣어보자. 여기서 중요한게 썸네일 이미지 크기는 위에서 봤던 385x253픽셀로 만들어 주자 어차피 썸네일용으로만 쓸 것이기 때문에 쓸데없이 크게 만들 필요가 없다.

썸네일용 이미지 밑에 본문을 작성해 나가면 된다.

4. 코드 수정

글이 작성이 다 되었다면, 게시하기 전에 편집기를 html 보기로 바꾸자 바꾸면 모든 문장이 띄어쓰기도 없이 다 뭉쳐 있는 것을 볼 수 있다. html을 잘 모르는 분은 막막할 수 도 있다.

구글 블로그는 이미지를 삽입하면 몇 가지 코드를 자동으로 생성한다. 아래와 같은 코드를 생성하는데, 물론 친절하게 저렇게 줄을 바꿔서 넣어주지는 않고 한 줄로 이어서 생성한다.

1
2
3
4
5
<div class="separator" style="clear: both; text-align: center;">
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTInw_tUOh_THjA0CgsKBohmlQ-cjTphFqiBZ8fH5v-ocIeFRmPVlBcZGFhqPS_ZkSAvk_ufeJfwQXq16O7NdqWzkoMEXwqYUqtxcn6yIegGhZT-MIYL5eT0H28LkmG1TmZux9aaX2zNkuS59I9yxtigsLTsGg7oEIUT-il4Hc1lugR4VZFVlkJdrlm46X/s350/thum_img_14.jpg" style="margin-left: 1em; margin-right: 1em;">
  <img border="0" data-original-height="230" data-original-width="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTInw_tUOh_THjA0CgsKBohmlQ-cjTphFqiBZ8fH5v-ocIeFRmPVlBcZGFhqPS_ZkSAvk_ufeJfwQXq16O7NdqWzkoMEXwqYUqtxcn6yIegGhZT-MIYL5eT0H28LkmG1TmZux9aaX2zNkuS59I9yxtigsLTsGg7oEIUT-il4Hc1lugR4VZFVlkJdrlm46X/s16000/thum_img_14.jpg" />
 </a>
</div>
Colored by Color Scripter
cs

여기서 우리가 지울것은 <div ------------> 부분을 전부 지우고 세트인 </div>지우고, <a --------->와 세트인</a>를 지운다.

즉 3행에 해당하는 <img --------->만 남겨두고 다 지우면 된다.

그리고 <img 태그에서도 불필요한 부분이 있는데 ~~border="0" data-original-height="230" data-original-width="350" 이라고 된 것도 다 지우자~~ 불필요 하지만 안지워도 상관없다(23.08.27 수정)

그러면 순수하게 <img>태그 안에는 src=" 로 시작하는 이미지 주소만 남았을 것이다.

이제 하나 남았다 <img> 태그 맨 뒤에는 "/>"로 마감이 되어 있는데 이 슬레시(/) 앞에 코드 하나만 추가하자

style="display: none;"

이 태그는 화면상에 표시하지 말라는 CSS로 화면상에는 보이지 않지만 구글 블로그는 코드를 보기 때문에 첫 번째 이미지로 인식을 한다.

뭔가 좀 복잡해 보이지만 정리하면

구글블로그는 이미지를 넣으면 이미지를 정렬하기 위한 <div> 태그, 이미지를 클릭했을 때 이미지를 확대해서 보여주기 위한 <a>태그, 본문에 이미지를 보여주기 위한 <img> 태그를 자동으로 생성한다.
<img> 태그를 제외한 두 태그는 모두 지운다.
~~<img> 태그 안에 있는 이미지 설정 태그를 지운다.~~ 안지워도 된다. (23.08.27 수정)
<img> 태그 맨 뒤에 style="display: none;" 코드를 넣는다.

즉 <img src="파일주소" style="display: none;" /> 형태로 코드가 만들어 진다.

5. 마치며

사실 알고 보면 간단한 건데 장황하게 설명한 건 혹시라도 완전 초보 블로거가 볼 수도 있다는 생각 때문이다. 그리고 구글 블로그에 조금이라도 익숙해지셨으면 하는 바람에서 구글이 어떤 식으로 인식하는지 장황하게 늘어놨다.

정말 자료가 별로 없어서 구글 블로그를 운영한다는 게 참 쉽지 않은 것 같다.

Breaking