홈›가이드›카페24 쇼핑몰에 댓글 위젯 붙이기

카페24 쇼핑몰에 댓글 위젯 붙이기

올려야 할 요금제도, 갇히는 iframe 도 없습니다. 정할 것은 두 삽입 지점 중 어디에 무엇을 넣느냐뿐입니다.

Mr. Latte
갱신

카페24 쇼핑몰에는 앱을 만들지 않고도, 요금제를 바꾸지 않고도 호스팅형 댓글창을 붙일 수 있습니다. 다른 빌더에서 이 설치를 죽이는 iframe 문제도 여기에는 없습니다. 내 <script> 를 넣는 자리는 둘입니다. SEO 설정 아래의 전 페이지 공통 코드 필드, 그리고 스마트디자인 편집창입니다. 스마트디자인의 레이아웃 파일은 페이지를 감싸는 껍데기가 아니라 페이지 그 자체입니다. 로더는 필드에, 마운트 요소는 파일에 넣습니다. 둘 다 모바일 쪽에 짝이 하나씩 더 있다는 점만 기억하면 됩니다. 시작 전에 쇼핑몰이 응답하는 주소부터 등록하세요. 위젯은 그 주소를 확인한 다음에야 그립니다.

여기서 특이한 점은 막는 것이 없다는 것

이런 설치 안내는 보통 어느 요금제부터 코드 삽입이 열리는지 따지는 문단으로 시작합니다. 카페24에는 그 문단이 없습니다. 카페24 요금 안내는 쇼핑몰 구축과 호스팅에 대해 가입비, 월비용, 연간 호스팅 비용 모두 평생 무료라고 적습니다. 돈이 드는 것은 쇼핑몰 안이 아니라 옆에 있습니다. 도메인이 연 22,000원이고, 그 밖에 결제 수단과 마케팅 부가 서비스가 있습니다.

아래 두 삽입 지점 어디에도 요금제 제한은 이 글을 쓰며 읽은 카페24 문서에서 확인되지 않았습니다. 이 문장은 정확하게 읽어야 합니다. 확인된 것은 제한이 문서에 없다는 사실이지, 카페24가 제한이 없다고 약속해 두었다는 뜻이 아닙니다. 실제로는 두 패널 모두 관리자 화면에 그대로 있고, 판매자들은 오래전부터 추적 픽셀을 여기에 붙여 왔습니다. 카페24 도움말도 그 상황을 전제로 씁니다. 이미 설치된 픽셀을 정리하는 안내에서 스마트디자인 등을 통해 설치된 코드를 이야기합니다.

들어가는 문 둘, 그리고 내 것이 아닌 문 하나

첫 번째 문은 설정 필드입니다. 관리자에서 쇼핑몰 설정 > 기본 설정으로 들어간 다음 쇼핑몰 정보 > 검색 엔진 최적화(SEO) 를 엽니다. 그 화면 맨 아래에 고급 설정이 있고, 그 안에 코드 직접 입력 항목이 있습니다. 무엇을 하는 기능인지는 카페24가 한 줄로 적어 두었습니다. 쇼핑몰의 모든 HTML 페이지에 직접 입력한 코드를 추가할 수 있어요.

두 번째 문은 디자인 편집창입니다. 스마트디자인은 페이지를 감싸는 틀이 아니라 페이지입니다. 레이아웃 파일은 <!DOCTYPE> 로 시작해 <html>, <head>, <body> 를 모두 담고 있고, 지금 보고 있는 화면의 내용은 <!--@contents--> 자리에 들어갑니다. 각 화면 HTML 은 맨 위의 <!--@layout(/layout.html)--> 로 자기 레이아웃을 부릅니다. 그러니 이 파일을 고치는 것은 진짜 문서를 고치는 일이고, 그래서 여기에 넣은 마운트 요소는 적어 넣은 자리에 그대로 그려집니다. 외부 스크립트도 여기서 다룹니다. 카페24 스마트디자인 문서는 CSS 는 <link> 태그로 불러오지만 스크립트 파일은 <script> 태그를 그대로 써서 경로를 지정한다고 설명합니다.

세 번째 문은 있지만 내 것이 아닙니다. 스크립트태그 어드민 API 는 설치된 앱이 디자인을 건드리지 않고 원하는 화면에 스크립트를 올리는 통로이고, src 와 display_location 파라미터를 받습니다. 앱 등록과 OAuth 인증이 앞에 붙습니다. 카페24 앱을 만드는 사람에게는 맞는 도구이고, 내 쇼핑몰 하나에 위젯 하나 붙이는 사람에게는 아닙니다.

