홈페이지와 블로그에 돌림판 삽입하기
항목을 입력하고 색과 크기를 고른 뒤 코드 한 줄을 복사하세요. HTML이나 임베드 링크를 넣을 수 있는 곳이라면 바로 돌릴 수 있는 돌림판이 됩니다.
색상 테마
<iframe src="https://randompickerwheel.app/ko/embed/wheel?t=%EB%88%84%EA%B0%80%20%EB%A8%BC%EC%A0%80%20%ED%95%A0%EA%B9%8C%3F&items=%EB%AF%BC%EC%A4%80%2C%EC%84%9C%EC%97%B0%2C%EB%8F%84%EC%9C%A4%2C%ED%95%98%EC%9D%80%2C%EC%A7%80%ED%98%B8%2C%EC%88%98%EC%95%84&theme=prism" width="420" height="540" style="border:0;max-width:100%" title="누가 먼저 할까?" loading="lazy"></iframe>
https://randompickerwheel.app/ko/embed/wheel?t=%EB%88%84%EA%B0%80%20%EB%A8%BC%EC%A0%80%20%ED%95%A0%EA%B9%8C%3F&items=%EB%AF%BC%EC%A4%80%2C%EC%84%9C%EC%97%B0%2C%EB%8F%84%EC%9C%A4%2C%ED%95%98%EC%9D%80%2C%EC%A7%80%ED%98%B8%2C%EC%88%98%EC%95%84&theme=prism- 수업 홈페이지와 LMS구글 사이트 도구나 무들 수업 페이지에 발표자 뽑기, 주제 뽑기 돌림판을 넣을 수 있어요.
- 노션 팀 페이지청소 당번, 점심 메뉴, 회의 발표 순서를 노션 안에서 바로 정해요.
- 블로그 이벤트 글오늘 뭐 먹지, 글감 뽑기, 독자 참여형 이벤트에 활용해요.
- 동아리·모임 페이지아이스브레이킹, 벌칙 정하기, 다음 게임 고르기에 좋아요.
1분 만에 돌림판 삽입하기
항목 입력
제목과 항목을 한 줄에 하나씩 입력하세요. 오른쪽 미리보기는 실제 삽입되는 화면과 같아서 직접 돌려볼 수 있어요.
페이지에 맞게 꾸미기
색상 테마 4가지와 크기 중에서 고르세요. 제목, 꽃가루 효과, Made with 링크는 필요 없으면 끌 수 있어요.
복사해서 붙여넣기
iframe 코드를 HTML 블록에 붙여넣으세요. 노션처럼 링크만 받는 서비스에는 링크만 복사해서 넣으면 됩니다.
이 돌림판을 삽입하면 좋은 점
플랫폼별 붙여넣는 방법
대부분의 블로그와 홈페이지 빌더는 HTML을 넣는 곳에 iframe 코드를 붙여넣을 수 있어요. 노션처럼 링크만 받는 곳도 있고, 네이버 블로그처럼 외부 iframe을 넣을 수 없는 곳도 있어요. 그럴 때는 링크를 걸어 새 탭에서 열게 하면 됩니다.
| 플랫폼 | 붙여넣는 곳 | 참고 |
|---|---|---|
| 티스토리 | 글쓰기 화면 오른쪽 위에서 HTML 모드로 전환 후 붙여넣기 | 기본 모드로 다시 전환하면 코드가 바뀔 수 있으니 HTML 모드에서 바로 발행하세요. |
| 워드프레스 | 사용자 정의 HTML 블록에 붙여넣기 | 직접 설치한 워드프레스는 그대로 표시돼요. WordPress.com은 요금제에 따라 iframe이 제거될 수 있어요. |
| 노션 | /임베드 또는 /embed 입력 후 코드가 아닌 링크 붙여넣기 | 블록 아래쪽을 540px 정도로 늘려야 돌리기 버튼까지 보여요. |
| 구글 사이트 도구 | 삽입 → 삽입(Embed) → 코드 삽입 탭 | 코드를 붙여넣고 다음 → 삽입을 누른 뒤 모서리를 끌어 크기를 맞추세요. |
| 아임웹, 윅스 | HTML 또는 코드 위젯에 붙여넣기 | 메뉴 이름은 에디터 버전에 따라 다를 수 있어요. 위젯 높이를 코드의 height와 맞춰 주세요. |
| 무들, 캔버스 | 편집기의 HTML 소스 보기에서 붙여넣기 | 저장 후 사라지면 iframe 권한이 막혀 있을 수 있으니 관리자에게 문의하세요. |
| 네이버 블로그, 구글 클래스룸 | iframe 삽입 불가 | 링크를 올리고 학생이나 독자가 새 탭에서 열도록 안내하세요. |
링크에 담긴 설정
모든 설정은 주소의 일부라서, 매주 명단이 바뀌어도 이 페이지에 다시 오지 않고 주소를 직접 고쳐 쓸 수 있어요.
| 파라미터 | 예시 | 의미 |
|---|---|---|
| items | items=A%2CB%2CC | 항목. 쉼표로 구분하고 URL 인코딩합니다. 2개 이상 필요해요. |
| t | t=%EC%A0%90%EC%8B%AC | 돌림판 위 제목. 비우면 표시하지 않아요. |
| theme | theme=ocean | prism, ocean, candy, mono 중 하나. |
| title | title=0 | 제목 줄을 숨겨요. |
| confetti | confetti=0 | 당첨 시 꽃가루 효과를 꺼요. |
| brand | brand=0 | Made with Random Picker Wheel 링크를 숨겨요. |
항목이 링크에 그대로 들어가기 때문에 페이지 소스를 보면 누구나 읽을 수 있어요. 성적이나 연락처 같은 개인정보는 넣지 마세요.
크기 고르기
크기는 코드의 너비와 높이를 정해요. 안쪽 돌림판은 틀에 맞게 커지고 작아지며, 모바일에서는 max-width 덕분에 화면 너비까지 줄어들어 크게를 골라도 가로 스크롤이 생기지 않아요.
| 크기 | 틀 | 어울리는 곳 |
|---|---|---|
| 작게 | 320 × 440 px | 사이드바, 노션의 좁은 칸 |
| 보통 | 420 × 540 px | 블로그 글, 구글 사이트 도구, 수업 페이지 |
| 크게 | 560 × 680 px | 전체 너비 페이지, 교실 빔프로젝터 |
자주 묻는 질문
돌림판 삽입은 무료인가요?
네. 가입이나 사용 횟수 제한이 없고, 틀 안에 광고도 나오지 않아요.
노션에 돌림판을 넣으려면 어떻게 하나요?
링크만 칸에서 링크를 복사하고, 노션에서 /embed를 입력한 뒤 링크를 붙여넣어 임베드를 만드세요. 블록 아래쪽을 540px 정도로 늘리면 전체가 보여요.
삽입한 뒤에 항목을 바꿀 수 있나요?
항목이 링크에 들어 있어서, 바꾸려면 새 코드로 교체해야 해요. 여기서 다시 만들거나 주소의 items 부분을 직접 고치세요.
네이버 블로그에는 왜 안 들어가나요?
네이버 블로그는 외부 iframe 코드를 지원하지 않아요. 링크를 글에 넣으면 독자가 새 탭에서 돌림판을 돌릴 수 있어요. 일부 요금제의 WordPress.com이나 권한이 제한된 무들도 iframe을 지울 수 있어요.
결과는 정말 무작위인가요?
네. 멈추는 위치는 방문자의 브라우저에서 crypto.getRandomValues로 정해져서 모든 항목의 확률이 같아요. 사이트 운영자도 결과를 미리 정할 수 없어요.
모바일에서도 잘 보이나요?
네. 틀이 화면 너비에 맞게 줄어들고 돌림판도 함께 작아져요. 너비 약 280px까지 읽기 편하고 돌리기 버튼도 누르기 쉬운 크기예요.
Made with 링크를 없앨 수 있나요?
네. 코드를 복사하기 전에 Made with 링크 표시를 끄면 돼요. 남겨 주시면 큰 힘이 됩니다.