블로그스팟 모바일에서 글이 잘리는 문제 해결법

 

블로그스팟에서 정성껏 쓴 글이 모바일에서 이미지가 잘리고, 테이블이 화면 밖으로 나가고, 줄바꿈이 엉망이 되는 문제 — 원인은 테마 설정과 HTML 작성 방식에 있고, 대부분 코드 몇 줄이면 해결됩니다.

솔직히 처음엔 내 글만 그런 줄 알았거든요. PC에서 미리보기 하면 깔끔한데, 폰으로 열면 이미지가 옆으로 밀리고 표가 반쪽만 보이고. 댓글로 "모바일에서 글이 안 보여요"라는 피드백을 받았을 때 좀 충격이었어요.

그래서 테마 XML도 뜯어보고, CSS도 건드려보고, 구글 서치 콘솔 오류도 하나씩 잡았는데요. 한 3개월 정도 시행착오를 겪으면서 결국 패턴이 보이더라고요. 문제의 핵심은 딱 몇 가지였어요. 오늘 그 경험을 통째로 풀어볼게요.

모바일에서 글이 잘리는 진짜 이유

블로그스팟의 모바일 글 잘림 현상, 원인이 하나가 아니에요. 여러 가지가 복합적으로 겹치는데, 가장 흔한 건 크게 세 가지거든요.

첫 번째는 테마 자체가 반응형이 아닌 경우예요. 블로그스팟 기본 제공 테마 중에서 Simple이나 Picture Window 같은 구형 테마는 모바일 대응이 제대로 안 돼요. 화면 너비에 따라 레이아웃이 조절되는 게 아니라 PC 화면을 그냥 축소해서 보여주는 거라, 글자가 깨알같이 작아지거나 콘텐츠가 화면 밖으로 밀려나요.

두 번째는 고정 px 값으로 이미지나 테이블을 넣은 경우예요. width:800px 이렇게 절대값을 박아두면 모바일 화면(보통 360~430px 너비)에서는 당연히 삐져나오죠. 이건 제가 가장 많이 실수했던 부분이에요.

세 번째가 좀 의외인데, 블로그스팟 에디터에서 Enter와 Shift+Enter의 차이예요. Enter를 치면 새 문단(<p> 태그)이 생기고, Shift+Enter를 치면 같은 문단 안에서 줄만 바뀌거든요(<br> 태그). 모바일에서는 이 차이가 생각보다 크게 나타나서, Enter를 남발하면 문단 간격이 비정상적으로 벌어지더라고요.

결국 이 세 가지를 하나씩 잡아가면 모바일 글 잘림의 90% 이상은 해결돼요.

테마 설정 하나로 80% 해결되는 구간

블로그스팟 대시보드에서 테마(Theme) 메뉴로 들어가면, 모바일 설정 옵션이 따로 있어요. 여기가 핵심이거든요.

구형 테마를 쓰고 있다면 모바일 설정에 "기본(Default)"과 "맞춤(Custom)" 두 가지가 뜨는데, 맞춤을 선택하면 PC용 테마가 모바일에도 그대로 적용돼요. 문제는 PC용 테마가 반응형이 아닐 때 — 모바일에서 레이아웃이 완전히 깨져버린다는 거죠. "기본"으로 두면 구글이 제공하는 모바일 전용 템플릿이 적용되는데, 디자인은 밋밋하지만 최소한 글이 잘리지는 않아요.

💡 꿀팁

근본적인 해결은 Contempo, Soho, Emporio, Notable 같은 구글 공식 반응형 테마로 바꾸는 거예요. 이 테마들은 모바일 별도 설정 자체가 필요 없고, 화면 크기에 따라 자동으로 레이아웃이 조절돼요. 테마를 바꾸면 기존 글 내용은 그대로 유지되니까 걱정 안 하셔도 됩니다.

