Spin And Wheel

내 웹사이트에 돌림판 룰렛 삽입하기

웹사이트, 블로그, 수업 페이지에 실제로 돌아가는 룰렛을 1분 안에 넣을 수 있습니다. 룰렛을 고르고, 항목을 입력하고, HTML 두 줄을 붙여 넣기만 하면 됩니다. 위젯은 무료이고 계정이 필요 없으며, 방문자에게 광고를 보여 주지 않고 추적 쿠키도 사용하지 않습니다.

삽입 코드 만들기

비워 두면 해당 룰렛의 기본 목록이 사용됩니다. 항목은 서버가 아니라 코드 안에 저장됩니다.

크기

Notion, Google Sites의 "By URL"처럼 HTML 대신 링크를 요구하는 편집기용입니다.

실시간 미리보기

3단계로 돌림판 룰렛 삽입하는 방법

  1. 룰렛을 고르고 항목을 넣으세요. 이 페이지의 생성기에서 이름 돌림판, 예 또는 아니요 룰렛, 숫자·글자·트위스터·음식 룰렛 중 하나를 고르고 한 줄에 하나씩 항목을 입력하세요. 목록을 비워 두면 룰렛의 기본 항목이 그대로 쓰입니다.
  2. 크기를 고르고 코드를 복사하세요. 높이는 작게 400 px, 보통 520 px, 크게 640 px이고, 너비는 같은 한도까지 100%입니다. 코드는 표준 HTML <iframe>과 링크 한 줄로 이루어져 있습니다.
  3. 코드를 HTML 블록에 붙여 넣고 게시하세요. 이 블록은 WordPress에서는 사용자 정의 HTML, Wix에서는 Embed HTML, Squarespace에서는 Code, Shopify에서는 Custom Liquid, Webflow에서는 Code Embed라고 합니다. 링크만 받는 편집기(Notion, Google Sites "By URL")에는 삽입 링크를 사용하세요.

민준, 서연, 지호 세 항목이 들어간 이름 돌림판을 보통 크기로 넣는 전체 코드입니다.

<iframe src="https://spinandwheel.com/ko/?mode=embed&amp;entries=%EB%AF%BC%EC%A4%80,%EC%84%9C%EC%97%B0,%EC%A7%80%ED%98%B8" title="돌림판" width="100%" height="520" style="max-width:520px;border:0" loading="lazy" allow="fullscreen; clipboard-write"></iframe>
<p><a href="https://spinandwheel.com/ko/">돌림판 - Spin and Wheel</a></p>

항목은 src 주소에 들어 있으며(entries=, 긴 목록은 압축된 w=), mode=embed는 룰렛만 보이게 합니다. 두 번째 줄은 룰렛 페이지로 가는 일반 링크입니다.

코드를 붙여 넣는 곳

코드는 표준 HTML <iframe>과 링크 하나이므로 HTML을 허용하는 사이트라면 어디서나 작동합니다. 많이 쓰는 편집기별 방법은 다음과 같습니다.

WordPress

블록 편집기에서 사용자 정의 HTML 블록을 추가하고(/html 입력) 코드를 붙여 넣은 뒤 미리보기를 클릭하세요. 직접 설치한 WordPress는 기본적으로 iframe을 허용하지만, WordPress.com에서는 유료 요금제가 필요할 수 있습니다.

Wix

Wix 에디터에서 Add Elements(+) → Embed Code → Embed HTML을 클릭하고 Code를 선택해 코드를 붙여 넣은 뒤 Update를 클릭하세요. 그다음 상자 높이를 약 520 px로 늘립니다. Wix는 사용자 HTML을 자체 프레임 안에 표시하므로 룰렛은 작동하지만, 그 아래 링크는 프레임 안에서 열립니다.

Squarespace

페이지를 편집하고 Add Block → Code를 클릭한 뒤, 블록을 HTML로 둔 채 코드를 붙여 넣고 페이지를 저장하세요. 룰렛은 게시된 페이지에 나타나며, 편집기에서는 Code 블록 대신 자리 표시자가 보일 수 있습니다.

Shopify

Online Store → Themes → Customize로 이동해 Add section → Custom Liquid를 선택하고, Liquid 코드 칸에 코드를 붙여 넣은 뒤 저장하세요. Dawn 같은 무료 테마에도 Custom Liquid 섹션이 있습니다.

Webflow

Add 패널에서 Code Embed 요소를 페이지로 끌어다 놓고 코드를 붙여 넣은 뒤 Save & Close를 클릭하고 사이트를 게시하세요. 사용자 코드 삽입에는 Webflow 유료 사이트 요금제가 필요할 수 있습니다.

Blogger

글을 열고 연필 메뉴에서 편집기를 작성 보기에서 HTML 보기로 바꾼 뒤, 룰렛이 나올 위치에 코드를 붙여 넣고 게시하세요. 사이드바에 넣으려면 레이아웃 → 가젯 추가 → HTML/JavaScript를 사용하세요.

Google Sites

Insert → Embed를 선택하세요. "Embed code"에는 전체 코드를, "By URL"에는 삽입 링크를 붙여 넣습니다. Google Sites는 모든 삽입 콘텐츠를 자체 프레임 안에 표시하므로 룰렛은 작동하지만, 그 아래 링크는 프레임 안에서 열립니다.

Notion

/embed를 입력하고 삽입 링크(HTML 코드가 아님)를 붙여 넣은 뒤 링크 임베드 버튼을 누르세요. 룰렛 전체가 보이도록 블록 모서리를 끌어 높이를 약 520 px로 맞추세요.

