은쌤T
🐶 AI 찐친
☕ 커피챗 오픈

보드게임처럼 보이는 웹게임 만들기[Claude Code × Suno × GPT Image 2]

📝 웹게임 보드게임 제작의 한줄 요약

코딩을 모르는 교사가 "우리 캐릭터로 중학생용 보드게임을 만들고 싶어" 한 문장에서 시작해, 개발·음악·그림을 AI 셋에게 나눠 맡겨 실제 서비스에 카드 게임을 배포했습니다.

바쁘시면 이것만 읽어도 돼요:

  • 개발은 Claude Code, 음악은 Suno, 그림은 GPT Image 2 — 각자 잘하는 걸 시키고 조립은 Claude에게 맡겼어요

  • 기술 용어 없이 "진짜 카드를 넘기는 것처럼"이라고 장면을 묘사했더니, 카드가 날아다니는 연출이 그대로 구현됐어요

  • AI가 만든 결과물의 구멍(퀴즈 보기가 다 똑같음, 첫 버전의 밋밋함)은 학생 입장으로 직접 플레이해봐야 보였어요

  • 완성된 게임은 아이들이 놀기만 해도 어떤 글쓰기 결함을 못 잡는지 데이터가 쌓이는 학습 도구예요

  • 게임 규칙(메커니즘)은 저작권 보호 대상이 아니라서, 명작 보드게임을 벤치마킹해도 문제없다는 것도 배웠어요

🎯 웹게임 보드게임이 필요한 분들

  • 우리 반 아이들을 위한 교육 게임·콘텐츠를 AI로 직접 만들어보고 싶은 선생님

  • 학습지·PPT를 넘어서 "우리 학급만의 캐릭터·세계관"을 콘텐츠로 키워보고 싶은 교육 콘텐츠 제작자

  • AI에게 뭘 어떻게 시켜야 할지 감이 안 잡히는 교육 현장의 비개발자

😫 웹게임 보드게임 개발 전 문제 상황

저는 '생각하는 글밭'이라는 독서·글쓰기 교육 브랜드를 운영하면서, 아이들이 책을 읽고 나서 즐기는 웹게임 플랫폼 '독서 후 플레이'를 만들어왔어요. 그런데 세 가지가 계속 마음에 걸렸습니다.

  • 첫째, 플랫폼의 게임이 전부 책을 읽어야만 할 수 있는 게임이었어요. 책을 안 읽은 아이는 발을 들일 곳이 없었죠.

  • 둘째, 중학생 — 특히 남학생들은 독서·글쓰기 활동에서 흥미를 잃기가 너무 쉬워요. "재미"라는 문으로 들어와서 자기도 모르게 글쓰기 감각을 익히게 할 장치가 필요했습니다.

  • 셋째, 애써 만든 글밭 농부 캐릭터 열 명이 카드뉴스 같은 콘텐츠에만 쓰이고 있었어요. 아이들이 캐릭터와 직접 노는 경험을 만들어주고 싶었습니다.

그래서 어느 토요일 아침, Claude Code를 열고 이렇게 입력했어요.

🛠️ 웹게임 보드게임 개발에 사용한 도구

  • 개발·조립: Claude Code (Claude Fable 5)

  • 음악: Suno — 배경음악과 효과음 7곡

  • 그림: ChatGPT (GPT Image 2) — 카드 아트, 게임 배경

  • 특이사항: 코딩 지식 없이 전 과정을 대화로만 진행


🔧 웹게임 보드게임 작업 과정

리서치로 시작하기 — 저작권 걱정 없이 벤치마킹 가능?

무작정 "게임 만들어줘"라고 하지 않았어요. 먼저 조사를 시켰습니다.

생각하는 글밭 농부들 캐릭터로 보드게임을 만들고 싶어. 중학생, 특히 남학생들이
재미있어 할 요소들을 넣은 게임이어야 해. 먼저 우리 생각하는 글밭에 어울리는
보드게임을 리서치해봐. 벤치마킹하는데, 저작권 이슈는 없어야하고, 우리 캐릭터들을
살려서 만들 수 있는 보드게임을 설계해줘.

