🚀 소개
시도하고자 했던 것과 그 이유
토요일 모각에서 여진님의 리드로 AI Studio를 활용해 Gemini Nano Banana 모델로 이미지를 생성하고, AI Studio Build를 통해 간단한 4x4 카드 짝 맞추기 웹게임을 만들어 보고자 했습니다.
게임 제작의 목표는 학생들과 수업 시작 전 아이스브레이킹 활동으로 활용할 수 있는 웹게임을 직접 구현해 보는 것이었습니다. 처음에는 Imagen을 활용해 이미지까지 자동으로 생성하는 올인원 방식을 시도했으나, 도중에 여러 시행착오를 겪으며 최종적으로 Gemini + Gemini CLI + Lovable.dev를 조합해 완성하게 되었습니다.
🚀 진행 방법
사용 도구와 구체적 활용 방식
1) AI Studio – 이미지 및 웹앱 빌드 시도
처음 시도: Imagen을 사용해 “이미지 + 웹게임 코드”를 한 번에 만들고자 함.
문제 발생: Imagen은 하루 사용량 토큰 제한이 있어서 “API key를 확인하라”는 메시지가 계속 나왔고, 정상적으로 이미지를 불러올 수 없었음.
대체 방법: Gemini를 이용해 동물 캐릭터 카드 이미지를 따로 생성한 뒤, AI Studio Build에 업로드해서 웹게임을 제작하려고 했으나, 이미지 업로드가 불안정하여 카드 이미지를 불러오지 못하는 상황이 반복됨.
👉 (여기에 AI Studio Build 화면 캡처 삽입)
빨간색 버튼이있는 화면의 스크린 샷
2) Gemini CLI – 로컬 폴더 기반 웹게임 제작
전환 시도: Imagen과 AI Studio에 서 반복된 실패 후, Gemini CLI를 사용하기로 결정.
방법: 로컬 폴더에 저장된 카드 이미지를 불러와서 HTML 형식의 4x4 매칭 게임 코드 생성.
문제 발생:
Gemini CLI가 생성한 HTML 내 이미지 경로와 실제 내 PC 폴더 경로가 달라서 실행 오류 발생.
몇 번이고 “왜 이미지가 안 보이지?”라고 고민하다가 결국 내가 경로 수정 후 저장을 누르지 않은 실수였음을 뒤늦게 발견.
해결: HTML 코드의
<img src="...">경로를 내 폴더 구조와 동일하게 수정 → 저장 후 정상 실행 성공!
📌 프롬프트 예시
한국의 쌍둥이 자리라는 단어를 보여주는 컴퓨터 화면
👉 (실행 화면)
3) Lovable.dev – 최종 보정 및 크기 수정
이동 이유: Gemini CLI로 만든 게임은 동작했지만 카드 크기가 작아 플레이가 불편했음.
활용 방식: Lovable.dev에 카드 이미지를 업로드해 같은 형태의 카드 매칭 게임을 자동 생성.
장점: 이미지 업로드만으로 빠르게 원하는 UI를 완성할 수 있었고, 추가 요청으로 카드 크기도 바로 수정 가능.
결과: 최종적으로 학생들에게 보여주기에 적합한 4x4 카드 매칭 게임 완성.
👉 (실행 화면)
MTG 카드 화면의 스크린샷
🚀 결과와 배운 점
시행착오 요약
AI Studio + Imagen: API 토큰 제한 → 실패
AI Studio Build + Gemini 이미지 업로드: 업로드 불안정 → 실패
Gemini CLI: 로컬 이미지 경로 수정 문제 + 저장 누락 → 직접 수정 후 성공
Lovable.dev: 카드 크기 조정까지 완료 → 최종 완성
배운 점
AI Studio만 믿기보다는 CLI나 웹툴을 조합해 활용하는 것이 안정적.
자동화가 완벽하지 않기 때문에 “경로 수정, 저장 같은 작은 수작업”이 중요.
무료 툴의 한계(토큰 제한, 업로드 불안정)를 극복하려면 결제 기반 API Key 연결이 필요.
나만의 꿀팁
HTML 코드 생성 후 반드시 이미지 경로와 파일명을 꼼꼼히 확인할 것.
저장 누락으로 삽질하지 않으려면 코드 수정 후 바로 실행 테스트.
Lovable.dev는 “마지막 보정 도구”로 쓰면 작은 UI 수정에 효과적.
앞으로의 계획
Gemini CLI를 MCP로 GitHub에 연결 → 생성된 4x4 카드 게임 HTML을 커밋하고 GitHub Pages에 배포.
수업 아이스브레이킹 시간에 학생들과 함께 플레이할 예정.
🚀 도움 받은 글 (옵션)
지피터스 커뮤니티 윤스케님 팁: AI Studio Build + Imagen으로 이미지까지 자동 생성 가능
모각 리드: 여진님
