개발자가 주말에 만든 게임, 조회 530만 '사이트 부수기'
클로드로 웹 게임 만들기: 아무 사이트나 부수는 졸라맨 게임, 대화창에서 '공지 글 부수기'로
2026년 10월 24일 올림 · 10월 23일 확인
1단계: 대화창에 이 지시문 붙여 넣기
[ ] 안이 화면에 깔릴 글이에요. 보기 싫은 공지, 이번 주 할 일 목록, 친구 생일 축하 문장처럼 아무 글이나 넣으세요(저희는 공백 빼고 56글자로 해 봤어요). 나머지는 그대로 두는 게 좋아요. 저희는 클로드 오퍼스 5.5(유료)로 돌렸어요. 무료 요금제는 소넷·하이쿠를 써요(claude.com/pricing, 2026-10-19 확인). 무료 모델로 같은 결과가 나오는지는 직접 확인 못 했어요. 회사 내부 글을 넣을 땐 이름·숫자 같은 민감한 내용은 빼고 넣으세요. 유료라면 입력 칸 아래 모델 이름을 눌러 'Opus 5.5'를 고르고(메뉴 위치는 저희가 직접 확인 못 했어요), 무료라면 기본값 그대로 두면 돼요. [ ] 괄호 기호는 지워도 되고 남겨도 돼요.
아래 [ ] 안의 글을 화면에 글자 벽돌로 깔고, 막대 인간이 그 글자를 부수는 게임을 HTML 파일 한 장으로 만들어 줘. 키보드 A·D로 걷고 스페이스바로 점프, 마우스를 누르면 누른 쪽으로 총을 쏘고, 맞은 글자는 조각나 떨어져. 오른쪽 위에 '부순 비율'을 %로 보여 주고, 100%가 되면 화면 가운데 크게 '퇴근!'을 띄워 줘. 휴대폰에서도 되게 화면에 왼쪽·오른쪽·점프·쏘기 버튼도 둬. 설치·서버 없이 크롬에서 파일을 열면 바로 돌아가게. [이번 주 금요일까지 주간 보고서 꼭 올려 주세요. 월요일 아침 9시 회의 자료도 미리 보내 주시고요. 참고로 회의는 길어질 수 있습니다.]
순서: claude.ai 접속·로그인 → 왼쪽 위 '새 채팅' → 아래 지시문 붙여 넣기 → [ ] 안을 내 글로 바꾸기 → Enter. 답에 <!DOCTYPE html>로 시작해 </html>로 끝나는 코드가 나오거나, 오른쪽 미리보기 창(아티팩트)에 글자 벽돌과 졸라맨이 뜨면 성공이에요(저희 답은 코드 19,185자 + 조작 설명). 저희는 대화창이 아니라 claude -p로 돌려서 대화창 화면과 미리보기 창은 직접 확인 못 했어요. 2단계처럼 파일로 저장해 크롬에서 여는 길은 저희가 확인했어요.
이렇게 나와요
넣은 답 보기
[ ] 안은 '이번 주 금요일까지 주간 보고서 꼭 올려 주세요. 월요일 아침 9시 회의 자료도 미리 보내 주시고요. 참고로 회의는 길어질 수 있습니다.'로 채우고(지어낸 연습용 공지), claude.ai 대화창이 아니라 클로드 코드의 한 번 답하기 명령(claude -p)으로 돌렸어요. 모델 클로드 오퍼스 5.5, 빈 폴더에서 파일·명령·웹 검색 도구와 저희 설정을 모두 끄고 지시문과 기본 시스템 지시 한 줄('You are Claude, a helpful AI assistant made by Anthropic.')만 넣었어요. 대화창에서는 답 모양이 조금 다를 수 있어요.
2026-10-23 19:48:34 시작, 19:51:07 끝, 약 2분 33초. 답은 이렇게 시작했어요(원문): '아래 코드를 퇴근게임.html로 저장한 뒤 크롬에서 더블클릭해 열면 바로 실행됩니다. 설치나 서버, 외부 파일은 필요 없습니다.' 이어서 HTML 전체(19,185자)와 설명: 'S를 누르면 글자 위에 서 있다가 아래로 내려옵니다', '쏘기 버튼은 가장 가까운 글자를 자동으로 겨냥합니다', ''다시 하기' 버튼이나 R 키로 다시 시작할 수 있습니다', '한글 입력 상태에서도 키가 작동합니다', '글 내용을 바꾸려면 코드 위쪽의 const TEXT = "..." 부분만 고치면 됩니다'. 코드를 고치지 않고 저장해 창 없는 크롬(화면 430×764)으로 열고, 자동 시험 스크립트로 A·D·스페이스바와 마우스를 눌러 봤더니 공지 글자가 색깔 벽돌로 깔렸고, 오른쪽 위 '부순 비율'이 오르다 40초쯤 100%가 되자 가운데에 '퇴근!'과 '모든 업무(글자)를 처리했습니다' 화면, '다시 하기' 버튼이 떴어요. 화면 아래 왼쪽·오른쪽·점프·쏘기 버튼도 있었고, 페이지 오류는 없었어요.
저희는 사람이 아니라 자동 시험 스크립트가 컴퓨터 크롬(창 없는 시험 브라우저)에서 키보드·마우스를 누르게 해 시험했어요. 휴대폰 실기기와 claude.ai 미리보기 창 안에서 되는지는 확인 못 했어요.
- 이런 분께
- 보기 싫은 공지·보고서 글을 화면에서라도 부숴 보고 싶은 사람, 클로드로 웹 게임 하나 만들어 보고 싶은 사람(코딩 몰라도 됨)
- 끝나면 손에 남는 것
- 사이트 부수기 게임 지시문 1개 + 저희가 돌린 결과 화면(둘째로 원래 게임에 내 회사 사이트 넣는 법)
- 걸리는 시간
- 저희 실험 기준 답 2분 33초(클로드 오퍼스 5.5) · 저장하고 열기 2분
Claude · 읽는 데 10분어떻게 했는지, 짧게
준비물: 컴퓨터의 크롬, claude.ai 계정(무료도 가입 가능). 설치·서버는 필요 없어요. 저희 결과는 유료 모델(클로드 오퍼스 5.5) 기준이에요.
휴고는 X에 'Destroy any website with a stickman.'(졸라맨으로 아무 웹사이트나 부수세요)이라고 영상을 올렸어요(2026-09-28 밤 11시 29분 한국 시각, 2026-10-23 저녁 기준 조회 5,323,955). 레딧 r/ClaudeAI 본인 글(추천 4,342)에는 'I built my dream stickman sandbox game over the last weekend'(꿈꾸던 졸라맨 게임을 지난 주말에 만들었다)라고 썼어요. 만든 방식(본인 글): 타입스크립트로 직접 짠 엔진과 Canvas 2D 그림, 여럿이 함께 하는 방은 클라우드플레어(Durable Objects), 서버는 클라우드플레어 워커스. 처음 넣은 지시문은 공개하지 않았어요.
휴고가 쓴 '클로드를 이렇게 썼다' 세 줄(원문 + 뜻): ① 'Brainstorming architecture and technical compromises … turned it in to an implementation plan with the help of Claude.' — 머릿속 그림을 클로드와 구조·타협점까지 이야기해 구현 계획으로 바꿨다. ② 'I had to steer Opus 5.5 more than I expected, but still a big help.' — 설계 규칙을 지키게 하려고 생각보다 많이 이끌어야 했지만 큰 도움이었다. ③ 'live-tweaking FX and particles until it was just right to me.' — 폭발 효과와 파편을 마음에 들 때까지 실시간으로 같이 다듬었다. 아래 3단계의 '다듬기 지시문'은 ③을 저희 게임에 옮긴 거예요.
12단계: 답의 코드를 .html 파일로 저장해 크롬으로 열기(마지막 단계)
클로드가 만든 건 설치하는 앱이 아니라 크롬에서 열리는 웹 페이지 한 장이에요. 저장해서 열면 그게 곧 내 게임이에요.
- 코드 칸 오른쪽 위 복사 단추로 코드 전체를 복사해요. 코드 위아래 설명 글은 넣지 않아요. 미리보기 창(아티팩트)만 떴다면 창 메뉴의 내려받기로 .html 파일을 저장하고 다음 줄은 건너뛰어요(버튼 이름은 저희가 직접 확인 못 했어요).
- 윈도우: 메모장 열기 → 붙여 넣기 → 파일 → 다른 이름으로 저장 → 파일 형식 '모든 파일(*.*)', 인코딩 'UTF-8', 파일 이름 '부수기.html' → 저장. 맥: 텍스트 편집기 → 새로운 문서 → 메뉴 '포맷 → 일반 텍스트로 만들기' → 붙여 넣기 → 이름 '부수기.html'로 저장. '.html을 사용할까요?' 하고 물으면 '.html 사용'.
- 저장한 부수기.html을 크롬 창에 끌어다 놓아요(또는 더블클릭). 내 글이 색깔 글자 벽돌로 깔리고 졸라맨이 서 있으면 성공이에요. A·D로 걷고 스페이스바로 점프, S로 글자 위에서 내려오기, 마우스를 누르고 있으면 그쪽으로 연사해요. 오른쪽 위 '부순 비율'이 100%가 되면 '퇴근!' 화면이 뜨고, '다시 하기'나 R 키로 처음부터.
- 다른 글로 또 하고 싶으면 같은 채팅에 '[ ] 안 글을 [새 글]로 바꿔서 전체 코드를 다시 줘'라고 보내고, 새 코드로 1~3을 다시 해요.
나머지는 회원만 볼 수 있어요
무료 가입하면 이 가이드 끝까지, 프롬프트 복사, 파일 받기까지 다 돼요.
10초면 끝나요.
