"> 구글 시트로 마블 교육용 퀴즈 게임 만들기 (바이브 코딩) | 양파고 "> 구글 시트로 마블 교육용 퀴즈 게임 만들기 (바이브 코딩) | 양파고 ">

<head>
  <meta charset="UTF-8" />
  <title> 구글 시트로 마블 교육용 퀴즈 게임 만들기 (바이브 코딩) | 양파고 </title>
  <meta
    name="description"   content="코딩 없이 마블 퀴즈 게임 제작 가능함. 구글 스프레드시트를 DB로 활용하고 앱스 스크립트로 랭킹 시스템을 구현하는 풀 가이드를 제공함. 아이언맨 vs 헐크 대결 게임 제작부터 파이어베이스 배포까지 모든 과정을 다루는 실전 튜토리얼임."   />
  <meta name="keywords" content="교육용 퀴즈 게임, 바이브 코딩, 구글 스프레드시트 DB, 앱스 스크립트 게임, 리액트 게임 만들기, 마블 퀴즈 제작, 파이어베이스 웹 배포, Vibe Coding 가이드, 양파고, Yang Phago, 노션, 양파고 노션, notion" />

  <meta   property="og:title"   content="구글 시트로 마블 교육용 퀴즈 게임 만들기 (바이브 코딩)"  />
  <meta  property="og:description" content="아이언맨과 헐크가 퀴즈로 맞붙는 격투 게임을 직접 만들어보세요! 코딩 몰라도 구글 시트만 있으면 나만의 교육용 게임 완성 가능함. 지금 바로 프로젝트 복제해서 시작하기!, 양파고, Yang Phago, 노션, 양파고 노션"  />
  <meta property="og:image" content="<https://oopy.lazyrockets.com/api/v2/notion/image?src=attachment%3Aee037bc3-9083-430b-bab8-e3d9a9aba70e%3Atest11.png&blockId=2f462b09-b72b-809a-a71c-c89ca622a9d6>" />
  <meta property="og:url" content="<https://yangphago.oopy.io/2f462b09-b72b-80ea-aa78-e8879ac5a3fc>" />
  <meta property="og:type" content="website" />
</head>

목차(클릭하세요)

<aside> 💡 바이브 코딩 결론: 코드 짜는것 보다 해당 퀴즈게임에 들어갈 이미지를 생성하는데 더 많은 시간이 소요됨

이는 MCU관련 저작권으로 인해 직접적인 캐릭터 생성이 잘 안되기 때문

무엇보다 필요한건 집요한 프롬프팅을 통한 오류 수정

</aside>

완성작 맛보기

이 작품은 전라남도 창의융합 교육원의 ‘2026. 동계 교원 교육정보화 연수’ 나승엽 선생님의 연수내용을 기반으로 변형되었음을 밝힙니다’

marvel-quiz

[깃허브]

GitHub - roughkyo/endgame_test

1. 바이브 코딩 전 체크 포인트(=사전준비)

1-1. 교육용 퀴즈게임이 목적이므로 문제은행(=DB) 사전 준비 및 연동

앱스스크립트를 사용하는 방식
- JSON 형식: 데이터를 깔끔한 JSON 형태로 바로 받아옴 (코드 작성이 편함)
- 유연성: 데이터를 보내기 전에 가공하거나 필터링가능 (예: 빈 행 제거, 정답 포맷 변경 등)
- 보안: 시트 자체를 전체 공개할 필요 없음 (스크립트 실행 권한만 설정하면 됨)
웹에 게시된 CSV를 사용하는 방식
- 압도적인 간편함:
- 속도: 단순 텍스트 파일(CSV)을 읽는 것이라 로딩 빠름
- 자동 갱신: 시트를 수정하면 별도 작업 없이 5분 내외로 반영
하지만 추후 업그레이드를 위해 앱스 스크립트 방식을 권장
- 업그레이드 예시: 퀴즈가 끝나면 최종점수와 사용자 닉네임을 구글 스프레드시트에 저장하여 랭킹을 제공
➡️ 따라서 앱스 스크립트를 사용하는 방식으로 진행

구글 스프레드 시트 예시

Marvel Quiz Data

1-2.캐릭터 이미지를 asset으로 사전 준비

📢이미지를 준비하는 방법은 크게 2가지

생성형AI로 이미지 생성하기
- 안티그래비티는 나노바나나가 내장되어 있으므로 생성 가능)
인터넷 상의 캐릭터를 활용

헐크 이미지를 만들고 싶어. 근데 저작권에 걸리지 않도록 코믹스 스타일로 묘사하여 생성할 수 있는 프롬프트를 사용해. 이미지는 배경이 투명한 png파일로 만들어야해. 

 헐크  이미지도 총 5장이 필요하겠지? 

1. 대기중인 이미지 

2. 공격중인 이미지 

3. 공격받는 이미지 

4. 승리한 이미지 

5. 패배한 이미지

만들어진 이미지 활용하기


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>"