사이트를 느리게 만들지 않고 라이브 채팅 넣는 법

2026년 9월 27일 · 글: kuba · 10분 읽기

라이브 채팅은 방문자가 정말 대화하고 싶어질 때까지 페이지에 거의 부담을 주지 않아야 해요. 이 가이드에서는 채팅 위젯이 첫 클릭 전에 무엇을 불러오는지, 고르기 전에 무엇을 확인해야 하는지, Spookat을 몇 분 만에 설치하는 방법, 그리고 페이지가 여전히 빠르다는 걸 DevTools로 증명하는 방법을 알려드려요.

아무도 클릭하기 전에 채팅 위젯이 드는 비용

대부분의 방문자는 채팅을 한 번도 열지 않아요. 읽고, 스크롤하고, 어쩌면 구매하고, 떠나요. 그래도 위젯이 페이지 로딩 때 불러오는 건 방문자 모두가 부담해요. 저렴한 휴대폰에 신호가 약한 사람도 마찬가지예요.

이 비용은 네 가지로 나뉘어요.

바이트. JavaScript, CSS, 폰트, 이미지, 그리고 자주 자체 문서를 가진 iframe까지요. 가장 비싼 건 JavaScript예요. 브라우저가 다운로드하고, 파싱하고, 메인 스레드에서 실행해요. 스크롤과 탭을 처리하는 바로 그 스레드예요.
요청. 요청 하나하나가 왕복 통신이고, 새 도메인으로 가는 요청은 DNS 조회와 TLS 핸드셰이크 비용까지 더해져요. 로딩 때 자기 서버와 통신하는 위젯은 그걸 모든 페이지뷰에 얹어요.
저장소. 아무 상호작용도 없기 전에 기록되는 쿠키, localStorage, IndexedDB예요. EU에서는 이것 때문에 위젯을 불러오기 전부터 동의가 필요한지가 갈릴 수 있어요.
메인 스레드 시간. 시작할 때 실행되는 코드는 여러분의 코드와 경쟁해요. Lighthouse는 이를 Total Blocking Time으로 보여주고, 점수에도 반영돼요.

저희 비교 페이지에 있는 위젯 네 개는 아무도 클릭하기 전에 gzip 기준으로 220~509 kb를 불러왔어요. 2026-09-26에 각 위젯을 빈 테스트 페이지에 올리고 전송된 바이트를 더해서 측정했고, 수치와 출처는 /vs에 있어요. 비교하자면 이 글 전체 텍스트는 20 kb도 안 돼요.

버튼 하나를 보여주는 데 이 중 어떤 것도 필요 없어요. 버튼은 HTML과 CSS 몇백 바이트면 돼요. 나머지(채팅 패널, 서버 연결, 대화 기록)는 누군가 클릭한 다음에야 필요해요.

위젯을 고르기 전에 확인할 것

어떤 채팅 위젯이든 브라우저와 10분이면 판단할 수 있어요. 방문자에게 미치는 영향이 큰 순서대로 볼 것들이에요.

클릭 전 무게

벤더의 데모 페이지나 여러분의 스테이징 사이트를 열고, DevTools를 연 다음 캐시를 끈 상태로 새로고침해요. Network 탭을 벤더 도메인으로 필터링하고 전송된 크기를 더해 보세요. 클릭 전에 몇 킬로바이트를 넘는 건, 대부분 열지도 않을 패널 때문에 방문자 모두가 받는 코드예요.

클릭 전 요청, 그리고 어디로 가는지

요청 수를 세고 도메인을 적어 두세요. 페이지 로딩 때 API와 통신하는 위젯은 모든 방문자에 대해 뭔가를 보내요. 최소한 방문자가 있다는 것과 어느 페이지에 있는지는요. 제3자 분석 도구나 오류 추적을 함께 불러오는 위젯도 있어요.

클릭 전 쿠키와 저장소

위젯은 건드리지 말고, 깨끗하게 로드한 뒤 Application 탭을 보세요. 위젯 도메인이 설정한 쿠키나 위젯이 기록한 저장소 키는 동의 배너가 다뤄야 할 수도 있는 항목이에요. 저희는 변호사가 아니고 규칙은 나라마다 달라서, 여러분 사이트에 뭐가 적용되는지는 전문가에게 확인하세요. 가장 설명하기 쉬운 경우는 방문자가 채팅을 시작하기 전까지 아무것도 저장하지 않는 위젯이에요.

팀이 어디서 답하는지

채팅의 가치는 답장에 달려 있어요. 답하려면 대시보드를 하나 더 열어야 한다면, 누군가는 그 탭을 하루 종일 열어 둬야 해요. 채팅이 팀이 이미 대화하는 곳(Slack, Discord)으로 들어오면, 답장은 스레드에 메시지 하나면 돼요.

팀이 커질 때 드는 비용

좌석당 요금은 답할 수 있는 모든 사람에게 돈을 받아요. 해결 건당 요금은 답장마다 돈을 받아요. 사이트당 요금은 누가 몇 번을 답하든 사이트에 대해서만 받아요.

휴대폰

