[구글 애드센스 #04] 블로그스팟 편집기 최소 사용법 — 서식과 이미지에서 헤매지 않기
블로그스팟 편집기는 워드나 네이버 블로그처럼 직관적이지 않습니다. 표를 넣거나 이미지를 올리는 단순한 작업에서도 예상 못 한 곳에서 막힙니다.
처음 쓰시는 분이 같은 데서 헤매지 않도록, 실제로 부딪힌 문제와 해결 방법을 정리합니다.
결론부터 — 지켜야 할 네 가지
| 규칙 | 이유 |
|---|---|
| HTML 모드에서만 작업 | 작성 모드로 전환하면 서식이 정리됨 |
| 서식은 테마 CSS에 | 본문에 쓰면 저장할 때 사라짐 |
| 이미지 삽입은 PC에서 | 모바일 앱 마크업이 충돌을 일으킴 |
| 대체 텍스트도 HTML에서 | 설정 창을 거치면 서식이 정리됨 |
※ 급하신 분은 여기까지만 보셔도 됩니다.
왜 이런 규칙이 필요한지, 하나씩 풀어보겠습니다.
공들여 만든 표가 저장 한 번에 사라졌다
첫 글에 플랫폼 비교표를 넣었습니다. 색을 입히고 가운데 정렬을 맞추고 모바일에서 가로 스크롤이 되게 만들었습니다.
그런데 저장하고 다시 열어보니 표가 밋밋한 기본 형태로 돌아와 있었습니다. 색도 테두리도 정렬도 전부 사라진 채 내용만 남아 있었습니다.
원인은 편집기의 동작 방식이었습니다. HTML 모드와 작성 모드를 오갈 때, 그리고 모바일 앱에서 저장할 때 본문에 직접 지정한 서식을 정리해버립니다.
여러 번 다시 넣어봤지만 결과는 같았습니다. 제 실수가 아니라 편집기가 원래 그렇게 만들어져 있는 것이었습니다.
해결 — 서식을 본문 밖으로 빼기
서식을 본문에 쓰지 않고 테마에 미리 심어두는 방식으로 바꿨습니다.
테마 쪽에 '이런 이름이 붙은 표는 이렇게 보여라'라고 규칙을 정해두고, 본문에는 이름표만 답니다. 편집기가 지우는 건 본문에 적힌 서식이지 이름표가 아니라서, 이제 저장을 몇 번 하든 그대로 유지됩니다.
부수 효과가 더 컸습니다. 앞으로 쓸 모든 글에 자동으로 적용되고, 나중에 색을 바꾸고 싶으면 한 곳만 고치면 전체 글에 반영됩니다. 첫 글을 쓸 때 이걸 알았다면 두 번 작업할 일이 없었을 겁니다.
모바일에서 넣은 이미지가 PC에서 오류를 냈다
두 번째 문제입니다. PC에서 파일 업로드가 보안 정책으로 막혀 있는 환경이라, 이미지는 모바일 앱으로 넣었습니다.
그리고 PC에서 대체 텍스트를 넣으려고 글을 열었더니 "HTML 콘텐츠가 잘못되었습니다"라는 경고가 떴습니다. 전환하면 작성한 내용 일부가 저장되지 않을 수 있다는 안내와 함께요.
확인해보니 모바일 앱이 이미지를 넣으면서 문단 태그 안에 다른 블록을 밀어 넣는 구조를 만들고 있었습니다. 문법상 허용되지 않는 형태라 PC 편집기가 처리하지 못한 겁니다.
해결 — 이미지 보관용 초안 만들기
업로드는 모바일에서 하되, 본문에 넣는 작업은 PC에서 하는 방식으로 나눴습니다.
업로드는 모바일, 본문 작업은 PC로 나눕니다.
| 단계 | 작업 |
|---|---|
| 1 | 모바일 앱에 '이미지 보관용' 초안을 하나 만든다 |
| 2 | 필요한 이미지를 전부 여기에 넣고 임시저장한다 |
| 3 | PC에서 그 초안을 열어 이미지 주소만 복사한다 |
| 4 | 본문에 직접 이미지 코드를 작성해 넣는다 |
※ 보관용 초안은 절대 삭제하지 않습니다. 지우면 이미지 주소도 함께 죽습니다.
PC에서 업로드가 되는 환경이라면 이 과정은 필요 없습니다. 그냥 PC에서 넣으시면 됩니다. 저처럼 업로드가 막혀 있을 때만 쓰는 우회로입니다.
번거로워 보이지만 오히려 나은 점도 있었습니다. 삽입 위치와 대체 텍스트를 PC에서 정확히 지정할 수 있어서, 발행 후에 다시 손볼 일이 없어졌습니다.
이미지 관련해서 추가로 겪은 것
주소를 가져와 본문에 넣는 방식으로 바꾸고 나니, 그 다음 문제들이 보였습니다.
대체 텍스트도 HTML에서 직접 넣는 게 안전합니다. 작성 모드에서 이미지 설정 창으로 입력할 수 있지만, 그 화면을 거치는 것 자체가 서식을 정리시키는 계기가 됩니다. 이미지 태그 안에 alt를 직접 써넣으면 그럴 일이 없습니다.
이미지를 두 장 연달아 넣으면 한 장처럼 보입니다. 실제로 화면 캡처 두 개를 붙여놨더니 어디서 끊기는지 알 수 없어서, 읽는 사람이 무슨 그림인지 파악하기 어려웠습니다. 각 이미지 아래에 한 줄짜리 설명을 넣으니 바로 해결됐습니다.
폭은 통일하는 편이 낫습니다. 원본 크기가 다르면 나란히 놓였을 때 어긋나 보입니다. 세로 길이는 달라도 상관없지만 가로는 맞추는 게 정돈돼 보였습니다.
정리하면
두 문제 모두 편집기가 제 작업물을 임의로 정리하면서 생긴 일이었습니다. 서식은 저장할 때 지워졌고, 이미지는 다른 기기에서 만든 구조가 충돌했습니다.
해결책도 결국 같은 방향이었습니다. 편집기가 손댈 수 있는 영역에서 중요한 것을 빼내는 것입니다. 서식은 테마로 옮기고, 이미지 코드는 직접 작성하고, 대체 텍스트도 설정 창을 거치지 않고 넣습니다.
처음 쓰실 때 위의 네 가지만 알고 계셔도, 저처럼 같은 작업을 두 번 하는 일은 없을 겁니다.
다음 글에서는 이 블로그를 처음 만들 때로 돌아가, 커스텀 도메인을 연결하면서 막혔던 지점을 정리합니다. 무료 블로그에 자기 주소를 붙이는 과정에서 무엇을 알아야 했는지 기록할 예정입니다.
댓글
댓글 쓰기