네이버 블로그 HTML 제한 우회: 허용 태그로 최대한 꾸미는 현실 방법 7가지
네이버 블로그 HTML 편집을 처음 써봤을 때 기대를 잔뜩 했다가 한 방에 무너진 기억이 있다. div, style, script를 넣는 순간 저장되자마자 싹 사라진다. 마치 세워놓은 블록을 누군가 뒤에서 계속 무너뜨리는 느낌이었다. 네이버는 XSS 방어 목적으로 허용하지 않는 태그와 속성을 서버에서 자동으로 제거한다. CSS와 JavaScript가 사실상 막혀 있다. 하지만 막혀 있는 길만 보면 아무것도 못 한다. 허용된 태그 안에서도 생각보다 많은 것이 가능하다는 걸 이것저것 실험하면서 알게 됐다.
첫 번째: table 태그로 레이아웃을 대신한다
지금은 table로 레이아웃 짜는 게 낡은 방식이지만, 네이버 블로그에서는 div가 막혀 있으니 table이 오히려 가장 강력한 레이아웃 도구가 된다. 마치 아파트 벽에 못을 못 박으면 양면테이프로 붙이는 것처럼, 제한된 상황에서 차선을 찾는 것이다. table의 cellpadding, cellspacing, width, align, bgcolor 속성은 네이버에서 살아남는 경우가 많다. 2단 구성이나 카드형 배치를 만들 때 실제로 유용하다.
<table width="100%" cellpadding="10" cellspacing="0"> <tr> <td width="50%" valign="top" bgcolor="#f5f5f5"> <b>왼쪽 내용</b><br> 설명 텍스트가 여기 들어갑니다. </td> <td width="50%" valign="top" bgcolor="#ffffff"> <b>오른쪽 내용</b><br> 설명 텍스트가 여기 들어갑니다. </td> </tr> </table>
두 번째: blockquote로 강조 영역 만들기
블록쿼트는 네이버에서 허용되고, 기본적으로 들여쓰기와 시각적 구분이 생긴다. 여기에 cite 속성이나 태그 중첩을 활용하면 인용 영역처럼 보이는 강조 박스를 만들 수 있다. 내용을 강조할 때 그냥 글씨를 굵게 하는 것보다 blockquote로 감싸면 훨씬 눈에 잘 들어온다는 걸 실제 포스팅에서 반응으로 확인했다.
<blockquote> <b>핵심 포인트</b><br> 이 내용은 꼭 기억해야 할 중요한 부분입니다. <br>독자가 스킵하지 않도록 별도로 강조해두는 영역입니다. </blockquote>
세 번째: font 태그의 size와 color 속성 활용
font 태그는 HTML 표준에서는 이미 deprecated됐지만 네이버 블로그에서는 여전히 살아있다. 마치 단종된 부품인데 정비소에 아직 재고가 있는 것처럼. color와 size 속성으로 텍스트 색상과 크기를 조정할 수 있고, 이걸 중요한 단어나 문장에 쓰면 CSS 없이도 시각적 강약을 줄 수 있다.
<p> 이 부분에서 <font color="#e74c3c" size="3"><b>가장 중요한 내용</b></font>을 강조합니다. 나머지 텍스트는 기본 색상으로 이어집니다. </p> <font size="2" color="#888888"> 보조 설명이나 출처 표시에 작은 회색 글씨를 씁니다. </font>
네 번째: pre 태그로 코드 블록과 들여쓰기 구현
pre 태그는 공백과 줄바꿈을 그대로 유지한다. 코드를 올릴 때 유용하지만, 코드 블록 이외에도 특정 레이아웃이 필요할 때 pre 안에서 스페이스로 배치를 잡을 수 있다. 한계는 있지만 일정한 너비 고정이 필요할 때 편리하다. 텍스트 아트 형식으로 간단한 도식을 넣을 때도 쓴다.
<pre>
+------------------+------------------+
| 항목 A | 항목 B |
+------------------+------------------+
| 내용 설명 | 비교 내용 |
+------------------+------------------+
</pre>다섯 번째: 이미지 정렬 속성으로 텍스트 배치 제어
네이버 블로그에서 img 태그의 align 속성은 작동한다. align="left" 또는 align="right"를 쓰면 텍스트가 이미지를 감싸는 float 효과를 낼 수 있다. CSS float 없이 같은 효과를 내는 것이다. 실제로 썸네일 이미지 옆에 텍스트를 배치하고 싶을 때 이 방법을 쓴다. 단, hspace와 vspace 속성으로 이미지와 텍스트 사이 여백도 줄 수 있다.
<img src="이미지URL" align="left" width="200" hspace="15" vspace="5"> <p> 이 텍스트는 이미지 오른쪽에 자동으로 배치됩니다. hspace로 이미지와 텍스트 사이 가로 여백을 줄 수 있고 vspace로 세로 여백도 조정할 수 있습니다. 충분한 텍스트가 있으면 이미지 옆을 채우다가 아래로 이어집니다. </p> <br clear="all">
여섯 번째: ul, ol, li로 구조 있는 목록 만들기
목록 태그는 네이버에서 안정적으로 허용된다. 그냥 글로 나열하는 것보다 ul, ol을 쓰면 시각적 구조가 생기고 독자가 스캔하기 쉬워진다. 신문에서 내용을 단락으로 나누는 것처럼, 목록으로 나누면 같은 내용이어도 훨씬 읽기 쉽다. 중첩 목록을 써서 계층 구조를 만들 수도 있다.
<ol>
<li><b>첫 번째 방법</b>: 설명 텍스트 <ul>
<li>세부 사항 A</li>
<li>세부 사항 B</li> </ul> </li>
<li><b>두 번째 방법</b>: 설명 텍스트</li>
<li><b>세 번째 방법</b>: 설명 텍스트</li>
</ol>
일곱 번째: a 태그 target 속성으로 외부 링크 처리
a 태그는 허용된다. 그런데 href만 쓰는 게 아니라 target="_blank"로 새 탭에서 열리게 하는 것, 그리고 링크 텍스트를 font 태그와 조합해서 시각적으로 구분해주는 것이 실제 포스팅에서 유용했다. 네이버 안에서만 링크를 걸 때와 외부 링크를 걸 때 느낌이 달라야 한다.
<p> 자세한 내용은 <a href="https://example.com" target="_blank"> <font color="#2980b9"><b>여기에서 확인하세요</b></font> </a> 에서 확인할 수 있습니다. </p>
느낀점
네이버 블로그의 HTML 제한을 처음 마주했을 때는 손발이 묶인 느낌이었다. 티스토리는 자유롭게 쓰는데 왜 네이버는 이렇게 막냐는 생각도 했다. 그런데 막혀 있는 상황에서 방법을 찾다 보니 오히려 HTML 기본 태그들의 속성을 제대로 들여다보게 됐다. 표준 방식이 아닌 것들이 여전히 작동한다는 것도 알았고, table과 font 태그가 이렇게 쓸 만한 거였나 하는 새로운 시각도 생겼다. 제약이 오히려 배움이 된 경우였다. 완전히 자유로운 환경보다 제약이 있는 환경에서 더 창의적으로 생각하게 된다는 걸 네이버 블로그 HTML을 붙잡으면서 몸으로 느꼈다.
- 네이버 블로그 고객센터: help.naver.com
- MDN Web Docs - HTML Elements Reference: developer.mozilla.org