저도 처음에는 외부 유료 테마를 쓰다가 모바일 문제로 골치가 아파서, 결국 Contempo로 갈아탔어요. 갈아타고 나서 모바일 이탈률이 눈에 띄게 줄었거든요. 유료 테마가 예쁘긴 한데, XML 구조를 직접 뜯어고칠 자신이 없으면 공식 반응형 테마가 안전해요.

테마를 바꾸는 방법은 간단해요. 대시보드 → 테마 → 아래쪽에 구글 제공 테마 목록이 쭉 나와요. Contempo 클릭하고 적용 누르면 끝이에요. 커스터마이징은 "맞춤설정" 버튼에서 색상, 레이아웃 등을 조절하면 돼요.

구분 구형 테마 (Simple 등) 반응형 테마 (Contempo 등)
모바일 대응 별도 모바일 템플릿 필요 자동 반응형
이미지 처리 고정 크기로 잘림 빈번 화면 너비에 맞게 축소
?m=1 문제 모바일 URL 별도 생성 단일 URL 유지
PageSpeed 점수 50~70점대 80~95점대

이미지와 테이블이 삐져나올 때

반응형 테마를 쓰더라도 본문 안에 넣은 이미지나 테이블이 모바일에서 잘리는 경우가 있어요. 이건 테마 문제가 아니라 콘텐츠 자체의 HTML 문제거든요.

이미지부터 볼게요. 블로그스팟 에디터에서 이미지를 "원본" 크기로 삽입하면, 가로 1200px짜리 사진이 그대로 들어가요. PC에서는 테마가 알아서 잘라주는데, 모바일에서는 화면을 뚫고 나가는 경우가 종종 있어요. 해결법은 아주 간단해요.

HTML 모드로 전환해서 이미지 태그에 max-width:100%; height:auto; 이 두 줄만 추가하면 돼요. 이렇게 하면 이미지가 화면 너비를 넘지 않으면서도 비율은 유지되거든요. 이거 하나 넣는 것과 안 넣는 것의 차이가 엄청나요.

테이블은 좀 더 까다로워요. 4열 이상 테이블을 모바일에서 보면 거의 확실히 잘려요. 모바일 화면이 360px인데 열 4개를 쑤셔넣으면 당연히 안 들어가죠. 제가 찾은 방법은 두 가지예요.

하나는 테이블 열을 3개 이하로 줄이는 거예요. 정보가 많으면 테이블을 두 개로 나누는 게 훨씬 낫더라고요. 다른 하나는 테이블을 감싸는 div에 overflow-x:auto;를 넣는 거예요. 이렇게 하면 테이블이 화면보다 넓어도 가로 스크롤이 생겨서 최소한 내용이 잘리지는 않아요.

⚠️ 주의

블로그스팟 에디터에서 이미지를 삽입할 때 자동으로 붙는 imageanchor="1"과 style="margin-left:1em; margin-right:1em;" 속성이 모바일 정렬을 방해하는 경우가 있어요. HTML 모드에서 이 부분을 삭제하면 이미지 중앙 정렬이 훨씬 깔끔해집니다.

인라인 스타일로 잡는 줄간격과 글자 크기

테마를 바꾸고 이미지도 잡았는데, 모바일에서 글이 여전히 읽기 불편할 수 있어요. 글자가 너무 작거나, 줄간격이 빡빡하거나, 문단 사이가 너무 좁은 경우예요.

이건 블로그스팟 에디터의 기본 스타일이 모바일에 최적화되어 있지 않아서 그래요. 에디터에서 글자 크기를 "보통"으로 설정해도, 실제 모바일 렌더링에서는 13~14px 정도로 나오는 경우가 있거든요.

해결 방법은 HTML 모드에서 직접 인라인 스타일을 넣는 거예요. 제가 계속 쓰면서 가장 편했던 세팅이 있어요.

font-size:16px; line-height:1.8; margin:16px 0; — 이 세 가지를 p 태그에 넣으면 모바일에서 가독성이 확 달라져요. 줄간격 1.8이 좀 넓어 보일 수 있는데, 모바일 작은 화면에서는 이 정도가 딱이에요. 1.6으로 줄이면 오히려 답답해 보이더라고요.

