구글 블로그(블로그스팟) 표 잘림 근본원인과 해결방법을 알아보자

구글 블로그(블로그스팟)의 가장 대중적인 테마 중 하나인 Essential(에센셜)은 깔끔하고 현대적인 디자인을 자랑하지만, 치명적인 단점이 하나 있으며,바로 표(Table)의 반응형 대응이 기본적으로 설정되어 있지 않다는 점입니다. 

PC 화면에서는 정갈하게 보이던 표가 모바일 기기로 접속하면 본문 영역을 뚫고 나가 글자가 잘리거나 전체 레이아웃이 깨지는 현상이 발생합니다.


구글 블로그(블로그스팟) 표 잘림
구글 블로그(블로그스팟) 모바일 미 적용시 표 잘림 현상


왜 Essential 테마에서 표가 모바일 화면을 넘어갈까?

구글의 Essential 테마는 기본적으로 미니멀리즘을 지향합니다. 

하지만 이 테마의 기본 CSS 프레임워크는 <table> 태그에 대해 유연한 너비(Flexible Width) 값을 강제하지 않습니다.

1. 고정 너비 문제 : 표 내부 콘텐츠가 많으면 표는 자신의 너비를 유지하려 합니다.

2. 컨테이너 제약 : 블로그 본문 폭보다 표의 너비가 넓어지면, 브라우저는 표를 강제로 줄이지 않고 화면 밖으로 밀어냅니다.

3. 반응형 부재 : 최신 웹 표준은 가로 스크롤이나 스택(Stack) 구조를 권장하지만, 블로거 기본 에디터는 이를 자동으로 처리하지 못합니다.

구글은 '모바일 친화성'을 검색 순위 결정의 핵심 지표로 삼고 있습니다. 

표가 깨지는 페이지는 '모바일 사용 편의성 오류'로 분류되어 검색 노출에서 불이익을 받을 수 있습니다.


모바일 환경별 표 노출 비교

모바일 환경별 표 노출 비교
모바일 환경별 표 노출 비교



STEP1. 해결 방법 A: CSS 수정을 통한 영구적 해결

테마의 CSS(Cascading Style Sheets)를 한 번만 수정하면, 앞으로 작성할 모든 글의 표에 자동으로 반응형 스크롤이 적용됩니다.

1.적용 단계

구글 블로그 관리 화면에서 [테마] 메뉴를 클릭합니다.

2.[맞춤설정] 버튼 옆의 화살표를 눌러 [HTML 편집]으로 들어갑니다.

3.코드 영역을 클릭한 후 Ctrl + F를 눌러 ]]></b:skin>을 찾습니다.


해당 문구 바로 위에 아래의 코드를 복사해서 붙여넣습니다.


CSS

/* Essential 테마 표 반응형 가로 스크롤 설정 */

.post-body table {

    width: 100% !important; /* 표 너비를 본문에 맞춤 */

    max-width: 100%;

    display: block; /* 스크롤 활성화를 위해 블록 요소로 변경 */

    overflow-x: auto; /* 가로 내용이 넘치면 스크롤바 생성 */

    -webkit-overflow-scrolling: touch; /* 모바일 부드러운 스크롤 */

    border-collapse: collapse;

    margin: 20px 0;

    border: 1px solid #dee2e6;

}


/* 표 내부 가독성 향상 코드 */

.post-body table th, .post-body table td {

    padding: 12px 15px;

    border: 1px solid #eeeeee;

    min-width: 100px; /* 셀이 너무 뭉쳐 보이지 않게 최소 폭 지정 */

    font-size: 14px;

    line-height: 1.6;

    word-break: keep-all; /* 단어 단위 줄바꿈으로 깔끔하게 유지 */

}


/* 표 헤더 강조 */

.post-body table th {

    background-color: #f8f9fa;

    color: #333;

    font-weight: 700;

    text-align: center;

}

오른쪽 상단의 저장(디스크 아이콘)을 누릅니다.


STEP2. 해결 방법 : 특정 포스팅에만 HTML로 적용하기

