5살 딸을 위한 AI 과외 앱 만들기 시작 ①

딸(5세 9개월)은 히라가나·가타카나, 영어 회화, 피아노를 매일 열심히 하고 있습니다.

그리고, "겟챠!"로 유명한 그 캐릭터에 엄청나게 빠져 있습니다.

모두 "억지로 하는" 것이라기보다, 할 수 있게 되는 것이 즐거운 시기인 것 같습니다. 히라가나를 조금 더 예쁘게 쓸 수 있게 되거나, 영어 회화 선생님께 칭찬을 받거나, 피아노를 어제보다 조금 더 칠 수 있게 되면 꽤 기뻐하는 모습을 보입니다.

그 모습을 보면서,

딸이 좋아하는 것, 몰두하고 있는 것과 생성 AI (Generative AI)를 결합한다면, 딸 전용 과외 선생님 같은 것을 만들 수 있지 않을까

라고 생각했습니다.

딸이に取り組んでいる(임하고 있는) 것은 주로 다음 세 가지입니다.

• 히라가나·가타카나 쓰기 연습
• 영어 회화
• 피아노

각각의 결과물을 업로드하면, AI가 내용을 보고 3단계로 평가합니다.

• 히라가나·가타카나: 드릴(Drill) 사진
• 영어 회화: 음성 또는 영상
• 피아노: 연습 영상

평가 후에는 보상으로 몬스터 컬렉션 스티커를 획득할 수 있습니다!

처음부터 예쁜 UI나 완벽한 기능은 힘드니까, 우선 가정 내에서 실제로 사용할 수 있는 상태로 만들어 운용에 올리는 것을 우선했습니다. UI는 앞으로 다듬어 나갈 예정입니다.

또한, 개인 개발이므로 비용도 중요합니다. 생성 AI의 API 이외에는 가급적 돈을 쓰지 않고, Vercel, Supabase, GitHub Actions 등의 무료 티어(Free tier)를 사용하여 진행하고 있습니다.

또 하나 중요하게 생각한 것은 생성물의 취급입니다. 이 부분은 조금 신중하게 생각했습니다.

기술자 윤리가 질문받는 시대이기도 하고, 아이가 나중에 SNS를 사용하게 되었을 때 "AI로 만든 것을 무엇이든 외부에 공개해도 되는 것은 아니다"라는 감각을 전달하는 계기로도 삼고 싶습니다.

이번에는 모 몬스터 수집 게임 스타일의 컬렉션 요소를 가정 내의 보상으로 사용하고 있습니다.

이 부분은 솔직히 대충 다뤄도 되는 곳이 아니라고 생각합니다. 법적으로도, 이용 약관 측면에서도, 생성 AI의 정책 측면에서도 적어도 한 번은 멈춰 서서 생각할 필요가 있는 부분입니다.

제 나름대로는 다음과 같이 정리했습니다.

• 저작권법 제30조에는 가정 내 등 제한된 범위에서 사용하기 위한 복제에 관한 규정이 있다
• 권리자의 이용 규정도 개인적으로 즐기는 범위를 전제로 하고 있다고 읽힌다
• 생성 AI 측에서도 지적 재산권을 침해하는 방식은 당연히 NG

따라서 이번 생성 이미지는 가정 내에서만 사용한다는 전제로 하고 있습니다. 공개하지 않습니다. 배포하지 않습니다. SNS에도 올리지 않습니다. 기사에 캡처를載せる(싣는) 경우에도 해당 부분은 모자이크 처리를 합니다.

반대로 말하면, 이 전제가 무너지는 순간 이야기가 달라집니다.

생성할 수 있으니까 사용해도 된다는 뜻이 아닙니다. AI의 필터를 통과했다는 것과 권리적으로 문제가 없다는 것은 별개입니다.

이 앱은 어디까지나 가정 내에서 완결시킵니다. 향후 인증 관련 기능을 정비할 때도 가족들만 볼 수 있는 상태로 만들어 나갈 생각입니다.

참고로, 이것은 어디까지나 개인적인 정리입니다. 어쨌든 앞으로 공개나 배포를 하는 일은 없습니다.

