블로그스팟 본문에 사진 이미지 넣는 방법 총정리

​

블로그스팟 글쓰기 하면서 중간에 이미지 넣는 법에 대해서 자세히 알아보겠습니다. 티스토리 편집기에 익숙하신 분들은 블로그스팟의 사진 넣는 법이 처음에는 어색하실 수 있는데요, 쓰다보면 블로그스팟 또한 익숙해집니다. 이미지를 원하는 순서대로 넣는 법과 사이즈 조절 방법, 알트 태그 넣는 방법까지 한번만 상세히 익혀보세요. 세계 최대 IT기업 구글의 플랫폼에 내 블로그를 만들어가는 기쁨을 느끼실 수 있습니다.

블로그스팟 사진 이미지 넣는 방법 

본문에 드래그 앤 드롭으로 이미지를 넣을 수 있는 티스토리나 네이버 블로그를 쓰다가 한 두개의 팝업창을 거쳐야 이미지를 넣을 수 있는 블로그스팟과 워드프레스를 쓰면 처음에는 번거롭게 느껴지긴 합니다. 하지만 저도 어느새 익숙해져서 사진이 수십 장인 포스팅을 벌써 20개 넘게 썼네요. 

이 글 하나만 해도 10장이 넘는 사진이 들어갔습니다. 하지만 티스토리에 쓰듯이 아주 편하게 포스팅을 완료했습니다. 뭐든지 처음만 어색하고 불편하게 느껴지지 익숙해지면 처음의 불편함은 어느새 잊는 게 인간의 특성인 것 같습니다. 

블로그스팟 사진 넣을 때 꿀팁 2가지  

이 블로그 글들만 보셔도 아시겠지만 이 블로그에는 포스팅 하나에 사진 10~20장이 기본으로 들어간 글들만 계속 발행해왔습니다. 직접 해보면서 체득한 꿀팁 2가지를 우선 알려드릴게요. 

1. 글쓰기 전에 이미지 한번에 다 넣기 

이미지가 많으면 글쓰기 전에 이미지부터 한 번에 다 넣어주세요. 글을 다 쓴 다음 글 사이사이에 이미지를 넣으려면 많이 귀찮아집니다.  이건 직접 해보시면 알게되는데, 이미지 하나 넣을때마다 이미지 편집창을 열어야 하기 때문입니다. 

글을 다 쓰고 본문 사이사이 드래그 앤 드랍으로 이미지를 끼워넣으면 되는 네이버 블로그나 티스토리를 생각하시면 블로그스팟은 이미지 넣는게 불편한게 맞습니다. 그래서 나름 블로그스팟에 이미지 많은 글을 쓰기 위해 생각한 방식이 이미지가 많은 포스팅은 이미지부터 넣고 그 사이 사이 글을 쓰는 것입니다. 이렇게 하면 이미지 넣는 것 때문에 스트레스 받으실 일 없어요. 

2. 이미지 복붙 말고 글 복붙하기

그런데 어쩔 수 없이 글을 다 쓰고 이미지를 넣어야하는 불가피한 상황도 있죠. 이럴 때도 역시 이미지를 한 번에 다 넣어주세요. 그리고나서 이미지를 글 사이사이로 복붙해서 옮기지 마시고, 이미지 사이사이로 글을 복붙해서 넣어주세요. 

본문에 넣은 사진을 복사해서 옮기면 오류가 많이 납니다. 티스토리나 네이버블로그에서는 한 번 자리잡은 이미지를 다른데로 옮기고 싶을 때 복사해서 원하는 위치에 붙여넣기해도 오류나는 일이 없었는데 블로그스팟에서 그렇게 하면 이미지 정렬이 안 맞는다거나 원하는 위치에 제대로 안 들어가는 등 오류가 자주 납니다. 

이 두 가지만 지키셔도 블로그스팟에 글쓰는 게 훨씬 수월하게 느껴지실거예요. 

블로그스팟 이미지 넣는 방법 

이제 진짜 본론으로 들어가겠습니다. 