테마 전체를 수정하기 조심스럽거나, 특정 데이터 시트에만 스크롤을 넣고 싶을 때 사용하는 방식입니다.

적용 코드 예시

글쓰기 화면에서 [HTML 보기] 모드로 전환한 뒤, 표 코드를 아래의 div 태그로 감싸주세요.


HTML

<div class="table-container" style="overflow-x: auto; -webkit-overflow-scrolling: touch;">

  <table style="width: 100%; min-width: 600px; border: 1px solid #ccc;">

    <thead>

      <tr>

        <th>구분</th>

        <th>내용 1</th>

        <th>내용 2</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>항목 A</td>

        <td>설명 데이터가 길어져도 스크롤이 생깁니다.</td>

        <td>데이터 2</td>

      </tr>

    </tbody>

  </table>

</div>

핵심 팁 : min-width 값을 표의 콘텐츠 양에 따라 조정하세요. 

데이터가 많다면 800px 정도로 설정하여 모바일에서도 표 모양이 찌그러지지 않고 원형을 유지하며 스크롤되게 만드는 것이 좋습니다.



구글 SEO를 위한 추가 최적화 팁

표 문제를 해결했다면, 검색 엔진이 내 글을 더 잘 인식하도록 다음 사항을 점검해야 합니다.

  1. 이미지 Alt 태그: 표 안에 이미지를 넣었다면 반드시 alt 속성을 넣어 검색 로봇이 내용을 이해하게 하세요.

  2. 테이블 캡션 사용: <caption> 태그를 사용하여 표가 무엇을 설명하는지 명시하세요.

  3. 외부 링크 활용: 공신력 있는 사이트를 참조했다면 외부 링크를 걸어 신뢰도를 높이세요.

  4. 내부 링크: 블로그 내의 다른 유용한 SEO 관련 글을 연결하여 페이지 뷰를 높이세요.


자주 묻는 질문 (FAQ)

Q1. CSS를 넣었는데도 모바일에서 표가 여전히 잘려요.

A1. 에디터에서 표를 만들 때 마우스로 표 크기를 임의로 조절하면 HTML 코드 안에 width: 540px; 같은 고정 수치가 강제로 삽입됩니다. 

HTML 보기 모드에서 width 속성을 찾아 삭제하거나 100%로 변경해 주세요.


Q2. 표 안에 이미지를 넣으면 어떻게 되나요?

A2. 이미지가 표보다 크면 다시 레이아웃이 깨집니다.

이미지 태그(<img>)에 style="max-width: 100%; height: auto;"를 추가하여 이미지가 표 너비를 벗어나지 않게 설정해야 합니다.


Q3. 스크롤바가 너무 안 예뻐요. 숨길 수 없나요?

A3. 스크롤바를 숨기면 사용자가 옆에 내용이 더 있다는 사실을 인지하지 못할 수 있습니다. 

디자인을 위해 숨기고 싶다면 CSS에 ::-webkit-scrollbar { display: none; }를 추가할 수 있지만, 사용자 경험 측면에서는 권장하지 않습니다.


Q4. 표 대신 다른 방법은 없나요?

A4. 데이터가 너무 방대하다면 구글 스프레드시트를 '웹에 게시'한 후 iframe으로 임베드하는 방법도 있습니다. 

이 방식은 모바일에서 자체적인 줌과 스크롤을 지원합니다.


Q5. 모바일에서 가로 스크롤이 생기면 사용자가 불편해하지 않을까요?

A5. 표의 내용이 많을 경우 억지로 한 화면에 구겨 넣으면 글자가 너무 작아져 아예 읽을 수 없게 됩니다. 

가로 스크롤은 정보를 온전히 전달하기 위한 가장 표준적인 UI/UX 방식입니다. 

"가로로 밀어서 보세요"라는 안내 문구를 표 상단에 적어주는 것이 좋습니다.


Q6. 구글 검색 엔진이 표 내부의 텍스트도 읽나요?

A6. 네, 구글 봇은 표 내부의 데이터를 매우 정교하게 스캔합니다. 

