순수 html 사이트에 라이브 채팅 넣기

2026년 9월 30일 · 글: kuba · 8분 읽기

순수 HTML 사이트에 라이브 채팅을 넣는 데 필요한 건 딱 한 줄이에요. </body> 앞에 넣는 script 태그 하나요. 이 가이드에서는 그 한 줄을 손으로 쓴 페이지와 정적 사이트 생성기로 만든 사이트의 어디에 넣는지, 함께 설정할 수 있는 모든 옵션, 그리고 클릭 전에 아무것도 로드되지 않는다는 걸 브라우저에서 확인하는 방법을 보여드려요.

그 한 줄

<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

사이트 키는 대시보드의 설치 페이지에 있고, 스니펫에 이미 채워진 상태로 복사 버튼과 함께 나와요. site_live_로 시작하는 공개 키예요. 어차피 페이지 소스에 들어가는 값이고, 등록한 도메인에서만 동작해요.

이 태그가 불러오는 파일이 런처예요. 버튼, 그 스타일, 대시보드에서 게시한 디자인이 들어 있어요. gzip 기준 4 kb 미만이에요(넘으면 빌드가 실패해요). 저희 API로는 요청을 0개 보내고, 쿠키도 설정하지 않아요. 채팅 패널과 서버 연결은 방문자가 클릭할 때만 로드돼요.

이 주제가 처음이라면 기본 가이드에서 채팅 위젯이 페이지에 주는 부담과 확인할 점을 설명하고 있어요.

넣는 위치

닫는 </body> 태그 바로 앞이에요.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My site</title>
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>
    <h1>Hello</h1>
    <p>Everything else on your page.</p>

    <script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>
  </body>
</html>

거기에 넣는 이유와 async를 쓰는 이유예요.

body 끝에 두면 태그가 그 위의 어떤 것도 붙잡지 않아요. 브라우저가 태그에 도착할 즈음엔 콘텐츠를 이미 봤어요.
**async**는 브라우저에게 파일을 백그라운드에서 가져와서, 도착하면 페이지를 멈추지 않고 실행하라고 알려줘요. 빼지 마세요.

모든 페이지에, 한 번씩

채팅은 방문자가 질문이 생길 수 있는 모든 페이지에 있어야 하고, 보통은 전부 다예요. 넣는 방법은 사이트가 어떻게 만들어졌는지에 따라 달라요.

손으로 쓴 페이지. 각 .html 파일에 태그를 붙여넣으세요. 폴더에서 </body>를 검색하면 전부 찾을 수 있어요. 나중에 페이지를 추가할 땐 기존 페이지를 복사해서 시작하면 태그도 함께 따라와요.

공통 푸터. 페이지들이 공통 푸터 파일(서버 사이드 인클루드, PHP include, 템플릿 파셜)을 불러온다면, 태그를 거기에 한 번만 넣으세요.

정적 사이트 생성기. 모든 페이지가 상속하는 기본 레이아웃에 넣으세요.

생성기	파일
Jekyll	`_layouts/default.html` 또는 `_includes/footer.html`
Hugo	`layouts/_default/baseof.html` 또는 푸터 파셜
Eleventy	`_includes/` 안의 기본 레이아웃
Astro	기본 레이아웃 컴포넌트
Pandoc, 직접 만든 스크립트	넘겨주는 HTML 템플릿

태그가 두 번 들어간 페이지는 걱정하지 않아도 돼요. 런처가 이미 페이지에 있는지 확인하고, 두 번째 복사본은 아무것도 하지 않아요. 그래도 낭비되는 요청이니 하나만 남기세요.

코드로 설정하기

대시보드에서 고른 디자인은 런처 안에 담겨 오니까, 위의 한 줄이 설치의 전부예요. 설정을 HTML에 두고 싶다면, 태그 위의 script에서 window.Spookat을 지정하세요.