Claude는 세 갈래로 조사해 왔어요. 중학생 남학생들이 열광하는 게임 방식(욕심부리다 터지는 스릴, 블러핑, 배신), 교실에서 검증된 게임들, 그리고 제일 궁금했던 저작권 — 게임의 규칙 자체는 저작권 보호 대상이 아니라서, 이름·그림·테마만 우리 것으로 만들면 명작 게임의 뼈대를 가져와도 된다는 걸 근거와 함께 알려줬습니다.

그렇게 나온 설계가 「글밭 수확대작전 — 까마귀의 습격」이에요. 농부들이 밭에서 카드를 한 장씩 뒤집으며 생각 씨앗을 모으는데, 같은 '결함'이 두 번 나오면 까마귀 깐쌤이 덮쳐 수확을 몽땅 빼앗기는 게임. 욕심을 부릴지, 안전하게 나갈지 매 순간 선택해야 하죠. 그리고 이 '결함' 다섯 종류에 몰래 교육을 심었어요 — 맞춤법 구멍, 근거 없음, 논리 비약, 늘어진 문장, 딴 얘기. 아이들은 게임 규칙인 줄 알지만, 사실은 글쓰기 결함 어휘입니다.

처음엔 종이 카드 게임으로 설계했다가 "아, 미안. 온라인 웹게임으로 만들어야 해"라고 한마디 하니, 혼자서도 즐길 수 있게 성격이 다른 AI 농부 셋(무모한 호기, 신중한 은쌤, 황금 씨앗만 노리는 밭피디)과 대결하는 구조로 다시 짜줬어요. "한번 해보자" 했더니 몇 분 뒤 정말 플레이되는 게임이 나왔습니다.


첫 번째 벽 — 규칙은 맞는데, 재미가 없네?

직접 플레이해보니 뭔가 허전했어요. 규칙은 다 작동하는데 심장이 안 뛰는 느낌. 그래서 솔직하게 말했습니다.

음. 일단 재미 요소가 너무 부족해. 뭔가 게임하면서 빨리 무엇인가를 쟁취한다던가,
그런 요소를 넣어주면 좋겠어.

"재미없다"는 막연한 불평에 Claude는 구체적인 장치 세 개로 답했어요. 카드를 연속으로 버틸수록 커지는 콤보 보너스, 달성하는 순간 바로 보상이 터지는 오늘의 미션, 그리고 매 순간 1등 머리 위에 붙는 왕관. 다시 플레이해보니 완전히 다른 게임이 됐습니다.

여기서 배운 것: AI는 실행은 잘하지만, "이게 재미있는가"의 기준은 사람이 세워줘야 해요. 재미없으면 재미없다고 말하면 됩니다.


하이라이트 — 진짜 카드가 뒤집어지는 것처럼 만들어줘

캐릭터 얼굴이 동그라미 안에 갇혀 있는 게 계속 아쉬웠어요. 제가 원한 건 보드게임 카페에서 카드를 쥐는 그 손맛이었거든요. 기술 용어는 하나도 모르니까, 그냥 원하는 장면을 묘사했습니다.

포멧을 좀 바꾸자. 진짜 카드를 넘기는 것 처럼 만들 수 있어? 우리 캐릭터들을
원안에 가두지 말고, 보드게임 카드 처럼 보이게 하는거야. 진짜 카드가 뒤집어지고,
게임하는 사람이 진짜 내 카드를 가져와서 내 앞에 놓는 것 처럼 보이게 만들어줘.

이게 이번 작업 전체에서 "오!" 했던 순간이에요. 카드 무더기(덱)에서 카드가 미끄러져 나와 공중에서 뒤집히고, 씨앗을 얻으면 미니 카드가 화면을 가로질러 날아와 내 앞에 비스듬히 쌓이고, 안전하게 탈출하면 그 카드들이 한 장씩 곳간으로 휙휙 들어가는 겁니다. 습격당하면 내 앞의 카드가 우수수 떨어져요. 제가 말한 문장 그대로가 화면에서 움직이고 있었어요.

"~하는 것처럼"이라고 경험을 묘사하면, AI가 알아서 기술로 번역해준다 — 이날 가장 크게 배운 것입니다.

물론 한 번에 완벽하진 않았어요. 캐릭터 카드에서 은쌤은 입이 안 보이고 책쌤이랑 호기는 얼굴이 잘려 있길래, 그대로 지적했더니 아홉 캐릭터 전원의 그림을 캐릭터별로 다시 잘라서 얼굴부터 상체까지 온전히 보이게 고쳐줬습니다. 지적이 구체적일수록 수정도 정확했어요.