폭 375 px 화면에서 런처를 확인하세요. 여러분 사이트의 버튼을 가리면 안 되고, 엄지로 누를 수 있게 최소 44 px는 돼야 해요. 패널을 열고 입력해 보세요. 키보드가 입력창을 가리면 안 돼요.

단계별로: spookat으로 라이브 채팅 넣기

Spookat은 위의 확인 항목을 기준으로 만들어졌어요. 스니펫은 저희 CDN에서 작은 런처 하나를 불러오고, 여기엔 사이트의 디자인이 이미 들어 있어요. 클릭 전에는 저희 API로 요청을 0개 보내고, 쿠키도 설정하지 않아요. 팀은 Slack 스레드나 Discord 포럼 게시물에서 답해요. broke af 기준으로 사이트당 월 $4.99이고, 팀원은 무제한이며, 체험 기간은 카드 없이 14일이에요.

1. 스니펫 받기

대시보드에 로그인하고 사이트를 추가하세요. 설치 페이지에 사이트 키가 이미 들어간 스니펫과 복사 버튼이 나와요. 주소에 도메인을 넣어서 바로 열 수도 있어요.

https://app.spookat.com/install?domain=your-domain.com

2. 닫는 body 태그 앞에 붙여넣기

태그는 하나예요. 페이지 어디든 괜찮지만 </body> 바로 앞이 가장 좋아요.

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

async는 브라우저가 파일을 가져오는 동안에도 페이지를 계속 그리고, 파일이 도착하면 실행한다는 뜻이에요. 이 파일이 런처예요. 버튼, 그 스타일, 대시보드에서 게시한 디자인이 들어 있어요. gzip 기준 4 kb를 넘으면 빌드가 실패해요. 2026-09-27에 측정했을 때는 2.0 kb였어요.

사이트가 싱글 페이지 앱이라면, 다시 렌더링되는 컴포넌트가 아니라 루트 HTML 템플릿에 태그를 넣으세요. 런처는 이미 있는지 확인하기 때문에 두 번째 복사본은 아무것도 하지 않지만, 한 곳에 태그 하나가 훨씬 파악하기 쉬워요.

3. 디자인 고르기

스타일은 8가지, 직접 호스팅하는 폰트는 12가지이고, 방문자의 시스템 폰트도 쓸 수 있어요. 대시보드에서 고르고 게시하면 런처가 1분 안에 새 디자인을 반영해요. 아니면 페이지에서 스니펫 위에 직접 설정할 수도 있고, 이 경우 대시보드보다 우선해요.

<script>
  window.Spookat = { style: "clean", font: "system", accent: "#2F6FEB", side: "right" };
</script>
<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

font: "system"은 폰트를 전혀 다운로드하지 않아요. 다른 폰트는 클릭 후에만 저희 CDN에서 불러오고, Google에서는 절대 불러오지 않아요. accent에는 16진수 색상을 넣을 수 있고, 그 위의 글자색은 대비에 맞춰 자동으로 골라져요. 전체 키 목록은 문서에 있어요.

4. slack이나 discord 연결하기

대시보드에서 채널을 연결하세요. 연결 승인은 Slack이나 Discord 안에서 하고, 그다음 목록에서 채널을 골라요. 워크스페이스 관리자가 아니라면요? 대시보드가 관리자에게 보낼 일회용 링크를 만들어 줘요. 7일 동안 유효하고, 그 사람은 Spookat 계정이 없어도 돼요.

그때부터 모든 대화가 Slack 스레드나 Discord 포럼 게시물이 돼요.

5. 스레드에서 답하기

스레드에서 답하면 방문자는 위젯에서 그걸 봐요. //로 시작하는 메시지는 내부용으로 남아서, 방문자가 보지 않게 팀원에게 물어볼 수 있어요. 방문자에게는 Slack 이름이나 Discord 닉네임이 보여요. /spookat me로 사이트별로 확인하거나 바꿀 수 있어요.

답장하기 전에 방문자가 떠났고 이메일을 남겼다면, cool guy 이상에서는 위젯 언어로 답장을 이메일로 보내요. broke af에서는 답장이 다음 방문 때까지 위젯에서 기다려요.

또는: 에이전트에게 전부 맡기기

Claude Code, Cursor 같은 코딩 에이전트로 개발한다면, 이걸 붙여넣고 매뉴얼을 읽게 하세요.

Add Spookat chat to my site. Read https://spookat.com/llms.txt first, then match the chat style to my site.

에이전트가 루트 템플릿을 찾아 스니펫을 추가하고, 사이트에 어울리는 스타일을 골라요. Slack이나 Discord 연결과 결제는 여러분 몫이에요. 둘 다 사람이 승인해요.

devtools로 확인하기

어떤 벤더의 말도 그냥 믿지 마세요. 저희 말도요. Chrome에서 여러분 페이지를 확인하는 방법이에요. Firefox와 Safari에도 이름만 조금 다른 같은 패널이 있어요.

클릭 전 network 탭

예전 저장소나 캐시가 끼어들지 않게 페이지를 시크릿 창에서 여세요.
DevTools를 열고 Network로 가서 “Disable cache”를 체크하고 새로고침하세요.
필터 칸에 spookat을 입력하세요.