묻는 것SEO 코드 직접 입력스마트디자인 레이아웃, 화면 HTML
코드가 놓이는 자리모든 HTML 페이지의 <head> 하단 또는 <body> 하단파일에서 내가 적어 넣은 바로 그 자리
어울리는 용도로더 태그마운트 요소
레이아웃에서 위치를 고를 수 있나못 고른다고른다
모바일까지 덮이나모바일 쪽에도 붙여야 덮인다모바일 디자인도 고쳐야 덮인다
코드가 iframe 안에 들어가나아니다아니다
문서에 적힌 요금제 조건찾지 못했다찾지 못했다
잘못 건드리면 깨지는 것설정 필드라 구조가 깨지지는 않는다쇼핑몰 마크업, 그래서 백업이 먼저다
디자인을 바꿔도 남나남는다, 디자인이 아니라 설정이다안 남는다, 다른 디자인은 다른 파일이다
나뉘어 있다는 것이 요점입니다. 한쪽 문은 스크립트를 나르고, 다른 쪽 문이 댓글창의 자리를 정합니다.

빌더 중에서는 형편이 좋은 편입니다. Wix 는 붙여넣은 HTML 을 교차 출처 샌드박스에 가둬서 도메인 검사와 로그인이 아예 끝까지 가지 못하고, 우회법은 스크립트가 마운트 노드를 직접 만들어 붙이는 것입니다. 그 이야기는 Wix 편 에 있습니다. 여기서는 그런 요령이 필요 없습니다. 내 코드는 내 쇼핑몰의, 내 호스트네임 위에, 가려지지 않은 채로 놓입니다.

관리자를 열기 전에 댓글창부터 보기

아래가 위젯 자체이고, 이 페이지에서 그대로 돌고 있습니다. 오가는 과정을 보고 싶으면 한 줄 남겨 보세요. 카페24 상품 페이지에서도 같은 모습입니다. 그때는 내 쇼핑몰의 div 하나일 뿐이기 때문입니다.

미리보기

댓글 2

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

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

  • J
    이서연어제

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

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

첫 번째 문: 로더를 PC 에 한 번, 모바일에 한 번

  1. 쇼핑몰이 응답하는 주소를 모아 site id 를 받는다

    카페24는 가입할 때 모든 쇼핑몰에 id.cafe24.com 형태의 기본 제공 도메인을 줍니다. 사거나 연결한 도메인은 대표 도메인이 되고, 대표 도메인은 쇼핑몰당 하나만 지정할 수 있습니다. 두 주소 모두 살아 있으므로 둘 다 BootSignal 대시보드 에 넣습니다. 기본 도메인은 cafe24.com 이 아니라 myshop.cafe24.com 처럼 전체를 그대로 넣으세요. 검사는 등록한 도메인과 그 하위 도메인을 받아들이므로, 짧게 넣으면 플랫폼의 모든 쇼핑몰에 내 site id 를 열어 주는 셈이 됩니다. 내 도메인은 반대입니다. example.com 하나만 등록하면 모바일 쇼핑몰 주소인 m.example.com 까지 같은 항목으로 덮입니다. 등록을 마치면 로더에 넣을 site id 가 나옵니다.

  2. SEO 설정을 지나 코드 직접 입력까지 걸어간다

    관리자에서 쇼핑몰 설정 > 기본 설정으로 들어간 다음 쇼핑몰 정보 > 검색 엔진 최적화(SEO) 를 엽니다. 화면 맨 아래까지 내려가 고급 설정을 누르면 그 안에 코드 직접 입력 항목이 있고, Head 영역 상자와 Body 영역 상자가 함께 있습니다.

  3. Head 영역에 로더를 넣고, 옆에 붙은 경고를 읽는다

    site id 를 채운 태그 한 줄을 붙여넣습니다. 코드가 어디로 가는지는 카페24가 적어 두었습니다. 입력된 코드는 <Head> 태그 내에서 하단에 추가되지만, 다른 모든 SEO의 메타 태그보다는 상단에 위치하여 우선 적용되므로 신중하게 입력해야 해요. 풀어 쓰면 이렇습니다. 여기서 태그 하나가 깨지면 쇼핑몰 전 페이지에서 깨집니다. 그러니 이 한 줄만, 통째로 붙여넣으세요.

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

  4. 모바일 쇼핑몰에도 넣는다, 안 넣으면 휴대폰에는 아무것도 없다

    카페24 안내는 PC 쪽 경로를 코드 직접입력 > PC쇼핑몰 > Head 영역으로 적습니다. 쇼핑몰을 가리키는 경로라는 뜻입니다. 모바일 쇼핑몰이 이 필드에서 자기 탭을 따로 갖는지는 도움말이 밝히지 않으니, 저장한 뒤 휴대폰으로 열어 확인하세요.

  5. 쇼핑몰을 열어 파일을 실제로 불러오는지 확인한다

    라이브 쇼핑몰의 아무 페이지나 열고 브라우저 네트워크 패널에서 bootsignal.js 를 찾습니다. 있으면 첫 번째 문은 끝났고, 화면에는 아직 아무것도 안 보이는 게 맞습니다. 로더는 마운트 요소를 찾기 전까지 아무것도 그리지 않습니다.

