홈›가이드›아임웹에 댓글 위젯 붙이기, 두 화면이면 끝납니다

아임웹에 댓글 위젯 붙이기, 두 화면이면 끝납니다

한 줄은 사이트 설정에, div 하나는 코드 위젯에. 두 화면을 오가는 것이 설치의 전부입니다.

Mr. Latte
갱신

아임웹에서도 호스팅형 댓글창이 그대로 돕니다. 이유를 먼저 알아 두면 나머지가 쉬워집니다. 아임웹은 붙여넣은 코드를 "모든 페이지의 HTML에 공통으로 삽입됩니다" 라고 밝힙니다. iframe 안에 가두지 않는다는 뜻이고, 그래서 위젯이 자기가 어느 사이트에 있는지 확인할 때 내 도메인을 그대로 읽습니다. 설치는 화면 두 곳에서 끝납니다. 로더 한 줄은 환경설정 > SEO(검색엔진최적화) > 고급 설정 > 공통 코드 삽입의 Footer Code 에, 마운트 요소는 댓글이 필요한 페이지의 코드 위젯에 넣습니다. 다만 요금제와 도메인 이야기를 먼저 읽으세요. 위젯이 내 주소에서 응답할 수 있는지를 그 둘이 정합니다.

지금은 무료로 시험해 볼 아임웹 사이트가 없다

아임웹이 적지 않은 것부터 짚습니다. 이 글에서 확인한 어떤 지면에도 코드 삽입에 특정 요금제가 필요하다는 문장은 없었습니다. 요금 페이지의 기능 비교표에 스크립트나 코드 삽입 항목이 아예 없고, 요금제를 설명하는 두 도움말에도 그런 언급이 없습니다. 그러니 "어느 등급부터 입력칸이 열리는가"는 여기서 추측하지 않고 미확인으로 남겨 둡니다.

실무적인 답은 문서화된 두 사실이 대신 정해 줍니다. 하나, Free 요금제는 2025년 7월 30일에 폐지되었습니다. 새 사이트는 14일 무료 체험 뒤 결제해야 유지되고, Starter 월 16,000원, Pro 24,000원, Global 40,000원 가운데 하나를 고르게 됩니다. 둘, 도메인 조건은 문장으로 못 박혀 있습니다. "Free 버전 사이트에서는 개인 도메인 연결이 불가하니, Starter 버전 이상의 요금제로 결제 후 개인 도메인을 연결해 주세요." 위젯은 내가 등록한 도메인에서만 응답하므로, 코드 입력칸이 어느 등급에서 열리든 실제 출발선은 Starter 입니다.

페이지에 놓이는 것

위젯이 지금 이 지면에서 돌고 있습니다. 클릭 경로를 따라가기 전에 완성된 모습부터 보세요. 아임웹 페이지에서도 같은 모습입니다. 그때는 내 문서 안의 div 하나일 뿐이기 때문입니다.

미리보기

댓글 2

댓글을 남겨보세요…
홍길동 님으로 작성등록
  • M
    김민수2시간 전

    진짜 한 줄로 끝나네요. 설치가 이렇게 간단할 줄!

  • J
    이서연어제

    로그인까지 공유돼서 따로 붙일 게 없어요. 👍

미리보기용 표본 답글이 담긴 댓글창입니다. Google 로그인과 대시보드 관리는 이 상자가 아니라 설치와 함께 따라옵니다.

여기서는 코드가 갇히지 않는다, 아임웹이 계속 그렇게 말한다

호스팅형 위젯이 그 빌더에서 돌 수 있는지를 가르는 질문이라, 짐작 대신 벤더의 문장으로 답하는 편이 낫습니다. 아임웹은 삽입 위치를 내 문서의 좌표로 설명합니다. Header Code 는 모든 페이지의 <head> 사이에, Body Code 는 <body> 바로 아래에, Footer Code 는 </body> 바로 위에 들어갑니다. 위에 덧그린 틀 안이 아니라 내 페이지 안의 자리입니다.

코드 위젯 문서도 다른 각도에서 같은 말을 합니다. 아임웹은 사이트가 이미 jQuery 와 Bootstrap 을 불러오니 다시 선언할 필요가 없다고 안내하는데, 이는 삽입 코드가 사이트와 문서를 공유할 때만 성립하는 이야기입니다. 기본 위젯을 건드리는 코드는 아임웹 업데이트 뒤 오작동할 수 있다는 경고도 같은 전제 위에 있습니다. 문제 해결 도움말은 한 걸음 더 나갑니다. 태그를 열고 닫는 순서가 어긋나면 "사이트의 전체적인 레이아웃과 기능"에 문제가 생긴다고 적고, 위젯 ID 와 클래스명, CSS 우선순위를 확인하라고 안내합니다. 다른 출처의 틀 안에 갇힌 코드는 그런 피해를 줄 만큼 멀리 닿지도 못합니다.