딸은 "모으는 것", "갖추는 것"을 좋아하기 때문에, 무언가 컬렉션할 수 있는 형태가 더 지속될 것 같다고 생각했습니다.

그래서 AI의 평가 결과에 따라 스티커의 등급이 바뀌도록 했습니다.

평가	스티커 등급	외형
매우 잘했습니다	초레어	다층 홀로그램
...

5살이라도 "노력하면 반짝거리는 것이 잘 나온다"라는 규칙은 이해하기 쉽습니다.

물론 평가가 낮으면 아쉬운 마음이 들기 때문에, 코멘트는 반드시 긍정적으로 돌려주도록 하고 있습니다. 채점이라기보다 다음 연습으로 이어지는 피드백이 되기를 바랍니다.

베이스는 Next.js입니다.

AI 평가와 이미지 생성에 사용합니다.

히라가나·가타카나는 이미지, 영어 회화는 음성·영상, 피아노는 영상을 다루고 싶기 때문에 멀티모달 (Multimodal) 대응이 가능하다는 점이 큽니다.

또한, 히라가나·가타카나의 손글씨 인식을 고려하면 일본어 OCR에 강한 모델을 사용하고 싶다는 이유도 있습니다.

SDK는 @google/genai를 사용하고 있습니다.

스티커 정보와 생성 이미지 저장에 사용하고 있습니다.

• PostgreSQL: 획득한 스티커 정보
• Storage: 생성한 스티커 이미지

본격적인 인증은 아직 넣지 않았습니다. 우선 가정 내에서 사용하는 것을 전제로 동작하는 부분을 우선하고 있습니다.

Next.js이므로 그대로 Vercel에 배포하고 있습니다.

사용자가 파일을 업로드
↓
POST /api/evaluate/{subject}
...

EvaluationResult는 다음과 같은 형태입니다.

