[웹앱 프롬프트] 내가 원하는 대로 결과를 쓱! 당첨 조작 사다리 게임 만들기

안녕하세요! 오늘은 모임이나 이벤트에서 재미있게(?) 활용할 수 있는 특별한 웹앱 프롬프트를 하나 소개해 드리려고 합니다.

보통 사다리 게임은 100% 운에 맡기는 복불복 게임이죠. 하지만 이벤트 진행자 입장에서는 가끔 '특정 팀이나 사람이 당첨되었으면' 하는 순간이 생기곤 합니다. 그래서 준비했습니다! 게임 시작 전, 당첨자를 미리 지정해 두면 사다리 경로가 알아서 조작되어 무조건 그 사람이 당첨되는 '당첨 조작 사다리 게임 웹앱' 프롬프트입니다.

ChatGPT나 Claude 같은 AI에게 아래 프롬프트를 그대로 복사해서 붙여넣기만 하면, 그럴싸한 사다리 게임을 뚝딱 만들어줍니다.

 웹앱 제작 목표

Tailwind CSS를 활용해 디자인이 깔끔하고 반응성이 뛰어난 단일 파일(HTML/JS) 형태의 웹 앱을 만드는 것이 목표입니다. 핵심은 사용자가 게임 시작 전 '당첨될 모둠'을 몰래 미리 지정할 수 있고, 실제 사다리를 탈 때는 지정된 모둠이 무조건 당첨되도록 경로를 조작하는 것입니다.

 화면 구성 및 요구사항

화면은 크게 '사전 지정 화면'과 '게임 실행 화면' 두 가지로 나뉩니다. (비밀 유지를 위해 화면에는 '1단계', '2단계' 같은 텍스트를 노출하지 않습니다.)

1. 세팅 화면 (사전 지정)

• 참가자 입력: 총 5개의 모둠(또는 사람) 이름을 입력할 수 있는 필드를 제공합니다.

• 당첨자 몰래 선택: 입력된 5개 모둠 중 하나를 클릭해 '당첨 모둠'으로 지정할 수 있는 버튼을 배치합니다.

2. 게임 실행 화면 (사다리 타기)

• 사다리 캔버스: 5개의 세로줄과 15개 내외의 가로줄로 이루어진 리얼한 사다리를 그립니다.

• 철저한 비밀 유지: 1단계에서 입력한 이름들이 상단에 표시되지만, 당첨 모둠이 지정되었다는 힌트나 문구는 절대 표시하지 않습니다.

• 애니메이션 효과: 사다리 타기 시작! 버튼을 누르면, 각 모둠별로 다른 색상의 선이 순차적으로 경로를 따라 내려가는 애니메이션이 실행됩니다.

• 결과 확인 및 리셋: 애니메이션이 끝나면 하단에 최종 결과를 보여주고, 지정된 당첨 모둠의 결과를 시각적으로 강조합니다. 다시 하기 버튼은 "다시 처음으로"라는 텍스트로 깔끔하게 구성합니다.

 핵심 로직 (조작의 비밀)

이 웹앱의 가장 중요한 로직입니다. 1단계에서 선택한 모둠이 2단계 사다리 타기 결과에서 반드시 '당첨'으로 연결되도록, 사다리 경로와 결과 매핑을 내부적으로 조작해야 합니다. 겉보기에는 일반 사다리 같지만, 결과는 이미 정해져 있는 것이죠!

 기술 스택 및 디자인 요구사항

• 단일 파일 구성: 복잡한 구조 없이 하나의 HTML 파일 안에 CSS와 JavaScript를 모두 포함합니다.

• Tailwind CSS: CDN 방식을 사용하여, 별도의 설치 없이도 세련되고 반응성이 뛰어난 UI/UX를 구현합니다.

• 커스텀 모달: 브라우저 기본 경고창(alert()) 대신, 깔끔한 커스텀 메시지 모달창을 띄워 최종 당첨 모둠을 멋지게 알려줍니다.

이벤트 진행의 묘미를 더해줄 아주 유용한(그리고 약간은 짓궂은) 프롬프트입니다. 위 내용을 복사해서 직접 나만의 조작 사다리 게임을 만들어 보세요!

(주의: 친목 도모를 위한 가벼운 이벤트용으로만 사용하시고, 심각한 내기나 공정성이 중요한 자리에서는 사용을 피해주세요! )