[모각AI] 나노바나나 & AI스튜디오로 4x4 카드 짝 맞추기 게임(행성 학습)

📚 소개

시도하고자 했던 것과 그 이유

[9/13 모각AI] 나노바나나 & AI스튜디오를 활용하여 교육 주제에 적용하기 (실습반장: 진여진님)

9/13(토) 모각AI 때 Google AI Studio를 이용하여 포켓몬스터 캐릭터들로 4x4 카드 짝 맞추기 게임 앱을 제작해 보았습니다. 최신 트렌드를 반영하는 데 Google AI Studio를 소개하는 것도 좋을 것 같아 교육용 주제로 바꿔 활용해 보았습니다.

📚 진행 방법

Google AI Studio: 이미지 생성 → 이미지와 함께 카드 맞추기 게임 웹앱 Build

1) 이미지 생성 : Google Ai Studio → Generate Media → Try Nano Banana → 꼬부기 사진 출력하세요 → 이미지 생성

2) Build → 이미지와 함께 카드 맞추기 게임 제작

젠스파크 프롬프트 예제(포켓몬 카드 짝 맞추기 게임 프롬프트)를 복사하여 만듦

https://docs.google.com/document/d/e/2PACX-1vQJJkgz0U1Us7natXIrr3YVErCDG3KyfBzKGL0hSh4S59W3R8Uyl7HjSZjASzTjW0MUC9OwGo4byWUF/pub

import React, { useState, useEffect, useCallback } from 'react';
import { IMAGE_URLS } from './constants';
import type { Card as CardType } from './types';
import GameBoard from './components/GameBoard';
import GameStatus from './components/GameStatus';
import WinModal from './components/WinModal';

// Fisher-Yates shuffle algorithm
const shuffleArray = <T,>(array: T[]): T[] => {
  const newArray = [...array];
  for (let i = newArray.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
  }
  return newArray;
};

3) 이미지가 제대로 생성되지 않아 프롬프트 수정

이해했습니다. 다음은 요청하신 작업을 위한 의사코드 프롬프트입니다.

```
Function OptimizeImageForCardBack(imagePath: String):
    // 1. 이미지 로드
    // imagePath에서 이미지를 로드합니다.
    image = LoadImage(imagePath)

    // 2. 이미지 전처리 (필요시)
    // 이마젠 모델에 최적화된 형식으로 이미지를 조정합니다.
    // 예: 크기 조정, 색상 공간 변환, 정규화 등
    processedImage = PreprocessImage(image)

    // 3. 이마젠 모델을 이용한 이미지 처리/생성
    // 처리된 이미지를 이마젠 모델에 입력하여 카드 뒷면 이미지로 생성합니다.
    // 이 단계에서 이마젠 모델은 카드 뒷면에 적합한 비율, 해상도, 스타일 등을 고려할 수 있습니다.
    cardBackImage = GenerateImageWithImagenModel(processedImage, target="card_back")

    // 4. 결과 이미지 저장 또는 반환
    // 생성된 카드 뒷면 이미지를 저장하거나 다음 단계로 전달합니다.
    SaveImage(cardBackImage, "output_card_back.png")
    Return cardBackImage
```

4) 여러 번 프롬프트 수정 끝에 완성

2. Google AI Studio 활용, "과학 - 태양계 행성"을 주제로 한 교육용 게임 콘텐츠 제작

1) Nano Banana를 통한 행성 이미지 생성

2) Build → 이미지와 함께 카드 맞추기 게임 제작

젠스파크 프롬프트 예제(포켓몬 카드 짝 맞추기 게임 프롬프트)를 복사하여 만듦

3) 이미지가 제대로 생성되지 않아 프롬프트 여러 차례 수정

'포켓몬 카드 짝 맞추기 게임'보다 더 많은 오류 발생

4) 이미지 오류를 완전히 해결하지는 못함

📚 결과와 배운 점

배운 점과 나만의 꿀팁을 알려주세요.

Gemini 상단에도 Nano Banana 소개글이 있고, 그 문구를 클릭했을 때, Gemini 내 '이미지'에서 구현되었기 때문에 Google AI Studio에 Nano Banana 기능이 있었는지 처음 알게 되었습니다.
Google AI Studio에서 Imagen 모델의 존재를 처음 알게 되었습니다. → "이마젠을 이용하여 이미지를 만들어줘" (이미지 생성과 편집 툴이 다름, 이마젠은 하루 사용량 토큰 제한 있음)
Gemini API 호출, 할당량 등에 대해서도 이번에 알게 되었습니다.
앱 배포 방식(Google Cloud)이나 앱 공유시 베포자에게 비용이 청구된다는 사실도 처음 알게 되었습니다.
Google AI Studio의 다양한 기능뿐만 아니라 각각의 옵션들도 알게 되었습니다.

→ 처음 해보는 기능들이 많아서 Chatgpt와 Gemini를 수시로 활용하면서 수정했습니다.

과정 중에 어떤 시행착오를 겪었나요?