극초보 바이브코딩 #15 · HTML 파일 하나

랜덤 추첨기 만들기

"아무거나요…" 대신 버튼 한 번. 오늘의 질문은 "공정하다는 걸 어떻게 믿을까?"예요. 답은 간단해요. 직접 세어 보면 돼요.

바로 쓰기: 랜덤 추첨기

버튼을 눌러 보세요

빈 줄과 앞뒤 띄어쓰기는 무시하고, 같은 이름은 하나로 합쳐요(동명이인은 "김대리1", "김대리2"처럼 구분해 주세요). 보안용 난수와 정석 섞기(피셔–예이츠)로 뽑아요. 명단은 밖으로 보내지 않아요.

1AI에게 세 줄로 요청하기

회의실에서 아무거나요 하며 눈치 보던 사람들이, 화면의 추첨 결과를 보고 다 같이 환호하는 그림
HTML 파일 하나로, 랜덤 추첨기 페이지를 만들어줘.
이름을 한 줄에 한 명씩 입력하고 뽑기 버튼을 누르면 한 명이 뽑혀서 크게 보이게 해줘.
인터넷 연결이나 설치 없이 파일 하나로 동작하게 해줘.

여러 명 뽑기·순서 정하기·뽑힌 사람 빼기·기록은 일부러 말하지 않았어요. 연습할 때는 실제 동료의 실명 대신 가짜 이름(김대리, 박과장처럼)을 쓰세요.

2연습장에서 실행하기

이름 다섯 개를 적고 뽑기를 여러 번 눌러 보세요. 누를 때마다 다른 이름이 나오면 성공이에요. 연습장은 AI가 만든 코드가 어떤 방법으로 섞는지도 몰래 지켜봐요.

3미션: 공정하다는 걸 어떻게 믿을까

  1. 기본: 누를 때마다 다른 사람

    자동 검사가 이름 다섯 개를 넣고 서른 번 눌러 봐요.

  2. 여러 명 뽑기와 순서 정하기 ⭐

    요청은 이렇게 시작하면 돼요: "버튼을 하나 더 만들어줘. '순서 정하기'를 누르면 입력한 모든 사람이 무작위 순서로 번호와 함께 나오게 해줘. 그리고 몇 명을 뽑을지 숫자로 정하는 칸도 넣어줘." 3명 뽑기에 같은 사람이 두 번 나오지 않는지, 사람 수보다 많이 뽑으라고 하면 어떻게 되는지 확인하세요.

  3. 정말 공정한지 직접 세 보기 ⭐

    "순서 정하기를 1,000번 돌려서 첫 번째 자리에 누가 몇 번 나왔는지 표로 보여주는 시험 버튼을 만들어줘." 다섯 명이면 각자 200번쯤, 대략 160~240번 안이면 정상 범위예요. 쏠렸다면 힌트: "섞는 방법을 '남은 칸 중 아무 데와 자리를 바꾸는 방식'(피셔–예이츠)으로 바꿔줘."

  4. 한 번 뽑힌 사람은 빼기

    "이미 뽑힌 사람은 빼기" 체크칸, 모두 뽑히면 "뽑을 사람이 없습니다" 안내, 기록 지우기로 처음부터.

  5. 명단이 지저분할 때

    빈 줄, 이름 앞뒤 띄어쓰기, 같은 이름 두 번. 같은 이름을 하나로 합칠지 둘로 볼지는 내가 정하는 규칙이에요. 정해서 말해 주세요.

  6. 자유

    조 나누기, 이름이 휙휙 돌아가는 효과, 결과 복사, 명단 저장(13화), 오늘 뽑은 기록

안 될 때 확인할 것

증상원인과 해결
항상 같은 사람이 나온다"뽑을 때마다 새로 무작위로 정하게 해줘. 입력한 이름을 정말 읽고 있는지 화면에 개수를 보여줘"
빈 줄이 이름으로 나온다미션 5. "빈 줄과 앞뒤 공백은 무시해줘"
여러 명 뽑을 때 같은 이름이 두 번"여러 명을 뽑을 때는 한 번 뽑힌 사람을 제외하고 뽑아줘"
시험 버튼 결과가 한쪽으로 쏠린다섞는 방법이 고르지 않아요. "남은 칸 중 아무 데와 자리를 바꾸는 방식으로 바꿔줘"
같은 사람이 연달아 두 번 나온다정상이에요. 무작위는 원래 그래요(아래 실험 ②). 돌아가며 하려면 미션 4
미션을 요청했더니 원래 기능이 사라졌다"기존 기능은 그대로 두고, 전체 코드를 처음부터 끝까지 줘"

