말 잃은 벤을 위해 가족이 AI로 만든 버튼 게임, 레딧 추천 2천 8백
사례 정리 · 코딩 모르던 가족이 클로드로 만든, 버튼 하나로 하는 게임과 화면 자판
2026년 11월 1일 올림 · 10월 31일 확인
가족이 AI에 처음 보내 보라고 공개한 문장(원문 그대로)
만든 가족이 직접 쓴 '바이브코딩 가이드' 2장 '첫 만들기'에 실린 부탁 글이에요. 뜻: 코딩은 처음이야. 화면 대부분을 차지하는 큰 버튼 하나가 있는 HTML 파일 하나를 만들어 줘. 누르면 듣기 좋은 '띵' 소리가 나게. 어두운 바탕에 밝은 버튼, 버튼 글자는 PRESS ME, 소리는 코드 안에 넣고, 위에 안내 문구를 넣어 줘. 저장할 전체 코드와, 나중에 내 소리로 바꾸는 법도 알려 줘.
I'm brand new to coding and want to build my first app. Please create a single HTML file that shows one big button on the screen. When I click the button, it should play a pleasant chime sound. Requirements: - The button should be LARGE (taking up most of the screen) - High contrast colors (dark background, bright button) - The text should say "PRESS ME" - Include the sound directly in the code (use a base64 encoded sound or generate a tone with JavaScript) - Add a simple instruction at the top that says "Tap the button to hear a sound" Please give me the complete code I can save as a file. After the code, briefly explain how I would add my own sound file later.
가이드 순서: 챗GPT·클로드·제미나이 중 하나 열기(가이드 말로는 모두 무료로 시작) → 아래 부탁 글 붙여 넣기 → 받은 코드를 메모장(맥은 텍스트편집기에서 '일반 텍스트로 만들기')에 붙여 my-first-app.html로 저장 → 두 번 눌러 열기. 가이드는 약 15분이라고 해요. 저희는 이 부탁 글을 직접 돌려 보지 않았어요.
- 이런 분께
- 가족·친구를 위해 작은 도구나 게임을 직접 만들어 보고 싶은데 코딩을 모르는 사람
- 끝나면 손에 남는 것
- 가족이 밝힌 만든 순서 6단계 + AI에 처음 보내 볼 문장 원문과 쉬운 풀이 + 막힐 때 AI에 하는 말
- 걸리는 시간
- 만든 사람 가이드 기준 첫 버튼 앱 약 15분(본인 가이드 말, 저희가 재 본 시간 아님)
Claude · Claude Code · 읽는 데 6분어떻게 했는지, 짧게
결과 화면: 위 사진은 만든 가족이 올린 원본 영상이에요. 게임 모음은 switchedgames.org(10월 31일 화면 기준 34개), 화면 자판·문자·영화 고르기는 bennyshub.com에서 가입·설치 없이 무료로 열 수 있어요(영화 고르기만 무료 확장 프로그램 필요). 모두 스페이스바·엔터 두 키로 움직여서, 그 키를 보내는 버튼이면 아무거나 연결돼요.
만든 방법(원글 원문): 'I describe what Ben needs in plain language, and Claude Code builds it, debugs it, and helps me iterate with Ben's feedback.' → 벤에게 필요한 걸 평소 말로 설명하면, 클로드 코드가 만들고 오류를 고치고, 벤의 반응을 보며 다시 고치게 도와준대요.
1만든 사람이 밝힌 순서(레딧 원글)
원글에 적힌 순서 그대로예요. 비용은 공개되지 않았어요.
- 2022년 벤이 같이 살게 되면서, 자주 쓰는 말을 더 넣은 말판부터 만들었는데 부족했대요.
- 2024년, 코딩을 배운 적 없어도 AI가 코드를 써 준다는 걸 알고 시작했어요. 처음엔 다른 회사 AI를 쓰다가 클로드로 옮겼고, 지금은 클로드가 주된 도구래요(유일한 도구는 아니라고 밝힘).
- 만들기 전에 클로드와 게임 기획서·설계 문서를 먼저 같이 썼어요.
- 만들 땐 무료 코드 편집기 VS Code에 클로드 코드(클로드가 컴퓨터 안에서 코드를 직접 쓰는 도구, 유료 요금제 필요)를 붙여 썼어요. 필요한 걸 평소 말로 설명 → 만들고 오류 고치기 → 벤이 써 본 반응을 보고 다시 고치기.
- 규칙 문서 ACCESSIBILITY.md를 저장소에 두고, 새 게임마다 클로드가 이 규칙을 읽고 같은 방식(차례로 불이 켜지다 버튼을 누르면 고르기)을 따르게 했어요. 첫머리 원문: 'Everything here exists so that one person can play a game by himself.'(여기 있는 모든 건 한 사람이 혼자 힘으로 게임을 하게 하려고 있다)
- 대화 도구 안에선 작고 빠른 클로드 하이쿠가 답장 후보를 띄우고, 벤이 버튼으로 골라 대화에 끼어들어요.
나머지는 회원만 볼 수 있어요
무료 가입하면 이 가이드 끝까지, 프롬프트 복사, 파일 받기까지 다 돼요.
10초면 끝나요.
