블로그스팟(Blogger) 가로폭 조절, 왜 중요할까?
블로그를 운영하다 보면 문득 이런 생각을 해보신 적이 있을 겁니다. “내 글이 뭔가 답답하게 보이는 것 같은데… 뭐가 문제일까?” 사실 대부분은 가로폭(width) 때문입니다. 글의 내용이 아무리 좋아도, 보기 불편하면 독자의 체류 시간과 몰입도는 떨어집니다. 제가 예전에 사진 중심의 포스팅을 올렸을 때, 본문 폭이 너무 좁아 사진이 잘려 보이는 경험이 있었는데, 그때 바로 가로폭 조절의 중요성을 깨달았죠.
Blogger는 기본적으로 좁은 폭을 제공하는데, 이는 모바일 친화성을 고려한 설정입니다. 하지만 콘텐츠의 성격에 따라 폭을 조절하면 글과 이미지가 한눈에 들어와 훨씬 깔끔한 블로그를 만들 수 있습니다.
가로폭 조절의 핵심 개념
가로폭을 조절할 때 알아야 할 구조는 단순합니다. Blogger 테마는 보통 전체 래퍼(wrapper), 본문(main-wrapper), 사이드바(sidebar-wrapper)로 나뉘어 있습니다.
HTML 구조는 이렇게 보이죠:
<div id="outer-wrapper"> <div id="main-wrapper"> (본문) </div> <div id="sidebar-wrapper"> (사이드바) </div> </div>
즉, #outer-wrapper의 width가 전체 폭, #main-wrapper는 본문, #sidebar-wrapper는 사이드바 영역입니다. 세 값을 합쳐 전체 폭을 넘지 않도록 해야 디자인이 깨지지 않습니다.
가로폭 조절의 중요 포인트
- 너무 좁으면 글이 답답하고, 독자가 집중하기 어렵습니다.
- 너무 넓으면 시선이 길어져 읽기 힘들어집니다.
- 콘텐츠 중심형 블로그: 본문 너비 900~1100px 권장
- 이미지/디자인 중심형 블로그: 1200px 이상 권장
- 모바일 반응형: max-width 사용으로 자동 축소 대응
저 같은 경우, 처음에는 기본 폭 그대로 썼는데, 사진 포스팅을 올릴 때 이미지가 짤리면서 답답해 보이더군요. 이때 테마 디자이너에서 폭을 조절하고 나니 훨씬 시원하고 읽기 편했습니다.
방법 1: 테마 디자이너에서 간단히 조절하기 (초보자용)
코드를 직접 수정하기 어렵다면, 테마 디자이너를 활용하는 것이 가장 안전합니다. Blogger는 테마 디자이너를 통해 전체 블로그 폭과 사이드바 폭을 슬라이더로 쉽게 조절할 수 있습니다.
단계별 조절 방법
- Blogger 대시보드 로그인
- 왼쪽 메뉴에서 테마(Theme) 클릭
- 내 테마 영역의 맞춤설정(Customize) 버튼 선택
- 고급(Advanced) 또는 너비 조정(Adjust Width) 메뉴 클릭
- 전체 블로그 너비(Entire blog)와 사이드바 너비(Sidebar width)를 슬라이더로 조절
- 오른쪽 하단 저장(Save) 클릭
이 방법만으로도 대부분의 레이아웃 문제는 해결됩니다. 다만, 일부 테마는 옵션이 제한될 수 있어 직접 HTML을 수정해야 할 때도 있습니다.
저는 예전에 이 방법으로 폭을 늘렸는데, 이미지가 깔끔하게 보이고 글의 가독성이 확실히 올라갔습니다. 또, 광고 배치도 자연스럽게 맞춰지더군요.
방법 2: HTML/CSS 직접 수정으로 세밀하게 조절하기 (중급자용)
“조금 더 자유롭게 레이아웃을 맞추고 싶다”거나, 이미지가 잘리거나 광고가 겹치는 문제를 해결하고 싶다면 HTML과 CSS를 직접 수정하는 방법이 있습니다. 처음엔 조금 어렵게 느껴지지만, 구조만 이해하면 생각보다 단순합니다.
수정 전 준비 사항
- 반드시 백업하세요. (테마 → 백업/복원)
- 코드를 변경하기 전에 원본을 메모장에 저장
- 테스트용으로 한두 부분씩 수정하면서 확인
단계별 HTML/CSS 수정 방법
- Blogger 대시보드 → 테마(Theme)
- “내 테마” → HTML 수정(Edit HTML) 클릭
- Ctrl+F 또는 Cmd+F로 아래 코드를 검색
#outer-wrapper {
width: 1100px;
}
#main-wrapper {
width: 760px;
}
#sidebar-wrapper {
width: 300px;
}
여기서 숫자를 바꾸면 폭이 조절됩니다. 예를 들어 #outer-wrapper를 1200px로 바꾸면 전체 폭이 넓어지고, 본문과 사이드바 폭 합이 1200px을 넘지 않도록 조정하면 레이아웃 깨짐을 방지할 수 있습니다.
팁: 반응형 적용
px 대신 % 단위를 사용하면 모바일에서도 자동 축소가 가능하며, margin: 0 auto;로 중앙 정렬을 유지할 수 있습니다.
#outer-wrapper {
max-width: 1200px;
width: 95%;
margin: 0 auto;
}
가로폭 조절 시 주의할 점
- 반응형 깨짐 주의: 모바일에서 스크롤 발생 또는 글이 잘릴 수 있음
- 이미지 비율: 본문 폭 변경 시 이미지 폭도 함께 수정 필요
- 광고 영역 확인: AdSense 광고 크기(728x90, 300x250)에 맞춰 조정
- 사이드바 위젯: 폭을 줄이면 텍스트/버튼이 겹칠 수 있음
저는 한 번 폭을 너무 넓게 설정했다가 모바일에서 글이 반으로 잘려 보인 적이 있습니다. 결국 % 단위를 적용하고 다시 테스트했더니 문제없이 맞더군요.
전문가 팁: CSS 구조 이해하기
Blogger 테마의 CSS 구조를 이해하면 폭 조절뿐 아니라 전체 디자인 제어가 가능합니다. <b:template-skin> 안에 content.width, sidebar.width, wrapper 등의 변수를 찾아 변경하면 훨씬 직관적입니다.
일부 최신 테마는 max-width 속성을 별도로 지정하므로, 이를 병행해 수정하면 안전합니다.
마무리: 나만의 레이아웃으로 완성도 높이기
가로폭은 블로그의 인상과 신뢰도를 결정합니다. 폭 조절은 단순히 보기 좋게 만드는 것이 아니라, 독자의 시선 동선을 설계하는 작업입니다. 본문 폭이 넓을수록 시원하고, 광고가 적절히 배치되면 수익성도 높아집니다.
여러 번 시도하다 보면 내 블로그에 딱 맞는 폭을 자연스럽게 찾게 됩니다. 한 번 조정하면 매번 포스팅할 때 편안한 만족감을 느낄 수 있습니다.
댓글 쓰기