네이버 블로그에 HTML 붙여넣는 법
서식이 깨지는 진짜 이유
워드나 노션, 다른 블로그에서 복사한 글을 네이버 블로그에 붙여넣으면 글꼴이 제각각이 되거나 서식이 통째로 사라집니다. 흔히 "네이버가 붙여넣기를 지원하지 않는다"고 오해하지만, 정확히는 스마트에디터 ONE이 붙여넣은 HTML을 자체 규칙으로 걸러내기 때문입니다.
에디터는 클립보드에 담긴 HTML을 받아 다음과 같이 정리합니다.
<style>태그와 외부 CSS 파일 참조를 통째로 제거합니다.class와id속성을 지웁니다. 스킨 CSS와 충돌하지 않게 하려는 조치입니다.- 허용 목록에 없는 태그(
<section>,<input>등)를 제거하거나<div>로 바꿉니다. - 태그의
style속성 중 글꼴·크기·색상·정렬 등 일부 속성만 남깁니다.
일반적인 HTML은 스타일 대부분이 CSS 파일이나 class에 들어 있습니다. 그 둘이 제거되면 남는 건 스타일 없는 뼈대뿐이라, 붙여넣은 글이 밋밋해지는 것입니다.
해법은 인라인 스타일
네이버가 남겨두는 것이 style 속성이라면, 처음부터 모든 서식을 style 속성에 직접 써 넣으면 됩니다.
<!-- 이렇게 쓰면 네이버에서 스타일이 사라집니다 -->
<p class="body-text">본문입니다</p>
<!-- 이렇게 쓰면 그대로 살아남습니다 -->
<p style="font-size:16px;line-height:1.9;color:#383838;">본문입니다</p>문제는 글 하나에 문단이 수십 개라는 점입니다. 제목, 목록, 인용문, 표의 모든 셀에 일일이 스타일을 써 넣는 건 현실적이지 않습니다. 이 변환기의 네이버 모드가 하는 일이 정확히 그 작업입니다. 마크다운을 HTML로 바꾸면서 모든 태그를 순회하며 네이버가 허용하는 형태의 인라인 스타일을 붙여줍니다.
단계별 붙여넣기 절차
1. 마크다운을 왼쪽에 붙여넣습니다
Obsidian, VS Code, ChatGPT 답변, 노션 내보내기 등 어디서 온 마크다운이든 상관없습니다. .md 파일을 입력창에 끌어다 놓아도 됩니다.
2. 플랫폼 탭에서 "네이버 블로그"를 선택합니다
본문 16px·행간 1.9처럼 네이버 블로그에서 자연스럽게 읽히는 값으로 인라인 스타일이 입혀집니다. 단, 미리보기는 변환기 쪽 모습입니다. 인용문과 소제목 밑줄은 네이버에 들어가는 순간 네이버 방식으로 바뀝니다(아래 테스트 결과).
3. "서식 그대로 복사"를 누릅니다
이 버튼은 클립보드에 HTML 형식의 리치 텍스트를 담습니다. HTML 코드 복사와 헷갈리기 쉬운데, 네이버는 HTML 소스를 직접 넣는 모드가 없으므로 반드시 서식 그대로 복사를 써야 합니다.
4. 네이버 블로그 글쓰기 본문에 Ctrl+V
블로그 글쓰기 화면을 열고 본문 영역을 클릭한 다음 붙여넣습니다. 제목 입력란이 아니라 본문에 넣어야 합니다. 테스트에서는 별도 확인 창 없이 바로 붙었습니다.
마크다운 맨 위의 # 제목 줄은 제목 입력란이 아니라 본문 첫 줄로 들어갑니다. 제목은 제목란에 따로 입력하고, 본문에 들어간 제목 줄은 지우세요.
5. 이미지를 올리고 발행합니다
본문 구조가 자리를 잡으면, 이미지가 들어갈 위치에 커서를 두고 에디터 상단의 사진 버튼으로 직접 업로드합니다.
직접 붙여넣어 본 결과 (2026-09-20)
제목·강조·목록·체크리스트·인용문·코드블록·표·링크·이미지가 모두 들어간 점검용 마크다운을 이 변환기의 네이버 모드로 변환해 서식 그대로 복사한 뒤, PC 크롬 계열 브라우저에서 스마트에디터 ONE 본문에 붙여넣었습니다. 발행하지 않고 편집 화면에서 요소마다 확인한 결과입니다. 첫 점검에서 깨졌던 코드블록·중첩 목록·소제목 밑줄은 변환기를 고쳐 같은 날 다시 붙여넣어 확인했고, 아래 표는 그 재검증 결과입니다.
| 요소 | 결과 |
|---|---|
| 굵게·기울임·취소선 | 그대로 유지 |
| 인라인 코드 | 빨간 글자 + 회색 배경 유지 |
| 링크 | 클릭되는 링크로 유지 (주소 3개 모두 보존) |
| 체크리스트 | ☑ / ☐ 기호로 유지 |
| 번호 목록 | 유지 |
| 표 | 유지. 가운데·오른쪽 정렬도 그대로 |
| 인용문 | 네이버 인용구 모양으로 바뀜(가운데 정렬·기울임). 인용 안의 인용은 하나로 합쳐짐 |
| 소제목 밑줄 | 해결됨 — 변환기가 밑줄을 넣지 않아 구분선 블록이 생기지 않음 |
| 4·5단계 제목 | 본문 크기의 굵은 글씨로 바뀜 |
| 중첩 목록 | 해결됨 — – 접두어와 들여쓰기로 계층이 구분됨. 단, 하위 항목에도 불릿(•)이 함께 남음 |
| 코드블록 | 해결됨 — 한 칸짜리 표로 감싸이지만 줄바꿈·들여쓰기·고정폭 글꼴이 그대로 유지되어 회색 코드 상자로 보임 |
| 외부 이미지 | 업로드되지 않고 원래 주소를 그대로 불러옴 |
– 접두어와 앞쪽 여백으로 단계가 구분됩니다. 네이버가 목록 기호를 숨기지 않아 하위 항목에도 불릿이 함께 보입니다.
코드블록은 그대로 붙여넣으면 됩니다
변환기가 코드블록을 <pre> 대신 줄마다 줄바꿈을 박은 문단으로 내보내기 때문에, 네이버가 이걸 한 칸짜리 표로 감싸더라도 줄 구분과 들여쓰기가 그대로 남습니다. 회색 배경의 코드 상자처럼 보입니다. 다만 문법 강조 색은 들어가지 않으니, 색깔이 꼭 필요하면 에디터 상단의 소스코드 버튼으로 다시 넣으세요. 코드가 많은 기술 글이라면 여전히 티스토리나 벨로그가 편합니다.
하위 목록은 접두어로 구분됩니다
네이버는 중첩 목록을 무조건 한 단계로 펴버립니다. 그래서 변환기가 먼저 평면 목록으로 펴서 하위 항목에 – 접두어와 앞쪽 여백을 붙입니다(중첩 번호 목록은 1. ). 계층은 그대로 보이지만, 네이버가 목록 기호를 숨기는 설정을 무시해서 하위 항목에도 불릿(•)이 함께 남습니다. 거슬리면 붙여넣은 뒤 해당 줄에서 목록 서식만 해제하세요.
네이버가 지우는 것들
인라인 스타일을 써도 네이버에서 살아남지 못하는 요소가 있습니다. 변환기는 이 부분을 미리 대체해 둡니다.
| 원래 요소 | 네이버에서 | 변환기의 처리 |
|---|---|---|
체크박스 <input> | 태그 삭제 | ☑ / ☐ 기호로 치환 |
목차 앵커 링크 #id | id 제거로 링크 무효 | 링크 없는 목록으로 출력 |
| 코드블록 | 한 칸짜리 표로 바뀌고 줄바꿈 사라짐 | 붙여넣은 뒤 소스코드 블록으로 다시 넣기 권장 |
| 웹폰트 지정 | 에디터 글꼴로 대체 | 맑은 고딕 계열 기본값 사용 |
<style>, <script> | 전부 제거 | 애초에 생성하지 않음 |
표는 잘 붙습니다. 테스트에서도 정렬까지 유지됐습니다. 다만 열이 많으면 모바일에서 옆으로 잘리니 4열 이하를 권합니다. 표 셀 안의 문장도 짧게 유지하는 편이 좋습니다.
이미지는 따로 올려야 합니다
마크다운의 는 외부 이미지 주소를 참조하는 링크일 뿐입니다. 네이버 블로그에 그대로 넣으면 다음 문제가 생깁니다.
- 외부 이미지 서버가 사라지면 몇 달 뒤 이미지가 통째로 깨집니다.
- 네이버 검색에 이미지가 색인되지 않아 유입에 손해를 봅니다.
- 일부 도메인은 아예 차단되어 표시되지 않습니다.
테스트에서 열 때마다 무작위 사진을 돌려주는 주소를 넣어 봤더니, 편집 화면을 다시 열 때마다 다른 사진이 떴습니다. 네이버가 이미지를 저장하지 않고 원래 주소에서 그때그때 불러온다는 뜻입니다.
글 구조는 변환기로 옮기고, 이미지만 발행 직전에 에디터에서 직접 업로드하는 흐름이 가장 안전합니다. 마크다운 원문에 ![이미지: 대시보드 화면]()처럼 자리 표시만 적어두면 어디에 무엇을 넣을지 헷갈리지 않습니다.
발행 전 점검 목록
- 모바일 미리보기를 꼭 확인하세요. 네이버 블로그 트래픽은 대부분 모바일에서 옵니다.
- 본문 첫 문단에 핵심 키워드를 자연스럽게 넣으세요. 검색 결과 요약에 노출되는 부분입니다.
- 소제목(h2·h3)을 3개 이상 두면 글이 훨씬 잘 읽히고 체류 시간이 늘어납니다.
- 표와 목록은 스크롤을 멈추게 합니다. 긴 설명 문단은 목록으로 쪼개세요.
- 붙여넣은 뒤 빈 문단이 여러 개 생겼다면 지워주세요. 변환 과정에서 남는 경우가 있습니다.
- 소제목 아래 생긴 구분선 블록이 거슬리면 지우세요. 제목 아래 간격이 원래대로 좁아집니다.