근데 매번 p 태그마다 스타일을 넣기 귀찮잖아요. 그래서 저는 글을 먼저 작성 뷰에서 다 쓰고, 마지막에 HTML 모드로 바꿔서 한 번에 스타일을 입혀요. 텍스트 에디터에서 찾기-바꾸기 기능으로 <p>를 <p style="font-size:16px;line-height:1.8;margin:16px 0;">로 일괄 교체하면 1분이면 끝나요.

줄바꿈도 중요한 포인트예요. Shift+Enter는 같은 문단 안에서 줄만 바꾸고, Enter는 새 문단을 만들어요. 모바일에서는 이 차이가 꽤 커요. 문단 간격이 과하게 벌어지면 스크롤이 끝없이 길어지고, 반대로 Shift+Enter만 쓰면 한 덩어리처럼 뭉쳐 보이거든요. 적절히 섞어 쓰는 게 핵심이에요.

?m=1 리다이렉트 오류까지 잡아야 끝

글이 모바일에서 잘 보이게 해놨는데, 구글 서치 콘솔에서 "리다이렉트가 포함된 페이지"라는 오류가 뜰 수 있어요. 이게 바로 블로그스팟의 고질적인 ?m=1 문제예요.

블로그스팟은 모바일 접속 시 URL 뒤에 ?m=1을 자동으로 붙여요. PC에서는 ?m=0이 붙고요. 구글 크롤러가 이걸 리다이렉트로 인식해서 색인에 문제가 생기는 거예요. 처음에 이 오류를 봤을 때 꽤 당황했어요. 글은 제대로 있는데 왜 색인이 안 되는 건지.

반응형 테마(Contempo, Soho 등)를 쓰면 이 문제가 대폭 줄어들어요. 반응형 테마는 모바일과 PC에서 같은 URL을 쓰기 때문에 ?m=1 파라미터가 붙더라도 리다이렉트 없이 같은 페이지를 보여주거든요.

📊 실제 데이터

구글 서치 콘솔 커뮤니티에서 2026년 4월 기준으로도 ?m=1 리다이렉트 오류는 블로거(Blogspot) 사용자들의 가장 빈번한 색인 문제로 보고되고 있어요. 구글 측 답변에 따르면 반응형 테마를 사용하는 경우 이 오류가 크게 감소하며, 대부분 시간이 지나면 자동 해소되는 것으로 안내하고 있어요.

추가로, 서치 콘솔에서 해당 오류 URL들을 확인한 뒤 "색인 생성 요청"을 직접 해주면 속도가 좀 더 빨라져요. 저는 테마를 Contempo로 바꾸고 나서 약 2주 정도 뒤에 리다이렉트 오류가 거의 사라졌어요.

발행 전 모바일 미리보기 확인법

이 모든 걸 적용했으면 마지막 단계가 남아요. 발행 전에 모바일에서 어떻게 보이는지 반드시 확인하는 거예요. 저도 이 습관이 붙고 나서 모바일 관련 문제가 거의 사라졌어요.

가장 쉬운 방법은 크롬 브라우저의 개발자 도구(DevTools)예요. 글 페이지에서 F12를 누르면 개발자 도구가 열리고, 왼쪽 상단에 스마트폰 모양 아이콘을 클릭하면 모바일 화면으로 전환돼요. 여기서 기기를 iPhone SE, Galaxy S20 등 다양하게 바꿔가면서 확인할 수 있어요.

근데 여기서 함정이 하나 있거든요. 크롬 DevTools로 본 모바일 화면이랑 실제 스마트폰으로 본 화면이 미묘하게 달라요. 특히 블로그스팟은 모바일 접속 시 ?m=1이 붙으면서 별도 렌더링을 하기도 하는데, DevTools에서는 이게 반영이 안 돼요. 그래서 DevTools에서 1차 확인하고, 실제 스마트폰으로 2차 확인하는 게 확실해요.

