[모각AI] 나노바나나 + 제미나이로 카드게임 만들기 - 실습

소개

금일 모각 AI 주제로 카드게임을 생성하는 사례를 해본 내용입니다. 거의 동일한 내용으로 해보시고 유사한 케이스가 있지만 생각보다 재미있네요. 딱 1시간 투자하셔서 한번씩은 해보시면 다른 아이디어를 해보면 좋겠어서 짧은 사례글을 올립니다.

진행 방법

** 사용Tool

  1. 나노바나나 : 게임사용하는 이미지 생성 --> 16장

  2. AI Studio : 4x4 게임 프롬프트생성

  3. Gemini AI Studio Build 기능 : 실제 카드게임 생성

첫번째로 카드게임용 이미지를 16장을 생성해달라고 해서 생성했습니다.

이브이 사진을 만들어야 해
16장으로 4 x 4으로 된 카드게임을 만들려고 해
그래서 위의 이미지 16장을 일관성있게 생성해줘

생성시켜서 받은 이미지는 아래와 같습니다.

숲에있는 포켓몬 사진 세트

그리고 난뒤에 두번째로 카드게임을 위한 시나리오를 생성해달라고 요청해서 받았습니다.

4 x 4 카드게임을 만들기 위한 프롬프트, 명세서를 만들어줘
아래는 요구사항이야
16장의 카드 속 같은 그림 8쌍을 모두 찾아주세요.
한번에 카드 2장만 뒤집을 수 있으며,
짝이 맞으면 카드는 계속 뒤집힌 상태로 유지됩니다.
짝이 틀리면 두 카드는 다시 뒤집힙니다.
16장의 모든 카드 짝을 찾으면 게임이 종료됩니다.

받은 게임 프롬프트 결과입니다. --> 그렇게 맘에 들지는 않지만 상세하게 절차서를 잘 만들어주네요

