쿠팡파트너스 배너가 글자로만 보일 때 — 네이버·티스토리별 정답 정리
쿠팡 배너 코드(iframe)가 텍스트로 주르륵 나오는 이유와, 네이버·티스토리·워드프레스별 확실한 해결법을 초보자도 따라 하도록 정리했습니다.
네이버 블로그에 쿠팡파트너스 배너를 붙였더니
<iframe src="...">같은 코드가 글자로만 주르륵 나온 적 있나요? 고장이 아니라 붙여넣는 위치(모드) 와 네이버의 정책 때문입니다. 원인과 플랫폼별 확실한 해결법을 초보자도 따라 할 수 있게 정리했습니다.
들어가며
쿠팡파트너스에서 배너를 만들면 아래처럼 생긴 코드를 줍니다.
<iframe src="https://ads-partners.coupang.com/widgets.html?id=1004255&template=carousel&trackingCode=AF..."></iframe>
이걸 그대로 복사해서 네이버 블로그 글쓰기 창에 붙이면, 예쁜 상품 배너가 뜨는 게 아니라 위 코드가 글자 그대로 화면에 길게 나옵니다. "내가 뭘 잘못 눌렀나?" 싶지만, 사실은 아주 흔한 일이고 원리만 알면 5분이면 해결됩니다.
왜 이런 일이 생길까요?
원인은 딱 두 가지입니다.
- 붙여넣는 자리가 잘못됨 — 배너 코드는 "컴퓨터가 읽는 명령어(HTML)"인데, 이걸 "사람이 읽는 글"을 쓰는 일반 글쓰기 칸에 붙이면 컴퓨터가 명령어로 알아듣지 못하고 그냥 글자로 취급합니다.
- 네이버가 외부 배너를 막아둠 — 네이버 블로그(스마트에디터 ONE)는 보안상 외부 사이트의 iframe·자바스크립트를 지원하지 않습니다. 그래서 위치를 아무리 바꿔도 쿠팡 배너 코드는 네이버에서 정상 작동하지 않습니다.
같은 코드라도 어디에 붙이느냐에 따라 컴퓨터가 다르게 받아들입니다.
실제로 쿠팡파트너스 배너 만들기 화면을 보면, 안내 문구에 이렇게 적혀 있습니다.
- 검색 위젯: "iframe이 지원되는 웹페이지 환경에서만 적용할 수 있습니다."
- 다이나믹 배너: "자바스크립트가 지원되는 웹페이지 환경에서만 적용할 수 있습니다."
즉, 이 배너들은 애초에 iframe/자바스크립트를 허용하는 곳에서만 동작하도록 설계돼 있고, 네이버 블로그는 그 조건을 만족하지 않습니다.
30초 용어 정리
| 어려운 말 | 쉽게 풀면 |
|---|---|
| iframe(아이프레임) | 내 페이지 안에 다른 사이트의 화면을 창처럼 끼워 넣는 기술 |
| 자바스크립트 | 페이지를 움직이게/자동으로 바뀌게 만드는 프로그램 |
| HTML | 웹페이지를 이루는 기본 언어(설계 도면) |
| HTML 모드 | 글쓰기 창을 "글" 대신 "코드"를 붙일 수 있는 상태로 바꾼 것 |
| 스마트에디터 ONE | 네이버 블로그의 글쓰기 프로그램 이름 |
내 블로그는 어떻게 해야 할까?
플랫폼마다 답이 다릅니다. 아래 흐름도로 먼저 확인하세요.
네이버 블로그 — 이미지 배너 + 링크 방식 (유일하게 안정적)
네이버에서는 코드를 넣는 대신, "배너 이미지 + 그 이미지에 링크 걸기" 로 똑같은 효과를 냅니다. 클릭하면 쿠팡으로 넘어가고, 정상적으로 수익도 집계됩니다.
준비물
- 쿠팡파트너스에서 만든 배너 이미지 파일(또는 상품 대표 이미지)
- 쿠팡파트너스 내 추적 링크(URL) — 클릭을 내 실적으로 잡아주는 주소
💡 팁: 쿠팡파트너스에서 배너를 만들 때 "이미지 다운로드" 나 상품 링크 복사 기능이 함께 제공됩니다. 이미지와 링크(URL)를 각각 챙겨두세요.
따라 하기
- 네이버 블로그 글쓰기 를 엽니다.
- 배너를 넣고 싶은 자리에 커서를 두고, 상단 도구에서 사진 을 눌러 준비한 배너 이미지를 삽입합니다.
- 방금 넣은 이미지를 클릭해서 선택합니다.
- 이미지가 선택된 상태에서 나타나는 링크(🔗) 버튼 을 누릅니다.
- ⭐ 칸에 쿠팡파트너스 추적 링크(URL) 를 붙여넣고 적용합니다.
- 발행 하면 끝. 이제 독자가 그 이미지를 누르면 쿠팡 상품 페이지로 이동합니다.
⚠️ 주의: 링크를 안 걸고 이미지만 넣으면 수익이 집계되지 않습니다. 반드시 이미지에 내 추적 링크를 걸어주세요. 또한 쿠팡파트너스 정책상 게시물 어딘가에 "이 포스팅은 쿠팡파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다." 문구를 넣어야 합니다.
티스토리·워드프레스 — HTML 모드로 붙여넣기
이쪽은 코드를 그대로 써도 됩니다. 단, 일반 글쓰기 칸이 아니라 HTML 모드에 붙여야 합니다.
- 글쓰기 화면에서
<>(HTML) 버튼 을 찾아 누릅니다. (티스토리: 상단 우측의기본모드 → HTML전환) - 화면이 코드 편집 상태로 바뀌면, 쿠팡에서 받은 iframe/스크립트 코드를 그대로 붙여넣습니다.
- 다시 기본 모드로 돌아오면 배너가 자리를 잡은 것을 볼 수 있습니다.
💡 팁: HTML 모드가 아닌 일반 모드에 붙이면 네이버와 똑같이 글자로만 나옵니다. "코드가 글자로 보인다 = 지금 일반 모드다" 라고 기억하세요.
"미리보기에서 안 보여요" — 정상입니다
iframe·스크립트 배너는 저장/발행 후 실제 화면에서만 제대로 표시됩니다. 편집 중 미리보기에서는 빈 칸이거나 안 보이는 게 정상이니, 놀라지 말고 발행한 뒤 실제 글 주소로 들어가서 확인하세요.
자주 막히는 포인트
| 증상 | 진짜 원인 | 해결 |
|---|---|---|
| 코드가 글자로 주르륵 나온다 | 일반 글쓰기 칸에 붙임 | HTML 모드로 전환(티스토리·WP) / 네이버는 이미지+링크 |
| 네이버에서 아무리 해도 안 된다 | 네이버는 외부 iframe 미지원 | 이미지 배너 + 링크 방식으로 대체 |
| 배너는 보이는데 수익이 안 잡힌다 | 이미지에 추적 링크를 안 걸음 | 이미지 선택 → 링크(🔗)에 내 추적 URL |
| 편집 중 미리보기에 안 보인다 | 원래 발행 후에만 보임 | 발행 후 실제 주소에서 확인 |
<> 버튼이 안 보인다 | 스마트에디터 ONE(네이버) | 네이버는 HTML 모드 자체가 없음 → 이미지 방식 |
마치며
정리하면 딱 한 문장입니다. "네이버는 이미지+링크, 티스토리·워드프레스는 HTML 모드." 원리를 알면 배너가 글자로 깨지는 문제는 다시 겪지 않습니다.
이렇게 "왜 안 되는지"까지 이해하면, 다음에 비슷한 문제를 만나도 스스로 해결할 수 있습니다. 코디움랩은 이런 디지털 도구의 원리와 실전 사용법을, 컴퓨터가 어렵게 느껴지는 분들도 따라 할 수 있게 풀어 드립니다. AI 활용부터 블로그·콘텐츠 운영까지 — 막히는 지점이 있다면 코디움랩과 함께 풀어보세요.
댓글
아직 댓글이 없어요. 첫 댓글을 남겨보세요!