Framer 사이트용 AI 챗봇: 2026년 세팅 가이드

Framer는 실제로 배포되는 마케팅 사이트를 원하는 창업가들의 기본 도구가 되었습니다. 정돈된 타이포그래피, 체계적인 CMS 컬렉션, 부드러운 애니메이션을 React 한 줄 없이 구현할 수 있습니다. 하지만 첫 방문자가 질문을 가지고 오는 순간 Framer는 더 이상 돕지 않습니다. 내장 라이브 채팅이 없고, FAQ 위젯도 없으며, 커뮤니티 플러그인은 단순 이메일 폼이거나 엔터프라이즈 가격 뒤에 가려져 있습니다.

이 공백은 중요합니다. B2B 구매 결정의 대부분은 영업과 대화하기 전에 이루어지고, 그 조사의 상당 부분은 받은편지함을 지켜보는 사람이 없는 시간에 발생합니다. 정적 FAQ 페이지는 거래의 무덤입니다. 방문자들은 훑어보고 자신의 상황에 맞는 것을 찾지 못한 채 탭을 닫습니다.

진짜 AI 챗봇은 이 공백을 메웁니다. 2018년식 결정 트리가 아니라 문서, 가격, 사례 연구를 읽고 출처와 함께 답하는 LLM 기반 어시스턴트입니다. 특히 Framer에서 적합한 챗봇은 세 가지 특징이 필요합니다.

1. 빌드 타임 의존성 제로 — Framer 프로젝트에 설치할 것이 없고, 커스텀 코드 컴포넌트도, Next.js 재내보내기도 필요 없습니다. 단일 임베드 스크립트로 들어갑니다.
2. Framer CMS 콘텐츠와 연동 — 게시된 Framer 사이트를 크롤링하고, 새 페이지를 올릴 때마다 동기화를 유지할 수 있습니다.
3. 비주얼 시스템과 어울림 — Framer 디자이너는 브랜드에 민감합니다. 2019년식 지원 버블 같은 챗봇은 즉시 제거됩니다.

Chatloom은 정확히 이 세 가지 제약을 충족하기 위해 만들어졌고, 2026년 Framer 창업가 Slack에서 이름이 그렇게 자주 언급되는 이유입니다.

가장 빠른 경로는 커스텀 코드 임베드입니다. 무료 Hobby 플랜을 포함한 모든 Framer 플랜에서 사용할 수 있습니다. 전체 흐름은 네 단계, Chatloom 계정이 이미 있다면 3분 이내에 끝납니다.

에이전트 생성 → Framer 사이트 크롤링 → 임베드 복사 → Framer 커스텀 코드에 붙여넣기 → Publish

1. 에이전트 생성. chatloom.app에서 회원가입하고, 에이전트 이름을 지정하고, 모델을 선택합니다(GPT-4.1 Mini가 기본이며 마케팅 사이트 Q&A의 95%를 월 몇 원 수준에서 처리합니다).
2. Framer 사이트로 연결. Chatloom의 내장 크롤러가 게시된 Framer URL(yourdomain.framer.website 또는 커스텀 도메인)을 받아 도달 가능한 모든 페이지를 인덱싱합니다. 일반적인 12페이지 사이트 기준 약 90초 소요됩니다. 크롤러는 robots.txt와 rate limit을 준수하므로 Framer 자체의 봇 보호를 건드리지 않습니다.
3. 임베드 스니펫 확보. 에이전트 대시보드에서 Install → Custom embed를 열고 세 줄짜리 스크립트를 복사합니다.

<script>
  window.CHATLOOM_AGENT_ID = "agt_xxxxxxxxxxxxxxxx";
</script>
<script async src="https://chatloom.app/widget.js"></script>

1. Framer에 붙여넣기. Framer 프로젝트를 열고 Site Settings → General → Custom Code로 이동해 스니펫을 End of body 필드에 붙여넣습니다. 저장하고 퍼블리시합니다. 위젯은 앞으로 추가할 페이지를 포함해 모든 페이지에 전역으로 나타납니다.

이것이 개발자 작업의 전부입니다. npm 없고, API 라우트 없고, 인증해야 할 Framer 플러그인 없습니다. 위젯은 Chatloom의 CDN에 셀프 호스팅되고 자동 업데이트되므로 이 코드를 다시 만질 일이 없습니다.

Framer 디자이너가 무엇보다 신경 쓰는 것은 하나입니다. 챗봇이 덧붙인 것처럼 보여서는 안 된다는 것. Chatloom 위젯 빌더는 정확히 이 제약을 위해 설계되었습니다. 중요한 모든 비주얼 속성은 클래스 이름이 아니라 컨트롤입니다.

빌더의 Widget 섹션에서 다음을 설정할 수 있습니다.

• 런처 모드 — 버튼, 컴팩트 패널, 풀스크린 오버레이, 사이드바. 풀스크린은 Framer 랜딩페이지에서 아름답게 작동합니다. 히어로 뷰포트를 존중하고 배경을 페이드시키기 때문입니다.
• 브랜드 색상 — 프라이머리, 액센트, 서피스. 전체 채팅 표면(헤더, 말풍선, 제안, 타이핑 인디케이터)이 실시간으로 다시 테마화됩니다.
• 모서리 둥글기 — Framer의 기본 12px에 맞추거나, 편집 사이트에 날카롭게, 발랄한 브랜드에는 완전 둥글게.
• 커스텀 폰트 — .woff2 업로드 또는 Google Fonts에서 선택. 마케팅 사이트에서 전체 전투는 폰트에서 결정되며, Framer 사용자 커뮤니티에서 가장 요청되는 기능입니다.
• 아이콘과 아바타 — 투명 PNG로 브랜드 마크를 업로드합니다. 런처 버튼은 투명도를 존중하고 Retina에서 선명하게 렌더링됩니다.
• 채팅 배경 — 그라디언트, 단색 또는 이미지. Framer 히어로와 조합하면 위젯이 서드파티 삽입물이 아닌 페이지의 일부처럼 느껴집니다.