Canvas, Moodle 등 LMS

HTML 편집기에서 페이지를 열고(Canvas: </> 버튼, Moodle: Atto 또는 TinyMCE 편집기의 HTML 버튼) 코드를 붙여 넣으세요. 저장 후 룰렛이 사라진다면 관리자가 다른 사이트의 iframe을 막아 둔 것입니다. spinandwheel.com을 허용해 달라고 요청하세요.

일반 HTML 페이지

페이지의 <body>에 코드를 붙여 넣으세요. iframe은 크기 한도까지 너비 100%이고 loading="lazy"로 불러오므로 페이지 윗부분의 로딩을 늦추지 않습니다.

삽입된 룰렛의 작동 방식

위젯은 실제 Spin and Wheel 페이지를 가벼운 삽입 모드(?mode=embed)로 보여 주는 것입니다. 룰렛과 작은 "Spin and Wheel에서 열기" 링크만 표시됩니다. 방문자는 가운데 버튼으로 룰렛을 돌리고, 당첨 결과를 카드로 확인한 뒤 다시 돌리거나 당첨 항목을 목록에서 뺄 수 있습니다. 룰렛은 주어진 상자의 너비와 높이에 맞춰 320 px 휴대폰부터 데스크톱 사이드바까지 크기가 바뀝니다.

항목은 iframe 주소에 담겨 전달됩니다. 짧은 목록은 entries=로, 긴 목록은 압축(deflate-raw, base64url)해서 w=로 전달됩니다. 서버에 업로드하거나 저장하는 것은 없고, 방문자의 브라우저 저장소에도 아무것도 기록하지 않으므로 모든 방문자가 내 목록에서 시작합니다. 꾸미기 패널에서 정한 색상 테마, 회전 시간, 소리 설정도 같은 방식(cfg=)으로 전달됩니다.

모든 회전은 spinandwheel.com과 마찬가지로 Web Crypto API의 crypto.getRandomValues를 사용하므로 N개 항목 각각의 당첨 확률은 1/N입니다. 삽입된 룰렛은 광고를 보여 주지 않고, 추적 쿠키를 설정하지 않으며, 서비스 워커도 설치하지 않습니다. 불러온 횟수와 돌린 횟수만 쿠키 없이 익명으로 집계합니다.

룰렛 아래 줄은 spinandwheel.com에 있는 해당 룰렛 페이지로 가는 일반 링크입니다. 선택 사항이라 수정하거나 지워도 되지만, 남겨 두면 다른 선생님과 크리에이터가 이 도구를 찾는 데 도움이 됩니다. 룰렛이 개선되면 내 사이트의 위젯에도 자동으로 반영됩니다. 항목을 바꾸려면 새 코드를 만들어 기존 코드와 교체하세요.

FAQ

삽입 위젯 자주 묻는 질문

이름 돌림판을 내 홈페이지에 무료로 넣을 수 있나요?
네. 이름 돌림판을 비롯한 Spin and Wheel의 모든 룰렛은 개인, 학교, 상업용 사이트에 HTML 두 줄로 무료로 삽입할 수 있습니다. 계정도, API 키도, 사용량 제한도 없습니다. 코드를 복사해서 붙여 넣기만 하면 됩니다.

위젯에 광고가 나오거나 방문자를 추적하나요?
아니요. 삽입된 룰렛은 광고를 보여 주지 않고, 추적 쿠키를 설정하지 않으며, 항목이나 설정을 방문자의 브라우저에 저장하지 않습니다. 위젯이 사용되고 있는지 알 수 있도록 불러온 횟수와 돌린 횟수만 쿠키 없이 익명으로 집계합니다.

방문자가 삽입된 룰렛의 항목을 바꿀 수 있나요?
방문자는 내가 정한 항목으로 룰렛을 돌리고, 다음 회전을 위해 당첨 항목을 뺄 수 있습니다. 전체 목록을 수정하려면 "Spin and Wheel에서 열기"를 클릭하면 됩니다. 내 항목이 들어간 전체 룰렛이 새 탭에서 열립니다.

나중에 항목을 바꾸려면 어떻게 하나요?
이 페이지에서 새 항목으로 코드를 다시 만들고 사이트의 기존 코드와 교체하세요. 항목은 코드의 일부이므로, 교체하기 전까지 기존 위젯은 원래 목록을 유지합니다.

삽입된 룰렛은 무작위이고 공정한가요?
네. 당첨 항목은 crypto.getRandomValues(Web Crypto API)로 정해지므로, spinandwheel.com과 똑같이 매번 N개 항목 각각이 정확히 1/N의 확률을 가집니다.

어떤 크기를 골라야 하나요?
대부분의 블로그 글에는 보통(높이 520 px)이 알맞습니다. 사이드바나 좁은 단에는 작게(400 px)를, 전체 너비 페이지나 프로젝터에는 크게(640 px)를 고르세요. 너비는 같은 한도까지 100%이며, 룰렛은 항상 상자 안에 맞게 표시됩니다.

삽입된 룰렛이 휴대폰에서도 작동하나요?
네. iframe은 너비 100%이고, 룰렛은 사용 가능한 너비와 높이에 맞춰 크기가 조절됩니다. 700 px 미만에서는 당첨 결과가 큰 버튼이 있는 하단 시트로 나타납니다.

라이브 방송용으로 OBS에 룰렛을 넣을 수 있나요?
OBS Studio에서는 이 위젯 대신 방송 전용 링크를 사용하세요. 투명 디스플레이 오버레이와 컨트롤 독이 있습니다. 자세한 내용은 OBS 설정 가이드에서 설명합니다.