이 게시물은 GitHub Finish-Up-A-Thon Challenge를 위한 제출물입니다.

내가 만든 것

AI Playground: Draw, Create, and Explore는 브라우저에서 완전히 실행되는 AI 기반의 그리기 및 학습 (draw and learn) 게임입니다. 사용자가 캔버스에 그림을 그리면, 오늘날 사용 가능한 가장 유능한 시각 모델 (vision models) 중 하나인 Google의 Gemini AI가 사용자의 그림을 보고 다음과 같이 반응합니다: 예술 점수를 매기거나, 무엇을 그렸는지 추측하거나, 사용자가 만든 것을 바탕으로 이야기의 다음 장을 작성합니다.

핵심 아이디어는 간단합니다: 그리는 것은 즐겁고, AI의 피드백은 이를 더욱 흥미롭게 만듭니다. 당신이 예술가이든, 아니면 졸라맨을 그려놓고 용이라고 부르는 사람이든 상관없이, AI는 일반적인 응답이 아닌 _당신의 구체적인 그림_에 반응합니다.

세 가지 게임 모드가 있으며, 각 모드는 완전히 다른 경험을 제공합니다:

Creative Quest - 메인 학습 게임
이것은 AI Playground의 핵심입니다. 각 세션은 5개의 테마 판타지 세계(숲, 수정 동굴, 고대 유적, 하늘 영역, 드래곤 피크)에 걸쳐 10개의 그리기 미션을 제공합니다. 각 장(chapter)이 시작되기 전

Artful Guesswork - AI가 당신의 그림을 맞출 수 있을까요?
고양이, 우주선, 점심 메뉴 등 무엇이든 그려보세요. Gemini가 이를 식별하려고 시도하며 신뢰도 점수(0-100%)를 제공합니다. 그런 다음 AI가 맞았는지 틀렸는지 평가합니다. 타이머도 없고 압박감도 없습니다. AI가 그림을 어떻게 "보는지" 확인할 수 있는 놀랍도록 재미있는 방법입니다. 플레이할 때마다 제출당 8 XP를 획득합니다.

Artful Stories - 다음 장을 그리세요
당신의 그림이 이야기의 일부가 됩니다. 무언가를 그리면, Gemini가 당신이 그린 내용을 바탕으로 어떤 일이 일어나는지 서술하는 짧은 이야기 장(최대 150단어)을 생성합니다. 그런 다음 다음 장을 위해 다시 그림을 그립니다. 전체 삽화 이야기가 저장됩니다. 이는 창의적 글쓰기와 그리기가 반복되는 루프(loop)입니다. 각 장마다 15 XP를 획득합니다.

이 세 가지 모드를 아우르는 완전한 제품 레이어(product layer)가 게임을 완성도 있게 만들어 줍니다: Google 로그인, XP와 레벨이 포함된 플레이어 프로필, 전체 모험 기록 로그, 모든 사람의 그림을 보여주는 커뮤니티 아트 갤러리, 그리고 상위 20명의 플레이어를 순위 매기는 실시간 리더보드(leaderboard)가 포함됩니다.

기술 스택 (Tech Stack):

데모 (Demo)

🔗 라이브 데모 (Live Demo): ai-playground-krish.vercel.app

스크린샷 (Screenshots)

홈 - 모드 선택 (Home - Choose Your Mode)

AI Playground home screen showing three animated game mode cards: Creative Quest, Artful Guesswork, and Artful Stories, plus a profile link

로그인하면 모든 세션이 시작되는 곳입니다. 세 개의 애니메이션 모드 카드에는 각각 삽화와 한 줄 요약이 포함되어 있습니다. 거쳐야 할 튜토리얼도, 설정할 옵션도 없습니다. 그저 모드를 선택하고 그리기 시작하면 됩니다.

숙련도 선택 - 창의적인 퀘스트 전 (Skill Level Selection - Before a Creative Quest)

Skill level selection screen showing four options: Beginner, Intermediate, Advanced, and Expert, with timer information for each level

창의적인 퀘스트 (Creative Quest) 모험을 시작하기 전에 숙련도 (skill level)를 선택합니다. 이것은 단순한 라벨이 아닙니다. 미션당 주어지는 시간을 직접적으로 제어합니다. 초보자 (Beginner)에게는 챕터당 4분이 주어지며, 전문가 (Expert) 플레이어에게는 2.5분이 주어집니다. AI는 미션을 생성할 때도 이 문맥을 사용하므로, 초보자에게 짧은 시간 안에 매우 세밀한 것을 그리라고 요구하지 않습니다.

창의적인 퀘스트 - 진행 중인 미션 (Creative Quest - Mission in Progress)

Creative Quest game screen with a countdown timer at the top, a mission prompt from Gemini, the Fabric.js drawing canvas with tool options, and a chapter progress bar below

Loading drawing mission

Drawing canvas