<script>
  window.Spookat = {
    style: "clean",
    font: "system",
    accent: "#2F6FEB",
    side: "right",
    greeting: "hi. questions about an order? ask here.",
    lang: "en"
  };
</script>
<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

페이지와 대시보드 설정이 다르면 페이지가 이겨요. 각 키가 하는 일이에요.

키	받는 값	하는 일
`style`	8가지 스타일 중 하나	디자인. `brutal`, `clean`, `glass`, `soft`, `terminal`, `paper`, `retro`, `swiss`
`font`	`"system"` 또는 호스팅된 17가지 폰트 중 하나	위젯 폰트. `system`은 아무것도 다운로드하지 않아요. 호스팅된 폰트는 클릭 후 저희 CDN에서 불러오고, Google에서는 절대 불러오지 않아요
`accent`	`"#RRGGBB"`	브랜드 색상. 그 위의 글자색은 대비에 맞춰 골라져요
`side`	`"right"` 또는 `"left"`	런처 위치
`greeting`	텍스트, 최대 200자	방문자가 처음 보는 메시지. 비워 두면 스타일 기본값
`label`	텍스트, 최대 40자	둥근 버튼을 이 텍스트가 들어간 알약 모양으로 바꿔요
`lang`	`"en"`, `"pl"` 같은 언어 코드	위젯 언어. 기본값은 방문자의 브라우저 언어, 그다음 영어
`user`	`{ id, sig }`, cool guy 이상	로그인한 사용자, 여러분 서버에서 서명

user 서명 방법을 포함한 전체 레퍼런스는 문서에 있어요.

다국어 사이트

언어별 폴더(/en/, /pl/)가 있는 사이트라면, 폴더마다 lang을 지정해서 위젯이 브라우저가 아닌 페이지에 맞추도록 하세요. 위젯은 12개 언어를 지원해요. 팀은 대화마다 방문자의 언어를 볼 수 있어요.

한마디 하는 런처

단순한 사이트에는 방문자가 자주 묻는 분명한 질문이 하나쯤 있어요. “…로 배송되나요”, “예약할 수 있나요…” 같은 거요. "questions? ask a human" 같은 label을 넣으면 아이콘이 그걸 말해 주는 작은 알약 모양이 돼요. 휴대폰에서도 구석에 떠 있으니 짧게 쓰세요.

방문자가 보는 것

구석에 여러분 색깔의 버튼이 있어요. 누르면 인사말과 사람이 답한다는 안내 한 줄이 담긴 패널이 열려요. 방문자가 입력하면 메시지는 Slack이나 Discord 스레드, 또는 저희 인박스와 휴대폰 앱으로 가고, 여러분의 답장은 위젯으로 돌아와요. 답하기 전에 떠났고 이메일을 남겼다면, cool guy 이상에서는 답장을 이메일로 보내요. 채팅은 기록 보관 기간이 끝날 때까지(broke af은 30일) 페이지를 옮겨 다니거나 나중에 다시 와도 그 기기에 남아 있어요.

확인하기

예전 캐시나 저장소가 끼어들지 않게 사이트를 시크릿 창에서 여세요. 그다음 DevTools를 여세요(F12, 또는 우클릭 후 검사).

Network. “Disable cache”를 체크하고 새로고침한 다음, 필터에 spookat을 입력하세요. 요청은 하나예요. cdn.spookat.com에서 오는 런처이고, 전송량은 약 2 kb예요. 코드가 window.Spookat에서 게시한 것과 다른 스타일을 지정하면 두 개이고, 둘 다 cdn.spookat.com에서 와요. api.spookat.com으로는 아무것도 가지 않아요.
Application(Firefox에서는 저장소). 쿠키: Spookat 것은 없어요. Local storage: 아직 아무것도 없어요. 첫 메시지를 보낸 뒤에야 키가 하나 생기고, 그 기기에서 채팅을 유지하는 용도예요.
런처를 클릭하세요. 이제 패널 스크립트와 선택한 스타일의 스타일시트가 CDN에서 로드되고, 채팅이 연결돼요. 테스트 메시지를 보내서 Slack이나 Discord에 도착하는지 보세요.

