블로그스팟 HTML 코드 꼬임 해결과 미디어 반응형 CSS 최적화 세팅

구글 블로거(Blogger)로 글을 쓰다 보면 사용하는 사람들이라면 한 번쯤 시대에 뒤떨어지는 유물을 사용하듯 막막함을 느낍니다.

공들여 쓴 포스팅이 스마트폰 화면에서 사정 없이 깨지고 애써 찾아 넣은 유튜브 영상은 화면 밖으로 툭 삐져나가기 일쑤입니다.

심지어 사진이나 이미지도 모바일 화면에 맞지 않아 짤리기 마찬가지입니다. 다른 곳에서 정성껏 쓴 글을 긁어오면 더 가관입니다.

기사를 복사 넣기 하면 따라온 쓰레기 코드들이 범벅 되고 html 구조가 제멋대로 꼬입니다.

몇 번 수정하다 보면 코드 전체가 아수라장으로 변해버립니다.

수많은 블로거의 속을 썩여온 이 지독한 에디터 버그를 벗어나는 방법과 이미지, 영상 등 css 코드 추가만으로 최적화하는 실전 최적화 노하우를 아낌없이 풀어보겠습니다.

모바일 가독성 이미지 픽셀의 황금률

구야비(Gooyaabi)를 포함해 대다수 매거진형 블로그스팟 테마의 본문 가로 폭은 보통 720px에서 800px 사이로 아담하게 짜여 있습니다.

스마트폰이나 디지털카메라로 찍은 큰 사이즈의 원본 사진을 그대로 삽입면 화면 사이즈와 궁합이 맞지 않아서 모바일 화면 밖으로 튕겨져 나가는 경향이 생깁니다.

글 작성자는 아무 생각 없이 기사를 작성하지만 보는 사람은 이미지가 잘려 답답합니다.

블로그스팟 테마 CSS 추가로 완전 자동화

글을 쓸 때 사진을 아예 편집하지 않고 원본 크기 그대로 무작정 업로드해도 블로그가 알아서 모바일 화면에 맞춰주는 CSS를 테마에 미리 심어두는 방법입니다. 블로그스팟 테마 css 추가 란에 붙여 넣으세요.

/* 블로그스팟 본문 이미지 모바일 완전 자동화 */
.post-body img {
max-width: 100% !important; /* 화면을 절대로 벗어나지 않음 */
height: auto !important;     /* 어떤 각도/비율이든 가로에 맞춰 세로 자동 조절 */
display: block !important;
margin: 15px auto !important; /* 사진이 항상 중앙에 정렬됨 */
}

이 문제를 해결하는 가장 확실한 열쇠는 철저한 용량 다이어트입니다.

이미지 가로 폭을 본문 규격에 맞춰 800px 수준으로 미련 없이 잘라내는 겁니다.

그다음 차세대 포맷인 WebP 파일로 변환하되, 품질(Quality) 값을 75%에서 80% 선으로 타협하는 것이 핵심입니다.

인간의 눈은 스마트폰 화면에서 이 미세한 화질 차이를 결코 잡아내지 못합니다.

눈에 보이는 선명함은 그대로 유지하면서 용량만 70% 가까이 줄여주니 모바일 로딩 속도가 눈에 띄게 빨라집니다.

어떤 화면이든 쏙 들어가는 영상

유튜브나 영상 공유 코드를 본문에 생으로 집어넣으면 모바일 화면에서 영상이 잘려 나가거나 화면에 맞지 않는 경우도 무수히 많습니다.

그렇다고 글을 쓸 때마다 HTML 모드를 넘나들며 숫자를 수정하는 번거롭죠.

블로그스팟 테마 설정의 'CSS 추가' 메뉴에 가로 영상용(16:9) 박스와 세로 쇼츠용(9:16) 반응형 코드를 딱 한 번만 제대로 심어두면 모든 고민이 끝납니다.

유튜브용 16:9 표준 영상 비율 유지

/* 블로그스팟 16:9 동영상 모바일 반응형 자동화 코딩 */
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 표준 영상 비율 유지 */
padding-top: 30px;
height: 0;
overflow: hidden;
margin: 20px 0;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

틱톡, 쇼츠 같은 9:16 비율 "세로형 영상"