이것이 핵심 루프 (core loop)입니다. 상단에는 AI가 생성한 미션, 예를 들어 "황금빛 불꽃 속에서 솟아오르는 불사조를 그리세요"와 같은 문구가 표시됩니다. 카운트다운 타이머가 작동 중입니다. 중앙에는 펜, 마커, 스프레이, 도형, 지우개, 컬러 피커 (color picker), 브러시 크기, 불투명도 슬라이더 (opacity slider) 등 전체 툴바가 포함된 드로잉 캔버스가 있습니다. 하단에는 진행 표시줄 (progress bar)을 통해 10개 챕터 중 현재 몇 번째 챕터인지 보여줍니다. 전체 화면은 오직 작업에만 집중할 수 있도록 구성되어 방해 요소가 없습니다.

미션 결과 - AI가 당신의 그림을 채점합니다 (Mission Results - AI Scores Your Drawing)

Gemini mission result card showing accuracy: 78, creativity: 85, effort: 70, a short text feedback from Gemini, the final score, and XP earned for this chapter

제출하면, Gemini의 비전 모델 (vision model)이 미션 프롬프트 (prompt)와 대조하여 당신의 그림에 담긴 실제 픽셀 콘텐츠를 분석합니다. 당신은 정확도 (accuracy), 창의성 (creativity), 노력 (effort)이라는 세 가지 개별 점수와 함께, Gemini가 당신이 그린 내용에 대해 구체적으로 생성한 짧은 서면 코멘트를 받게 됩니다. 가중치가 적용된 최종 점수와 획득한 XP가 아래에 표시됩니다. 그 후 다음 미션이 자동으로 로드됩니다.

Artful Stories - 그림이 이야기가 되다

Artful Stories screen showing a user's drawing on the left and a Gemini-generated story paragraph on the right, with a

Stories 모드에서는 당신이 그리는 각각의 그림이 삽화가 곁들여진 서사의 다음 장이 됩니다. 당신이 무언가를 그리면, Gemini는 그림에서 보이는 내용을 바탕으로 짧은 이야기의 연속성을 작성하며, 전체 텍스트가 당신의 예술 작품과 함께 나타납니다. 그런 다음 당신은 다음 장을 그립니다. 모든 그림과 Gemini가 작성한 모든 텍스트를 포함한 전체 삽화 이야기는 당신의 프로필에 저장되며 갤러리에서 확인할 수 있습니다.

Player Profile (플레이어 프로필)

Player profile page showing username, level number, XP progress bar toward next level, rank position on the leaderboard, stat cards for total drawings and adventures completed, and a recent activity section

Player profile

당신의 프로필은 모든 것을 집계합니다: 총 XP, 현재 레벨 (XP ÷ 100), 리더보드 (leaderboard) 상의 글로벌 순위, 제출한 총 그림 수, 그리고 세 가지 모드 전체에서 완료한 모험 횟수입니다. XP 바는 다음 레벨까지 정확히 얼마나 남았는지 보여줍니다. 그 아래에는 최근 활동 섹션이 있어 마지막 몇 번의 세션을 한눈에 보여줍니다.

Art Gallery - 커뮤니티 그림

Art gallery showing a grid of drawings submitted by multiple players, each with the player name, mode played, and AI score underneath

모든 플레이어의 모든 그림 - Creative Quest 미션, Guesswork 제출물, 그리고 Story 일러스트레이션 - 이 하나의 피드에 모두 나타납니다. 이는 솔로 게임을 공유된 경험으로 변화시킵니다. 방금 여러분이 고군분투했던 것과 동일한 미션 프롬프트에 대한 다른 사람의 해석을 보는 것은 지속적으로 즐거움을 주며, 때로는 인상적이고, 때로는 매우 재미있습니다.

Leaderboard - XP 기준 상위 플레이어

Leaderboard showing top 20 players ranked by XP with their username, level, and total XP displayed in a styled table

총 XP(경험치)에 따라 순위가 매겨진 상위 20명의 플레이어입니다. XP는 세 가지 모드 모두에서 누적되므로, 단일 모드만 반복하는 플레이어가 아니라 게임 전체를 탐험하는 플레이어에게 보상을 제공합니다. 원본 버전에서는 이것이 컴포넌트 내에 하드코딩된 배열(hardcoded array)이었습니다. 이제 모든 행은 MongoDB에서 가져온 실제 플레이어입니다.

컴백 스토리 (The Comeback Story)

이 프로젝트가 시작된 곳

이것은 하나의 해커톤(hackathon)에서 시작되었습니다. 아이디어는 간단했습니다: 만약 Gemini가 여러분의 그림에 점수를 매기고 그 경험을 게임처럼 느끼게 할 수 있다면 어떨까? 저에게는 주말과 Gemini API 키, 약간의 커피, 그리고 만들어 볼 가치가 있다고 생각한 아이디어가 있었습니다.

해커톤 데모는 성공적이었습니다. 무언가를 그리고 제출하면 Gemini가 응답했습니다. 이를 지켜본 사람들은 웃고, 참여하며, 재미있다고 생각했습니다. 그러고 나서 주말이 끝났고, 저는 마지막 커밋(commit)을 푸시했으며, 리포지토리(repo)는 몇 달 동안 손도 대지 않은 채 그대로 방치되었습니다.