런처가 안 보인다면:

Network 탭에 아무것도 없다. 이 페이지에 태그가 없거나, HTML 주석 안에 있거나, 빌드 단계에서 지워졌어요. 페이지 소스를 열고 spookat을 검색해 보세요.
요청이 실패한다. 길이가 틀린 키에는 CDN이 404를 돌려줘요. URL의 키를 대시보드의 키와 비교해 보세요.
런처가 기본 모양으로 보이고 끝내 연결되지 않는다. 키에서 한 글자만 틀려도 런처는 그대로 로드돼요. 키를 대시보드의 키와 비교해 보세요.
런처는 보이는데 채팅이 연결되지 않는다. 등록한 도메인이 아닌 곳에서 열었어요. 로컬 파일, localhost, 스테이징 호스트 같은 곳이요. 채팅은 여러분 도메인과 그 서브도메인에서만 연결돼요.
Content Security Policy가 막는다. 콘솔에 해당 지시어가 나와요. 스크립트, 스타일, 폰트에는 https://cdn.spookat.com을, 연결에는 wss://api.spookat.com을, 이미지에는 data:를 허용하세요. 로고와 팀원 사진이 data: 이미지거든요. 런처는 자기 shadow root에 작은 <style> 블록도 넣기 때문에, style-src에서 인라인 스타일을 허용해야 해요. window.Spookat을 인라인 스크립트에서 지정한다면, 그 스크립트에 정책의 nonce나 해시를 붙이세요.

넣지 말아야 할 것

순수 HTML 사이트가 빠른 건 사이에 아무것도 없기 때문이에요. 그대로 유지하세요.

채팅 하나 때문에 태그 매니저를 넣지 마세요. 스크립트를 불러오는 스크립트이고, 런처보다 무거워요.
패널에 preload나 prefetch를 붙이지 마세요. 모든 방문자에게 패널 다운로드가 클릭 앞으로 와 버려요.
defer와 async를 섞어 가며 고민하지 마세요. 이 태그엔 async 하나면 맞아요.
몇 초 뒤에 채팅을 여는 래퍼를 달지 마세요. 모두에게 패널 전체를 불러오고, 휴대폰에서는 페이지를 가려요. 누군가 정말 채팅을 열면 인사말이 같은 역할을 해요.

호스팅은 상관없어요

GitHub Pages, Netlify, Cloudflare Pages, 공유 호스팅의 FTP 폴더, 창고에 둔 서버까지. 태그는 순수 HTML이라서 파일이 어디서 제공되든 동작해요. 빌드 단계도, 패키지도, 서버 코드도 필요 없어요.

답장을 연결하세요

마지막 단계예요. 대시보드에서 Slack이나 Discord를 연결하고 채널을 고르세요. 건너뛰고 저희 인박스와 휴대폰 앱에서 답해도 돼요. 방문자마다 스레드가 따로 생기고, 채널의 누구든 답할 수 있으며, 좌석 요금은 없어요. broke af 기준 사이트당 월 $4.99이에요.

체크리스트

async가 붙은 태그 하나를 </body> 앞에, 모든 페이지에(또는 공통 레이아웃에 한 번).
설정을 코드에 둔다면 그 위에 window.Spookat(선택).
시크릿 창에서 확인함: 클릭 전 요청 하나(코드에서 게시하지 않은 스타일을 지정했다면 두 개, 둘 다 cdn.spookat.com에서), 쿠키 없음.
위젯에서 보낸 테스트 메시지가 Slack이나 Discord에 도착함.

체험 기간은 14일이고 카드는 필요 없어요. 이 한 줄만 붙여넣으면 정적 사이트도 질문에 답할 수 있어요.