/* 세로 영상(틱톡, 쇼츠 등 9:16 비율) 전용 반응형 박스 */
.video-container-vertical {
position: relative;
padding-bottom: 177.77%; /* 9:16 세로 황금 비율 유지 */
height: 0;
overflow: hidden;
margin: 20px auto;
max-width: 400px; /* 모바일/PC에서 너무 거대해지지 않도록 가로 제한 */
}
.video-container-vertical iframe {
position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;
}

이 마법 같은 코드는 사용자가 블로그 글을 보기 위해 기사를 여는 그 짧은 순간에 스마트폰의 화면 폭에 딱 맞춰줍니다.

아이폰이든 갤럭시든, 구형이든 신형이든 기종을 가리지 않고 영상을 자석처럼 화면에 찰떡같이 맞춰줍니다.

게다가 영상을 유튜브나 서버에 저장해 두고 링크만 복사해서 코드로 작성해서 글에 삽입하면 용량 걱정은 할 필요가 없어지고 블로그나 웹사이트의 속도를 향상 할 수 있습니다.

한번 클릭으로 쓰레기 HTML 코드 청소

노션이나 구글 문서 또는 메모장에서 텍스트를 복사해 오면 눈에 보이지 않는 지저분한 스타일 태그들이 주렁주렁 따라 들어옵니다.

에디터 안에서 코드가 지저분하게 아수라장이 됩니다.

이 악명 높은 블로그스팟의 버그를 역으로 이용해 기사를 매끄럽게 다듬는 3단계를 소개합니다.

외부 에디터에서 글을 작성하고 복사해서 블로그스팟 에디터를 html모드로 바꿉니다. 그리고 기사를 붙어 넣습니다. 그럼 쓰레기 코드들이 따라와서 html 창에 덕지덕지 쌓입니다. 추가로 작성하고 싶은 글이 있으면 글쓰기 모드로 바꿔서 작성합니다. 이미지나 동영상도 쓰레기 코드 걱정 없이 배치하며 편하게 기사를 끝까지 써 내려갑니다.
글 작성을 완료했다면 글쓰기 모드에서 고민하지 말고 전체 선택(Ctrl + A)을 누릅니다.
메뉴 바 우측 끝에 자리한 [서식 지우기(\(T_{x}\))] 버튼을 시원하게 클릭합니다.

서식 지우기 버튼 작동 모드

글쓰기 모드 (작성 보기): 잘 작동합니다. 블로그스팟 에디터에 글을 쓰고 일반 화면(작성 보기)에서 전체 선택(Ctrl + A)을 한 뒤 \(T_{x}\) 버튼을 누르시면 눈앞에서 지저분한 서식들이 실시간으로 싹 사라집니다.
HTML 모드 (HTML 보기): 작동하지 않습니다. HTML 모드로 들어가면 상단 메뉴 툴바의 기능 버튼들(서식 지우기 포함)이 대부분 비활성화 되거나 사라집니다.

완전히 제거되는 HTML 코드 (삭제 대상)

인라인 스타일 속성: 글자 크기, 색상, 정렬 등을 강제로 고정하던 "style="..." 속성이 전부 삭제됩니다.
시각 효과 태그: "font", "span", "b", "strong", "i", "u", "strike" 등 글자의 외형을 꾸미는 모든 태그가 칼로 도려내듯 사라집니다.
배경 및 서식 태그: 구글 문서나 메모장에서 따라 들어온 불필요한 서식 레이어가 싹 청소 됩니다.

절대 지워지지 않고 보존되는 HTML 코드 (유지 대상)

구조 태그 (가장 중요): 문단을 나누는 "p" 태그나, 제목을 지정하는 "h2", "h3" 태그는 글의 뼈대이기 때문에 절대 지워지지 않고 그대로 유지됩니다.

미디어 및 링크 태그: 본문에 삽입된 이미지("img"), 유튜브 동영상("iframe"), 하이퍼링크("a") 태그 역시 원본 그대로 안전하게 보존됩니다.

이런 사전 작업이 끝난 뒤에 강조하고 싶은 단어만 골라 굵게(Ctrl + B) 칠하고 글자에 색상을 입히고 필요한 곳에 표 만들어 발행하면 깨끗한 기사를 만들 수 있습니다.

모름지기