빌더의 모든 섹션에는 시뮬레이션된 뷰포트에서 실제 위젯을 여는 Test Live 버튼이 있습니다. Test Live 눈 검사를 통과하지 않은 것은 배포하지 마세요.

지식 베이스가 비어있는 챗봇은 없는 챗봇보다 더 나쁩니다. 답을 지어내서 방문자를 쫓아냅니다. Framer 사이트는 훈련하기가 유난히 쉬운데, 콘텐츠가 이미 구조화되어 있기 때문입니다. 히어로 섹션에는 명확한 제목이 있고, CMS 아이템에는 일관된 필드가 있으며, 가격표는 Framer의 자체 컴포넌트에 살고 있습니다.

Chatloom은 네 가지 인제스트 경로를 제공하며, 모두 Framer 프로젝트에서 작동합니다.

1. 크롤 — Framer 도메인을 한 번만 붙여넣으면 Chatloom이 사이트맵을 순회하여 메인 콘텐츠를 추출하고, Framer의 UI 크롬(네비게이션, 쿠키 배너, 푸터)을 제거한 후 나머지를 RAG용으로 청크합니다. 이것만으로도 마케팅 Q&A의 80%를 커버합니다.
2. 사이트맵 업로드 — 사이트가 비밀번호로 보호되거나 하위 집합을 학습시키고 싶다면 sitemap.xml을 업로드하고 URL을 선택합니다.
3. PDF 및 문서 업로드 — 피치 덱, 원페이저, 가격 PDF, 온보딩 문서를 드롭합니다. Chatloom은 크롤과 동일한 임베딩 파이프라인으로 파싱합니다.
4. 수동 텍스트 — 아직 사이트에 없는 미묘한 답변("체험 중간에 취소하면 어떻게 되나요?")은 지식 베이스에 직접 입력합니다. 이들은 1급 청크가 되며 방문자가 정확히 그 질문을 할 때 크롤 결과를 능가합니다.

하단의 하이브리드 검색 엔진(덴스 벡터 + BM25 + RRF + Cohere 리랭커) 덕분에 키워드 일치를 고민할 필요가 없습니다. "다운그레이드하는 법"을 입력한 방문자는 문서에 "플랜 변경"이라고 되어 있어도 올바른 답을 얻습니다.

Framer 사이트에서 AI는 전체 제품이 아닙니다. 봇이 진지한 구매자를 만나는 순간, 길을 비켜야 합니다. Chatloom은 세 가지 에스컬레이션 경로를 내장으로 제공합니다.

사람 핸드오버. 모든 대화는 Chatloom 인박스에서 사람 상담원이 인계받을 수 있습니다. 상담원은 전체 대화록, 방문자의 페이지 경로(Framer 사이트의 어느 섹션이 채팅을 유발했는지), AI가 제공한 신뢰도 점수를 확인할 수 있습니다. Framer 창업자는 일반적으로 첫 달에 스스로 처리하고, 그 후 프리랜서 또는 계약 SDR에게 넘깁니다.

리드 캡처. 봇은 자연스러운 대화 중에 이름, 이메일, 한두 가지 자격 질문을 수집하고, 웹훅, Zapier 또는 직접 HubSpot/Pipedrive 통합을 통해 CRM에 리드를 푸시할 수 있습니다. 폼이 필요 없습니다.

캘린더 예약. 봇의 시스템 프롬프트에 Cal.com 또는 Calendly 링크를 넣어두면 구매자가 "데모를 볼 수 있나요" 또는 "어떻게 시작하나요"와 같이 말할 때 봇이 예약 URL을 전달합니다. 고의도 판매의 경우 네비게이션의 정적 "데모 예약" 버튼보다 훨씬 더 잘 전환됩니다.

세 경로 모두 동일한 대화 기록을 공유합니다. AI가 처음 세 메시지에 답하고 네 번째 메시지에서 사람이 인계받으면 CRM은 전체 이력을 받습니다. "봇에게 한 얘기를 다시 해주시겠어요" 순간이 없습니다.

여기가 Framer 창업자들이 보통 Intercom 견적에 대비하는 지점입니다. 이제 경제 구조가 완전히 다릅니다.

Chatloom Free(월 0달러)는 월 100개의 AI 메시지, 무제한 페이지 크롤, 브랜드 커스터마이징, 임베드 스크립트를 커버합니다. 대기자 명단을 오픈하는 Framer 랜딩페이지라면 이 정도로 정말 충분합니다.

Chatloom Starter(월 29달러)는 2,000개의 메시지, 라이브 채팅 핸드오버, 분석, CRM 웹훅을 해제하고 "Powered by Chatloom" 배지를 제거합니다. 실제 트래픽이 생기면 대부분의 창업자가 정착하는 티어입니다.

Chatloom Pro(월 99달러)는 커스텀 모델 라우팅, 우선 지원, 더 높은 메시지 상한, 멀티시트 액세스를 추가합니다. 계약 SDR 또는 파트타임 지원 담당자가 인박스를 공유하게 되면 유용합니다.

기존 주자들과 비교해 보면:

Framer로 만든 마케팅 사이트 기준으로 이 기존 숫자들은 트래픽에 비해 완전히 균형이 맞지 않습니다. 손익분기 계산도 사람들이 예상하는 것보다 더 우호적입니다. Starter 가격에서 챗봇은 시급 75달러 프리랜서 VA에게 갈 이메일을 월 두 통만 방향을 돌려도 본전을 뽑습니다. 실제 비율은 40대 1에 가깝습니다.