실험 ①: 섞는 방법에 따라 쏠려요

흔한 한 줄 섞기는 첫 자리가 앞사람에게 쏠리고, 정석 섞기는 모두 같은 확률이라는 막대 그림

정석은 뒤에서부터 한 칸씩 "남은 칸 중 아무 데"와 자리를 바꾸는 방식(피셔–예이츠)이에요. 인터넷에 많이 퍼진 짧은 한 줄은 정렬 기능에게 "비교할 때마다 무작위로 앞뒤를 정해"라고 시키는 방식이고요. 다섯 명을 10만 번 섞어서 첫 번째 자리를 누가 차지했는지 이 브라우저에서 세어 봐요. 이상적인 값은 20%예요.

블로그 원문(크롬)에서는 100만 번 섞어 흔한 한 줄이 명단 첫째 30.76%, 마지막 6.27%였고, 정석은 모두 20% 안팎이었어요. 정렬이 안에서 일하는 방식은 브라우저마다 달라서 다른 브라우저에서는 숫자가 다를 수 있어요.

실험 ②: 진짜 무작위는 "고르게" 안 보여요

10번 뽑으면 같은 사람이 연달아 나올 확률이 약 87%, 5명 중 한 번도 못 뽑히는 사람이 생길 확률이 약 48%라는 그림

이번엔 반대예요. 제대로 만든 무작위도 짧게 보면 불공평해 보여요. 다섯 명 중 한 명씩 10번 뽑는 판을 이 브라우저에서 돌려 봐요.

길게 보면 아주 공평하고, 짧게 보면 들쭉날쭉한 게 진짜 무작위예요. 그래서 "공정"이 "번갈아 돌아가며"라는 뜻이라면 무작위가 아니라 뽑힌 사람 빼기를 써야 해요. 회식 메뉴나 발표 순서에는 일반 난수로 충분하지만(#12와 달리), 돈이나 경품이 걸린 공식 추첨은 이 페이지 결과만으로 증명할 수 없으니 참가자가 지켜보는 방법을 따로 정하세요.

한 걸음 더: 엑셀 명단으로, 매주 자동으로

명단이 엑셀에 있거나 매주 정해진 요일에 발표 순서를 뽑아 단체방에 알려 주고 싶다면 파이썬이 더 잘해요. 먼저 이렇게 물어보세요. "엑셀 파일에 적힌 이름 목록에서 무작위로 3명을 뽑아서 결과를 파일에 저장하는 파이썬 프로그램은 어떤 부품들로 구성돼? 코드 말고 구성만 말로 설명해줘." 결과를 단체방에 공유할 때는 이름이 그대로 나가니 한 번 확인하세요.

블로그 원문: [극초보 바이브코딩 #15] 랜덤 추첨기 (실행 방법 그림 설명, 직접 잰 결과 캡처)

이전 실습: #14 기념일 D-Day · 전체 실습 목록

자주 묻는 질문

같은 사람이 연달아 뽑혔어요. 고장인가요?

아니요. 다섯 명 중 10번 뽑으면 같은 사람이 바로 이어서 나오는 판이 약 87%예요. 돌아가며 하려면 "이미 뽑힌 사람은 빼기"를 켜세요.

sort(() => Math.random() - 0.5)로 섞으면 안 되나요?

모든 순서가 같은 확률로 나오지 않아요. 크롬에서 다섯 명을 섞으면 명단 앞쪽 사람이 첫 자리를 훨씬 자주 차지했어요. 피셔–예이츠 방식을 쓰세요.

입력한 명단이 어딘가에 남나요?

"이 브라우저에 명단 기억"을 켰을 때만 이 브라우저 안에 저장돼요. 밖으로는 보내지 않아요.