Framer 캔버스에서는 댓글창이 보이지 않는다
스크립트는 패널로, 댓글창은 컴포넌트로. 둘이 살아나는 시점은 Publish 뒤.
Framer 에서 필요한 것은 패널 두 개와 5분 정도입니다. 로더 스크립트는 Project Settings > Custom Code 로, 댓글창 자체는 캔버스로 끌어다 놓는 Embed 컴포넌트로 갑니다. 둘 다 우회가 아니라 Framer 문서에 적힌 기능입니다. 걸리는 대목은 하나입니다. Settings 로 넣은 코드는 캔버스에서도 미리보기에서도 돌지 않아서, Publish 하고 라이브 사이트를 열기 전까지는 아무것도 보이지 않습니다.
Framer 는 두 조각 모두에 제자리를 준다
호스팅형 댓글 위젯은 언제나 마크업 두 조각입니다. 사이트 전체에서 위젯 코드를 한 번 불러오는 스크립트 태그, 그리고 댓글창이 그려질 자리를 표시하는 빈 요소. 빌더 중에는 둘 중 하나를 놓을 자리가 없어서 오후 내내 도구와 씨름하게 만드는 것이 많습니다.
Framer 는 그런 쪽이 아닙니다. 스크립트 태그의 자리는 Project Settings > Custom Code 이고, 여기에 넣으면 퍼블리시된 모든 페이지에, 또는 고른 페이지에만 주입됩니다. 빈 요소의 자리는 Embed 컴포넌트입니다. Insert 메뉴에서 Embed 를 검색해 캔버스로 끌어다 놓고 HTML 을 붙여넣습니다. Framer 는 자기 Trustpilot 안내에서 정확히 이 짝을 문서화해 두었습니다. 벤더 로더는 Custom Code 에, 마운트 마크업은 Embed 에.
Framer 가 값을 매기는 것, 그리고 요금 페이지에 없는 것
2026-08-25 에 확인한 Framer 지면들에서는 커스텀 코드에 요금제 조건이 나오지 않습니다. 요금 페이지 비교표에는 커스텀 코드 행 자체가 없고, 커스텀 코드 추가 도움말은 요금제를 언급하지 않고, 사이트 요금제 문서는 커스텀 코드를 꺼내지도 않습니다. 문서에 없는 잠금과 잠금이 없다는 문서는 같은 것이 아니니, 내 계정에 대한 약속이 아니라 확인되지 않은 상태로 읽으세요. 이걸 전제로 계획을 세우기 전에 내 Project Settings 의 Custom Code 탭을 직접 열어 보면 됩니다.
Framer 가 문서로 못 박아 둔 제약은 따로 있고, 이 작업과 꽤 가깝게 맞닿습니다. 무료 사이트는 Framer 가 만들어 준 서브도메인에 퍼블리시되고 Made in Framer 배너를 달고 다니며, 커스텀 도메인 연결에는 유료 요금제가 필요합니다. 스테이징은 Pro 이상인데, 이 한 줄이 보기보다 많은 것을 정합니다. Free 나 Basic 에서는 퍼블리시된 사이트가 내 스크립트가 도는 유일한 곳입니다.
Embed 가 결국 그리게 되는 것
댓글 2
- M
진짜 한 줄로 끝나네요. 설치가 이렇게 간단할 줄!
- J
로그인까지 공유돼서 따로 붙일 게 없어요. 👍
댓글 위젯이 직접 그린 화면이고, 안에 걸린 대화는 표본입니다. Framer Embed 안의 div 하나가 내 페이지에서도 같은 것을 만듭니다.
첫 조각: Project Settings 의 로더
Framer 가 퍼블리시하는 주소에서 시작한다
첫 주소를 고르는 쪽은 내가 아니라 Framer 입니다. 퍼블리시하면 무료 서브도메인이 만들어지고 사이트가 그리로 올라가며, 커스텀 도메인은 유료 요금제에서 나중에 붙습니다. 접미사는 남의 글에서 베끼지 말고 주소창에서 읽으세요. 사이트는
framer.website주소로 뜨는데, Framer 자신의 퍼블리시 도움말은 아직 framer.app 도메인이라고 부릅니다. 지금 내 눈앞에 있는 문자열이 BootSignal 대시보드에 넣을 호스트네임이고, 브라우저가 쓴 대로 그대로 적습니다. 저장하면 대시보드에 site id 가 하나 생기는데, 아래 스니펫 둘에서 내 사이트만의 것은 그 값 하나입니다.Project Settings > Custom Code 를 연다
Framer 에디터에서 Project Settings 를 열고 왼쪽 사이드바에서 Custom Code 탭을 고릅니다. 아직 코드를 넣은 적이 없으면 Add Script 를, 이미 스니펫이 있으면 + 아이콘을 누릅니다. 이름은 BootSignal loader 처럼 알아볼 수 있게 붙이세요. 이 패널에 보이는 것은 이름 목록뿐입니다.
로더를 붙여넣고 들어갈 자리를 고른다
Framer 가 코드를 사이트의 어디에 둘지 물어봅니다. Framer 자신의 벤더 안내는 로더 스크립트를 Custom Code 의
<head>태그 시작 부분에 두고, 여기서도 그 위치를 그대로 따라갑니다. 태그에defer가 붙어 있어 브라우저는 파일을 일찍 받아 두고 HTML 파싱이 끝난 뒤에 실행합니다. 독자가 기다리는 것을 댓글창이 늦추지 않게 하는 장치입니다.<script src="https://bootsignal.com/bootsignal.js" data-site-id="YOUR_SITE_ID" data-lang="ko" defer></script>범위를 좁히거나, 사이트 전체로 둔다
같은 패널에서 스니펫을 특정 페이지로 제한할 수 있습니다. 댓글이 블로그 템플릿에만 나온다면 그 페이지들만 골라 두면 로더가 마케팅 페이지에는 올라가지 않습니다. 다른 BootSignal 위젯도 붙일 생각이라면 사이트 전체로 두세요. 로더 하나가 그 전부를 돌립니다.
Once 냐, Run on every page visit 냐
그다음 Framer 는 코드를 얼마나 자주 실행할지 묻습니다. 여기서는 한 박자 늦춰 읽는 편이 좋습니다. 도움말은 두 선택지를 그대로 적어 두었습니다. Once 는 코드를 한 번만 추가해 실행하며 이벤트 리스너를 붙이는 경우가 그 예이고, Run on every page visit 는 누군가 페이지를 방문할 때마다 코드를 실행합니다. 새로 만든 스니펫은 Once 에서 시작하는데, 이 패널을 소개한 2025년 12월 변경 기록은 그것을 이전에 코드가 돌던 방식과 비슷하며 서드파티 스크립트에 쓸 수 있다고 설명합니다.
그 문장은 분석 스크립트를 염두에 두고 쓴 것입니다. 방문마다 한 번만 실행되는 것이 정확히 맞는 경우죠. 댓글창은 반대쪽 경우입니다. 퍼블리시된 Framer 사이트는 브라우저를 통째로 새로 불러오지 않고 페이지 사이를 옮겨 다니므로, Once 로 둔 스니펫은 방문이 시작될 때 한 번 로드되고 독자가 내비게이션을 눌러 이동하는 동안 다시 실행되지 않습니다. 반면 클라이언트에서 도는 위젯은 지금 화면에 올라온 페이지에서 자기 마운트를 찾아내야 합니다.
댓글이 한 페이지에만 있으면 Once 로 괜찮습니다. 블로그 템플릿이나 여러 페이지에 걸쳐 있으면 Run on every page visit 를 고르세요. 증상은 지금 익혀 두면 됩니다. 글 URL 을 직접 열었을 때는 댓글창이 뜨는데 사이트 안에서 링크를 눌러 같은 글에 닿으면 사라진다면, 설치가 망가진 게 아닙니다. 실행 빈도가 틀린 것입니다.
두 번째 조각: Embed 컴포넌트의 마운트
다시 캔버스로 돌아와 Insert 메뉴를 열고 Embed 를 검색해, 댓글창이 놓일 자리로 컴포넌트를 끌어다 놓습니다. 보통 본문 아래이고 푸터 위입니다. Embed 는 URL 도 받고 날 HTML 도 받는데, 필요한 것은 HTML 칸입니다.
<div data-bootsignal="comments" data-thread-id="page-key"></div>마운트는 저 div 하나로 끝입니다. Embed 의 폭은 적당히 잡고 높이는 늘어나게 두세요. 댓글이 쌓이면 댓글창은 길어집니다. Framer 는 연동에 따라 Embed 안에 감싸는 코드가 더 필요할 수 있다고 알려 주는데, 이 위젯은 그렇지 않습니다. 일은 Custom Code 의 로더가 합니다.
thread id 고르기
data-thread-id 는 이 페이지 댓글과 저 페이지 댓글을 갈라 줍니다. 같은 값을 쓰는 페이지 둘은 대화를 함께 쓰는데, 그걸 원할 때도 있지만 보통은 아닙니다. 한 장짜리 페이지라면 값을 그냥 박아 둡니다. data-thread-id="pricing" 처럼요. 함정은 CMS 컬렉션 템플릿입니다. Embed 하나가 모든 글을 담당하므로 거기 고정 값을 박으면 컬렉션 전체가 대화 하나로 합쳐집니다. 템플릿을 그 위에 짜기 전에, 내 Embed 가 속성 값에 CMS 필드를 받아 주는지 먼저 확인하세요.
Publish 하고 실제 사이트를 본다
Framer 는 Settings 로 넣은 커스텀 코드가 미리보기에 나타나지 않는다고 적어 두었고, Trustpilot 안내가 그 이유를 알려 줍니다. head 와 body 의 스크립트는 에디터가 아니라 브라우저에서 실행된다는 것입니다. 오른쪽 위 Publish 를 누르고 라이브 URL 을 엽니다.
거기서 확인할 것은 둘입니다. 댓글창이 로그인 안내와 함께 그려지는지, 그리고 Google 로그인을 마친 뒤에 실제로 글이 올라가는지. 그려지기는 하는데 내 댓글을 거부한다면 주소창과 대시보드의 도메인을 글자 하나까지 맞춰 보세요. Framer 서브도메인도 포함해서요. 대개는 아무도 등록하지 않은 호스트네임입니다.
설치를 한눈에
| 붙여넣는 것 | Framer 안에서 들어갈 자리 | 중요한 설정 | Publish 전에 보이나 |
|---|---|---|---|
| 로더 스크립트 태그 | Project Settings > Custom Code > Add Script | 위치는 <head> 시작 부분. 빈도는 여러 페이지면 Run on every page visit | 아니오 |
| 댓글 마운트 div | Embed 컴포넌트의 HTML 칸 | 없음, 그냥 정적 마크업 | 아니오 |
data-site-id | 로더 태그의 속성 | 사이트마다 하나, BootSignal 대시보드에서 | 해당 없음 |
data-thread-id | 마운트 div 의 속성 | 사이트마다가 아니라 대화마다 하나 | 해당 없음 |
결국 댓글을 들고 있는 쪽은 누구인가
Framer 사이트에 정직한 길은 셋입니다. 직접 만드는 길은 누군가 한 글자를 쓰기도 전에 로그인, 데이터베이스, API, 관리 화면이 필요하고, Framer 는 서버 코드를 돌려 주지 않으니 그 스택은 다른 데 살게 됩니다. 광고로 굴러가는 호스팅형 댓글창은 독자가 주의로 값을 냅니다. 아니면 호스팅형 위젯에 돈을 냅니다. 비교 지면에 호스팅형 후보들의 현재 가격이 나란히 있고, 숫자가 있어야 할 자리가 거기입니다.
Framer 사이트에서 이게 얼마인가
Custom Code 스니펫의 site id 뒤에는 구독 하나가 있습니다. 등록 도메인 단위로 월 $20 또는 연 $200, 모든 위젯 포함이고 지금 기준 유료 위젯 31개와 무료 브라우저 도구 31개에 나중에 나오는 것까지 들어갑니다. 트래픽으로 값을 재는 항목이 없다는 점이 후보들을 견줄 때 기준으로 잡을 선입니다. 트래픽으로 값을 매기는 댓글 도구는 글 하나가 드디어 잘된 달에 가장 큰 청구서를 보냅니다. 도메인을 더 쓰려면 따로 삽니다.
- 답글이 계단처럼 붙어서, 대화가 서로 무관한 메모 더미로 주저앉지 않습니다.
- Google 로그인을 도메인의 모든 BootSignal 위젯이 함께 씁니다.
- 대시보드의 관리 화면에서 댓글 하나를 지우거나 쓴 사람을 차단합니다.
- 도메인 허용목록이 있어서 내 site id 는 등록한 호스트네임에서만 응답합니다.
- 위젯 화면 문구는 한국어·영어·일본어로 나오고, 로더의
data-lang으로 고릅니다.
Custom Code 에 스니펫 하나, Embed 에 div 하나, 그리고 Publish.
두 번째 위젯은 div 한 줄
로더는 댓글 전용이 아닙니다. 사이트의 모든 BootSignal 위젯을 이 하나가 돌리므로, 다음 위젯에 드는 것은 Embed 하나와 div 한 줄입니다. 스크립트 태그를 더 넣을 일도, 청구서가 달라질 일도 없습니다. 댓글과 잘 붙는 짝은 반응입니다. 독자 대부분은 문단을 쓰지 않지만, 이모지는 꽤 많이 눌러 줍니다.
여러 이모지로 반응 · 1인 1반응
댓글까지는 쓰지 않을 독자용 반응 위젯. 로더는 그대로, div 하나만 더. 숫자는 표본으로 채워 둔 것.
첫날에 하면 쉬운데 세 달째에 하면 어려운 일이 넷 있습니다. 퍼블리시하는 호스트네임을 정확히 등록하는 것. Custom Code 스니펫 이름을 남이 봐도 알게 붙이는 것. 실행 빈도를 그 선택지가 떠 있는 패널 안에서 정하는 것. 그리고 잃을 댓글이 생기기 전에 thread id 체계를 정해 두는 것. 대화는 그 문자열에 매달려 있어서, 나중에 값을 바꾸면 빈 댓글창을 받고 옛 댓글은 옛 id 에 남습니다.
자주 나오는 질문
- 글 URL 로 직접 들어가면 댓글창이 보이는데 사이트 안에서 링크를 눌러 가면 사라집니다. 무엇이 깨진 건가요?
- 깨진 것은 없습니다. 스니펫의 실행 빈도가 틀렸습니다. 퍼블리시된 Framer 사이트는 브라우저를 통째로 새로 불러오지 않고 페이지 사이를 옮겨 다니므로, Once 로 남은 Custom Code 스니펫은 방문이 시작될 때 실행되고 독자가 클릭하며 돌아다니는 동안 다시 실행되지 않습니다. 그러면 두 번째 페이지의 마운트 div 는 자기를 채워 줄 상대가 없는 상태로 남습니다. Project Settings > Custom Code 를 열어 그 스니펫을 고르고 Run on every page visit 로 바꾸세요. Once 가 맞는 답인 경우는 댓글창이 URL 로 직접 들어오는 한 페이지에만 있을 때입니다.
- Run on every page visit 로 두면 페이지마다 위젯을 다시 받아 오나요?
- 아니고, 댓글창이 두 겹으로 쌓이지도 않습니다. 로더 태그에
defer가 붙어 있어 첫 페이지에서 파싱도 렌더도 막지 않는 요청 한 번을 치르고, 그 뒤로는 브라우저가 캐시에서 꺼내 씁니다. 로더가 다시 돌 때는 아직 그려지지 않은 마운트 지점을 찾고, 하나를 올리는 순간 표시를 남기고, 이미 표시된 것은 건너뜁니다. 그래서 댓글창이 이미 떠 있는 페이지에서 다시 돌아도 하는 일이 없습니다. 눈에 보이는 값은 어느 설정에서나 같습니다. 자기 댓글을 따로 받아 오니 주변 페이지보다 한 박자 늦게 채워집니다. - 캔버스에도 미리보기에도 아무것도 안 뜨는데 자리를 잘못 골랐나요?
- 대개는 아닙니다. Framer 는 Settings 로 넣은 커스텀 코드가 미리보기에 나타나지 않는다고 적어 두었습니다. 그 스크립트는 에디터가 아니라 퍼블리시된 사이트의 브라우저에서 도니까요. Publish 하고 라이브 URL 을 여세요. 스테이징은 Pro 이상이라 Free 나 Basic 에서는 그 첫 확인이 프로덕션에서 벌어집니다. 아직 아무 링크도 없는 페이지에 Embed 를 두고 거기서 댓글창을 확인한 다음, 폭과 여백이 맞으면 옮기면 됩니다.
- Free 요금제에서도 되나요?
- 2026-08-25 에 확인한 Framer 지면 어디에도 커스텀 코드의 요금제 조건은 나오지 않습니다. 요금 비교표에 커스텀 코드 행이 없고, 커스텀 코드 추가 도움말은 요금제를 적지 않고, 사이트 요금제 문서는 커스텀 코드를 다루지 않습니다. 이것을 허가가 아니라 미확인으로 다루세요. Framer 가 분명히 잠가 둔 것은 그 바로 옆에 있습니다. 커스텀 도메인 연결에는 유료 요금제가 필요하고, 무료 사이트는 Framer 서브도메인에 Made in Framer 배너를 달고 올라가며, 스테이징은 Pro 부터입니다. 내 Custom Code 탭을 직접 열면 10초 만에 결론이 납니다.
- CMS 컬렉션의 모든 글이 같은 대화를 보여 줍니다. 무엇을 바꿔야 하나요?
- 컬렉션 템플릿의 Embed 하나가 고정된
data-thread-id를 들고 있고, 그 템플릿으로 그려지는 모든 글이 그 값을 물려받습니다. 그래서 컬렉션 전체가 대화 하나를 읽고 씁니다. 값을 박아 두는 것은data-thread-id="pricing"같은 한 장짜리 페이지에서 맞는 답이고 여기서는 틀린 답입니다. 컬렉션 템플릿에서는 그 문자열이 글마다 달라져야 하므로, 템플릿을 그 위에 짜기 전에 Embed 가 속성 값으로 CMS 필드를 받는지 확인하세요. 누군가 글을 남기기 전에 정리해야 합니다. 대화가 그 문자열에 걸려 있어서, 나중에 바꾸면 빈 댓글창이 열리고 지금 있는 댓글은 옛 id 에 남습니다. - 페이지를 새로 디자인하면 쌓인 댓글은 어디로 가나요?
data-thread-id가 그대로라면 아무 데도 가지 않습니다. 대화는 레이아웃도 URL 도 아니라 그 값을 키로 잡으니, Embed 를 옮기고 주변 섹션을 다시 칠하고 페이지를 처음부터 다시 짜도 같은 댓글이 돌아옵니다. 값을 바꾸면 빈 댓글창에서 새로 시작합니다.
퍼블리시하는 도메인을 등록하고, Custom Code 에 한 줄을 붙여넣습니다.
이 글에 나온 서비스
이어서 읽기
수치 출처
- Framer Help: How to add custom code (Project Settings, Custom Code tab, Once vs Run on every page visit) (확인 2026-08-25)
- Framer Help: How to add an iframe or embed script (Insert menu, Embed component, HTML section) (확인 2026-08-25)
- Framer Help: Previewing your site (custom code added through Settings does not appear in preview) (확인 2026-08-25)
- Framer pricing (no custom code row in the plan comparison table; custom domain requires a paid plan) (확인 2026-08-25)
- Framer Help: Embedding a Trustpilot widget (loader script in Custom Code at the start of <head>, mount markup in an Embed component) (확인 2026-08-25)
- Framer Help: Publishing your Framer website (Publish button, the subdomain generated at publish, staging on Pro and above) (확인 2026-08-25)
- Framer Help: Best use cases for each Framer plan (Free publishes on a Framer domain with a Made in Framer banner) (확인 2026-08-25)
- Framer Updates: Custom Code, 2025-12-15 (snippets in Project Settings; code is set to execute Once by default) (확인 2026-08-25)