글쓰기 창에서 글을 다 쓰고 이미지를 넣으셔도 되고, 글쓰기 전에 이미지부터 다 넣으셔도 됩니다. 저는 이미지가 많은 글이라면 포스팅에 넣을 이미지를 다 선정하고 이미지부터 다 넣고 그 다음에 글을 씁니다. 이것저것 해보시고 편한 방식을 선택하시면 됩니다.

편집기 상단 툴바에서 이미지 아이콘을 선택해주세요.  

목록에서 [컴퓨터에서 업로드]를 선택하시면 팝업이 하나 뜹니다. 

이미지 추가 팝업 

이미지 추가 팝업에서 [파일 선택]버튼을 눌러주세요.  

포스팅에 넣을 이미지가 있는 폴더로 가셔서 이미지를 선택해주세요. 하나만 선택하셔도 되고 여러장을 한 번에 선택하셔도 됩니다. 

이때, 순서대로 넣으셔야한다면 폴더에서 먼저 이미지가 순서대로 정렬되게 파일명을 바꿔주세요. 파일명 순서대로 블로그스팟 편집기에 넣으실 수 있습니다. 

이미지를 선택하셨으면 [열기]버튼을 눌러주세요. 

이미지 순서대로 넣는 방법 

넣고싶은 순서대로 사진을 선택해주세요. 

파일명자체를 순서대로 입력해두시는 것도 중요하지만 블로그스팟의 이미지 추가창에서 이미지를 한 번 순서대로 선택주시는 것도 중요합니다. 

보기에는 순서대로 들어온 것 같은데 그대로 맨 밑에 [선택]을 누르시면 본문에는 랜덤하게 이미지가 표시되기도 하거든요. 

그래서 위의 화면대로 이미지를 불러오기가 완료됐다면 이미지를 순서대로 한번씩 누른 다음 [선택]버튼을 눌러주셔야 원하는 순서대로 이미지가 본문에 표시됩니다. 

이미지 사이즈 조절 방법

위의 방법대로 본문에 이미지가 들어온 걸 보면 처음에 당황하실 수 있습니다. 블로그스팟 기본값으로 셋팅된 디폴트 이미지 사이즈는 매우 작은 편이거든요. 

이미지를 넣으면 본문 폭의 2분의 1밖에 안 되는 사이즈로 들어옵니다. 

블로그 포스팅 목적에 따라 사이즈를 변경하시면 됩니다. 포스팅 미리보기를 이용해서 보기 좋은 정도로 가로폭 설정하시면 됩니다.  

아래에서 보시는 것처럼 이미지 사이즈는 작게 / 중간/ 크게 / 매우 크게 / 원본 사이즈로 조절이 가능합니다. 

원본 크기는 잘 안씁니다. 사이드바가 있는 테마에서는 오류가 자주 나더라구요. 

이렇게 정해진 사이즈를 선택하셔도 되고, 아래 방법대로 이미지를 잡고 늘렸다 줄였다하는 방식으로도 이미지 사이즈를 조절하실 수 있습니다.

이미지를 잡고 늘려도 해상도는 안 깨집니다.

사진 알트 태그 alt tag 넣는 법

우선 알트 태그를 왜 넣어야하는지에 대해서 알고 가는 것이 좋습니다. 원래는 시각 장애인을 위해 이미지마다 설명을 하기 위한 용도로 사용되었는데 이제는 SEO에서도 중요한 요소가 되었습니다. 사진에 대한 상세한 설명이 있으면 검색엔진에서 알아보기 더 쉽기 때문이죠. 검색엔진에서 우리 블로그의 포스팅에 대해서 세세히 파악이 가능할수록 더 높은 SEO점수를 주고 그게 상단노출에 유리한 것은 이제 많은 분들이 아는 사실입니다. 

alt tag 알트 태그 넣을 때 한글은 단어 사이 하이픈 넣는게 로봇이 인식하기 좋습니다. 그리고 알트 태그 내용은 최대한 자세하게 넣을수록 검색엔진이 좋아합니다.

이미지를 클릭하시면 작은 툴바가 하나 뜹니다.  

