블로그스팟(Blogger) 가로폭 조절 하는 방법
블로그를 운영하다 보면 “왜 내 글은 답답하게 보이지?”라는 생각을 하게 되는 순간이 있습니다. 바로 가로폭(width) 때문입니다. 블로그스팟(Blogger)은 기본적으로 비교적 좁은 본문 폭을 제공하는데, 이는 모바일 친화성을 위해 설정된 기본값입니다. 하지만 콘텐츠의 성격이나 이미지 비율, 광고 배치에 따라 적절한 가로폭 조절이 필요합니다.
저도 예전에 이미지 중심의 포스팅을 올릴 때, 본문이 너무 좁아 사진이 잘려 보이는 문제가 있었어요. 이럴 때는 템플릿 디자이너나 HTML 편집을 통해 직접 너비를 손보면 훨씬 깔끔한 결과를 얻을 수 있습니다.
가로폭 조절의 중요성
가로폭은 단순히 보기 좋은 비율의 문제가 아닙니다. 블로그의 전반적인 가독성(readability), 광고 배치 최적화, 그리고 사용자 경험(UX)에 큰 영향을 미치는 요소입니다. 너무 좁으면 답답하고, 너무 넓으면 시선이 길어져 읽기 힘들죠. 특히 데스크톱과 모바일을 함께 고려한 반응형 설계가 중요합니다.
- 콘텐츠 중심형 블로그라면 본문 너비를 900~1100px 정도로 설정
- 이미지·디자인 중심형 블로그는 1200px 이상이 가독성 좋음
- 모바일 반응형은
max-width로 설정해 자동 축소 대응
결국 블로그의 주제, 독자의 디바이스 환경, 이미지 배치 방식에 따라 최적값은 달라집니다. 그래서 오늘은 초보자용(테마 디자이너 조절)과 중급자용(HTML/CSS 수정) 두 가지 접근법으로 정리해드리겠습니다.
핵심 개념 정리: 가로폭을 결정하는 구조
처음 HTML을 보면 어려워 보이지만, 구조는 단순합니다. Blogger 테마는 보통 다음과 같은 구조로 구성돼 있습니다.
<div id="outer-wrapper">
<div id="main-wrapper"> (본문)
</div>
<div id="sidebar-wrapper"> (사이드바)
</div>
</div>
여기서 #outer-wrapper의 width가 전체 가로폭,
#main-wrapper는 본문,
#sidebar-wrapper는 사이드바 영역을 의미합니다.
따라서 세 값의 합이 전체 폭을 넘지 않게 조절해야 디자인이 깨지지 않습니다.
방법 1. 테마 디자이너에서 간단히 조절하기 (초보자용)
Blogger는 기본적으로 테마 디자이너(Theme Designer)를 통해 전체 폭과 사이드바 폭을 손쉽게 조절할 수 있는 기능을 제공합니다. 이 방법은 CSS 지식이 전혀 없어도 가능합니다.
단계별 방법
- Blogger 대시보드 로그인
- 왼쪽 메뉴에서 테마(Theme) 클릭
- 내 테마 영역의 맞춤설정(Customize) 버튼 선택
- 고급(Advanced) 또는 너비 조정(Adjust Width) 메뉴 선택
- 전체 블로그 너비(Entire blog)와 사이드바 너비(Sidebar width)를 슬라이더로 조절
- 오른쪽 하단 저장(Save) 클릭
이 기능을 통해 대부분의 레이아웃 문제는 쉽게 해결됩니다. 다만 테마에 따라 일부 옵션이 비활성화돼 있을 수 있는데, 이 경우는 직접 코드를 수정해야 합니다.
방법 2. HTML/CSS 직접 수정으로 정밀 조절하기 (중급자용)
좀 더 자유롭게 조정하고 싶은 분들을 위한 방법입니다. 예를 들어 이미지 본문이 잘리거나, 광고 배너가 사이드바에 겹치는 문제가 생길 때 HTML 수정을 통해 해결할 수 있습니다.
수정 전 준비
- 반드시 백업하세요. (테마 → 백업/복원)
- 코드를 바꾸기 전에는 원본을 복사해 메모장에 저장
수정 절차
- Blogger 대시보드 → 테마(Theme)
- “내 테마” → HTML 수정(Edit HTML) 클릭
- Ctrl+F (또는 Cmd+F)로 아래 코드 검색
#outer-wrapper {
width: 1100px;
}
#main-wrapper {
width: 760px;
}
#sidebar-wrapper {
width: 300px;
}
여기서 숫자를 바꾸면 됩니다. 예를 들어 #outer-wrapper를 1200px로 바꾸면 전체 폭이 넓어지고,
본문 폭(#main-wrapper)과 사이드바 폭을 합해 1200px을 넘지 않게 조정해야 합니다.
#outer-wrapper {
max-width: 1200px;
width: 95%;
margin: 0 auto;
}
이렇게 하면 데스크톱에서는 1200px 이하로 보이고, 모바일에서는 자동으로 축소됩니다.
또한 margin: 0 auto; 속성은 중앙 정렬을 유지해 줍니다.
가로폭 조절 시 주의해야 할 점
- 반응형 깨짐 주의: 모바일 환경에서 스크롤이 생기거나 글이 잘릴 수 있음
- 이미지 비율: 본문 폭 변경 시 이미지 폭도 함께 수정
- 광고 영역 확인: Google AdSense 광고 크기(예: 728x90, 300x250)에 맞게 조정
- 사이드바 위젯: 폭을 줄이면 일부 위젯 텍스트나 버튼이 겹칠 수 있음
저도 예전에 폭을 너무 넓혀서 모바일에서 화면이 반으로 잘려 보인 적이 있습니다. 결국 다시 % 단위를 적용해서 반응형으로 바꿨더니 문제없이 잘 맞아떨어졌죠.
전문가 팁: CSS 구조 이해하기
Blogger 테마 내부에는 <b:template-skin> 태그 안에 여러 개의 스타일 규칙이 있습니다. 이곳에서 content.width, sidebar.width, wrapper 등의 변수를 찾아 변경하면 훨씬 직관적으로 조정할 수 있습니다.
<b:template-skin>
<Variable name="content.width" default="700px" />
<Variable name="sidebar.width" default="300px" />
</b:template-skin>
위 변수를 원하는 값으로 수정하고 저장하면 자동 반영됩니다.
또한 일부 최신 테마는 max-width 속성을 별도로 지정하므로, 이를 병행해서 수정하는 게 좋습니다.
마무리: 나만의 레이아웃으로 완성도 높이기
가로폭을 조절하는 일은 처음에는 단순히 “보기 좋게 만들기”로 시작하지만, 결과적으로는 독자의 시선 동선을 설계하는 일입니다. 본문이 넓을수록 시원하고, 광고가 적절히 배치되면 수익성도 높아집니다.
정리하자면 다음과 같습니다.
- 초보자는 테마 디자이너를 활용해 안전하게
- 중급자는 HTML/CSS 수정으로 세밀하게
- 모든 단계에서 백업은 필수
- 반응형 설계를 잊지 말 것
여러 번 시도하다 보면 ‘내 블로그에 딱 맞는 폭’을 자연스럽게 찾게 됩니다. 한 번 손보면 매번 포스팅할 때마다 편안한 만족감이 드실 거예요
댓글 쓰기