특히 비교표, 가격표, 스펙 시트 등은 구글이 정답 피드로 가져가기 좋아하는 콘텐츠 형태입니다.


외부 참조 및 학습 자료

더욱 정교한 블로그 운영을 위해 아래의 공식 문서와 도구들을 참고하시기 바랍니다.


결론

블로그스팟 Essential 테마는 매우 훌륭한 도구이지만, 사용자 친화적인 디테일은 운영자의 몫입니다. 

반응형 표 설정은 단순한 디자인 수정을 넘어, 방문자에게 신뢰를 주고 검색 엔진에게 전문성을 어필하는 핵심적인 SEO 작업입니다.


핵심 요약

1.테마 HTML 편집에서 ]]></b:skin> 위에 반응형 CSS 추가.

2.표 생성 시 고정 픽셀(px) 대신 백분율(%) 사용.

3.모바일 가동성을 위해 overflow-x: auto; 속성 필수 적용.

4.표 데이터를 활용해 검색 결과 스니펫 노출 노리기.


지금 바로 자신의 블로그를 모바일로 확인해 보세요. 

표가 잘려 있다면 위 가이드를 따라 즉시 수정하시길 권장합니다.

이 블로그의 인기 게시물

메리츠증권 연금저축계좌 개설방법과 특징 및 장점을 알아보자

이미지
메리츠증권 연금저축계좌 는  세액 공제 혜택 을 받을 수 있는 장기 투자 상품으로, 주로 노후 자금을 마련하는 목적으로 사용되며,  연금저축 의 형태로 운영되며, 일정 금액을 매월 또는 일시불로 납입하여  연금 형태 로 수령할 수 있고  펀드 ,  주식 ,  ETF  등 다양한 금융 상품을 통해 투자하고,  세액 공제 를 통해 절세 효과를 얻을 수 있는 장점이 있습니다. 메리츠증권 연금저축계좌 다양한 투자 옵션 메리츠증권은 연금저축 상품을 통해 다양한 금융 상품에 투자할 수 있도록 선택권을 제공합니다. 고객은 주식형 펀드 ,  채권형 펀드 ,  혼합형 펀드  등 다양한 옵션 중에서 자신의 투자 성향에 맞는 상품을 선택할 수 있습니다. 장기적인 자산 증식 연금저축은  장기 투자 를 기본으로 하여, 고객이  노후 준비 를 할 수 있도록 돕습니다. 시간이 지남에 따라  복리 효과 를 누리면서 자산을 증식할 수 있습니다. 온라인 관리 및 상담 서비스 메리츠증권의  모바일 앱 이나  홈페이지 를 통해 고객은 연금저축 계좌를 편리하게 관리할 수 있습니다. 투자 상담 서비스도 제공하여, 연금 상품을 효과적으로 운용할 수 있도록 지원합니다. 삼성증권 개인연금저축 가입방법과 특징 및 장점과 개설방법 연금저축 특징 소득세법에서 정한 연금수령요건에 따라 자금을 인출하는 경우 연금소득으로 과세되는 상품으로, 연간 납입액 중 600만원 한도 내에서 13.2%또는 16.5%의 세액공제율 적용 (지방소득세포함) 한편, 계약을 중도에 해지하거나 연금수령 이외의 방식으로 자금을 인출하는 경우(연금수령한도를 초과한 인출 포함) 기타소득세 납부로 불이익이 있을 수 있음. 연금수령 가입후 5년 경과 및 만55세 이후 연금수령개시, 매년 연금수령한도 이내에서 인출 연금수...
Read more »

DB손해보험 다이렉트 일상생활배상책임보험 특징과 보장항목 및 가입방법을 알아보자

