📝 한줄 요약
코딩의 '코'자도 몰랐던 완전 초보가 Claude Code와 함께 웹 브라우저에서 돌아가는 틀린그림찾기 게임을 만들었습니다. HTML, CSS, JavaScript를 몰라도 AI가 알아서 해줍니다.
🎯 이런 분들께 도움돼요
코딩은 어렵다고 생각하는 비개발자
프로그래밍에 관심은 있지만 겁나는 분들
Claude Code를 배우고 싶은데 뭐부터 시작해야 할지 모르는 분들
😫 문제 상황 (Before)
20기 공통강의에서 개발자F님 강의를 들으며 "저런 걸 나도 만들 수 있을까?"라는 생각이 들었습니다.
저는 정말, 진짜로 코딩을 전혀 모르는 사람이었습니다. HTML이 뭔지, CSS가 뭔지, JavaScript가 뭔지 하나도 몰랐고, Claude Code도 20기에 입과하면서 처음 알게 되었습니다. 그야말로 초보 중의 왕초보였죠.
개발자F님이 강의에서 게임을 만드시는 걸 보면서 "저건 개발자니까 가능한 거겠지. 나는 무리야"라고 생각했습니다. 하지만 한편으로는 "AI와 함께라면 나도 뭔가 만들 수 있지 않을까?"하는 호기심도 생겼습니다.
🛠️ 사용한 도구
도구명: Claude Code (VS Code Extension)
모델: Claude Sonnet 4.5
특이사항: 외부 라이브러리 없이 순수 HTML, CSS, JavaScript만 사용
🔧 작업 과정
첫 시도 - "일단 해보자"는 마음으로
가장 먼저 든 생각은 "뭘 만들까?"였습니다. 복잡한 건 무리일 것 같아서, 어릴 때 하던 틀린그림찾기 게임이 떠올랐습니다. 간단해 보이면서도 재밌을 것 같았거든요.
Claude에게 그냥 솔직하게 말했습니다.
html, css, js로 웹 브라우저에서 실행되는 틀린그림찾기 게임을 만들어줘.
요구사항:
레벨은 총 10단계
1레벨은 아주 쉽고, 단계별로 어렵고 복잡한 그림
그림은 2개씩 띄우고, 단계마다 5개의 틀린그림 찾기
시간은 단계마다 1분씩
5개의 틀린그림을 다 찾으면 자동으로 다음 단계로 넘어가기
힌트 버튼: 총 10번 사용가능
실패하면 재도전하기 가능
이렇게 요청했더니 Claude가 먼저 질문을 하더군요. "이미지를 어떻게 생성할까요?" 같은 선택지들을 주면서요.
솔직히 무슨 말인지 하나도 이해 못 했습니다. Canvas가 뭔지, SVG가 뭔지... 전혀 몰랐거든요. 그래서 그냥 Claude가 추천하 는 걸로 선택했습니다. "Canvas로 자동 생성"이라는 옵션이었죠.
디자인 스타일도 "심플/미니멀"을 추천해줘서 그걸로 골랐습니다.
놀라운 순간 - "정말 될까?"에서 "와, 된다!"로
Claude가 작업을 시작했습니다. 화면에 뭔가 막 진행되는 게 보이더니 파일들이 생성되기 시작했어요.
index.html- 게임 화면style.css- 디자인game.js- 게임 로직levels.js- 10개 레벨 데이터
뭔지는 모르겠지만 파일들이 만들어지고 있었습니다.
그리고 Claude가 "게임 실행해줘"라는 메시지와 함께 브라우저를 열어줬습니다.
그 순간을 잊을 수가 없습니다.
한국어 앱 스크린샷
진짜 게임이 돌아가고 있었습니다. 좌측에 원본 그림,
우측에 다른 그림이 나타나고, 클릭하면 정답/오답이 표시되고, 타이머가 돌아가고...
코드를 한 줄도 안 썼는데요?
저는 그냥 "틀린그림찾기 게임 만들어줘"라고 말만 했을 뿐인데, 실제로 작동하는 게임이 눈앞에 있었습니다.
게임의 디테일들
게임을 직접 플레이해보니 정말 세심하게 만들어져 있었습니다.
레벨 1 (쉬움) 큰 원형들이 몇 개 있고, 색깔이나 크기가 조금 다릅니다. 눈에 확 띄어서 쉽게 찾을 수 있었어요.
레벨 5 (중간) 별 모양, 삼각형 같은 도형들이 추가되고, 차이점이 점점 미묘해 집니다.
레벨 10 (어려움) 화면에 도형이 수십 개 있고, 색상이 비슷해서 정말 집중해야 찾을 수 있었습니다.
힌트 버튼을 누르면 차이점 중 하나가 주황색 점선으로 깜빡이면서 알려줍니다. 10번까지만 쓸 수 있어서 아껴 써야 해요.
정답을 클릭하면 녹색 원이 펄스 애니메이션으로 나타나고, 오답은 빨간 X가 흔들리면서 사라집니다. 시간이 10초 이하로 남으면 타이머가 빨갛게 깜빡이면서 긴장감을 줍니다.
이 모든 게 제가 코드를 쓰지 않고 만들어진 겁니다.
작동 원리를 조금은 이해하게 됨
나중에 파일들을 열어보니 (물론 이해는 못 했지만) 대략 이런 식이었습니다.
index.html: 게임 화면 구조. 제목, 타이머, 힌트 버튼 같은 것들의 배치
style.css: 색깔, 크기, 애니메이션 같은 디자인
game.js: 클릭했을 때 정답인지 확인하고, 타이머를 돌리고, 레벨을 넘기는 로직
levels.js: 10개 레벨의 도형들 위치와 색깔, 차이점 정보
Claude가 Canvas라는 걸로 도형을 프로그래밍 방식으로 그려서, 별도로 이미지 파일을 준비할 필요가 없었다고 하더군요.
솔직히 무슨 말인지는 잘 모르겠지만, "이미지 파일 없이도 그림을 만들 수 있구나" 정도는 알게 됐습니다.
✅ 결과 (After)
Before vs After
항목
Before
After
코딩 지식
HTML도 모름
여전히 잘 모르지만 게임은 만듦
AI 활용
Claude가 뭐하는 건지 몰랐음
구체적으로 요청하면 만들어준다는 걸 알게 됨
자신감
"나는 못 만들어"
"나도 만들 수 있다!"
주변 반응
-
친구들한테 자랑함
결과물
완성된 게임은 이런 특징들이 있습니다:
✅ 10개 레벨 (쉬움 → 어려움으로 난이도 증가)
✅ 각 레벨마다 5개 차이점
✅ 60초 제한 시간
✅ 힌트 10번
✅ 정답/오답 시각적 피드백
✅ 레벨 클리어/게임 오버 화면
✅ 재도전 기능
브라우저로 index.html 파일만 열면 바로 실행됩니다. 별도의 설치나 설정이 필요 없어요.
💬 이 과정에서 배운 AI 활용 팁
효과적이었던 것
일단 시도하기 처음엔 "이게 될까?" 싶었지만, 해보니 됐습니다. 코드를 몰라도 괜찮습니다. Claude가 다 해줘요.
구체적으로 요청하기 "게임 만들어줘" 대신 "60초 제한, 힌트 10번, 5개 차이점, 10단계 레벨"처럼 구체적으로 말하니까 훨씬 정확하게 만들어졌습니다.
Claude의 질문에 잘 답하기 중간에 선택지를 주면, 이해 못 해도 추천하는 걸 고르면 됩니다. Claude가 왜 그걸 추천하는지 이유가 있어요.
이미지 예시 주기 (다음엔 시도) 이번엔 안 했지만, 만들고 싶은 게 있으면 비슷한 예시 이미지를 보여주면 더 잘 만들어줄 것 같습니다.
이렇게 하면 안 돼요
너무 막연하게 요청 "게임 하나 만들어줘"는 너무 애매합니다. 어떤 게임인지, 어떤 기능이 있는지 말해줘야 해요.
코드 이해하려고 애쓰기 처음부터 코드를 이해하려고 하면 머리만 아픕니다. 일단 실행해보고, 작동하는 걸 확인한 다음, 천천히 알아가도 괜찮아요.
🌍 다른 업무에 적용한다면?
이번 경험으로 느낀 건, "코딩을 배우는 것"보다 "뭘 만들고 싶은지 명확히 하는 게" 더 중요하다는 겁니다.
예를 들어:
업무 자동화: "매일 이 데이터를 정리하는 게 귀찮아" → Claude한테 자동화 도구 만들어달라고 하기
간단한 웹사이트: "우리 팀 소개 페이지 만들고 싶어" → 디자인 예시 주고 만들어달라고 하기
데이터 시각화: "이 엑셀 데이터를 그래프로 보고 싶어" → 차트 생성 프로그램 만들기
제가 만든 게임처럼, 실제로 작동하는 결과물이 나올 겁니다.
🚀 앞으로의 계획
이번 경험으로 자신감이 생겼습니다. 이제는 아이와 함께 아이가 생각하는 게임을 직접 만들어보고 싶어요.
아이가 "이런 게임 하고 싶어!"라고 말하면, 함께 Claude한테 요청해서 실제로 만들어보는 거죠. 아이 입장에서는 자기 아이디어가 진짜 게임이 되는 경험을 하게 되고, 저도 AI 활용 능력을 더 키울 수 있을 것 같습니다.
그리고 실제 사진으로 틀린그림찾기를 만드는 것도 도전해보고 싶습니다. 가족 사진이나 여행 사진으로 만들면 더 재밌을 것 같아요.
📋 재사용 가능한 프롬프트
프롬프트 1: 웹 게임 만들기
html, css, js로 웹 브라우저에서 실행되는 [게임 종류] 게임을 만들어줘.
요구사항:
[기능 1]: 구체적인 설명
[기능 2]: 구체적인 설명
[기능 3]: 구체적인 설명
디자인: 심플/미니멀 스타일
반응형으로 모바일에서도 작동
이미지는 Canvas API로 자동 생성해줘.
사용 팁: [게임 종류], [기능 1~3]을 본인이 만들고 싶은 내용으로 바꾸세요.
프롬프트 2: 게임 실행하기
게임 실행해줘
사용 팁: 파일들이 생성된 후 이 명령어로 브라우저에서 바로 테스트할 수 있습니다.
마무리하며
코딩을 전혀 모르는 제가 게임을 만들었다는 게 아직도 신기합니다.
중요한 건 코딩 실력이 아니라, "뭘 만들고 싶은지" 명확히 아는 것이었습니다. 저는 그냥 "틀린그림찾기 게임을 이런 식으로 만들고 싶어"라고 말했을 뿐이고, Claude가 실제로 만들어줬습니다.
만약 여러분도 "나는 코딩 몰라서 무리야"라고 생각하고 계신다면, 일단 한 번 시도해보세요. 생각보다 훨씬 쉽습니다.
개발자F님 강의를 들으며 "나도 될까?" 의심했던 제가, 이제는 "다음엔 뭘 만들어볼까?"를 고민하고 있습니다.
AI 시대에는 누구나 만들 수 있습니다. 여러분도 할 수 있어요! 🚀
이 글이 도움이 되셨다면, 여러분도 한번 도전해보세요. 첫 시작은 언제나 낯설지만, 해보면 생각보다 재밌습니다.