두 번째 벽 — AI가 낸 퀴즈, 학생 눈으로 풀어보니 구멍이 있었다

이 게임에는 까마귀에게 털려도 부활할 기회가 있어요. 습격의 원인이 된 글쓰기 결함이 들어간 문장을 제대로 고르면 잃은 씨앗의 절반을 되찾는 '회복 찬스' 퀴즈죠. 그런데 학생처럼 직접 플레이하다가 이상한 걸 발견했습니다.

회복찬스에서 맞춤법 구멍 문제가 이상해. 문항 고를게 없어. 다 똑같아.

맞춤법 문항의 보기 세 개가 문장 전체로 나오는데, 한 글자 차이라 뭐가 다른지 보이질 않았던 거예요. 심지어 원래 문장과 사실상 똑같아 보이는 보기까지 있었고요. 스크린샷을 찍어 보여줬더니, 문장 속 틀린 부분만 빨갛게 표시하고 보기는 단어만 크게 보여주는 방식으로 고쳐졌습니다.

AI가 만든 결과물은 그럴듯해 보여요. 하지만 구멍은 사용자의 자리에 앉아봐야 보입니다. 저는 이날 학생 역할로 게임을 정말 여러 판 했고, 그때마다 고칠 게 나왔어요.


AI 삼총사 분업 — 개발은 Claude, 음악은 Suno, 그림은 GPT

게임의 뼈대가 잡히니 살을 붙일 차례. 여기서부터는 AI 셋을 나눠 부렸습니다.

음악은 Suno에게. Claude에게 "게임 단계마다 필요한 음악 스타일을 영어로 써줘"라고 하니, 장면별 7곡의 프롬프트를 만들어줬어요(설레는 타이틀곡, 슬금슬금 긴장되는 탐사곡, 까마귀 습격 효과음까지). Suno에서 곡을 뽑아 폴더에 넣고 "음악 생성 완료"라고만 했더니, Claude가 알아서 장면 전환마다 음악이 자연스럽게 바뀌고 습격 순간엔 음악이 뚝 끊기며 효과음이 터지도록 연결해줬습니다.

그림은 GPT Image 2에게. Claude에게 ChatGPT에 붙여넣을 그림 주문서를 한글로 써달라고 했어요. 카드 뒷면, 씨앗 카드, 황금 씨앗 카드, 그리고 까마귀 깐쌤이 빨간 펜을 치켜들고 급강하하는 습격 장면까지. 특히 캐릭터가 나오는 그림은 원본 캐릭터 이미지를 첨부해서 같은 모습으로 그려달라고 주문했더니, 우리 깐쌤 그대로의 박진감 넘치는 장면이 나왔습니다. 생성된 그림 파일을 폴더에 넣고 경로만 알려주자 Claude가 크기를 다듬어 게임 구석구석에 끼워 넣었어요.

각자 잘하는 걸 시키고, 조립은 다시 Claude에게. 혼자였다면 몇 주짜리 외주였을 일이 이렇게 굴러갔습니다.


마무리 — 배포하자

마지막으로 학생들이 게임 방법을 몰라 이탈하지 않도록 첫 화면에 뜨는 5장짜리 그림 설명서를 붙이고, 게임 목록에 "글밭 오리지널 — 책 없이 바로 플레이" 카테고리를 새로 만들었어요. 그리고 한마디.

배포하자

아침의 한 문장이 저녁에는 아이들에게 링크로 보낼 수 있는 진짜 서비스가 되어 있었습니다 — 하루 만에요.


✅ 웹게임 보드게임 개발 결과

Before vs After

항목

Before

After

플랫폼 구성

책 기반 게임만 존재

"책 없이 바로 플레이" 오리지널 카테고리 신설

캐릭터 활용

카드뉴스 등 콘텐츠 소품

아이들이 직접 캐릭터 카드로 플레이

학습 데이터

없음

아이가 어떤 글쓰기 결함을 못 잡는지 교사 화면에 자동 기록

제작 방식

외주 필요 (수주 예상)

교사 혼자 AI 셋과 대화로 완성

결과물

한국판 게임 스크린샷
  • 비로그인도 1라운드(월요일 밭) 맛보기 가능, 캐릭터 6명 해금 시스템, 장면별 음악, 첫 방문 설명서