글을 발행하기 전에 미리보기로 확인해도 되지만, 블로그스팟 미리보기는 모바일 뷰를 지원하지 않아서 한계가 있어요. 발행 후 비공개 상태로 두고 스마트폰에서 접속해보는 게 가장 정확해요.

그리고 구글의 모바일 친화성 테스트(Mobile-Friendly Test) 도구도 써보면 좋아요. URL을 넣으면 구글 봇 기준으로 모바일 최적화가 되어 있는지, 어떤 요소가 문제인지 리포트를 줘요. 서치 콘솔에서 "모바일 사용 편의성" 항목도 주기적으로 체크해주면 문제를 조기에 발견할 수 있고요.

❓ 자주 묻는 질문

Q. 테마를 바꾸면 기존에 쓴 글 내용이 날아가나요?

글 내용은 그대로 유지돼요. 테마는 껍데기(디자인)만 바꾸는 거라서 본문 텍스트, 이미지, 링크 등은 영향을 받지 않아요. 다만 사이드바 위젯 배치가 초기화될 수 있으니 레이아웃은 다시 점검해주는 게 좋아요.

Q. max-width:100%를 넣었는데도 이미지가 여전히 잘려요.

에디터가 자동으로 붙이는 a 태그의 스타일(margin-left:1em 등)이 간섭하는 경우가 많아요. HTML 모드에서 이미지를 감싸는 a 태그의 인라인 스타일을 삭제하고, img 태그에만 max-width:100%; height:auto;를 적용해보세요.

Q. 외부 테마(서드파티)를 쓰면 모바일 문제가 더 심한가요?

테마마다 달라요. 잘 만든 외부 반응형 테마는 구글 공식 테마보다 나을 수도 있어요. 하지만 무료로 배포되는 테마 중에는 모바일 대응이 미흡한 경우가 꽤 있으니, 적용 전에 반드시 데모 페이지를 모바일로 확인해보는 게 좋아요.

Q. 서치 콘솔의 ?m=1 리다이렉트 오류를 지금 당장 없앨 수 있나요?

즉시 해결은 어려워요. 반응형 테마로 변경한 뒤 구글 크롤러가 다시 방문해서 업데이트하기까지 며칠에서 2주 정도 걸릴 수 있어요. 서치 콘솔에서 개별 URL의 색인 요청을 보내면 속도가 좀 빨라져요.

Q. 모바일에서 글자 크기를 16px보다 더 크게 해도 되나요?

17px까지는 괜찮은데, 18px 이상으로 올리면 한 줄에 들어가는 글자 수가 줄어서 오히려 가독성이 떨어질 수 있어요. 16px에 line-height 1.8~1.9 조합이 대부분의 모바일 환경에서 가장 읽기 편한 세팅이에요.

본 포스팅은 개인 경험과 공개 자료를 바탕으로 작성되었으며, 전문적인 의료·법률·재무 조언을 대체하지 않습니다. 정확한 정보는 해당 분야 전문가 또는 공식 기관에 확인하시기 바랍니다.

👉 함께 읽으면 좋은 글: 블로그스팟 가비아 도메인 연결, 직접 해보니 10분이면 끝나더라

👉 함께 읽으면 좋은 글: E-E-A-T 적용하고 검색 순위 확 바뀐 블로그 글쓰기 경험담

👉 함께 읽으면 좋은 글: 애드센스 승인 후 첫 수익이 통장에 찍히기까지, 내가 겪은 현실 타임라인

블로그스팟 모바일 글 잘림 문제는 결국 반응형 테마 + 이미지/테이블 스타일 보정 + 인라인 스타일 세팅, 이 세 가지로 귀결돼요. 한 번 세팅해두면 이후에 쓰는 모든 글에 적용되니까 초기 수고를 좀 들일 가치가 있어요.

비슷한 경험이 있거나 다른 해결법을 알고 계시면 댓글로 알려주세요. 이 글이 도움이 됐다면 공유도 부탁드려요 🙂

댓글

댓글 쓰기