복사해서 만드는 첫 게임 — 30초 표적 터치 완성형 프롬프트

AI에게 게임을 만들어 달라고 할 때 제일 흔한 실패는 코드가 안 나오는 게 아닙니다. 코드는 잔뜩 나왔는데 그게 다 된 건지 알 수가 없는 것입니다. 길어질수록 더 그렇습니다.

그래서 이 글은 범위를 아주 좁게 잡았습니다. 30초 동안 표적을 누르는 게임 하나를 끝까지 만드는 것까지입니다. 맨 위 이미지는 상상해서 그린 예상 화면이 아니라, 아래 완성본을 실제로 브라우저에서 돌린 화면입니다.

이 예제는 새로 만든 웹 입문 실습입니다. 기존에 출시한 게임의 소스를 재사용하지 않았고, Godot 프로젝트나 Android 앱 패키지도 아닙니다. 먼저 입력·시간·점수·재시작을 익히는 데 사용하세요.

먼저 실행해 보고 완성 기준을 정하세요

30초 표적 게임 실행하기 · 완성본 ZIP 내려받기 · 전체 프롬프트 TXT 받기

시작 전에는 표적이 없고, 시작하면 하나 나타납니다. 누르면 점수가 1 오르고 자리를 옮깁니다. 30초가 지나면 표적이 사라지고 최종 점수가 뜹니다. 다시 시작하면 점수는 0이 되지만 최고 점수는 남습니다.

이 넷이 완성의 기준입니다. 코드를 받기 전에 이걸 먼저 정해 두는 쪽이 중요합니다. 기준 없이 받으면 길이만 보고 "됐나 보다" 하게 됩니다.

완성본은 이 글의 요구사항을 기준으로 구현하고 시험한 참고 코드입니다. 아래 프롬프트를 어떤 AI에 한 번 입력해도 같은 디자인과 코드가 나온다는 의미는 아닙니다. 사용한 모델과 추가 지시에 따라 결과가 달라질 수 있으므로, 최종 결과는 직접 실행해서 확인해야 합니다.

준비물과 실행 방법

완성본을 이미 돌려 보셨다면 30초 종료와 재시작 검사로 넘어가십시오. 끝난 뒤에 들어온 입력과 최고 점수 보존을 어떻게 확인하는지 적어 두었습니다.

AI를 통해 새로 만들어 보려면 코드를 출력하거나 파일을 작성할 수 있는 도구와 텍스트 편집기, 최신 브라우저가 필요합니다. 완성본만 실행할 때는 AI 계정도 필요하지 않습니다.

1. ZIP을 내려받아 새 폴더에 압축을 풉니다.
2. index.html을 브라우저로 엽니다. HTML 안에 스타일과 코드가 들어 있으므로 별도 설치가 없습니다.
3. 게임 시작을 누르고 표적을 몇 번 누른 뒤, 종료 화면까지 기다립니다.
4. 코드를 바꾸려면 텍스트 편집기로 같은 파일을 열고 저장한 뒤 새로고침합니다.

AI가 파일 대신 코드를 출력했다면 HTML 코드만 복사해 UTF-8로 저장하세요. 파일 이름이 index.html.txt가 되지 않았는지 확인합니다. 바깥의 Markdown 코드 울타리까지 붙여 넣지 마세요. 파일 URL의 저장 기능은 브라우저 설정에 따라 다를 수 있고, 저장이 차단되면 예제가 안내를 표시합니다.

복사해서 사용할 완성형 프롬프트

다음 내용을 처음부터 끝까지 한 번에 전달하세요. 핵심은 예쁜 화면이라는 말보다 상태가 언제 바뀌며 무엇을 하면 안 되는지를 구체적으로 적는 것입니다.

당신은 초보자가 읽고 수정할 수 있는 웹 게임을 만드는 개발자입니다.
외부 설치 없이 실행할 수 있는 "30초 표적 터치" 게임의 완성본을 만들어 주세요.

[출력 형식]
- HTML, CSS, JavaScript를 모두 포함한 index.html 파일 하나를 완성해서 출력하세요.
- 생략, TODO, 의사 코드, 외부 라이브러리, CDN, 외부 이미지·폰트, API 키를 사용하지 마세요.
- 저장 후 브라우저로 여는 방법과 수동 테스트 방법을 코드 뒤에 설명하세요.

[게임 규칙]
1. 처음에는 점수 0, 남은 시간 30.0초, 게임 시작 버튼과 대기 안내를 표시하세요.
2. 시작 버튼을 누르면 30초 동안 한 판이 진행됩니다. 진행 중 시작 버튼을 비활성화해 중복 실행을 막으세요.
3. 경기장 안에는 원형 표적 하나만 표시하세요. 표적을 한 번 누르면 정확히 1점이 오르고 무작위 위치로 이동해야 합니다.
4. 경기장 바깥이나 빈 곳을 눌러도 점수를 바꾸지 마세요.
5. 표적 전체가 경기장 안에 있어야 합니다. 경기장 크기에서 표적의 실제 너비와 높이, 안쪽 여백을 빼서 위치를 계산하세요. 화면 크기가 바뀌어도 표적이 잘리지 않아야 합니다.
6. 남은 시간은 performance.now()로 계산한 종료 시각과 현재 시각의 차이를 사용하세요. requestAnimationFrame 호출 횟수를 초로 간주하지 마세요.
7. 탭을 떠난 동안에도 제한 시간은 흐릅니다. 복귀하거나 클릭할 때 종료 시각을 검사하고, 종료 이후의 클릭은 점수에 반영하지 마세요.
8. 종료하면 표적을 숨기고 최종 점수와 다시 시작 버튼을 표시하세요. 다시 시작하면 점수와 시간만 초기화하세요.
9. 최고 점수는 localStorage에 보관하고 새로고침 후 복원하세요. 저장값이 유효한 0 이상의 정수가 아니면 0으로 시작하세요. 저장이 차단되어도 게임은 실행되고 저장되지 않는다는 안내를 표시하세요.