두 번째 문: 손님이 찾을 자리에 댓글창 놓기

마운트 요소는 속성 두 개짜리 div 하나이고, 이것의 위치가 디자인 편집창을 여는 이유 전부입니다. 스레드 아이디는 내가 정하며, 대화를 서로 갈라 놓는 것이 이 값입니다. 아이디가 같은 두 페이지는 댓글창 하나를 함께 씁니다. 가끔은 그게 맞고 대개는 아닙니다.

  1. 디자인 관리에서 편집창으로 들어간다

    관리자에서 디자인 > 디자인 관리로 이동한 다음 그 화면의 디자인 편집 버튼을 누릅니다. 스마트디자인이 새 창으로 열리고, 왼쪽에 파일 목록이, 오른쪽에 HTML 이 나옵니다.

  2. 화면을 고른다, 그리고 레이아웃을 고른다는 뜻을 안다

    고칠 페이지를 고릅니다. 카페24가 이름과 경로를 함께 적어 둔 파일은 둘입니다. 공통 레이아웃이 layout > basic > layout.html, 메인 레이아웃이 layout > basic > main.html 입니다. 공통 레이아웃에 마운트를 넣으면 그 레이아웃을 부르는 모든 화면에 나타나고, 따로 손대지 않는 한 모든 화면이 스레드 아이디 하나를 공유합니다. 상품마다 대화를 나누려면 그 상품 화면을 열어 각자의 아이디를 주세요.

  3. 원하는 자리에 마운트 요소를 적고 저장한다

    대화가 어울리는 블록 아래에 div 를 넣고, data-thread-id 에는 짧고 오래 갈 값을 적은 뒤 저장을 누릅니다. 아이디는 그대로 두세요. 나중에 이름을 바꾸면 이전 대화는 옛 아이디에 붙은 채로 남습니다.

    코드
    <div data-bootsignal="comments"
     data-thread-id="product-hazelnut-blend"></div>

  4. 모바일 디자인에도 같은 일을 한다, 그쪽은 별도 디자인이다

    모바일 쇼핑몰은 PC 디자인이 화면 크기에 맞춰 접힌 모습이 아니라 자기 파일을 가진 별도의 디자인입니다. 디자인 > 디자인 보관함을 열고 모바일 탭으로 옮긴 다음, 쓰고 있는 디자인의 편집 버튼을 누릅니다. 같은 div 를 그쪽의 해당 화면에 넣습니다.

  5. 쇼핑몰을 새로고침해 그려지는지 본다

    연결한 도메인으로 실제 페이지를 엽니다. 로더는 첫 번째 문에서 이미 head 에 들어가 있으므로, div 가 페이지에 놓이는 순간 댓글창이 나타납니다. 페이지는 그려지는데 댓글창만 없다면 이 글 끝의 점검 목록으로 대개 일 분 안에 갈립니다.

카페24 상품 화면에 댓글창 얹기

SEO 필드에 태그 하나, 디자인에 div 하나. 카탈로그의 다른 위젯도 같은 한 쌍으로 붙습니다.

스마트디자인Easy 를 쓰고 있다면 누르기 전에

카페24에는 스마트디자인Easy 라는 간편 편집기가 있고, HTML 을 손으로 고치는 일은 이 편집기가 온전히 견디는 종류가 아닙니다. 도움말은 양쪽을 다 분명히 적습니다. 정식 편집기로 넘어가면 간편 편집기는 닫힙니다. 스마트디자인으로 이동 시 스마트디자인Easy는 종료되어요. 돌아오는 길도 무사하다고 보장하지 않습니다. 스마트디자인에서 임의로 HTML을 추가/수정/삭제 한 이후 다시 스마트디자인Easy로 돌아왔을 때 오류가 발생할 수 있어요.