빌더마다 이 지점이 갈립니다. 같은 위젯인데 플랫폼별로 설치 안내가 따로 필요한 이유이기도 합니다. Wix 는 붙여넣은 HTML 을 Wix 출처의 샌드박스 iframe 으로 감싸므로, 호스트네임을 확인하는 위젯은 시작도 못 하고 끝납니다. 거기서는 아예 다른 패널로 우회해야 합니다. Wix 설치 지면 이 그 이야기입니다. 아임웹에서는 평범한 문이 곧 정답입니다.

공통 코드 삽입의 입력칸아임웹이 넣는 자리쓰임새
Header Code 상단head 의 가장 앞네이버, Google 웹마스터 도구 소유 확인 메타 태그
Header Code모든 페이지의 <head> 사이본문보다 먼저 읽혀야 하는 것
Body Code<body> 바로 아래페이지 내용보다 앞서야 하는 마크업
Footer Code</body> 바로 위이 설치에서 쓰는 로더 한 줄
한 화면에 입력칸 네 개. defer 로더가 갈 자리는 마지막 칸입니다.

설치

  1. 아임웹 주소 두 개를 같은 site id 에 올린다

    아임웹은 사이트를 개설할 때 (domain).imweb.me 주소를 함께 주고, 이 기본 도메인은 삭제할 수 없다고 밝힙니다. 개인 도메인을 연결해도 imweb.me 주소는 계속 응답합니다. 도움말이 "아임웹 기본 도메인(*.imweb.me)에서 개인 도메인으로 자동연결은 지원하지 않습니다" 라고 적었고, 대표 도메인 설정은 개인 도메인이 둘 이상일 때만 서로 넘겨 주기 때문입니다. 결국 한 사이트가 주소 두 개로 열립니다. 주소창에 보이는 그대로 둘 다 BootSignal 대시보드 에 등록하면 로더에 넣을 site id 가 나옵니다. 하나만 등록하면, 다른 주소로 들어온 방문자는 댓글창이 없는 페이지를 봅니다. 이유를 알려 주는 오류도 없습니다. 두 주소 모두 환경설정 > 도메인에서 관리합니다.

  2. Footer Code 에 로더를 붙여넣는다

    사이트 관리자에서 환경설정 > SEO(검색엔진최적화) 로 들어가 고급 설정까지 내려가면 공통 코드 삽입이 있습니다. 아래 한 줄을 Footer Code 에 넣고 저장을 누르세요. 아임웹은 자바스크립트를 <script> 와 </script> 사이에 선언하라고 안내하는데, 이 태그가 이미 그 형태입니다. data-lang 은 위젯 화면에 쓰이는 언어를 정하며 한국어, 영어, 일본어를 고를 수 있습니다.

    코드
    <script src="https://bootsignal.com/bootsignal.js"
        data-site-id="YOUR_SITE_ID" data-lang="ko" defer></script>

  3. 코드 위젯으로 댓글창 자리를 만든다

    아임웹이 권하는 분업이 이 구조와 그대로 맞습니다. 코드 위젯에는 "HTML 정도만" 쓰고 공통으로 쓸 CSS 나 자바스크립트는 공통 코드 삽입에 넣은 뒤 위젯에서 불러 쓰라는 안내입니다. 그러니 위젯에는 div 하나만 넣습니다. 디자인 모드에서 왼쪽 위 위젯 추가 ＋ 아이콘을 누르고 코드 위젯을 고른 다음, 캔버스에 놓인 위젯 위에서 마우스 오른쪽 버튼을 눌러 위젯 설정을 열고, 아래 코드를 넣고 오른쪽 아래 저장을 누릅니다. data-thread-id 값이 대화를 서로 갈라 주므로 페이지마다 다른 값을 주세요.

    코드
    <div data-bootsignal="comments" data-thread-id="blog/hello-imweb"></div>

  4. 미리보기로 보고, 실제 주소에서 다시 본다

    캔버스는 비어 보입니다. 붙여넣기가 실패한 것이 아니라 문서에 적힌 동작입니다. 아임웹은 편집 중 충돌을 막으려고 코드 위젯을 미리보기 모드에서만 그립니다. 오른쪽 위 미리보기로 확인한 다음, 발행된 주소를 열어 그 자리까지 내려가 보세요. 확인은 등록한 개인 도메인에서 합니다. imweb.me 주소에서 조용하다면 그 호스트네임을 등록하지 않은 것이고, 1단계가 제 몫을 하는 중입니다.

