솔직히 저는 네이버 블로그에서도 div와 style 속성이 당연히 된다고 생각했습니다. 티스토리에서 하던 방식 그대로 붙여 넣었다가 저장 직후 싹 사라지는 걸 보고 한동안 멍했습니다. 그 경험 이후로 네이버 블로그의 HTML 허용 구조를 하나씩 직접 실험하며 파악해 나갔는데, 오늘은 그 과정에서 터득한 현실적인 방법들을 공유합니다.
저장하자마자 사라진 코드 — 네이버의 XSS 방어 구조
네이버 블로그가 div, style, script 태그를 서버 단에서 자동 제거하는 이유는 XSS(Cross-Site Scripting) 방어 때문입니다. XSS란 악의적인 사용자가 웹 페이지에 스크립트를 삽입해 다른 방문자의 브라우저에서 해당 코드를 실행시키는 공격 방식입니다. 쉽게 말해, 누군가 블로그 본문에 악성 JavaScript를 심어두면 그 글을 읽는 사람의 계정 정보나 쿠키가 탈취될 수 있다는 뜻입니다. 네이버 입장에서는 플랫폼 전체를 보호하기 위해 강력한 필터링을 선택한 것이고, 덕분에 개인 블로거는 CSS 한 줄 쓰지 못하는 처지가 됩니다.
처음엔 내가 문법을 잘못 쓴 줄 알고 몇 번을 다시 입력했습니다. 두 번, 세 번 시도해도 결과는 같았고, 그때서야 "아, 이건 내 실수가 아니구나"라는 걸 받아들였습니다. 이 사실을 모르고 시간을 낭비하는 분들이 생각보다 많을 것 같아서 먼저 짚고 넘어갑니다.
네이버가 실제로 허용하는 태그 목록은 제한적입니다. 직접 실험해서 확인한 주요 허용 태그들을 정리하면 다음과 같습니다.
- table (cellpadding, bgcolor 속성 포함 허용)
- blockquote (기본 들여쓰기 스타일 적용됨)
- font (color, size 속성 허용)
- pre (고정 너비 폰트로 출력)
- ul, ol (중첩 목록 구성 가능)
- img (align, hspace, vspace 속성 허용)
- a (href, target 속성 허용)
허용 태그로 꾸미기 — deprecated 속성을 쓸 수밖에 없는 이유
제가 가장 먼저 실험한 건 table이었습니다. cellpadding과 bgcolor가 살아있다는 걸 확인하자마자 2단 레이아웃을 구성해봤는데, 결과가 생각보다 깔끔하게 나왔습니다. table 기반 레이아웃이란 HTML 초창기에 쓰이던 구조 설계 방식으로, 행(row)과 열(column)로 이루어진 표 구조 안에 콘텐츠를 배치해 다단 레이아웃처럼 보이게 만드는 기법입니다. 현재 웹 표준에서는 CSS Flexbox나 Grid로 대체된 방식이지만, 네이버처럼 CSS를 막아둔 환경에서는 유일한 선택지입니다.
blockquote는 별다른 스타일 없이도 기본 들여쓰기 덕분에 본문과 시각적으로 구분됩니다. 중요한 인용문이나 강조하고 싶은 문장을 감쌀 때 자주 쓰게 됐고, CSS 없이도 충분히 쓸 만한 효과가 나왔습니다.
font 태그는 솔직히 처음엔 손이 잘 안 가는 태그였습니다. deprecated 태그란 HTML 표준 기구인 W3C가 더 이상 사용을 권장하지 않아 향후 브라우저 지원이 축소될 수 있다고 명시한 태그를 말합니다. font 태그가 여기 해당하고, img의 align 속성도 마찬가지입니다. 그럼에도 네이버 환경에서는 실제로 동작하고 대안이 없으니 현실적으로 쓸 수밖에 없었습니다. 표준을 알면서도 deprecated 방식을 택하는 건 찜찜하지만, 플랫폼의 제약이 그 찜찜함보다 컸습니다.
img의 align 속성으로 float 효과를 내는 방식도 같은 맥락입니다. float이란 원래 CSS 속성으로, 요소를 좌우로 띄워서 주변 텍스트가 그 옆을 감싸도록 만드는 기능입니다. 네이버에서는 CSS가 막혀 있으니 img 태그의 align="left" 또는 align="right" 속성으로 동일한 시각 효과를 구현합니다. hspace와 vspace 속성으로 이미지 주변 여백도 조절할 수 있어서, 이것만 알아도 이미지 배치 자유도가 꽤 올라갑니다. 제가 직접 써봤는데, 이미지 옆에 설명 텍스트를 흘려 넣는 레이아웃이 예상보다 잘 됩니다.
MDN Web Docs에 따르면 align, hspace, vspace 같은 표현용 속성들은 명세상 사용 중단(deprecated)된 것으로 분류되어 있습니다(출처: MDN Web Docs). 그럼에도 대부분의 브라우저가 현재까지는 렌더링을 지원하고 있고, 네이버 블로그 환경에서는 실질적으로 대체 수단이 없습니다.
현실적인 한계 — 이 방법들의 유효기간은 얼마나 남았을까
제가 직접 겪은 가장 뼈아픈 문제는 모바일 화면에서의 table 레이아웃 붕괴입니다. PC에서는 2단이 예쁘게 나오는데 모바일에서는 칸이 너무 좁아지거나 글자가 잘리는 상황을 여러 번 겪었습니다. 반응형 웹이란 화면 크기에 따라 레이아웃이 유동적으로 변하는 방식을 말하는데, 이를 구현하려면 CSS 미디어 쿼리(Media Query)가 필요합니다. 미디어 쿼리란 특정 화면 너비 이하일 때 다른 스타일을 적용하도록 지정하는 CSS 규칙입니다. 네이버에서는 이게 불가능하니 table 레이아웃은 구조적으로 반응형이 될 수 없습니다.
더 근본적인 불안도 있습니다. 네이버가 내부 정책으로 허용 태그 목록을 바꾸는 순간, 공들여 꾸며둔 스타일이 하루아침에 전부 깨질 수 있습니다. 실제로 네이버는 서비스 정책을 블로거에게 사전 공지 없이 변경한 사례가 있기 때문에, 이 방법들은 언제까지 유효할지 보장할 수 없습니다. font 태그와 deprecated 속성들은 브라우저 지원이 앞으로 줄어들 가능성도 배제할 수 없습니다.
W3C(World Wide Web Consortium)는 지속적으로 HTML Living Standard를 갱신하며 deprecated 요소들의 지원 중단을 권고하고 있습니다(출처: MDN Web Docs – table 요소). 브라우저 벤더들이 이 권고를 언제까지 무시할 수 있을지는 알 수 없습니다.
제 결론은 이렇습니다. 이 7가지 방법은 네이버 블로그라는 제약 환경 안에서의 최선이지, 제약 자체를 해결하는 방법이 아닙니다. 제가 직접 실험하면서 역으로 HTML 기본 속성들을 꼼꼼하게 들여다보게 됐다는 건 분명 수확이었습니다. 그러나 디자인 자유도에 진지한 투자를 하고 싶다면, 처음부터 CSS와 JavaScript를 자유롭게 쓸 수 있는 플랫폼을 선택하는 것이 현실적으로 훨씬 효율적이라고 생각합니다.
네이버 블로그를 이미 운영 중이라면 위에서 정리한 허용 태그 범위 안에서 실험해보는 건 충분히 가치 있습니다. 다만 모바일 화면에서 반드시 직접 확인하는 습관을 들이고, 스타일이 깨질 경우를 대비해 태그를 최소한으로 쓰는 전략이 장기적으로 안정적입니다.
참고:
- 네이버 블로그 고객센터: https://help.naver.com
- MDN Web Docs – HTML Elements Reference: https://developer.mozilla.org/ko/docs/Web/HTML/Element
- MDN Web Docs – table 요소: https://developer.mozilla.org/ko/docs/Web/HTML/Element/table