4x4 카드 게임 프롬프트 및 명세서
1. 게임명
기억력 카드 맞추기 (Memory Match)
2. 게임 개요
16장의 카드 속에 숨겨진 8쌍의 같은 그림을 찾아 모든 짝을 맞추는 기억력 게임입니다. 플레이어는 한 번에 두 장의 카드를 뒤집을 수 있으며, 짝이 맞으면 카드는 계속 뒤집힌 상태를 유지하고, 짝이 틀리면 다시 뒤집힙니다. 모든 짝을 찾으면 게임이 종료됩니다.
3. 게임 목표
가장 적은 시도 횟수로 16장의 카드에 있는 8쌍의 그림 짝을 모두 찾아 게임을 완료합니다.
4. 게임 규칙 상세
게임 시작: 16장의 카드가 4x4 그리드 형태로 뒷면이 보이게 놓여 있습니다.
카드 뒤집기:
플레이어는 한 번에 두 장의 카드를 선택하여 뒤집을 수 있습니다.
첫 번째 카드를 선택하면 해당 카드가 뒤집혀 그림이 보여집니다.
두 번째 카드를 선택하면 해당 카드가 뒤집혀 그림이 보여집니다.
짝 맞추기:
짝이 맞을 경우: 두 카드의 그림이 동일하면, 두 카드는 앞면이 보이도록 유지됩니다. (예: 곰돌이 그림 2장이 모두 뒤집힌 상태로 유지)
짝이 틀릴 경우: 두 카드의 그림이 다르면, 잠시 그림을 보여준 후 두 카드는 자동으로 다시 뒷면이 보이도록 뒤집힙니다.
게임 종료: 16장의 모든 카드의 짝을 찾아 앞면이 보이도록 모두 뒤집히면 게임이 종료됩니다.
5. 게임 구성 요소
카드: 총 16장
각 카드에는 8가지 종류의 그림이 각각 2장씩 존재합니다. (예: 곰돌이 2장, 토끼 2장, 사자 2장 등)
카드 뒷면은 통일된 디자인을 가집니다.
카드 앞면은 각기 다른 8가지 그림을 가집니다.
6. 게임 환경 (가정)
플랫폼: 웹 기반, 모바일 앱 또는 데스크톱 애플리케이션 (프롬프트는 디자인과 기능에 집중)
입력 방식: 마우스 클릭 또는 터치
7. 프롬프트 (개발자/디자이너를 위한 지시)
[UI/UX 디자인 프롬프트]
전체 레이아웃: 4x4 그리드 형태로 16장의 카드가 중앙에 배치되도록 합니다. 주변에는 게임 제목, 현재 시도 횟수, 게임 종료 메시지 등의 UI 요소가 깔끔하게 배치됩니다.
카드 디자인:
뒷면: 심플하고 귀여운 아이콘이나 패턴 (예: 작은 별, 구름, 물방울 등)으로 디자인합니다. 색상은 파스텔 톤이나 눈에 편안한 색상 (예: 연한 하늘색, 민트색)을 사용합니다.
앞면 (그림): 8가지 종류의 그림은 아기자기하고 귀여운 일러스트 스타일로 제작합니다. (예: 곰, 토끼, 고양이, 강아지, 병아리, 코끼리, 펭귄, 여우) 각 그림은 명확하게 구분될 수 있도록 디자인합니다.
뒤집히는 애니메이션: 카드가 뒤집힐 때 자연스럽고 부드러운 애니메이션 효과를 적용합니다. (예: flip 애니메이션, 살짝 회전하면서 뒤집히는 효과)
짝이 맞았을 때/틀렸을 때 시각 효과:
짝이 맞았을 때: 짝이 맞는 두 카드는 배경색이 살짝 밝아지거나, 테두리가 반짝이는 등 시각적으로 짝이 맞춰졌음을 알려주는 효과를 추가합니다.
짝이 틀렸을 때: 두 카드가 다시 뒤집히기 전, 잠시 X 표시가 나타나거나 색상이 살짝 어두워지는 등 짝이 틀렸음을 시각적으로 알리는 효과를 추가합니다.
게임 종료 화면: 모든 짝을 맞추면 "축하합니다! 모든 짝을 찾으셨습니다!"와 같은 성공 메시지와 함께 총 시도 횟수를 표시합니다. "다시 플레이" 버튼을 제공합니다.
색상 팔레트: 전체적으로 부드럽고 편안한 색상 (파스텔 톤, 웜톤)을 사용하여 아이들이나 캐주얼 게임을 좋아하는 사용자에게 친숙한 느낌을 줍니다.
[기능 개발 프롬프트]
카드 초기화 및 섞기:
게임 시작 시 8쌍의 그림 카드 16장을 생성합니다.
생성된 16장의 카드를 무작위로 섞어 4x4 그리드에 배치합니다.
카드 상태 관리:
각 카드의 현재 상태를 관리합니다. (뒷면, 앞면, 짝 맞춰짐)
isFlipped: 카드가 뒤집혔는지 여부 (true/false)
isMatched: 카드가 짝을 찾아 고정되었는지 여부 (true/false)
imageID: 카드에 어떤 그림이 있는지 식별하는 ID (1~8)
카드 클릭 이벤트 처리:
사용자가 카드를 클릭하면 해당 카드를 뒤집습니다.
동시에 뒤집을 수 있는 카드는 최대 2장으로 제한합니다.
이미 뒤집힌 카드나 이미 짝이 맞춰진 카드는 클릭할 수 없습니다.
짝 확인 로직:
두 번째 카드가 뒤집히면, 이전에 뒤집힌 첫 번째 카드와 그림 ID를 비교하여 짝이 맞는지 확인합니다.
짝이 맞을 경우:
두 카드의 isMatched 상태를 true로 변경합니다.
뒤집힌 상태를 유지합니다.
모든 카드가 isMatched 상태가 되면 게임을 종료합니다.
짝이 틀릴 경우:
잠시 딜레이 (예: 1초) 후 두 카드의 isFlipped 상태를 false로 변경하여 다시 뒷면으로 뒤집습니다.
게임 상태 관리:
현재 뒤집힌 카드(flippedCards) 배열을 관리합니다.
총 시도 횟수 (attempts)를 기록하고 화면에 표시합니다.
게임 종료 여부 (isGameOver)를 관리합니다.
다시 시작 기능:
게임 종료 후 "다시 플레이" 버튼을 클릭하면, 모든 카드를 초기화하고 다시 섞어 게임을 재시작합니다.
8. 에셋 목록 (예시)
카드 뒷면 이미지: card_back.png
카드 앞면 이미지 (8종):
bear.png
rabbit.png
cat.png
dog.png
chick.png
elephant.png
penguin.png
fox.png
사운드 효과 (선택 사항):
카드 뒤집는 소리: flip.mp3
짝 맞추는 소리: match.mp3
짝 틀리는 소리: nomatch.mp3
게임 종료 효과음: win.mp3

마지막으로 Ai STudio 의 Build 기능을 이용해서 생성해놓은 이미지와 프롬프트를 넣어서 카드게임을 만들었습니다.

이브 메모리 매치 스크린 샷

https://ai.studio/apps/drive/1jz4ebh1h8uljLeTwLCFXNxdlzf2v8ByB

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

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

도움이 필요한 부분이 있나요?

앞으로의 계획이 있다면 들려주세요.

  1. 모각AI 를 참여하면 무조건 사례글이 손과 AI로 만들수 있다. --> 성취감 상승

  2. 시도하면서 나만의 노하우를 생성할 수 있다 --> 아이디어 확장

도움 받은 글 (옵션)

참고한 지피터스 글이나 외부 사례를 알려주세요.

  1. 모각 AI 사례 글

2개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요