페이지마다 thread id 를 손으로 적기 싫다면

손으로 적는 방식은 페이지가 몇 개일 때는 편하고 그 뒤로는 번거롭습니다. 값이 겹치면 서로 다른 두 대화가 조용히 한 곳으로 합쳐지기도 합니다. 그럴 때는 div 에서 속성을 빼고, 스니펫 하나가 주소 경로에서 값을 채우게 두면 됩니다. 같은 Footer Code 칸의 로더 줄 위에 아래를 붙여넣으세요. 이 스크립트는 페이지를 읽는 동안 실행되고 로더 태그는 defer 라, 마운트를 훑기 전에 값이 채워집니다.

Footer Code, 로더 줄 위에
<script>
(function () {
  function stamp() {
    var sel = '[data-bootsignal="comments"]:not([data-thread-id])';
    var list = document.querySelectorAll(sel);
    for (var i = 0; i < list.length; i++) {
      list[i].setAttribute('data-thread-id', location.pathname);
    }
    if (list.length && window.BootSignal && window.BootSignal.activate) {
      window.BootSignal.activate();
    }
  }
  stamp();
  document.addEventListener('DOMContentLoaded', stamp);
})();
</script>

코드 위젯이 하지 않는 일

아임웹이 경계를 직접 그어 두었고, 목록이 짧으니 엉뚱한 시도에 저녁을 쓰기 전에 읽어 둘 만합니다. 코드 위젯은 클라이언트 사이드 언어만 지원합니다. HTML, 자바스크립트, CSS 는 돌고 PHP, JSP, ASP 는 돌지 않습니다. 위젯 하나에 100만자까지 들어가는데, 임베드가 그 근처까지 갈 일은 없습니다. 저장할 때 주석은 지워집니다. 그리고 아임웹이 이미 jQuery 와 Bootstrap 을 불러오므로 같은 라이브러리를 또 넣는 일은 얻는 것 없이 위험만 늘립니다.

댓글 위젯은 여기서 빠진 것을 하나도 필요로 하지 않습니다. 로그인, 저장, 관리 화면이 모두 우리 쪽에 있는 호스팅형 서비스라, 페이지가 내놓을 것은 div 하나와 defer 스크립트 한 줄뿐입니다. 관리자 화면의 텍스트 상자 안에서 설치가 끝나는 이유가 그것입니다.

살아 있는 댓글창이 무엇을 하는지 보기

화면 둘에 입력칸 둘, site id 하나. 그러면 답글이 대시보드로 들어오기 시작합니다.

아임웹 요금 위에 얼마가 더 붙나

아임웹은 사이트 요금제 단위로 청구하며 Starter 가 월 16,000원입니다. BootSignal 은 등록 도메인 단위입니다. 등록 도메인 하나에 월 $20 또는 연 $200. 카탈로그의 위젯 34개와 구독 뒤에 추가되는 것까지 포함되며, 트래픽이 변해도 청구서에서 달라지는 항목은 없습니다. imweb.me 주소와 개인 도메인은 같은 사이트의 도메인 목록에 나란히 들어가는 두 항목이지 구독 두 개가 아니므로, 둘을 등록해도 값은 하나일 때와 같습니다. 나머지는 요금 지면 에 있습니다.

이 지면에 경쟁사 가격을 적지 않은 것은 일부러입니다. 글 안에서 낡아 버린 숫자는 없는 것보다 나쁩니다. 대안 정리 지면 에서 출처와 확인 날짜를 하나씩 붙여 다룹니다.

두 번째 위젯은 훨씬 짧게 끝난다

Footer Code 에 넣은 로더는 카탈로그의 나머지도 어떻게 마운트하는지 이미 알고 있습니다. 그래서 다음 위젯은 data-bootsignal 값만 다른 코드 위젯 하나면 됩니다. 소규모 사업 사이트라면 피드백이 금방 제 몫을 합니다. 공개된 자리에는 절대 글을 남기지 않는 방문자도 가격이나 배송 날짜에 대해서는 비공개로 한 줄을 보내 주곤 합니다.

미리보기
의견을 남겨주세요…
보내기