그래서 선택은 깔끔하게 갈립니다. Easy 로 쇼핑몰을 관리하고 있고 거기서 나가고 싶지 않다면, 첫 번째 문만으로 양쪽을 끝내고 댓글창이 페이지 맨 아래 하나로 붙는 것을 받아들이면 됩니다. 상품 아래에 두고 싶다면 Easy 를 떠나는 것이고, 그 사실은 창이 열린 뒤보다 열기 전에 아는 편이 낫습니다.

기본 도메인에서 위젯이 조용한 이유

카페24는 기본 제공 도메인과 내가 연결한 도메인을 같은 자리에 모아 둡니다. 쇼핑몰 설정 > 기본 설정 > 쇼핑몰 정보 > 도메인 설정 > 도메인 관리 > 쇼핑몰 연결 도메인입니다. 이 설치와 맞물리는 문장이 둘 있습니다. 도메인을 사거나 연결하지 않았으면 기본 도메인만 목록에 보입니다. 도메인을 신규로 구매하거나 보유 도메인을 연결하지 않았다면 카페24에서 기본으로 제공하는 도메인만 목록에 표시되어요. 그리고 대표 도메인은 언제나 하나입니다. 대표 도메인은 쇼핑몰당 1개만 지정할 수 있어요.

대표 도메인을 정한다고 다른 주소가 꺼지지는 않습니다. 쇼핑몰은 id.cafe24.com 주소로도 계속 응답하고, 그래서 대시보드에 넣을 항목이 하나로 끝나지 않습니다. 내 도메인만 등록해 둔 채 기본 주소에서 작업을 확인하면 댓글창은 비어 있습니다. 고장이 아닙니다. 도메인을 등록한 이유인 허용 목록이 제 일을 하는 중입니다. 둘 다 등록하거나, 손님이 실제로 쓰는 주소에서 확인하세요.

호스팅이 공짜인 쇼핑몰에 얹히는 금액

카페24는 쇼핑몰 자체에는 돈을 받지 않으므로, 여기서 늘어나는 항목은 이것 하나입니다. 등록 도메인 하나에 월 $20 또는 연 $200. 트래픽이 늘어도, 오픈 첫날에도 금액은 그대로입니다. 특가 커뮤니티에 걸려 손님이 몰린 쇼핑몰과 하루 아홉 명이 다녀간 쇼핑몰이 같은 금액을 냅니다. 카탈로그는 유료 위젯 38개와 무료 브라우저 도구 33개이고, 구독한 뒤에 추가되는 위젯도 포함됩니다(요금 전체).

쇼핑몰을 하나 더 열면 요금제가 커지는 것이 아니라 등록 도메인이 하나 늘어납니다. 카페24가 쇼핑몰 단위로 세는 것과 같은 단위입니다. 다른 댓글 서비스와 가격을 나란히 놓은 글은 비교 지면 에 벤더 지면을 읽은 날짜와 함께 모아 두었습니다. 안내 글에 박힌 낡은 가격은 가격이 없는 것보다 나쁘기 때문입니다.

별점도 상품 화면에 어울린다

방금 붙인 로더는 카탈로그의 모든 위젯을 실어 오므로, 두 번째 위젯은 같은 디자인 파일에 data-bootsignal 값만 다른 div 하나를 더 넣으면 됩니다. 쇼핑몰이라면 옆자리는 대개 별점입니다. 댓글창과는 답하는 질문이 다릅니다. 댓글창은 로스팅이 진한지 묻는 자리이고, 별점은 받아 본 마흔 명이 어떻게 생각했는지 보는 자리입니다.

미리보기
★★★★★ 4.2 , 후기 36
★★★★★

설치 5분, 디자인도 깔끔해요.

, 박지훈

배치를 볼 수 있도록 표본 별점과 표본 평균을 띄운 화면입니다. 자세한 내용은 별점, 후기 지면 에 있습니다.

별점도 댓글창과 같은 방식으로 상품마다 자기 스레드 아이디를 주세요. 평균은 주소가 아니라 아이디를 따라갑니다. Shopify 판매자도 비슷한 자리에서 걸리는데 걸림돌이 다릅니다. JSON 템플릿 이야기는 Shopify 편 에서 다룹니다.

