하려는 일에 맞춰 고르는 Webflow 위젯

요금제 관문이 먼저다

Webflow 는 도움말 두 편 머리에 같은 조건을 똑같이 적어 둡니다. 사이트·지면 커스텀 코드 편과 Code Embed 요소 편입니다. Core·Growth·Agency·Freelancer Workspace 중 하나이거나, 활성 Site plan 이 붙은 사이트여야 한다는 조건입니다. pricing 표는 같은 말을 반대에서 합니다. 무료 Starter site plan 칸과 무료 Starter Workspace 칸 모두 custom code 행이 대시 표시입니다.

그래서 가장 싸게 들어가는 길은 사이트 하나에 유료 Site plan 을 붙이거나 유료 Workspace 를 쓰는 것입니다. 2026년 8월 25일 기준 webflow.com/pricing 의 연간 결제 화면에서 Basic site plan 은 월 $15, Core Workspace 는 월 $19 로 적혀 있고, Core 기능 목록에 custom code 가 이름을 올리고 있습니다. 무료 계정에는 맛보기 버전이 없습니다. 입력란 자체가 화면에 없습니다.

로더는 한 번, 두 번째 위젯부터는 div 하나

로더는 Site settings 의 Custom code 탭, Footer code 칸으로 갑니다. Webflow 는 이 칸의 내용을 모든 지면에서 닫는 </body> 앞에 내보내고, 스크립트 태그는 특히 푸터에 두라고 권합니다. Save changes 를 누르면 그 뒤에 발행하는 모든 것에 함께 실려 나갑니다.

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

관여하는 스크립트 태그는 이것뿐입니다. 그다음부터는 전부 마크업입니다. Add 패널을 열고 위젯이 놓일 자리로 Code Embed 를 끌어다 놓은 뒤, data-bootsignal 속성이 붙은 div 를 붙여 넣고 저장하고 모달을 닫습니다. 랜딩 지면의 카운트다운도 이만큼이고, 열 번째 위젯도 같은 모양입니다.

<div data-bootsignal="countdown"
     data-target="2026-12-31T23:59:59"
     data-expired="The sale has ended!"></div>

청구 구조도 같은 모양이라, 레이아웃을 계획하기 전에 알아 둘 만합니다. 등록 도메인 하나에 월 $20, 또는 1년치 $200 이고, 그 한 줄이 카탈로그 전체를 덮습니다. 구독한 뒤에 추가되는 위젯까지 포함입니다. 페이지뷰나 방문자를 세는 항목이 없으니, 위젯을 하나 대신 셋으로 계획해도 숫자는 그대로입니다. 도메인을 하나 더 쓰면 그건 별도 항목이고 대시보드에서 추가합니다. 나머지는 요금 지면에 있습니다.

구조상 Webflow 에 유리한 점이 하나 있습니다. Code Embed 는 내 마크업을 샌드박스 iframe 안이 아니라 지면 자체에 넣습니다. 위젯은 location.hostname 을 site id 에 등록된 도메인과 맞춰 보고, Google 로그인은 지면 origin 을 봅니다. 샌드박스 HTML 임베드만 주는 빌더에서는 위젯이 내 도메인 대신 빌더의 샌드박스 도메인을 보고 실행을 거부합니다. Webflow 는 그런 쪽이 아닙니다. 라이브 도메인을 등록하세요. 먼저 시험해 볼 생각이면 .webflow.io 스테이징 도메인까지요. 그러면 검사를 통과합니다.

독자가 한마디 돌려주게 하고 싶을 때

댓글은 입장을 밝히거나 절차를 설명하는 지면에서 제 몫을 합니다. 독자에게 정정할 것이나 물어볼 것이 생기는 자리가 거기니까요. 방문자는 Google 로 로그인하고, 그 로그인은 모든 BootSignal 위젯이 함께 씁니다. 컬렉션 지면이라면 설치 전체가 템플릿 한 번 수정입니다. 단계는 Webflow 댓글 위젯 편에 있고, 위젯은 Comments 입니다.

평점은 성격이 다른 지면에 맞습니다. 방문자가 무언가를 논하기보다 판정하는 지면입니다. 템플릿, 레시피, 강의 한 챕터. 여기 모인 것은 Testimonial Wall 로도 흘러가는데, 이 벽은 위젯이 실제로 저장한 후기로 카드를 만들기 때문에 아무도 쓰지 않은 문장을 걸 수 없습니다. Ratings 는 thread id 를 받습니다. 점수는 사이트가 아니라 항목에 붙는 것이니까요.

날짜가 판매를 하고 있을 때

카운트다운은 정직하지 않으면 장식입니다. 모집이 정말 금요일에 닫히거나 가격이 정말 자정에 바뀐다면, 타이머는 사실을 말하고 지면은 그만큼 급하게 읽힙니다. data-target 에 ISO 타임스탬프를, data-expired 에 그 뒤 지면이 할 말을 넣으세요. 시계가 0 에 닿을 때까지 사람들이 건너뛰는 부분입니다. 설치 단계는 Webflow 카운트다운 위젯 편에 있습니다.

Social Proof Toast 는 급한 마음을 만드는 다른 한쪽인데, 다른 도구들이 파는 조작판보다 일부러 약하게 만들었습니다. 사이트에 실제로 최근 있었던 일, 곧 BootSignal 이 이미 저장해 둔 댓글·반응·평점·투표를 다시 보여 줍니다. 오하이오에서 누가 구매했다는 소식은 지어낼 수 없습니다. 그걸 타이핑해 넣을 칸이 없으니까요. 그래서 아직 아무도 쓰지 않은 사이트에서는 토스트가 보여 줄 것이 없습니다. 뒤에 활동이 좀 쌓인 지면에 어울립니다.