요청은 하나만 보여야 해요. cdn.spookat.com에서 오는 런처이고, 전송량은 약 2 kb예요. api.spookat.com으로는 아무것도 가지 않아요. 그보다 많이 보인다면 페이지의 다른 무언가가 불러온 거예요(예를 들어 태그 매니저 안의 두 번째 스니펫).

클릭 전 application 탭

Application을 열고 여러분 도메인의 Cookies와 Local storage를 확인하세요. Spookat은 페이지 로딩 때 여기에 아무것도 쓰지 않아요. 쿠키는 절대 설정하지 않아요. 사용하는 저장소 키는 spookat: 뒤에 사이트 키가 붙은 하나뿐이고, 방문자가 첫 메시지를 보낸 뒤에만 기록돼요. 그 기기에서 대화를 유지하기 위한 거예요.

클릭 후

Network 로그를 지우고 런처를 클릭하세요. 이제 패널이 CDN에서 로드돼요. 스크립트(2026-09-27 기준 gzip 16.6 kb)와 선택한 스타일의 스타일시트(약 2 kb)예요. 폰트를 골랐다면 그것도 함께 와요. 그다음 패널이 저희 API와 연결을 열고, 방문자가 입력할 수 있게 돼요.

핵심은 이거예요. 비싼 부분을 클릭 뒤로 보내서, 채팅하고 싶은 방문자만 그걸 다운로드하게 하는 거예요.

lighthouse

스니펫이 없는 페이지와 있는 페이지에서 Lighthouse를 모바일 모드로 각각 몇 번씩 돌리고 중앙값을 비교하세요. 같은 페이지에서도 실행할 때마다 몇 점씩 오르내리기 때문에, 한 번의 결과로는 어느 쪽도 증명할 수 없어요. 2 kb 런처에 클릭 전 작업이 없다면, 차이는 그 오차 범위 안에 있어야 해요.

가벼운 위젯을 다시 무겁게 만드는 네 가지 방법

작은 런처가 작게 유지되려면 주변 페이지가 도와줘야 해요. 저희가 가장 자주 보는 실수들이고, 하나하나가 위에서 한 노력을 조용히 무너뜨려요.

채팅을 저절로 열기. 10초 뒤에 저절로 열리는 패널은 구매 직전이던 사람까지 모든 방문자에게 채팅 전체를 불러와요. 휴대폰에서는 페이지까지 가려요. 먼저 말을 걸고 싶다면 인사말을 써 두세요. 채팅을 열었을 때 보여요.

“더 빠르게 하려고” 패널을 미리 불러오기. 패널 스크립트에 <link rel="preload">나 prefetch를 붙이면 모두에게 다운로드가 다시 클릭 앞으로 와요. 클릭 후에는 방문자와 가까운 CDN으로 짧은 요청 두 개면 돼요. 클릭할 때까지 기다리게 두세요.

태그 매니저로 감싸기. 태그 매니저는 다른 스크립트를 불러오는 스크립트예요. 채팅 스니펫 하나를 담으려고 쓰는 거라면 채팅보다 더 비싸요. 태그를 템플릿에 바로 넣으세요.

스니펫 두 개. 테마가 하나, 플러그인이 또 하나를 넣고, 누군가 푸터에 세 번째를 붙여넣어요. 런처는 자기 중복은 무시하지만, 다른 위젯은 그렇지 않은 경우가 많아서 결국 채팅 두 개가 같은 구석을 두고 다투게 돼요. 템플릿에서 cdn.spookat.com(또는 예전 벤더 도메인)을 검색해서 하나만 남기세요.

데이터는 어떻게 되나요

방문자가 메시지를 보내면 먼저 저장되고, 그다음 Slack 스레드나 Discord 게시물에 올라가요. IP 주소는 절대 저장하지 않아요. 방문자의 국가는 메시지를 보내는 순간 오프라인 데이터베이스에서 조회하고, 주소는 보관하지 않아요. 채팅 기록은 broke af에서 30일, cool guy에서 90일, vc money에서 365일 동안 보관된 뒤 삭제돼요. 수탁사를 포함한 자세한 내용은 개인정보 페이지에 있어요.

다시 쓸 수 있는 체크리스트

저희 것뿐 아니라 어떤 채팅 위젯에든 쓸 수 있어요.

스니펫이 async나 defer로 로드되고 렌더링을 막지 않는다.
클릭 전: 몇 킬로바이트, 요청 하나, 벤더 API로 가는 요청 없음.
방문자가 채팅을 시작하기 전에는 쿠키도 저장소도 없다.
375 px 화면에서 런처가 사이트 버튼을 가리지 않는다.
패널과 폰트는 클릭 후에만 로드된다.
팀이 이미 일하는 곳에서 답하고, 지켜봐야 할 탭이 늘지 않는다.
팀원을 추가해도 요금에서 불이익이 없다.
캐시를 끄고 시크릿 창에서 직접 측정했다.

여러분 사이트에서 직접 써 보세요. 체험 기간은 14일이고 카드는 필요 없어요.