쇼핑몰에 빈자리만 보일 때, 흔한 순서대로

  1. 네트워크 패널에 bootsignal.js 가 있나요? 없으면 SEO 필드 항목이 저장되지 않았거나, 붙여넣지 않은 쪽 쇼핑몰을 보고 있는 것입니다.
  2. PC 에만 넣어 두고 휴대폰으로 보고 있지는 않나요? 반대도 마찬가지입니다. 두 쇼핑몰은 두 문 모두에서 따로 설정합니다.
  3. 주소창의 주소가 등록한 항목과 정확히 같나요? myshop.cafe24.com 과 example.com 은 별개의 두 항목이고, 어느 쪽도 다른 쪽을 덮지 않습니다.
  4. div 가 지금 실제로 서비스 중인 디자인에 들어 있나요? 한 디자인을 고치고 다른 디자인을 쓰고 있는 것이 이 실패의 조용한 판본입니다.
  5. 스마트디자인에서 저장 버튼을 눌렀고, 편집창 미리보기가 아니라 쇼핑몰을 새로고침했나요?
  6. data-thread-id 가 PC 디자인과 모바일 디자인에 똑같이 들어 있나요? 여기서 오타가 나면 각각 비어 보이는 댓글창 두 개가 생깁니다.
  7. 최근에 디자인복구를 돌렸나요? 디자인복구 탭은 저장된 시점의 디자인을 되돌려 놓고, 마운트 요소도 그 시점 기준으로 함께 움직입니다.

자주 나오는 질문

유료 카페24 요금제가 있어야 되나요?
SEO 코드 필드나 디자인 편집기에 요금제 조건이 있다는 내용은 이 글을 쓰며 읽은 카페24 문서 어디에도 없었고, 카페24는 쇼핑몰 구축과 호스팅을 평생 무료로 안내합니다. 다만 뜻은 정확히 새겨야 합니다. 문서에 제한이 없다는 것을 확인한 것이지, 제한이 없다는 약속을 받아 둔 것은 아닙니다. 돈이 드는 항목은 쇼핑몰 옆에 있고, 도메인이 연 22,000원입니다.
같은 코드를 정말 두 번 넣어야 하나요?
디자인 쪽은 확실히 따로입니다. 모바일 디자인은 디자인 > 디자인 보관함의 모바일 탭에서 따로 열고, PC 레이아웃만 고치면 휴대폰 지면에는 안 붙습니다. 코드 필드도 쇼핑몰별로 갈리는지는 도움말이 밝히지 않으니, 저장한 뒤 휴대폰으로 한 번 열어 보는 것이 확실합니다. 모바일 쪽을 건너뛰는 것이 이 설치가 절반만 되는 가장 흔한 이유입니다.
디자인 편집기 말고 Body 영역을 쓰면 댓글창이 어디에 나오나요?
페이지 맨 아래, 다른 모든 것 밑에 나옵니다. 쇼핑몰의 모든 화면에서 그렇습니다. 카페24가 그 필드의 내용을 body 태그 끝에 붙이고, 자리를 고르는 방법은 주지 않기 때문입니다. 쇼핑몰 전체가 함께 쓰는 대화창 하나에는 무리 없는 자리이고, 상품별 댓글창에는 맞지 않는 자리입니다.
스마트디자인Easy 를 쓰는데 HTML 을 고치면 망가지나요?
카페24가 바로 그 상황을 경고합니다. 정식 편집기를 열면 그 디자인의 Easy 는 종료되고, 손으로 HTML 을 추가하거나 수정하거나 삭제한 뒤 Easy 로 돌아오면 오류가 생길 수 있다고 도움말에 적혀 있습니다. Easy 를 유지하고 싶다면 SEO 코드 필드로만 설치하고 댓글창이 페이지 맨 아래에 붙는 것을 받아들이세요.
스크립트를 넣으려면 카페24 앱을 만들어야 하나요?
이 설치에는 아닙니다. 스크립트태그 어드민 API 는 설치된 앱이 디자인을 건드리지 않고 쇼핑몰 화면에 스크립트를 올리는 방법이고, 뒤에 앱 등록과 OAuth 인증이 붙습니다. 쇼핑몰 하나에 위젯 하나를 붙이는 일이라면 설정 필드와 디자인 편집창이 그 장치 없이 같은 페이지에 닿습니다.
내 도메인에서는 보이는데 id.cafe24.com 주소에서는 안 보입니다. 고장인가요?
고장이 아닙니다. 허용 목록은 대시보드에 넣어 둔 이름만 알아보는데, 카페24 기본 주소는 같은 쇼핑몰을 열더라도 내 도메인과 이름이 다릅니다. 그 주소에서 확인할 일이 있다면 대시보드에 항목을 하나 더 만들고, 그럴 일이 없다면 손님이 쓰는 주소에서 점검하세요.
카페24 쇼핑몰 site id 받기

기본 제공 도메인과 내 도메인을 등록하고, SEO 필드에 태그 한 줄을 넣습니다.

수치 출처