블로그스팟에 글을 작성하다 보면 이미지도 함께 넣어야 하는지 고민하게 됩니다. 썸네일도 만들어야 할 것 같고, 본문에는 몇 장을 넣어야 하는지, 이미지 파일명이나 대체 텍스트까지 신경 써야 하는지도 처음에는 헷갈릴 수 있습니다.
이미지는 글을 꾸미기 위해 무조건 많이 넣는 것보다 실제로 내용을 이해하는데 도움이 될 때 사용하는 것이 좋습니다. 설정 방법을 설명하는 글이라면 필요한 화면을 캡처해서 보여 줄 수 있고, 글만으로 충분히 설명되는 내용이라면 본문 이미지를 억지로 추가할 필요는 없습니다.
저도 현재 블로그스팟 관련 글을 작성하면서 썸네일은 게시물마다 일정한 형식으로 만들고 있지만, 본문 이미지는 필요한 경우에만 넣고 있습니다. 이번 글에서는 제가 실제로 사용하는 방식과 함께 WebP 이미지, 파일명, 대체 텍스트를 어떻게 관리하면 좋은지 정리해 보겠습니다.
블로그스팟 이미지 최적화란?
이미지 최적화라고 하면 어렵게 느껴질 수 있지만, 기본적인 목적은 단순합니다. 글에 필요한 이미지를 적절한 형식과 크기로 사용하고, 이미지가 무엇을 보여 주는지 검색엔진과 방문자가 이해할 수 있도록 정보를 정리하는 것입니다.
Blogger에 업로드한 이미지는 웹에 맞게 압축되거나 최적화될 수 있습니다. 그렇더라도 업로드하기 전부터 지나치게 큰 이미지를 사용하지 않고, 용도에 맞는 파일 형식과 이름을 사용하는 습관을 들이면 이미지 관리가 편해집니다.
이미지 최적화만으로 검색 순위나 Google AdSense 승인이 결정되는 것은 아닙니다. 중요한 것은 이미지가 본문의 내용을 보완하고 방문자가 글을 이해하는 데 실제로 도움이 되는지입니다.
블로그 글마다 이미지를 꼭 넣어야 할까?
모든 게시물에 본문 이미지를 반드시 넣어야 하는 것은 아닙니다. 글의 주제에 따라 이미지가 필요한 경우와 그렇지 않은 경우를 구분하는 것이 좋습니다.
예를 들어 Blogger 설정 화면에서 특정 메뉴를 찾아야 하는 글이라면 실제 화면을 보여 주는 이미지가 도움이 됩니다. 반면 내부링크의 개념이나 글 작성 기준처럼 설명만으로 충분히 이해할 수 있는 내용이라면 이미지 없이도 글의 목적을 달성할 수 있습니다.
저도 지금까지 글을 작성하면서 이 기준으로 이미지를 선택하고 있습니다. 라벨 설정 글에서는 독자가 실제로 라벨 입력 위치를 확인할 수 있도록 Blogger 게시물 작성 화면을 캡처해 넣었습니다. 반대로 내부링크를 설명하는 글에서는 이미지가 없어도 내용을 이해하는 데 문제가 없다고 판단해 별도의 본문 이미지를 넣지 않았습니다.
결국 이미지 개수를 맞추기보다 글을 읽는 사람에게 필요한지를 먼저 판단하는 것이 좋습니다.
WebP 이미지란?
WebP는 웹에서 사용할 수 있는 이미지 파일 형식 중 하나입니다. Google 검색에서도 WebP 이미지를 지원하고 있으며 PNG, JPEG, GIF 등과 함께 사용할 수 있습니다.
WebP는 이미지의 내용과 변환 설정에 따라 기존 PNG나 JPEG보다 파일 용량을 줄일 수 있는 경우가 있습니다. 이미지 용량이 줄어들면 페이지에서 전송해야 하는 데이터도 줄일 수 있기 때문에 블로그용 이미지 형식으로 활용하기 좋습니다.
다만 WebP라고 해서 모든 이미지가 무조건 더 작아지는 것은 아닙니다. 원본 이미지의 종류와 압축 설정에 따라 결과가 달라질 수 있으므로 변환한 뒤 실제 파일 용량과 화질을 확인하는 것이 좋습니다.
저는 현재 게시물마다 동일한 디자인 형식으로 썸네일을 만들고 있습니다. 처음 만든 이미지는 PNG 형식이라 게시 전에 WebP로 변환한 뒤 Blogger에 업로드해 사용하고 있습니다.
WebP로 변환한 뒤에는 파일명도 게시물의 주제를 알아볼 수 있도록 정리해서 저장합니다. 이렇게 해두면 나중에 이미지를 다시 찾을 때도 어떤 글에 사용한 파일인지 쉽게 구분할 수 있습니다.
이미지 파일명은 어떻게 정하면 좋을까?
카메라나 이미지 편집 프로그램에서 생성된 파일은 숫자나 임의의 이름으로 저장되는 경우가 많습니다. 그대로 사용하기보다는 이미지가 무엇을 보여 주는지 알 수 있도록 짧고 설명적인 이름으로 바꿔 두는 것이 좋습니다.
Google에서도 이미지 파일 이름은 이미지의 주제를 파악하는 데 가벼운 단서가 될 수 있다고 안내하고 있으며, 가능한 경우 짧으면서 설명이 담긴 파일명을 사용하는 것을 권장합니다.
예를 들어 다음처럼 정리할 수 있습니다.
- IMG00125.png보다 블로그스팟-라벨-설정-화면.png
- image1.webp보다 블로그스팟-내부링크-넣는-방법.webp
파일명에 검색 키워드를 반복해서 길게 넣을 필요는 없습니다. 이미지의 내용을 알아볼 수 있을 정도로 짧고 명확하게 작성하면 충분합니다.
Blogger의 대체 텍스트는 무엇일까?
대체 텍스트(ALT)는 HTML의 alt 속성에 들어가는 이미지 설명입니다. 일반적인 방문자가 블로그를 볼 때는 이미지 아래에 표시되지 않기 때문에 처음에는 왜 입력해야 하는지 헷갈릴 수 있습니다.
ALT는 이미지를 직접 보기 어려운 환경에서 이미지의 의미를 전달하는 역할을 합니다. 예를 들어 화면 읽기 프로그램을 사용하는 방문자는 ALT를 통해 이미지가 어떤 내용을 보여 주는지 이해할 수 있습니다. 이미지가 정상적으로 표시되지 않는 상황에서도 이미지의 내용을 파악하는 데 도움이 될 수 있습니다.
또한 Google이 이미지의 주제를 이해하는 데 참고하는 정보 중 하나이기도 합니다. Google은 ALT뿐 아니라 이미지 주변의 본문, 파일명, 페이지 전체의 문맥 등을 함께 활용해 이미지의 내용을 파악합니다.
따라서 ALT는 단순히 검색을 위한 설정이라기보다 이미지의 내용을 더 명확하게 전달하기 위한 정보라고 이해하면 됩니다.
블로그스팟에서 대체 텍스트 입력하는 방법
Blogger 글 작성 화면에서 이미지의 ALT를 설정하려면 먼저 게시물에 삽입한 이미지를 선택합니다. 이미지를 선택하면 편집 메뉴가 나타나는데, 오른쪽에 있는 톱니바퀴 모양의 설정 아이콘을 누르면 이미지 수정 화면으로 이동할 수 있습니다.
이미지 수정 화면의 ‘대체 텍스트’ 항목에는 해당 이미지가 무엇을 보여 주는지 알 수 있도록 짧고 구체적인 내용을 입력합니다. 작성을 마친 뒤 업데이트를 누르면 ALT 설정이 저장됩니다.
 |