여기서 맨 오른쪽에 톱니바퀴 모양의 아이콘이 이미지 수정 기능인데 이걸 누르면 알트 태그인 대체 텍스트를 수정할 수 있는 팝업이 아래와 같이 뜹니다. 

블로그스팟에서는 사진의 알트 태그를 ’대체 텍스트‘라고 표현하고 있습니다. 이 부분에 영어든 한글이든 최대한 자세하게 사진 속 느낌이나 사물에 대해서 묘사하듯이 적어줍니다. 중간에 하이픈 넣는 것 잊지 마시구요. 작성을 다 하시면 [업데이트]를 눌러주시면 알트 태그 입력은 끝입니다. 

사실 이 작업도 꽤 시간이 걸리기 때문에 사진을 최소로 넣는 것을 추천합니다. 특히 워드프레스에서도 사진마다 이렇게 알트 태그 넣는 작업을 다 해주셔야하는데 용량 문제도 있지만 이 알트 태그 넣기 힘들어서라도 사진을 1~2장만 넣으려고 노력하고 있습니다. 특히 워드프레스는 포스팅 하나의 용량이 커질수록 서버비도 더 내야하는 구조이기에 워드프레스에는 사진 많이 넣지 않는걸 많은 분들이 추천하는 이유입니다.  

사진 용량 줄이는 법

SEO에서 중요한 것은 포스팅 자체의 용량이 작아야한다는 것입니다. 누군가 우리 블로그에 들어올 때는 데이터를 사용합니다. 우리 블로그를 사용자의 컴퓨터에 띄우기까지 데이터를 사용하는데 사진 용량이 클수록 사용자 컴퓨터에 띄우기까지 데이터를 많이 씁니다. 

그래서 검색엔진은 같은 내용이라면 사진 용량이 적은 포스팅을 선호하고 더 높은 SEO점수를 줘서 우리 글을 먼저 노출시켜줄 확률이 높아집니다.

포스팅하실 때 사진 용량을 가능한 최소로 줄여서 업로드 하셔야 하는 이유입니다. 그렇다고  해상도가 너무 깨져서 사람들이 보기 불편할 정도가 되면 안되겠지요. 보기에 괜찮을 정도로 해상도는 유지하고 용량은 가능한 한 최소로 줄여주는 웹사이트를 소개합니다. 바로 tinypng.com 입니다. 

tinypng.com 접속 (무료) 

tinypng.com으로 들어가시면 회원가입 같은거 필요없이 바로 이용하실 수 있습니다. 첫화면의 ‘file here' 칸에 용량을 줄이고 싶은 이미지를 드래그 앤 드랍 방식으로 넣으시면 됩니다.

그럼 바로 이미지 사이즈를 줄여주고 오른쪽에 다운로드 버튼이 생겨요. 

최소 1/3~1/10까지도 사진 용량을 줄여주는 사이트

비포 애프터 용량을 보시면 워낙 작은 이미지는 그렇다쳐도 1.8MB의 사진을 667KB 로 3분의 1로 줄여준걸 보실  수 있습니다. 이 사이트를 이용하면 기본 1/3에서 1/10까지도 자동으로 줄여준다고 생각하시면 됩니다. 이렇게 확 용량을 줄여도 웹사이트에서 보기 불편한 정도가 아니라서 딱 좋습니다. tinypng.com사이트 이용은 무료입니다. 한 번에 20장까지 올릴 수 있구요. 

디자이너도 포토샵보다 많이 쓰는 사이트

저는 디자인을 전공했고 졸업 후에도 디자인 업무를 하고 있어서 포토샵을 수십 년을 쓰고 있지만 블로그 사진 용량 줄일 때는 이 사이트를 가장 많이 이용합니다. 일단 사진 한 두장 용량 줄이자고 무거운 포토샵을 켜는 것부터 번거로운 것도 있지만, 포토샵에서는 해상도가 안 깨지는 선에서 어디까지 줄여도 될지 일일히 여러 경우로 체크해봐야하거든요. 

이렇게 웹에서 최적의 해상도로 최소한의 용량까지 알아서 줄여주는 이미지 편집 사이트를 사용해보시면 블로그 작성이 한결 편해지실거예요.