이미지
DB손해보험 다이렉트 일상생활배상책임보험 은 일상생활 중 발생할 수 있는 다양한 사고로 인해 타인의 신체나 재산에 손해를 입힌 경우, 이에 대한 법적 배상 책임을 보장하는 보험으로 개인뿐만 아니라 가족 구성원이 일상생활에서 일으킬 수 있는 예기치 않은 사고에 대비할 수 있어 유용한 상품입니다. DB손해보험 다이렉트 일상생활배상책임보험 DB손해보험 다이렉트 일상생활배상책임보험의 특징 1. 넓은 보장 범위 다양한 일상생활 사고에 대한 배상 책임을 포괄적으로 보장하여 실생활에서 발생할 수 있는 예기치 않은 사고에 대비할 수 있습니다. 2. 가족형 선택 가능 개인형, 가족형 중 선택하여 본인만 가입할지 가족 구성원까지 포함할지를 결정할 수 있습니다. 3. 경제적인 보험료 온라인 가입을 통해 저렴하게 일상생활의 위험에 대비할 수 있습니다. DB손해보험 다이렉트 자동차보험 가입방법 및 보장내용과 특약을 알아보자 DB손해보험 다이렉트 일상생활배상책임보험  주요 보장항목 일상생활배상책임 개인 또는 가족이 일상생활 중 타인에게 신체적 상해나 재산상 손해를 입혔을 때 발생하는 배상 책임을 보장합니다. 예시: 자녀가 학교에서 다른 아이의 물건을 파손했거나, 반려견이 산책 중 타인을 다치게 한 경우. 주택 소유·임차자 배상책임 본인이 소유하거나 임차한 주택에서 발생한 사고로 인해 이웃의 재산에 손해를 입힌 경우 보상합니다. 예시: 화재나 누수로 인해 이웃집에 피해가 발생한 경우. 자녀 및 가족 구성원의 사고 보장 가족형 가입 시 본인뿐만 아니라 배우자와 자녀가 일으킨 사고에 대해서도 보장합니다. DB손해보험  일상생활배상책임보험 가입 방법 DB손해보험 다이렉트 홈페이지 또는 모바일 앱 접속으로...
Read more »

삼성화재 다이렉트 일상생활배상책임보험 특징 및 보장내용과 가입방법을 알아보자

이미지
삼성화재 다이렉트 일상생활배상책임보험은 일상에서 타인에게 발생할 수 있는 다양한 배상책임 사고를 보장해 주고 가족 구성원이나 본인 스스로의 부주의로 인해 다른 사람의 신체나 재산에 손해를 입혔을 때 법적으로 배상해야 하는 금액을 대신 보상해 주는 것이 핵심입니다. 자동차와 같이 별도의 보험이 의무화된 영역을 제외한 생활 전반에서 발생할 수 있는 배상책임 위험을 보장하기 때문에 ‘생활 속 필수 보험’으로 불립니다. 삼성화재 다이렉트 홈페이지 삼성화재 다이렉트  일상생활배상책임보험 특징 다이렉트 가입 설계사나 대면 상담 없이 온라인이나 모바일을 통해 손쉽게 가입할 수 있어 보험료가 상대적으로 저렴합니다. 선택형 보장 구조 보장 한도(예: 1억 원, 2억 원 등)를 선택할 수 있어 개인 상황에 맞춘 설계가 가능합니다. 합리적 보험료 일상생활에서 발생할 수 있는 위험 대비 보험료 부담이 낮아 가성비가 좋습니다. 법적 배상책임 한정 단순한 우정 차원의 변상이나 계약상 채무 이행과 같은 법적 책임이 아닌 경우는 보장되지 않습니다. 삼성화재 다이렉트 일상생활배상책임보험의 장점 일상생활에서 발생할 수 있는 다양한 사고에 대비 가능하여, 개인과 가족의 배상 책임 부담을 줄일 수 있습니다. 가족 구성원 전체 보장으로, 가족이 많을수록 가입 시 혜택이 큽니다. 반려동물로 인한 사고도 보장되어, 반려동물 관련 사고가 잦은 가정에도 적합합니다. 삼성화재  다이렉트  일상생활배상책임보험  주요 보장 내용 대인·대물 배상책임 보장 일상에서 실수로 다른 사람을 다치게 하거나, 남의 물건을 파손했을 때 보상합니다. 예: 자전거를 타다가 보행...
Read more »