| Blogger 이미지 수정 화면의 대체 텍스트 입력 항목 |
정리하면 이미지 선택 → 설정 아이콘 → 이미지 수정 → 대체 텍스트 입력 → 업데이트 순서로 설정하면 됩니다.
저도 본문에 캡처 이미지를 넣을 때는 업로드만 하고 끝내지 않고 이미지 수정 화면에서 대체 텍스트를 함께 입력하고 있습니다. 처음에는 Blogger의 ‘대체 텍스트’가 무엇을 의미하는지 헷갈릴 수 있지만, 이 항목이 이미지의 ALT를 입력하는 곳이라고 이해하면 됩니다.
대체 텍스트는 어떻게 작성하면 좋을까?
ALT를 작성할 때는 이미지를 보지 못하는 사람에게 “이 이미지에는 무엇이 보이는가?”를 설명한다고 생각하면 쉽습니다. 길게 작성하기보다는 이미지의 핵심 내용을 짧고 구체적으로 표현하는 것이 좋습니다.
예를 들어 Blogger 글 설정 화면에서 라벨 메뉴를 보여 주는 이미지라면 다음과 같이 작성할 수 있습니다.
블로그스팟 게시물 라벨 설정 화면
화면 캡처라면 어떤 메뉴나 설정을 보여 주는지 설명하고, 썸네일이라면 이미지에 담긴 게시물의 주제를 간단하게 적을 수 있습니다.
반대로 ‘블로그스팟, Blogger, 라벨, SEO, 애드센스, 블로그 설정’처럼 관련 키워드를 나열하거나 모든 이미지에 같은 ALT를 반복해서 사용하는 것은 피하는 것이 좋습니다. 검색 키워드를 많이 넣는 것보다 각각의 이미지가 실제로 무엇을 보여 주는지 정확하게 설명하는 것이 중요합니다.
화면 캡처 이미지를 사용할 때 확인할 것
Blogger 설정 방법을 설명하다 보면 직접 화면을 캡처해 사용하는 경우가 있습니다. 이때는 업로드하기 전에 이미지 안에 공개하면 안 되는 정보가 포함되어 있지 않은지 확인하는 것이 좋습니다.
- 이메일 주소나 계정 정보가 보이지 않는지 확인합니다.
- 도메인 관리 화면이라면 불필요한 관리 정보가 노출되지 않았는지 확인합니다.
- 설명에 필요하지 않은 화면은 적당히 잘라냅니다.
- 이미지가 너무 작아서 글자를 읽기 어렵지 않은지 확인합니다.
- 캡처 이미지에도 내용에 맞는 대체 텍스트를 작성합니다.
저도 라벨 설정 화면을 사용할 때 전체 Blogger 작성 화면을 그대로 넣기보다 실제로 설명해야 하는 오른쪽 ‘글 설정’ 영역이 잘 보이도록 이미지를 잘라서 사용했습니다. 이렇게 하면 독자가 어디를 봐야 하는지 더 쉽게 알 수 있습니다.
이미지 크기와 화질은 어떻게 정할까?
이미지는 무조건 크게 올리는 것보다 블로그 본문에서 실제로 필요한 크기를 고려하는 것이 좋습니다. 원본이 지나치게 크면 불필요한 데이터가 늘어날 수 있고, 반대로 너무 작게 압축하면 글자나 설정 화면을 알아보기 어려울 수 있습니다.
Blogger에 업로드된 이미지는 웹에 맞게 압축 및 최적화될 수 있습니다. 따라서 정확한 픽셀 수를 모든 이미지에 똑같이 적용하기보다는 PC와 모바일에서 실제로 확인했을 때 내용이 선명하게 보이는지를 확인하는 것이 실용적입니다.
설정 화면처럼 작은 글자가 들어간 캡처라면 지나친 압축으로 글자가 흐려지지 않는지도 확인해 보는 것이 좋습니다.
블로그 이미지를 사용할 때 자주 하는 실수
필요하지 않은 이미지를 많이 넣는 경우
이미지가 많다고 해서 글의 품질이 높아지는 것은 아닙니다. 본문의 이해에 도움이 되지 않는 이미지는 오히려 읽는 흐름을 방해할 수 있습니다.
모든 이미지에 같은 ALT를 사용하는 경우
ALT는 각각의 이미지가 무엇을 보여 주는지 설명해야 합니다. 같은 키워드나 문구를 모든 이미지에 반복해서 넣는 방식은 피하는 것이 좋습니다.
의미 없는 파일명을 그대로 사용하는 경우
IMG1234.png처럼 내용을 알기 어려운 이름보다는 이미지의 주제를 알아볼 수 있는 파일명으로 정리하면 관리하기도 편합니다.
WebP 변환만으로 최적화가 끝났다고 생각하는 경우
WebP로 변환했더라도 파일 크기와 화질, 이미지 표시 크기, ALT 등을 함께 확인해야 합니다. 파일 형식 하나만으로 이미지 관리가 끝나는 것은 아닙니다.
화면 캡처에 개인정보가 포함되어 있는 경우
Blogger나 도메인 관리 화면을 캡처할 때는 이메일 주소, 계정 정보 등 공개할 필요가 없는 내용이 보이지 않는지 업로드 전에 확인하는 것이 좋습니다.
자주 묻는 질문
Blogger에서는 WebP 이미지를 사용할 수 있나요?
WebP는 웹에서 널리 사용되는 이미지 형식이며 Google 검색에서도 지원합니다. Blogger에 사용할 때는 업로드 후 실제 게시물에서 이미지가 정상적으로 표시되는지 확인하면 됩니다.
모든 이미지를 WebP로 바꿔야 하나요?
반드시 모든 이미지를 WebP로 사용해야 하는 것은 아닙니다. PNG와 JPEG 등도 사용할 수 있습니다. 저는 현재 썸네일을 WebP로 변환해서 사용하고 있지만 이미지의 용도와 화질을 고려해 적절한 형식을 선택하면 됩니다.
대체 텍스트와 이미지 설명은 같은 것인가요?
같은 것은 아닙니다. 대체 텍스트는 이미지의 내용을 HTML의 alt 속성으로 설명하는 정보이고, 이미지 설명이나 캡션은 방문자가 화면에서 직접 볼 수 있는 설명 문구입니다.
본문에 이미지는 몇 장 넣는 것이 좋나요?
정해진 개수는 없습니다. 글을 이해하는 데 필요한 이미지가 있다면 사용하고, 이미지 없이도 충분히 설명되는 글이라면 억지로 추가할 필요는 없습니다.
파일명에 키워드를 많이 넣으면 검색에 더 좋은가요?
키워드를 많이 반복하는 것보다 이미지 내용을 짧고 정확하게 설명하는 것이 좋습니다. 파일명 역시 실제 이미지를 구분할 수 있을 정도로 자연스럽게 작성하면 충분합니다.
마무리
블로그스팟 이미지 최적화는 특별한 기술을 많이 적용하는 작업이라기보다 필요한 이미지를 적절하게 사용하고, 파일명과 대체 텍스트를 알아보기 쉽게 정리하는 과정에 가깝습니다.
저는 현재 썸네일을 WebP 형식으로 변환하고 게시물 주제에 맞는 파일명을 사용하고 있습니다. 본문 이미지는 글마다 무조건 추가하지 않고, Blogger 설정 화면처럼 직접 보여 주는 것이 도움이 될 때만 캡처해서 넣고 있습니다.
이미지를 넣었다면 대체 텍스트도 함께 확인해 보세요. 이미지의 개수나 특정 형식 자체에 집중하기보다 독자가 글을 더 쉽게 이해할 수 있는지를 기준으로 관리하는 것이 가장 자연스럽습니다.
관련 글
공식 참고 자료
Google Blogger 고객센터 이미지 검색 및 대체 텍스트 안내
Google 검색 센터 이미지 검색엔진 최적화 권장사항
0 댓글