🚀 소개
시도하고자 했던 것과 그 이유
토요일 모각에서 여진님의 리드로 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 카드 매칭 게임 완성.
👉 (실행 화면)
🚀 결과와 배운 점
시행착오 요약
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으로 이미지까지 자동 생성 가능
모각 리드: 여진님