지면이 길어서 절반쯤에서 떠날 때

위젯 둘이 같은 불만에 서로 다른 쪽에서 답합니다. 읽기 진행바는 위쪽에 붙는 얇은 띠로, 방문자가 내려갈수록 채워져서 스크롤바를 끌어 보지 않고도 얼마나 남았는지 압니다. 목차는 지면에 이미 있는 제목들로 스스로를 만들고 지금 읽는 절을 밝혀 줍니다. 긴 가이드나 문서 지면이 원하는 게 이쪽입니다. 둘 다 thread id 를 받지 않습니다. 저장하는 것이 없으니까요.

공유가 이 무리에 든 이유는 더 시시합니다. 손으로 만든 공유 링크는 오래 두면 망가집니다. 그리고 버튼이 빈 지면을 올리는 날까지 아무도 모릅니다. 공유 위젯은 요소 하나로, 브라우저에 기기 공유 시트가 있으면 그쪽으로 넘기고 없으면 링크를 복사합니다.

이메일 주소를 모으려면

뉴스레터는 여기서 Webflow 사용자에게 이미 자체 답이 있을 수 있는 유일한 위젯입니다. Webflow 폼도 주소를 받아 제출물을 저장할 수 있으니까요. 다른 점은 주소가 어디에 떨어지느냐입니다. 뉴스레터 위젯은 신청을 나머지 BootSignal 데이터와 함께 두고, 방문자에게 로그인을 요구하지 않으며, data-thread-id 를 받습니다. 블로그 목록과 대기명단을 폼 둘 없이 한 사이트에서 돌릴 수 있습니다.

thread id 를 받는 위젯과 안 받는 위젯

Webflow 사용자가 여기서 자주 틀립니다. Webflow 가 틀린 쪽을 쉽게 만들어 두었기 때문입니다. 컬렉션 지면 템플릿의 Code Embed 안에서는 속성 값에 CMS 필드를 바로 끼워 넣을 수 있는데, 그 직감이 절반은 맞습니다. 특정 지면에 대해 무언가를 저장하는 위젯은 data-thread-id 를 받고 그 연결을 원합니다. 자기가 앉은 지면만 읽는 위젯은 그 값을 무시합니다. 값 하나를 모든 글에 박아 두면 모든 글이 대화 하나를 함께 씁니다.

이 규칙은 여기 없는 위젯에도 그대로 적용됩니다. 투표·방명록·업보트·반응·조회수·의견함은 지면별 데이터를 들고 있어서 thread id 를 받습니다. 공지 바, 쿠키 동의, 라이트박스, 갤러리, 이미지 비교, 확대, 스플릿 플랩, 마인드맵, Testimonial Wall, 이펙트는 받지 않습니다.

Designer 가 보여 주는 것과 감추는 것

• <script> 태그가 든 Code Embed 는 Designer 캔버스에 자리표시만 보여 줍니다. Webflow 는 거기서 <iframe> 과 <style> 내용만 미리 그리고 나머지는 그리지 않습니다. 스크립트는 preview·publish·export 시점에 돕니다.
• Webflow 는 커스텀 코드가 preview 모드에서 효력을 갖지만 사이트를 발행하기 전에는 라이브로 나가지 않는다고 적어 둡니다. 위젯은 조건을 하나 더 붙입니다. site id 에 등록된 호스트네임에서 응답하고, preview 는 내 도메인에서 나오지 않습니다. 믿을 수 있는 시험은 등록된 도메인의 발행된 URL 이고, 스테이징도 포함입니다.
• 커스텀 코드 칸은 하나에 50,000자까지 들어갑니다. Site settings 의 head 와 footer, Page settings 의 head 와 body 앞, 그리고 Code Embed 하나하나 모두요. 한 줄짜리 로더는 그 천장에 한참 못 미칩니다. Webflow 가 src 로 불러오는 형태를 권하는 것도 이 때문입니다.
• 커스텀 코드에 <html>·<body>·<head> 태그를 붙여 넣지 마세요. 레이아웃이 깨진다고 Webflow 가 경고합니다. 여기 나오는 마운트는 모두 평범한 div 라서 걸릴 일이 없습니다.
• 새로 발행한 Webflow 사이트에는 jQuery 3.5.1 이 이미 실려 있고, 사본이 둘이면 충돌이 난다고 Webflow 가 경고합니다. 여기서 하나를 더 얹는 것은 없습니다.

처음 한 바퀴는 이렇게

1. 발행할 도메인과 .webflow.io 스테이징 도메인을 등록하고 site id 를 복사합니다.
2. Site settings, Custom code, Footer code 에 로더를 한 번 붙여 넣고 Save changes 를 누릅니다.
3. 첫 위젯용 Code Embed 를 하나 추가합니다. 모든 글에 들어갈 것이면 컬렉션 지면 템플릿에 넣습니다.
4. publish 하고 라이브 URL 을 열어, 하나가 도는 것을 확인한 다음 둘째를 붙입니다.
5. 나머지는 div 로 추가합니다. 두 번째 로더도, 두 번째 구독도 없습니다.

무언가 안 그려지면 그 목록을 거꾸로 걸어 보세요. 호스트네임 등록, 사이트 발행, 임베드가 head 가 아니라 지면 안에 있는지, 표가 받는다고 적은 자리에 thread id 가 있는지. 이 네 가지가 거의 전부를 덮습니다. 지면에 무엇이 필요한지 정하기보다 아직 호스팅형 공급자를 견주는 중이라면, 대안 비교 섹션이 값까지 붙여 비교해 둡니다.