블로그스팟 이미지 마스터 가이드 시리즈 개요
이번에는 이미지를 다루는 법에 대한 시리즈 글을 준비했습니다.
아래의 표처럼 3개 시리즈로 진행됩니다. 이 글은 두 번째 글입니다.
| 시리즈 제목 | 핵심 내용 |
|---|---|
| 1부. 이미지 준비 및 최적화 블로그 로딩 속도를 결정짓는 첫 단추 |
이미지 파일 형식 선택, 적정 해상도 및 크기 조절, SEO 친화적인 파일명 설정과 압축을 통한 로딩 속도 최적화 방법론을 다룹니다. 블로그의 성능을 높이는 이미지 사전 준비의 핵심을 배울 수 있습니다. |
| 2부. 블로그스팟 에디터 활용 팁 이미지를 원하는 위치와 모양으로 |
블로그스팟의 기본 에디터 및 HTML 모드를 활용한 이미지 배치·크기·정렬·캡션 추가와 대표 이미지 설정 방법을 다룹니다. 초보자도 이해하기 쉬운 실전 중심의 이미지 편집 가이드입니다. |
| 3부. 이미지 SEO와 UX 극대화 검색 결과 상위 노출 및 사용자 만족도 높이기 |
대체 텍스트(Alt Text) 작성법, 라이트박스 설정, 이미지 주변 텍스트 배치, 저작권 이슈 등 고급 활용 및 SEO/UX 최적화 전략을 다룹니다. 검색엔진 노출과 사용자 경험을 모두 강화하는 마스터 단계 가이드입니다. |
블로그스팟 이미지를 원하는 위치와 모양으로 자유롭게 다루는 법
여러분, 블로그를 하다 보면 “이미지 한 장 제대로 넣기가 이렇게 어려운 일이었나?” 싶을 때 있죠. 특히 블로그스팟(Blogger)을 쓰는 분들이라면, 이미지를 올릴 때마다 정렬이 틀어지거나, 원본 크기가 깨지거나, 모바일에서 이상하게 보이는 경험 한 번쯤은 있으실 겁니다.
사실 블로그스팟의 기본 에디터는 심플하고 직관적이지만, 디테일한 조정에는 약한 편이에요. 그래서 이번 2부에서는 “이미지를 마음대로 배치하고 조정하는 실전 팁”을 단계별로 정리했습니다. 어렵지 않아요. 조금만 익히면 누구나 ‘프로처럼’ 보이는 포스트를 만들 수 있습니다.
2.1. 기본 에디터로 이미지 삽입 및 조작
① 내 컴퓨터에서 업로드하기
에디터 상단 메뉴의 ‘사진 아이콘(풍경 모양)’을 클릭하면 “업로드” 탭이 나타납니다. 이곳에서 내 컴퓨터의 이미지를 선택하면 바로 본문에 삽입됩니다.
- 지원 형식: JPG, PNG, GIF 등 (WebP는 업로드 과정에서 변환될 수 있음)
- 권장 용량: 10MB 이하가 안정적
- 삽입 후 이미지를 클릭하면 “작게 / 중간 / 크게 / 원본 크기” 메뉴 표시
② URL을 통한 삽입
다른 사이트의 이미지를 링크로 불러올 수도 있지만, 출처 서버 정책 변경이나 로딩 실패로 이미지가 깨질 수 있습니다. 장기 보존이 필요하면 직접 업로드를 권장합니다.
③ 정렬과 기본 크기 조정
삽입된 이미지를 클릭하면 작은 퀵 메뉴가 뜨고, 여기서 정렬(왼/중앙/오)과 크기(소/중/대/원본)를 지정할 수 있습니다. 다만 이 크기는 대부분 px 단위 고정폭이라 모바일에서 너무 작거나 깨지는 일이 생길 수 있어요.
2.2. 이미지 크기 정밀 제어 (HTML 모드 활용)
① HTML 모드로 전환하기
에디터 오른쪽 상단의 <> HTML 보기를 클릭하면 이미지가 코드 형태로 보입니다:
<img src="이미지주소" width="400" height="300" />
② 크기(px) 대신 비율(%)로 지정
기기 폭에 맞추려면 style 속성으로 width:100%, height:auto를 사용하세요.
<img src="이미지주소" style="width:100%; height:auto;" />
- width:100% → 화면 폭에 자동 맞춤
- height:auto → 원본 종횡비 유지
- width·height를 동시에 px로 고정하면 반응형 깨짐 가능
③ 가운데 정렬
다음처럼 래퍼를 씌우면 쉽게 중앙 정렬됩니다.
<div style="text-align:center;"> <img src="이미지주소" style="width:80%; height:auto;" /> </div>
2.3. 이미지 나란히 배치하기 (2개 이상)
① float 방식 (간단·호환성 좋음)
<img src="img1.jpg" style="float:left; width:48%; margin-right:4%;" /> <img src="img2.jpg" style="float:left; width:48%;" /> <div style="clear:both;"></div>
- 두 이미지를 한 줄에 자연스럽게 배치
- 48% + 48% + 4% 여백으로 균형 유지
- 마지막 clear:both로 줄바꿈 정리
② flex 방식 (현대적·정렬 안정)
<div style="display:flex; gap:4%; justify-content:center;"> <img src="img1.jpg" style="width:48%;" /> <img src="img2.jpg" style="width:48%;" /> </div>
최신 브라우저에서 안정적으로 동작하고 정렬·간격 관리가 쉽습니다.
모바일 자동 줄바꿈이 필요하면 flex-wrap:wrap;을 추가하세요.
2.4. 캡션(Caption)과 이미지 테두리 활용
① 캡션 추가
이미지를 클릭하고 “캡션 추가(Add caption)”를 선택하면 하단에 설명 문구를 넣을 수 있습니다. HTML로는 다음처럼 구성해도 좋아요.
<figure> <img src="img.jpg" style="width:100%;"/> <figcaption>이미지에 대한 설명 문구</figcaption> </figure>
- <figcaption>은 구글이 문맥을 이해하는 데 도움을 줄 수 있습니다.
- 키워드는 자연스럽게 포함하세요. 과도한 반복은 역효과.
② 이미지 테두리
배경과 경계가 겹치는 경우 얇은 선만으로도 또렷해집니다.
<img src="img.jpg" style="border:1px solid #ddd; border-radius:6px;"/>
border-radius로 모서리를 살짝 둥글게 하면 한결 세련돼 보입니다.
2.5. 블로그스팟 대표 이미지 설정 팁
① 홈 썸네일 자동 선택 원리
블로그스팟은 보통 본문에 가장 먼저 등장한 이미지를 썸네일로 사용합니다. 대표로 쓰고 싶은 이미지는 서론 직후에 배치하세요.
② 메타태그로 명시
더 정확히 제어하려면 문서 상단(HEAD)에 다음 메타를 넣습니다.
<meta property="og:image" content="대표이미지주소.jpg"/> <meta property="twitter:image" content="대표이미지주소.jpg"/>
- og:image → 페이스북·카카오 등 SNS 미리보기
- twitter:image → X(트위터) 공유 썸네일
③ 대표 이미지 숨기기
상단에 노출하고 싶지 않다면 이렇게 숨길 수 있습니다.
<img src="대표이미지.jpg" style="display:none;" />
본문에는 보이지 않지만, 실제 로드가 이뤄지면 대표 이미지로 인식됩니다. 링크만 남기면 작동하지 않습니다.
마무리: ‘이미지 조작’은 디자인이 아닌 표현력
오늘 정리한 팁은 단순히 “예쁘게 올리는 법”이 아닙니다. 이미지는 글의 메시지를 시각화하는 도구죠. 정렬·크기·여백의 미세한 차이가 완성도를 바꿉니다.
블로그스팟처럼 간결한 에디터일수록, HTML·CSS를 곁들이면 결과물이 확 달라집니다. 반응형 원칙을 익히면 PC와 모바일 모두에서 안정적인 독서 경험을 제공할 수 있어요.
참고 자료 및 레퍼런스
| 출처 | 설명 |
|---|---|
| Blogger 공식 지원 페이지 | 블로그스팟 이미지 삽입 및 HTML 편집 관련 공식 가이드 |
| Google Developers | 검색 결과 노출 요소와 이미지·메타태그 가이드 |
| W3Schools | HTML 이미지 속성과 스타일링 기본 예제 |
댓글 쓰기