💬 AI 활용 팁과 배운 점

효과적이었던 것

  1. 사용자(학생) 입장으로 직접 써보고 구체적으로 지적하기 — "재미없어", "보기가 다 똑같아", "은쌤 입이 안 보여". 구체적인 지적일수록 정확하게 고쳐집니다. 결과물의 구멍은 화면을 보는 것만으로는 절대 안 보여요.

  2. 기술 용어 대신 장면을 묘사하기 — "진짜 카드를 넘기는 것처럼", "내 카드를 가져와 내 앞에 놓는 것처럼". 원하는 경험을 말하면 번역은 AI의 몫입니다.

  3. 만들기 전에 리서치부터 시키기 — 저작권 경계, 타겟(중학생 남학생)의 취향을 먼저 조사시키니 설계의 근거가 단단해졌어요.

  4. AI마다 잘하는 걸 나눠 맡기기 — 개발·조립은 Claude Code, 음악은 Suno, 그림은 GPT Image 2.

이렇게 하면 안 돼요

  1. 첫 결과물을 그대로 배포하기 — 규칙이 작동하는 것과 재미있는 것은 다릅니다. "이게 정말 우리 애들에게 통할까?"는 사람만 판단할 수 있어요.

  2. AI가 만든 문제(퀴즈)를 검수 없이 쓰기 — 교육 콘텐츠라면 특히요. 그럴듯해 보이는 것과 풀 수 있는 것은 다릅니다.

  3. 막연하게 "알아서 예쁘게 해줘" — 뭐가 마음에 안 드는지 짚지 못하면 수정도 헛돕니다. 스크린샷 한 장이 열 마디보다 정확했어요.

🌍 웹게임 보드게임의 다른 활용 방안

  • 학급 어휘·개념 복습 게임: 이 게임의 '결함 5종' 자리에 우리 반 교과 개념을 넣으면 어떤 과목이든 같은 구조로 만들 수 있어요

  • 학교 행사 콘텐츠: 학교 마스코트로 캐릭터 카드를 만들어 축제·계기교육용 미니게임 제작

  • 가정통신문 대신 게임: 규칙·안전 교육처럼 아이들이 안 읽는 내용을 퀴즈 부활 장치에 심기

🚀 웹게임 보드게임의 미래 계획

'글밭 오리지널'을 시리즈로 키울 생각이에요. 이번에 카테고리라는 그릇을 만들어놨으니, 별쌤의 진단 게임, 글쌤의 문장 게임처럼 농부마다 자기 전문 분야의 게임을 하나씩 갖게 하는 것이 목표입니다. 캐릭터 세계관이 게임 라인업이 되는 거죠.

📋 웹게임 보드게임 프롬프트 재사용

프롬프트 1: 게임 기획 리서치 & 설계

> [우리 브랜드/학급 캐릭터]로 [타겟 학년]이 재미있어 할 게임을 만들고 싶어. 먼저 [타겟]에게 인기 있는 게임 방식을 리서치해줘. 벤치마킹할 때 저작권 이슈가 없어야 하고, 우리 캐릭터를 살려서 만들 수 있는 게임을 설계해줘. 게임 안에 [가르치고 싶은 개념]이 자연스럽게 녹아들면 좋겠어.

프롬프트 2: 경험을 장면으로 묘사해서 수정 요청

> 포맷을 바꾸자. 진짜 [원하는 실물 경험, 예: 카드를 넘기는 것]처럼 만들 수 있어? [현재 아쉬운 점]하지 말고, [원하는 모습]처럼 보이게 해줘. [사용자가 하는 행동]하는 것처럼 보이게 만들어줘.

프롬프트 3: 다른 AI에게 시킬 주문서 받기

> 이 게임의 단계마다 필요한 [음악/그림] 스타일을 [Suno/ChatGPT]에 붙여넣을 수 있게 작성해줘. 각 장면의 분위기와 용도를 반영해서.

프롬프트 4: 완성 후 검증 요청

> 내가 [학생/사용자] 입장으로 직접 해보니 [구체적인 문제 상황]이야. [스크린샷 첨부] 이 부분을 [원하는 방향]으로 고쳐줘.
1
6개의 답글
지피터스 뉴스레터

이번 주 AI, 딱 쓸 것만

매주 월요일 오후,
읽고 바로 써먹을 AI 소식만