[화면과 접근성]
- 모든 사용자 문구는 한국어로 작성하세요.
- 연한 민트 배경, 진한 녹색 글씨, 흰색 점수 카드, 주황색 원형 표적으로 구성하세요.
- 위에 제목·설명, 중간에 점수·남은 시간·최고 점수, 아래에 경기장과 시작 버튼을 배치하세요.
- 320px 휴대폰부터 1280px 데스크톱까지 가로 넘침이 없어야 합니다.
- 표적은 실제 button 요소, 지름 최소 64px로 만드세요. click 이벤트 하나로 마우스·터치·키보드를 처리해 이중 점수를 막으세요.
- 버튼에 보이는 초점 표시와 접근 가능한 이름을 제공하세요. 시작·종료 안내는 role="status"로 알리고, 매 프레임 남은 시간을 음성으로 읽게 하지 마세요.
- 최고 점수만 현재 브라우저에 저장하고 서버·광고·분석 서비스로 보내지 않는다고 안내하세요.

[완료 전 확인]
- 시작 전 표적 클릭 불가, 한 번 클릭에 1점, 정확한 종료 처리, 종료 후 득점 불가를 검사하세요.
- 재시작 초기화, 최고 점수 유지, 화면 축소 시 표적 위치, 저장 차단 시 동작을 검사하세요.
- 실제로 실행하지 않았다면 실행·테스트했다고 주장하지 말고 직접 확인할 항목을 적어 주세요.

프롬프트의 조건이 코드에서 하는 일

표에서 셋째 줄이 제일 많이 빠집니다. 탭을 다른 데로 옮기면 화면 갱신이 아예 멈추는 브라우저가 많습니다. 프레임 수로 시간을 세면 딴 데 갔다 온 만큼 게임 시간이 늘어납니다. 그래서 이 예제는 몇 프레임 지났는지가 아니라 끝날 시각을 저장해 두고 현재 시각과 비교합니다. 제한 시간 퀴즈나 집중 타이머도 같은 자리에서 틀립니다.

실제로 확인한 결과

2026년 9월 15일 Windows의 Chrome 152에서 자동 브라우저 조작으로 표적을 8번 눌렀습니다. 시간을 강제로 바꾸지 않고 실제 30초가 지난 뒤 종료·8점 결과·최고 점수 저장을 확인했습니다. 새로고침 뒤 최고 점수가 남았고, 새 판은 0점으로 시작했습니다.

위 화면은 종료 상태의 실제 캡처입니다. 점수는 테스트에서 클릭한 횟수이며 이용자 기록이나 인기 지표가 아닙니다. 320·390·768·1280px 화면에서 페이지 가로 넘침과 표적의 경기장 이탈도 검사했습니다. 실제 Android 기기의 터치 지연이나 모든 모바일 브라우저를 시험한 것은 아닙니다.

결과가 다를 때 추가로 보낼 수정 요청

처음부터 전부 다시 만들어 달라고 하면 잘되던 기능도 바뀔 수 있습니다. 재현되는 문제 하나와 기대 결과를 적으세요.

현재 코드에서 게임 종료 직후 표적을 누르면 점수가 올라갑니다.
재현: 시작 → 제한 시간 종료 → 남아 있는 표적 클릭.
기대: 종료 시각 이후에는 점수가 절대 증가하지 않아야 합니다.
점수 증가 전에 종료 시각을 검사하고, 종료 처리를 한 번만 수행하도록 수정해 주세요.
다른 규칙과 디자인은 유지하고, 수정한 전체 index.html과 확인 방법을 제공해 주세요.

요점은 한 번에 하나만 고쳐 달라고 하는 것입니다. "전체적으로 개선해 줘"라고 하면 멀쩡하던 데까지 바뀌어서 뭐가 좋아졌는지 알 수 없게 됩니다.

이 문장은 같은 증상이 났을 때 쓰는 예시이고, 아무 코드에나 붙이면 낫는 주문이 아닙니다. 고치기 전 파일을 따로 남겨 두고, 고친 뒤에 같은 순서로 다시 확인하십시오.

다음에는 한 가지만 바꿔 보세요

먼저 제한 시간을 30초에서 15초로만 바꿔 보십시오. 종료가 여전히 정확한지 보는 겁니다. 그다음에 표적 크기를 건드려 보면, 경기장 밖으로 안 나가게 계산해야 하는 이유가 눈으로 보입니다.

시간과 크기와 점수 규칙을 한꺼번에 바꾸지 마십시오. 뭐가 깨졌는지 못 찾습니다. 이건 AI에게 시킬 때만의 이야기가 아니라 직접 짤 때도 같습니다.

내려받은 코드와 프롬프트는 ZIP 안의 MIT License를 따릅니다. 고쳐 쓰셔도 되고 가져다 쓰셔도 됩니다. 외부 이미지나 음원은 안 들어 있습니다.

이어서 읽을 것

입력을 받아 목록으로 쌓는 쪽은 저장 기능이 있는 작은 앱 만들기에서 실습합니다. 브라우저를 벗어나 엔진으로 넘어갈 준비는 Godot 입문에 적어 두었고, 만든 것을 남에게 넘길 때의 제보 양식은 오류 제보 작성법에 있습니다.