하려는 일에 맞춰 고르는 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 가 있는지. 이 네 가지로 거의 모든 문제를 확인할 수 있습니다. 지면에 무엇이 필요한지 정하기보다 아직 호스팅형 공급자를 비교하는 중이라면, 대안 비교 섹션 에서 가격까지 함께 비교할 수 있습니다.