type EvaluationResult = {
rating: "excellent" | "good" | "try";
ratingLabel: string;
...

「스티커 GET!」 버튼을 누름
↓
미획득 캐릭터 중 랜덤 추첨
...

처음에 구현한 것은 히라가나·가타카나 평가입니다.

드릴(학습지) 사진을 업로드하면, Gemini에게 이미지를 전달하여 손글씨를 확인하게 합니다.

프롬프트(Prompt)에서는 다음과 같은 관점에서 평가하도록 설정했습니다.

const PROMPT = `이 이미지는 어린이(5~6세)의 히라가나·가타카나 연습 드릴 페이지입니다.
【평가해주길 원하는 것】
손으로 쓴 글자의 품질을 다음 관점에서 평가해 주세요:
...

평가 결과는 3단계입니다.

excellent
: 매우 잘했습니다

good
: 잘했습니다

try
: 힘내봅시다

딸이 스스로도 읽을 수 있도록, 피드백은 가급적 히라가나·가타카나로 반환하도록 하고 있습니다.

{
"rating": "good",
"comment": "「ま」를 아주 잘 썼어요!",
...

이 부분은 아직 조정 중입니다.

AI는 가끔 한자를 섞어서 출력하기 때문에, 최종적으로는 출력 후 체크 과정도 넣고 싶습니다.

평가 후에는 스티커 이미지를 생성합니다.

캐릭터와 평가 등급을 바탕으로 프롬프트를 구성합니다. 등급이 높을수록 홀로그램 느낌이 강해지도록 설정했습니다. (스티커 생성 프롬프트는 예시입니다)

const ART: Record<Grade, (name: string) => string> = {
super: (name) =>
`${name} sticker illustration, dynamic pose, premium multi-layer holographic foil, sparkling background`,
...

생성된 이미지는 그대로 두면 크기가 크기 때문에, sharp를 사용하여 정사각형으로 만들고 JPEG 압축을 하고 있습니다.

const processedBuffer = await sharp(rawBuffer)
.resize(1024, 1024, { fit: "cover", position: "centre" })
.jpeg({ quality: 50 })
...

대략 수 MB에서 수백 KB까지 줄일 수 있었습니다.

ClaudeCode가 처음에는 @google-cloud/vertexai를 사용하려 했지만, 현재는 @google/genai를 사용하는 흐름이 최신입니다.

npm install @google/genai

이런 부분은 처음에 미리 말해주는 것이 좋았을 것 같습니다.

gemini-3.1-pro-preview를 사용했을 때, us-central1에서는 404 에러가 발생했습니다.

이 모델은 global 리전(Region)에서 호출해야 했습니다.

GOOGLE_CLOUD_LOCATION=global

이런 부분은 모델에 따라 다르므로 문서 확인이 필요합니다.

로컬에서는 정상적으로 저장되는데, Vercel에 배포하면 Supabase Storage에 깨진 이미지가 저장되는 문제가 있었습니다.

저장된 파일을 보면 JPEG로 인식되지 않고, 바이너리(Binary)가 문자열로 취급된 듯한 방식으로 깨져 있었습니다.

대책으로, 우선 sharp를 사용하는 Route Handler는 Node.js 런타임(Runtime)으로 고정했습니다.

export const runtime = "nodejs";

또한, Supabase Storage에 업로드할 때는 Buffer를 그대로 전달하는 대신 Blob으로 변환하여 전달하도록 했습니다.

const imageBlob = new Blob([new Uint8Array(processedBuffer)], {
type: "image/jpeg",
});
...

next.config.ts

에 serverExternalPackages: ['sharp']

도 추가했습니다.

const nextConfig: NextConfig = {
serverExternalPackages: ["sharp"],
};

다만, Next.js 16 문서를 보면 sharp는 원래 자동으로 external 취급되는 패키지에 포함되어 있었습니다. 따라서 이것은 만약을 위한 설정이라는 위치에 있습니다.

이번 문제에 결정적인 역할을 한 핵심은 runtime = 'nodejs'를 명시한 것과, 업로드 시 Blob으로 전달하도록 변경한 것이라고 보고 있습니다.

Supabase는 RLS (Row Level Security)가 활성화되어 있으므로, 정책(Policy)을 설정하지 않으면 읽기/쓰기가 불가능합니다.

이번에는 가정 내에서 사용하는 것을 전제로 하기에, 우선은 심플한 정책으로 진행하고 있습니다.

create policy "allow all" on stickers
for all using (true) with check (true);

공개 서비스로 만든다면 당연히 이대로는 안 되겠지만, 우선 가정 내에서 운용하는 것을 우선시했습니다.

Supabase의 SQL을 매번 수동으로 실행하는 것은 번거로우므로, GitHub Actions를 통해 마이그레이션 (Migration)을 실행하도록 했습니다.

on:
push:
branches: [main]
...

supabase/migrations/에 SQL을 추가하고 main에 push하면 자동으로 적용됩니다.

Supabase Branching은 유료이므로, 우선은 GitHub Actions로 충분하다고 생각합니다.

• 히라가나·가타카나 평가
• 평가 결과 피드백 표시
• 스티커 이미지 AI 생성
• Supabase에 데이터·이미지 저장
• 스티커 컬렉션 목록·상세 화면
• GitHub Actions를 통한 DB 마이그레이션 자동화
• 영어 회화 평가
• 피아노 평가
• UI 완성도 높이기
• 평가 제도와 방법의 개선 (이것은 영원히 계속됨)

딸의 학습에 생성 AI (Generative AI)를 조금 섞어보는 것부터 시작한 개인 개발이지만, 생각보다 빠르게 "가정 내에서 테스트할 수 있는" 상태까지 가져올 수 있었습니다.

아직 UI는 거칠고, 평가 로직도 조정하고 싶은 부분이 있습니다. 영어 회화와 피아노 평가도 이제부터 시작입니다.

다만, 우선 운용 단계에 올린다는 의미에서는 첫걸음으로서 충분하다고 생각합니다.

생성 AI는 사용법을 잘못하면 위험한 부분도 있습니다. 반면, 가정 내에서 규칙을 정해 사용하는 한, 아이의 학습 경험을 조금 더 즐겁게 만들 수 있는 가능성도 있다고 느꼈습니다.