공유하기

게시글

안녕하세요.

AI Centric 엔지니어 윤진성입니다.

평소에는 클라이언트 개발을 주로 하고 있지만, 새로운 기술에 대한 호기심으로 이것저것 만들어보는 것을 좋아합니다.

오늘은 최근에 제 초등학생 아이를 위해 만든 작은 토이 프로젝트인 Retro-Pop-Typer를 소개하려 합니다.

이 프로젝트는 단순한 타이핑 게임이지만, Google AI Studio와 Gemini 2.5 Flash 모델을활용하여 개발 과정의 효율을 높이고 아이를 위한 맞춤형 기능을 구현한 사례입니다.

개발 동기

초등학교에 들어간 아이가 컴퓨터와 조금 더 친근해지길 바라는 마음이 있었습니다.

하지만 시중의 타자 연습 프로그램은 너무 딱딱하거나, 아이가 흥미를 가질 만한 요소가 부족하다고 느꼈습니다.

“아빠가 직접, 아이가 좋아하는 이모지와 단어로 게임을 만들어주면 어떨까?” 하는 생각으로 시작했습니다.

특히 아이가 지루해하지 않도록 매번 새로운 단어와 그에 맞는 그림(이모지)가 나오길 바랐습니다.

기술 스택

가볍고 빠른 웹 애플리케이션을 목표로 최신 스택을 적용했습니다.

・Framework: React 19 (Vite)

・Language: TypeScript

・AI Model: Gemini 2.5 Flash ( @google/genai SDK)

・Hosting：Vercel

Google AI Studio

프로젝트 구조 (Project Structure)

유지보수의 편의성과 확장성을 고려하여, 기능별로 디렉토리를 명확히 분리했습니다.

/src
├── components/ # 재사용 가능한 UI 컴포넌트
│ ├── Button.tsx # 레트로 스타일 버튼
│ ├── VirtualKeyboard.tsx # 시각적 키보드 피드백
│ └── Leaderboard.tsx # 순위표 표시
├── services/ # 비즈니스 로직 및 외부 연동
│ ├── geminiService.ts # Google Gemini API 연동 (단어 생성)
│ ├── audioService.ts # Web Audio API 기반 사운드 합성
│ └── storageService.ts # LocalStorage 점수 저장 관리
├── App.tsx # 메인 게임 루프 및 상태 관리
└── types.ts # 타입 정의 (GameState, Difficulty 등)

주요 구현 내용 (Implementation Details)

1. Gemini 2.5 Flash를 활용한 “단어” 생성

이 게임의 핵심은 AI가 실시간으로 단어 데이터를 생성한다는 점입니다.

하드코딩된 단어 리스트 대신, Gemini API를 통해 난이도에 맞는 단어와 이모지를 즉석에서 받아옵니다.

빠른 응답 속도가 중요한 게임 특성상, 가볍고 빠른 Gemini 2.5 Flash 모델을 선택했습니다.

Structured Output (JSON Schema) 활용

AI를 API처럼 활용할 때 가장 큰 고민은 “출력 형식을 어떻게 보장하느냐”입니다.

Gemini의Controlled Generation (Response Schema) 기능을 활용하여 이 문제를 깔끔하게 해결

아래는 실제 서비스 코드( services/geminiService.ts )의 일부입니다.

// @google/genai SDK 활용
const response = await ai.models.generateContent({
    model: "gemini-2.5-flash",
    contents: prompt,
    config: {
        responseMimeType: "application/json",
        responseSchema: {
            // 원하는 JSON 스키마를 정의하여 타입 안전성 확보
            type: Type.ARRAY,
            items: {
                type: Type.OBJECT,
                properties: {
                    text: {
                        type: Type.STRING
                    }, // 단어 (예: "C", "CAT")
                    emoji: {
                        type: Type.STRING
                    } // 단어에 맞는 이모지 (예: "©️", "🐱")
                }
            }
        }
    }
});

위와 같이 responseSchema 를 정의하면, 별도의 파싱 로직이나 정규식 없이도 100% 신뢰할 수있는 JSON 데이터를 얻을 수 있습니다. 덕분에 다음과 같은 로직이 가능해졌습니다.

１．Easy Mode: 알파벳 한 글자 + 관련 이모지 (Look & Feel 중심)

２．Normal Mode: 초등학교 1학년 수준의 3~4글자 영단어 + 이모지 (학습 중심)

2. 시각적 피드백을 위한 가상 키보드 (Virtual Keyboard)

아직 키보드 자판 위치가 익숙하지 않은 아이를 위해 화면 하단에 실시간으로 반응하는 가상 키보드를 구현했습니다. 이는 단순한 장식이 아닌, 아이의 학습을 돕는 핵심 UX 요소입니다.

・가이드 하이라이트: 현재 입력해야 할 알파벳을 키보드 상에서 밝게 표시하여 아이가 다음키를 쉽게 찾을 수 있도록 유도합니다.

・입력 애니메이션: 실제 키보드를 누를 때 화면 속 키도 함께 눌리는 시각적 효과를 주어 타이핑의 재미를 더했습니다.

・직관적인 레이아웃: 아이들의 눈높이에 맞춰 자판의 크기를 키우고, 명확한 폰트를 사용하여 가독성을 높였습니다.

3. 게임 상태 관리 (Game Loop)

App.tsx 에서는 전체 게임의 흐름을 GameState (MENU → PLAYING → GAME_OVER)로 관리하며, React의 상태 변화를 통해 화면 전환과 키보드 입력을 제어합니다.

아이를 위한 UX (User Experience)

기술적인 부분 외에도 주 사용자인 ‘아이’를 위해 몇 가지 신경 쓴 부분이 있습니다.

・즉각적인 피드백: 타이핑 성공 시 화려한 이펙트와 사운드

・시각적 즐거움: 단순 텍스트가 아닌 이모지 매칭을 통해 단어의 뜻을 직관적으로 이해

・레트로 팝 디자인: 아이들의 시선을 끄는 알록달록하고 통통 튀는 디자인

마지막으로

“AI로 개발했다”는 말이 이제는 식상할 정도로 흔해졌지만, 실제 아이를 위한, 작지만 확실한 목적이 있는 도구를 만드는 과정은 무척 즐거웠습니다.

특히 Google AI Studio를 통해 프롬프트를 실험하고, 이를 바로 코드로 옮겨오는 경험은 개발생산성 측면에서도 큰 시사점을 주었습니다.

이 프로젝트가 아이들에게는 즐거운 컴퓨터 입문이, 개발자 분들에게는 AI API 활용의 작은 영감이 되었으면 좋겠습니다.

끝까지 읽어주셔서 감사합니다.

공유하기

게시글