피드백 위젯이며, 표본 항목이 실제 접수 내용을 대신하고 있습니다. 자세한 내용은 피드백 지면 에 있습니다.

발행한 페이지에 아무것도 없을 때

  1. 캔버스를 보고 있지는 않나요? 코드 위젯은 미리보기 모드와 실제 사이트에서만 그려집니다.
  2. 실제 페이지의 네트워크 탭에 bootsignal.js 가 있나요? 없다면 Footer Code 항목이 저장되지 않은 것입니다.
  3. 주소창의 호스트네임이 등록한 것인가요? 빠뜨린 imweb.me 주소에서는 아무것도 그려지지 않으며, 이는 허용목록이 제대로 동작하는 모습입니다.
  4. 같은 시점에 페이지 레이아웃도 함께 어긋났나요? 아임웹은 태그를 열고 닫는 순서가 틀리면 사이트 전체 레이아웃과 기능에 문제가 생긴다고 경고합니다. 위젯을 의심하기 전에 붙여넣은 코드를 다시 읽으세요.
  5. div 에 data-thread-id 가 붙어 있나요? 없으면 로더가 콘솔에 경고를 남기고 아무것도 그리지 않습니다.
  6. 서버에서 도는 코드를 넣지는 않았나요? 클라이언트 사이드 언어만 지원하므로 PHP, JSP, ASP 는 실행되지 않습니다.

자주 나오는 질문

아임웹 어느 요금제부터 공통 코드 입력칸을 쓸 수 있나요?
이 글에서 확인한 아임웹 지면 가운데 그 등급을 밝힌 곳은 없었고, 기능 비교표에도 스크립트 항목이 없습니다. 그래서 그 답만은 확인된 사실이 아닙니다. 문서에 남아 있는 것은 도메인 조건입니다. 무료 사이트는 개인 도메인을 연결할 수 없고 Starter 이상은 연결할 수 있습니다. 이 위젯이 답하는 주소는 대시보드에 넣어 둔 것뿐이라, 현실적인 시작점 역시 Starter 가 됩니다.
코드 위젯 자리가 캔버스에서 비어 있는데 붙여넣기가 잘못된 건가요?
대개는 아닙니다. 아임웹은 편집 중 충돌을 막으려고 코드 위젯을 디자인 모드 안의 미리보기 모드에서만 그립니다. 먼저 미리보기로 바꿔 보고, 그다음 발행된 주소에서 다시 확인하세요.
저장했더니 HTML 주석이 사라졌습니다. 코드를 누가 고치나요?
문서에 적힌 동작입니다. 아임웹은 실제 사이트용으로 저장할 때 주석을 제거합니다. 그 자체로 해가 되지는 않고, 마크업에 주석을 남겨 두었다가 스크립트로 찾을 계획이었을 때만 문제가 됩니다. 그럴 때는 실제 요소를 기준으로 잡으세요.
개인 도메인을 연결했는데 imweb.me 주소까지 등록해야 하나요?
그 주소로 들어오는 사람이 있다면 등록해야 합니다. 기본 도메인은 삭제할 수 없고, 거기서 개인 도메인으로 넘겨 주는 자동연결도 지원되지 않아 두 주소가 모두 열려 있습니다. 등록하지 않은 쪽으로 들어온 방문자는 댓글창이 빠진 페이지를 봅니다.
위젯 코드에서 서버 쪽 처리를 부를 수 있나요?
코드 위젯에서는 안 됩니다. 아임웹이 그 자리에서 돌리는 것은 클라이언트 사이드 언어뿐이라 PHP, JSP, ASP 는 제외됩니다. 이 위젯에는 그런 것이 필요 없습니다. 로그인도, 쌓인 답글도, 관리 화면도 호스팅되고, 페이지가 맡는 몫은 div 하나와 defer 스크립트 한 줄입니다.
아임웹이 이미 jQuery 를 불러오는데 로더도 그게 필요한가요?
필요 없습니다. 로더는 자체적으로 완결되어 있어 어떤 라이브러리도 요구하지 않습니다. 아임웹이 jQuery 와 Bootstrap 을 함께 실어 보낸다고 밝힌 만큼 이 편이 편합니다. 둘 다 그대로 두세요. 같은 라이브러리를 한 벌 더 올리는 것은 멀쩡하던 위젯을 망가뜨리는 흔한 방법입니다.
아임웹 도메인 등록하고 site id 받기

개인 도메인과 imweb.me 주소를 함께 등록하세요. site id 하나가 둘을 한 설치로 묶어 줍니다.

수치 출처