극초보 바이브코딩 #2

사다리 타기와 10초 맞추기 만들기

"설거지 누가 해?"를 게임 두 개로 정해요. 당번은 사다리로, 억울한 사람의 재도전은 숫자를 안 보고 딱 10초에 멈추기로. 둘 다 짧은 요청으로 시작해서 미션으로 완성해요. 처음이라면 #1 로또 번호 생성기부터 해 보세요.

PART 1. 사다리 타기

완성 예시예요. 이름과 결과를 바꾸고 이름 버튼을 눌러 보세요

1AI에게 네 줄로 요청하기

HTML 파일 하나로 사다리 타기 게임을 만들어줘.
위에는 참가자 4명, 아래에는 결과 4개를 두고, 가로줄은 랜덤으로 그려줘.
위의 참가자를 누르면 사다리를 따라 내려가서 어떤 결과인지 보여줘.
인터넷 연결이나 설치 없이 파일 하나로 동작하게 해줘.

사다리는 "누르면 → 내려가서 → 결과"라는 동작이 있어서 1편보다 한 줄 늘었어요. 처음엔 "참가자1, 참가자2"처럼 투박해도 괜찮아요.

2붙여넣고 실행하기

3미션: 우리 집 사다리로

  1. 기본: 누르면 결과가 나온다

    참가자를 누르면 사다리를 따라 결과가 보여야 해요.

  2. 우리 가족 이름 넣기

    "참가자1" 대신 실제 이름과 실제 벌칙을 화면에서 바로 입력하게. 예시 한 줄: "참가자 이름과 결과를 화면에서 직접 입력할 수 있는 칸으로 바꿔줘."

  3. 타고 내려가는 모습 보여주기

    선이 스르륵 그려지면서 내려가게. 사람마다 선 색이 다르면 더 좋아요. 힌트: 속도도 같이 말해 보세요.

  4. 인원수 바꾸기

    2명부터 8명까지 고를 수 있게. 힌트: 인원을 바꾸면 사다리도 새로 그려져야 한다는 조건을 같이 말하세요.

  5. 긴장감 올리기 (자유)

    결과를 "???"로 가려 두기, 도착할 때 효과음, 한꺼번에 내려가는 전체 결과 버튼…

PART 2. 10초 딱 맞추기

완성 예시예요. 어려움에서는 3초 뒤 숫자가 사라지고 달토끼가 방해해요

0.00

1새 대화창에서 세 줄로 요청하기

HTML 파일 하나로 10초 맞추기 게임을 만들어줘.
시작 버튼을 누르면 시간이 올라가고, 다시 누르면 멈춰서 10초와 몇 초 차이인지 보여줘.
인터넷 연결이나 설치 없이 파일 하나로 동작하게 해줘.

사다리를 만든 대화에 이어서 요청하면 AI가 사다리 코드를 고치려 할 수 있어요. 새 대화에서 시작하는 게 안전해요.

2붙여넣고 실행하기

3미션: 난이도를 올려라

  1. 기본: 시작하고 멈추면 차이가 나온다

    다시 누르면 확실히 멈추고, 10초와 몇 초 차이인지 보여야 해요.

  2. 숫자 숨기기

    시작하고 몇 초 뒤 숫자가 사라지고, 멈추면 다시 보이게. 예시 한 줄: "시작하고 3초가 지나면 숫자가 안 보이게 해줘. 멈추면 다시 보여줘."

  3. 달토끼가 왔다갔다

    숫자 앞을 좌우로 오가며 방해하게. 토끼 대신 송편, 강아지도 좋아요. 힌트: 무엇이, 어디를, 어떻게 움직일지 세 가지를 말하세요.

  4. 난이도 버튼

    쉬움 / 보통 / 어려움에 따라 방해가 세지게. 힌트: 단계마다 무엇이 달라지는지 표처럼 정리해서 말해 보세요.

  5. 가족 대결 (자유)

    최고 기록, 차례대로 하는 순위표, 0.1초 안이면 축하 효과…

자동 검사는 화면 변화를 보고 판단하는 참고용이에요. 사다리를 그림(캔버스)으로 그렸거나 누르는 위치가 다르면 "아직"이 나올 수 있어요. 직접 확인했다면 했어요를 체크하세요.

안 될 때 이렇게 말해 보세요

게임증상AI에게 이렇게
사다리두 사람이 같은 결과에 도착한다"모든 참가자가 서로 다른 결과에 도착하게 고쳐줘"
사다리가로줄이 같은 높이에 연달아 붙어 헷갈린다"같은 높이에서 가로줄이 연달아 붙지 않게 해줘"
10초멈췄는데 시간이 계속 올라간다"멈춤을 누르면 확실히 멈추게 고쳐줘"
10초휴대폰에서 토끼가 화면 밖으로 나간다"화면이 좁아도 토끼가 화면 안에서만 움직이게 해줘"
공통미션을 했더니 원래 기능이 사라졌다"기존 기능은 그대로 두고, 전체 코드를 처음부터 끝까지 줘"

실험: 사다리는 정말 공정할까?

가로줄 하나는 양옆 두 사람의 자리를 맞바꾸는 것이에요. 자리를 바꾸기만 하니 아무리 그어도 두 사람이 같은 결과에 도착하지 않아요. 그런데 가로줄이 적으면 공정하지 않아요. 자리를 몇 번 못 바꿔서 자기 바로 아래 결과가 나오기 쉽거든요. 직접 돌려 볼까요?

규칙: 칸마다 가로줄이 생길 확률 45%, 같은 높이에 가로줄이 연달아 붙지 않게. "맨 왼쪽 사람이 맨 왼쪽 결과에 걸릴 확률"을 세요. 공정하다면 1/인원이에요.

그래서 설거지 칸을 맨 왼쪽 사람 바로 아래에 두면, 가로줄이 적은 사다리에서는 그 사람이 걸릴 확률이 확 올라가요. 내 사다리가 궁금하면 AI에게 "내 사다리는 가로줄이 몇 층까지 생겨? 공정하게 섞이려면 몇 층이 좋을까?"라고 물어보세요.

자주 묻는 질문

사다리는 왜 결과가 겹치지 않나요?

가로줄 하나는 양옆 두 사람의 자리를 맞바꾸는 일이에요. 바꾸기만 하니 한 자리에 두 명이 서는 일이 생기지 않아요. 만약 겹친다면 프로그램이 사다리를 잘못 따라간 거예요.

가로줄은 몇 층이 적당한가요?

위 실험에서 보듯 인원이 4명이면 12층 이상부터 공정한 값(25%)에 가까워져요. 인원이 많을수록 더 많은 층이 필요해요.