목차(클릭하세요)
바이브 코딩 결론: 코드 짜는것 보다 해당 퀴즈게임에 들어갈 이미지를 생성하는데 더 많은 시간이 소요됨
이는 MCU관련 저작권으로 인해 직접적인 캐릭터 생성이 잘 안되기 때문
무엇보다 필요한건 집요한 프롬프팅을 통한 오류 수정
완성작 맛보기
•
이 작품은 전라남도 창의융합 교육원의 ‘2026. 동계 교원 교육정보화 연수’ 나승엽 선생님의 연수내용을 기반으로 변형되었음을 밝힙니다’
[깃허브]
1. 바이브 코딩 전 체크 포인트(=사전준비)
1-1. 교육용 퀴즈게임이 목적이므로 문제은행(=DB) 사전 준비 및 연동
1.
앱스스크립트를 사용하는 방식
•
JSON 형식: 데이터를 깔끔한 JSON 형태로 바로 받아옴 (코드 작성이 편함)
•
유연성: 데이터를 보내기 전에 가공하거나 필터링가능 (예: 빈 행 제거, 정답 포맷 변경 등)
•
보안: 시트 자체를 전체 공개할 필요 없음 (스크립트 실행 권한만 설정하면 됨)
2.
웹에 게시된 CSV를 사용하는 방식
•
압도적인 간편함:
•
속도: 단순 텍스트 파일(CSV)을 읽는 것이라 로딩 빠름
•
자동 갱신: 시트를 수정하면 별도 작업 없이 5분 내외로 반영
3.
하지만 추후 업그레이드를 위해 앱스 스크립트 방식을 권장
•
업그레이드 예시: 퀴즈가 끝나면 최종점수와 사용자 닉네임을 구글 스프레드시트에 저장하여 랭킹을 제공
따라서 앱스 스크립트를 사용하는 방식으로 진행구글 스프레드 시트 예시
1-2.캐릭터 이미지를 asset으로 사전 준비
이미지를 준비하는 방법은 크게 2가지•
생성형AI로 이미지 생성하기
◦
안티그래비티는 나노바나나가 내장되어 있으므로 생성 가능)
•
인터넷 상의 캐릭터를 활용
1.
생성형AI로 이미지 생성하기
a.
여기서 문제가 되는 것은 유명한 캐릭터의 경우 저작권 문제로 이미지 생성이 원활하지 않을 수 있음
이미지를 만든 후 배포를 위해서는 이미지를 호스팅 해야 한다는 사실 헐크 이미지를 만들고 싶어. 근데 저작권에 걸리지 않도록 코믹스 스타일로 묘사하여 생성할 수 있는 프롬프트를 사용해. 이미지는 배경이 투명한 png파일로 만들어야해.
헐크 이미지도 총 5장이 필요하겠지?
1. 대기중인 이미지
2. 공격중인 이미지
3. 공격받는 이미지
4. 승리한 이미지
5. 패배한 이미지
JavaScript
복사
2.
만들어진 이미지 활용하기
ironman_idle: "https://i.postimg.cc/QttYgctF/ironman-idle.png",
ironman_attack: "https://i.postimg.cc/4N58089K/ironman-attack.png",
ironman_hit: "https://i.postimg.cc/P5VSXPyB/ironman-hit.png",
ironman_win: "https://i.postimg.cc/T1x97m2j/ironman-win.png",
ironman_lose: "https://i.postimg.cc/wx5FtWFD/ironman-lose.png",
hulk_idle: "https://i.postimg.cc/t4BMsrqr/hulk-idle.png",
hulk_attack: "https://i.postimg.cc/KjHzf1TM/hulk-attack.png",
hulk_hit: "https://i.postimg.cc/dQHLwxfq/hulk-hit.png",
hulk_win: "https://i.postimg.cc/FsY1RxtY/hulk-win.png",
hulk_lose: "https://i.postimg.cc/L6JhXVdV/hulk-lose.png"
JavaScript
복사
1-3.기타 고려할 사항들
•
무승부 방지를 위한 홀수 문제 출제
•
랭킹 시스템
•
문제은행 연결을 위한 앱스스크립트 배포
•
게임 진행에 필요한 효과음은 최소한으로 셋팅
2. 기초 작업 시작
2-1.준비된 에셋과 구글 스프레드 시트를 미리 안내
•
바로 프롬프트를 만들지 말고 만들고자 하는 내용과 에셋, 구글 스크립트 주소 등을 사전에 안내하기
•
작업 시간을 훨씬 효율적으로 줄일 수 있음
나는 웹페이지로 구동하는 게임을 만들거야. 아직 작성을 시작하지 말고
1. 이미지는 다음 주소에 있는걸 활용할꺼야.
ironman_idle: "https://i.postimg.cc/QttYgctF/ironman-idle.png",
ironman_attack: "https://i.postimg.cc/4N58089K/ironman-attack.png",
ironman_hit: "https://i.postimg.cc/P5VSXPyB/ironman-hit.png",
ironman_win: "https://i.postimg.cc/T1x97m2j/ironman-win.png",
ironman_lose: "https://i.postimg.cc/wx5FtWFD/ironman-lose.png",
hulk_idle: "https://i.postimg.cc/t4BMsrqr/hulk-idle.png",
hulk_attack: "https://i.postimg.cc/KjHzf1TM/hulk-attack.png",
hulk_hit: "https://i.postimg.cc/dQHLwxfq/hulk-hit.png",
hulk_win: "https://i.postimg.cc/FsY1RxtY/hulk-win.png",
hulk_lose: "https://i.postimg.cc/L6JhXVdV/hulk-lose.png"
2. 구글 스프레드시트를 앱스스크립트를 활용해 데이터를 주고받을꺼야.
- 퀴즈 주소: "구글 스프레드 시트 주소 입력"
- 랭킹 주소: "ranking시트의"에서 apps script를 실행한 뒤, 배포를 누른뒤, 웹앱 주소 확인"
준비되었으면 ok해봐
JavaScript
복사
•
앱스 스크립트 웹 앱 주소 확인 방법
2-2. 기초 프롬프트
나는 Phaser, React, HTML5 Canvas를 활용해 '마블 히어로 상식 대전(아이언맨 vs 헐크)' 게임을 만들고 싶어. 아래의 상세 명세서(Spec)를 바탕으로, 내가 바로 실행할 수 있는 완성된 React 컴포넌트 코드를 작성해줘.
1. 게임 컨셉 및 캐릭터 설정 (필수)
주제: 마블의 '아이언맨'과 '헐크'가 퀴즈로 대결하는 격투 게임.
캐릭터 데이터 구조:
Player 1 (아이언맨):
테마 색상: 네온 골드 (#FFD700)
공격 이펙트: 리펄서 빔 (황금색/붉은색 계열 에너지 파티클/레이저 이펙트)
승리 대사: "지식도 기술이지. JARVIS, 다음 문제 준비해."
Player 2 (헐크):
테마 색상: 네온 그린 (#00ff88)
공격 이펙트: 그라운드 스매시 (녹색 계열 충격파/땅이 갈라지는 파티클)
승리 대사: "헐크가 제일 똑똑해! 헐크 부숴!"
캐릭터 선택: 게임 시작 전 두 캐릭터 중 하나를 선택하여 플레이할 수 있어야 함.
2. 기술 구현 요구사항 (High-Level)
Framework: React (Hooks: useState, useEffect, useRef, useCallback 필수).
Styling: Tailwind CSS + <style> 태그를 이용한 애니메이션 (Glitch, Shake 효과).
Audio (중요): 외부 오디오 파일 없이 Web Audio API(SoundManager 클래스)를 구현하여 신디사이저 음으로 BGM과 효과음(타격음, 정답음)을 직접 생성할 것. 아이언맨과 헐크 선택 시 서로 다른 톤의 테마음을 재생.
Graphics (Canvas):
캐릭터와 이펙트 렌더링은 useRef로 참조한 HTML5 Canvas 위에서 그릴 것.
이미지 리소스(IMG_SOURCES)는 객체로 관리하며, new Image()로 프리로딩하는 로직 포함.
공격 시 캐릭터가 대시(Dash)하고, 타격 시 화면 흔들림(Screen Shake) 및 파티클 폭발 효과 구현.
3. 게임 로직
퀴즈 시스템: 인공지능 관련 퀴즈 20개 리스트를 구글 스프레드시트에서 가져온 다음, 게임 시작 시 랜덤 11문제를 출제.
전투 매커니즘: 전체 체력은 110, 문제를 맞추면 에너지는 그대로 이고 상대방 에너지는 10감소
제한 시간(10초) 내 정답 시: 상대 체력 감소 + 화려한 이펙트 + 콤보 상승.
오답 시: 플레이어 체력 감소 + 피격 이펙트.
11문제가 모두 끝나면 결과 화면(승리/패배) 출력.
4. UI 디자인 (Retro Anime Style)
전체적으로 어두운 배경에 네온 컬러가 빛나는 사이버 펑크/아케이드 오락실 느낌.
화면에 CRT 모니터 스캔라인 효과(Overlay) 적용.
폰트는 임팩트 있는 고딕체(구글 폰트 Black Han Sans 등) 로드.
위의 모든 기능을 포함하여 EndGame이라는 단일 컴포넌트로 코드를 짜서 게임을 제작해줘.
#주의사항
- 가장 안정적인 방법인 Tailwind CSS v3의 표준 설정사용
- 오류없이 가장 확실한 Tailwind CSS v3 표준 설정 복구 방법으로 진행
- 플러그인 오류 없도록 처음부터 Tailwind CSS연결 테스트
JavaScript
복사
•
게임 테스트가 바로 로컬에서 가능하지 않은 경우 터미널에서 다음 명령어로 실행
◦
개발 서버를 실행하는 명령어
◦
현재는 로컬 컴퓨터가 일종의 서버 역할을 해야 하므로 node.js를 활용하는 개념
◦
실행시 Node.js가 로컬 컴퓨터를 개발용 웹 서버로 만들어줌
npm run dev
JavaScript
복사
2-3. 바이브 코딩에서 가장 중요한 건?
바로 인내심과 참을성•
처음부터 오류다
•
당황하지 말고 ‘오류 수정해’라는 메시지와 함께 진행
•
새로운 기능까지 얹어서 업데이트 해주는 녀석~
•
물론 모든건 케.바.케임을 잊지 말자! 왜냐면?
•
2-4. 문제은행 DB연결 및 랭킹 연결
구글 스프레드시트를 앱스스크립트를 활용해 데이터를 주고받을꺼야.
- 퀴즈 주소: "https://docs.google.com/spreadsheets/d/1D8CJMJR2U1zVrqCYxIlI9zKgCykBDFeDfUo9Splpb8g/edit?usp=sharing"
- 랭킹 주소: "https://script.google.com/macros/s/AKfycbyYCEbBvxD7WI1cUIvF-q0nxMr9rnyKhctYPTMl4tk_ihEJ9pSxkZSi9MH4-td6Of_0-g/exec"
-퀴즈 테이블은 A열에 문제, B열에 보기1, C열에 보기2, D열에 보기3, E열에 보기4가 있고, 정답은 F열에 있어
- 데이터를 정확히 가져와서 문제은행방식으로 출제해
- 주의사항: 구글 스프레드 시트에서 1행은 가져오면 안되지
JavaScript
복사
2-5. 랭킹순위 연결
점수를 차등화하자. 1문제당 score100점이 아니라
1. 문제를 연속으로 맞출수록 score가 올라감
2. 짧은 시간안에 맞출수록 score를 좀 더 줌
퀴즈가 끝나면 최종점수와 사용자 닉네임을 구글 스프레드시트에 저장하도록 업데이트 할꺼야.
1. 구글 앱스 스크립트를 연동
2. 'Ranking'이라는 시트에 순위를 입력할꺼야
3. 문제를 다 풀면 게임이 끝나고 랭킹 순위를 입력할지 말지 사용자가 선택할 수 있도록
4. 상위 5명의 유저이름과 점수를 출력하면 끝
JavaScript
복사
•
아마도 오류가 날 확률 20000%
랭킹 등록 제대로 되는거 맞아?
1. 웹앱주소:https://script.google.com/macros/s/AKfycbyYCEbBvxD7WI1cUIvF-q0nxMr9rnyKhctYPTMl4tk_ihEJ9pSxkZSi9MH4-td6Of_0-g/exec
2. 앱스스크립트 코드
// POST 요청을 받아서 시트에 저장하는 함수
function doPost(e) {
try {
var data = JSON.parse(e.postData.contents);
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Ranking'); // 랭킹용 시트 별도 사용 권장
// 시트가 없으면 생성 및 헤더 추가
if (!sheet) {
sheet = SpreadsheetApp.getActiveSpreadsheet().insertSheet('Ranking');
sheet.appendRow(['Date', 'Nickname', 'Score', 'Result']);
}
// 데이터 추가 (날짜, 닉네임, 점수, 결과)
sheet.appendRow([new Date(), data.nickname, data.score, data.result]);
return ContentService.createTextOutput(JSON.stringify({result: 'success'}))
.setMimeType(ContentService.MimeType.JSON);
} catch(err) {
return ContentService.createTextOutput(JSON.stringify({result: 'error', error: err.toString()}))
.setMimeType(ContentService.MimeType.JSON);
}
}
JavaScript
복사
3. 배포 전 체크 및 파이어베이스 배포
3-1.배포 전 체크
gitinore에 구글 앱스 스크립트 배포주소와 같은 민감정보 잘 처리 했지?
파이어베이스로 배포 시작, 프로젝트는 내가 새로 만들꺼야. 프로젝트명은 ~~
JavaScript
복사
3-2.배포
•
파이어베이스를 활용하여 배포하기
파이어베이스로 배포를 시작하자. init부터 바로 진행하자.
JavaScript
복사
