블로그스팟(Blogger) 글쓰기, 모바일에서도 보기 좋게 만드는 방법

블로그스팟(Blogger)에서 글을 작성해보면 데스크탑에서는 잘 보이던 글이 모바일에서는 줄이 이상하게 끊기거나 정렬이 어색하게 보이는 경우가 종종 있습니다. 이번 글에서는 모바일에서도 깔끔하게 보이는 글쓰기 방법과 필수 설정들을 정리해보았습니다.

1. 모바일 템플릿 설정 확인하기

모바일에서는 데스크탑과는 다른 레이아웃이 적용되기 때문에, 모바일 템플릿 설정 여부에 따라 글 보임이 달라질 수 있습니다.

설정 방법

1. 블로그 대시보드 접속
2. 좌측 메뉴에서 [테마] 클릭
3. 오른쪽 상단의 톱니바퀴 아이콘(모바일 설정) 클릭
4. 모바일 보기 사용 여부 설정
   • 기본(Default): 구글 제공 모바일 전용 템플릿. 호환성 높음
   • 사용자 지정(Custom): 데스크탑용 템플릿을 그대로 사용. 모바일에선 오류 발생 가능

추천: 모바일 화면이 깨지거나 줄바꿈이 이상하게 보인다면, ‘기본(Default)’ 모드를 선택해보세요.

2. 줄바꿈 방식 점검하기

Blogger 글쓰기에서는 줄바꿈 방법에 따라 모바일 표시 결과가 달라집니다.

• Enter: 문단 나누기 (줄 간격이 넓게 적용됨)
• Shift + Enter: 단순 줄바꿈 (문단 유지, 줄만 내려감)

모바일에서는 Shift + Enter 방식이 훨씬 자연스럽게 보이는 경우가 많습니다.

즉, 줄바꿈이 필요할 때는 Shift를 누른 상태에서 Enter를 입력하는 습관이 필요합니다.(조금 귀찮긴 합니다..)

3. 글자 크기, 줄간격 직접 설정하기

기본 편집기만 사용하면 모바일에서 글자가 너무 작거나 간격이 좁게 나올 수 있습니다. 이를 방지하려면 HTML 모드에서 직접 스타일을 지정하는 것이 좋습니다.

 

예시

<p style="font-size: 16px; line-height: 1.6; margin: 10px 0;"> 이 문장은 모바일에서도 가독성이 좋습니다. </p>

 

• font-size: 글자 크기
• line-height: 줄 간격
• margin: 위아래 여백

4. 이미지 크기 조절하기

모바일에서는 큰 이미지가 화면을 밀거나 텍스트를 덮는 경우가 많습니다. 이미지에 max-width 속성을 지정하면 이런 문제를 줄일 수 있습니다.

 

예시

<img src="이미지주소" style="max-width:100%; height:auto;" />

이렇게 작성하면 화면 크기에 따라 이미지가 자동으로 축소되어 잘려 보이는 현상을 방지할 수 있습니다.

 

5. 모바일 미리보기 꼭 하기

글을 작성한 후에는 반드시 모바일 화면에서 미리보기를 하거나, 스마트폰으로 직접 접속하여 확인해야 합니다.

 

크롬 브라우저로 확인하는 법:

1. 블로그 글 페이지에서 F12 키 입력
2. 개발자 도구 창이 열리면 좌측 상단의 디바이스 모드 아이콘 클릭
3. 화면을 스마트폰 크기로 설정하여 실제 모바일에서 보이는 화면 확인

6. 반응형 템플릿 사용 고려하기

기본 Blogger 템플릿은 단순하지만, 모바일 환경까지 고려한 반응형 템플릿(Responsive Template) 으로 변경하면

별도 설정 없이도 화면 크기에 따라 자동으로 글이 조정됩니다.  반응형 템플릿은 구글 템플릿 마켓이나 외부 유료 템플릿 제공 사이트에서도 다양하게 구할 수 있습니다.

마무리

블로그스팟은 기능이 단순한 대신, 템플릿이나 작성 방식에 따라 모바일 호환성에서 차이가 많이 납니다. 따라서 모바일에서도 깔끔하게 보이도록 하려면, 글쓰기 습관과 템플릿 설정을 함께 고려해야 합니다. 위의 방법들을 차근차근 적용하면, 방문자들이 PC든 스마트폰이든 언제나 보기 편한 글을 읽을 수 있을 것입니다.