플러스프로젝트 배경
1. 문제점 (Challenges)
AI 응답 지연(Latency)과 영유아의 낮은 집중력: 생성형 AI가 텍스트와 음성을 생성하는 데 걸리는 시간(2~5초)은 짧지만, 즉각적인 반응을 기대하는 3~5세 영유아에게는 지루함을 유발하여 앱 이탈(Churn)로 이어지는 치명적인 문제입니다.
엄격한 개인정보보호법(PIPA) 규제: 국내법상 만 14세 미만 아동의 개인정보 수집 시 법정대리인의 동의(휴대폰 인증 등)가 필수적입니다. 가볍게 즐기는 MVP 게임에서 복잡한 인증 절차는 사용자 유입을 막는 거대한 장벽(Friction)으로 작용합니다.
모바일 웹의 터치 조작 한계: 네이티브 앱과 달리, 모바일 웹 브라우저에서는 드래그 앤 드롭 제스처가 화면 스크롤과 충돌하거나 반응 속도가 느려, 정교한 조작이 필요한 학습 게임 구현에 기술적 제약이 존재했습니다.
2. 프로젝트 목표 (Project Goals)
핵심 가설 검증: "정해진 정답 소리만 들려주는 기존 앱보다, AI가 아이의 행동에 맞춰 다르게 반응해 주는 서비스가 학습 몰입도를 더 높일 것인가?"라는 가설을 데이터를 통해 검증합니다.
앱 수준의 UX를 웹으로 구현: 별도의 다운로드나 설치 없이 URL 클릭만으로 즉시 실행되면서도, 네이티브 앱에 버금가는 부드러운 터치감과 반응 속도를 제공하는 '웹 앱'을 구축합니다.
저비용 고효율 구조 확립: 초기 자본이 제한적인 MVP 단계이므로, 서버 비용과 AI 토큰 비용을 최소화하면서도 서비스 품질을 유지할 수 있는 지속 가능한 아키텍처를 수립합니다.
3. 주안점 (Key Focus & Strategy)
이중 루프 아키텍처(Two-Loop Architecture) 설계: 문제점인 '지연 시간'을 해결하기 위해 피드백을 이원화했습니다. 아이가 정답을 맞히면 즉각적인 시각 효과(Loop 1)를 먼저 보여주어 만족감을 주고, 그사이에 백그라운드에서 생성된 AI의 칭찬 음성(Loop 2)을 자연스럽게 이어 들려주는 방식으로 체감 대기 시간을 '0초'로 만들었습니다.
개인정보 제로(Zero-Data) & 게스트 모드: 법적 리스크 해소를 위해 회원가입 없이 기기 로컬 저장소(LocalStorage)를 활용해 진도율을 관리하는 '게스트 모드'를 기본으로 채택했습니다. 이를 통해 복잡한 부모 인증 절차를 생략하고 즉각적인 사용자 경험을 제공했습니다.
AI 응답 지연(Latency)과 영유아의 낮은 집중력: 생성형 AI가 텍스트와 음성을 생성하는 데 걸리는 시간(2~5초)은 짧지만, 즉각적인 반응을 기대하는 3~5세 영유아에게는 지루함을 유발하여 앱 이탈(Churn)로 이어지는 치명적인 문제입니다.
엄격한 개인정보보호법(PIPA) 규제: 국내법상 만 14세 미만 아동의 개인정보 수집 시 법정대리인의 동의(휴대폰 인증 등)가 필수적입니다. 가볍게 즐기는 MVP 게임에서 복잡한 인증 절차는 사용자 유입을 막는 거대한 장벽(Friction)으로 작용합니다.
모바일 웹의 터치 조작 한계: 네이티브 앱과 달리, 모바일 웹 브라우저에서는 드래그 앤 드롭 제스처가 화면 스크롤과 충돌하거나 반응 속도가 느려, 정교한 조작이 필요한 학습 게임 구현에 기술적 제약이 존재했습니다.
2. 프로젝트 목표 (Project Goals)
핵심 가설 검증: "정해진 정답 소리만 들려주는 기존 앱보다, AI가 아이의 행동에 맞춰 다르게 반응해 주는 서비스가 학습 몰입도를 더 높일 것인가?"라는 가설을 데이터를 통해 검증합니다.
앱 수준의 UX를 웹으로 구현: 별도의 다운로드나 설치 없이 URL 클릭만으로 즉시 실행되면서도, 네이티브 앱에 버금가는 부드러운 터치감과 반응 속도를 제공하는 '웹 앱'을 구축합니다.
저비용 고효율 구조 확립: 초기 자본이 제한적인 MVP 단계이므로, 서버 비용과 AI 토큰 비용을 최소화하면서도 서비스 품질을 유지할 수 있는 지속 가능한 아키텍처를 수립합니다.
3. 주안점 (Key Focus & Strategy)
이중 루프 아키텍처(Two-Loop Architecture) 설계: 문제점인 '지연 시간'을 해결하기 위해 피드백을 이원화했습니다. 아이가 정답을 맞히면 즉각적인 시각 효과(Loop 1)를 먼저 보여주어 만족감을 주고, 그사이에 백그라운드에서 생성된 AI의 칭찬 음성(Loop 2)을 자연스럽게 이어 들려주는 방식으로 체감 대기 시간을 '0초'로 만들었습니다.
개인정보 제로(Zero-Data) & 게스트 모드: 법적 리스크 해소를 위해 회원가입 없이 기기 로컬 저장소(LocalStorage)를 활용해 진도율을 관리하는 '게스트 모드'를 기본으로 채택했습니다. 이를 통해 복잡한 부모 인증 절차를 생략하고 즉각적인 사용자 경험을 제공했습니다.
프로젝트 성과
영유아 맞춤형 '이중 루프' 인터랙션 구현 설명
AI 응답 대기 시간 동안 즉각적인 시각 반응을 먼저 제공하는 아키텍처를 독자 설계하여, 지연 시간으로 인한 영유아의 주의력 분산을 막고 모바일 웹에서도 네이티브 앱 수준의 끊김 없는 학습 경험을 완성했습니다.
핵심 기능
실시간 AI 맞춤 칭찬 (AI Persona Feedback) 설명
아이가 문제를 맞히거나 틀리는 상황에 맞춰, AI 튜터가 매번 다른 표현으로 이름을 불러주며 격려하는 음성과 텍스트를 실시간으로 생성합니다.
터치 최적화 퍼즐 (Tactile Drag & Drop) 설명
모바일 웹에서도 손가락 터치에 빠릿하게 반응하며, 실수로 화면이 스크롤 되지 않도록 처리된 정교한 알파벳 맞추기 게임 엔진입니다.
진행 단계
기획 및 아키텍처 설계
2023.04.
만 14세 미만 개인정보보호 규제(PIPA) 준수를 위해 회원가입 없는 '게스트 모드' 전략을 수립하고, 모바일 웹 터치 최적화를 위한 React 및 dnd-kit 기술 스택을 확정했습니다.
프론트엔드 게임 엔진 구현
2023.04.
모바일 브라우저의 스크롤 간섭을 제어하고 영유아의 소근육 조작 특성을 반영하여, 네이티브 앱 수준의 부드러운 반응성을 가진 드래그 앤 드롭 학습 인터페이스를 구현했습니다.
AI 연동 및 반응성 최적화
2023.04.
모델을 연동하고, API 응답 지연 시간 동안 즉각적인 시각 피드백을 먼저 제공하는 '이중 루프 아키텍처'를 적용하여 아이들의 학습 몰입도를 유지했습니다.
배포 및 MVP 검증
2023.04.
Firebase 기반의 서버리스 환경에 배포하고, 별도의 앱 설치나 로그인 절차 없이 URL 클릭만으로 즉시 게임이 실행되는 환경을 구축하여 초기 사용자 진입 장벽을 제거했습니다.
프로젝트 상세
) 포트폴리오 소개
카테고리/타깃: 에듀테크(AI) · 3~5세 영유아 및 학부모
소개: 생성형 AI(GPT)를 활용하여 아이의 행동에 실시간으로 반응하고 칭찬해 주는 영유아 대상 알파벳 학습 웹 게임 서비스
2) 작업 범위
개발 범위: 기획 보조, Front-end(React) 및 Back-end(Node.js/Firebase) 풀스택 개발, AI 모델 튜닝 및 연동
지원 환경: 모바일 브라우저(iOS Safari, Android Chrome) 최적화 반응형 웹
3) 주요 업무
인터랙티브 게임: dnd-kit 라이브러리를 커스텀하여 끊김 없는 모바일 터치 및 드래그 앤 드롭 게임 엔진 구현
AI 튜터링: OpenAI API와 TTS(Text-to-Speech)를 연동하여 학습 성과에 따른 실시간 격려 음성/텍스트 생성
데이터 관리: 로그인 없이 이용 가능한 '게스트 모드' 구현 및 브라우저 로컬 저장소를 활용한 진도율 저장 로직
관리자/부모 기능: 아이의 오답 패턴을 분석하는 대시보드 및 아동 보호를 위한 'Parental Gate(부모 확인)' 잠금 장치
4) 주안점
규제 준수(Compliance): 국내 개인정보보호법(PIPA)에 의거, 만 14세 미만 아동의 개인정보 수집을 원천 차단하는 'Zero-Data 아키텍처' 설계
UX 최적화: AI 응답 대기 시간(Latency) 동안 즉각적인 시각 효과를 먼저 보여주어 아이들의 이탈을 막는 '이중 루프(Two-Loop) 시스템' 적용
비용 효율성: 고비용 AI 모델 대신 경량화 모델(GPT)과 서버리스(Firebase) 환경을 구축하여 초기 운영 비용 최소화
카테고리/타깃: 에듀테크(AI) · 3~5세 영유아 및 학부모
소개: 생성형 AI(GPT)를 활용하여 아이의 행동에 실시간으로 반응하고 칭찬해 주는 영유아 대상 알파벳 학습 웹 게임 서비스
2) 작업 범위
개발 범위: 기획 보조, Front-end(React) 및 Back-end(Node.js/Firebase) 풀스택 개발, AI 모델 튜닝 및 연동
지원 환경: 모바일 브라우저(iOS Safari, Android Chrome) 최적화 반응형 웹
3) 주요 업무
인터랙티브 게임: dnd-kit 라이브러리를 커스텀하여 끊김 없는 모바일 터치 및 드래그 앤 드롭 게임 엔진 구현
AI 튜터링: OpenAI API와 TTS(Text-to-Speech)를 연동하여 학습 성과에 따른 실시간 격려 음성/텍스트 생성
데이터 관리: 로그인 없이 이용 가능한 '게스트 모드' 구현 및 브라우저 로컬 저장소를 활용한 진도율 저장 로직
관리자/부모 기능: 아이의 오답 패턴을 분석하는 대시보드 및 아동 보호를 위한 'Parental Gate(부모 확인)' 잠금 장치
4) 주안점
규제 준수(Compliance): 국내 개인정보보호법(PIPA)에 의거, 만 14세 미만 아동의 개인정보 수집을 원천 차단하는 'Zero-Data 아키텍처' 설계
UX 최적화: AI 응답 대기 시간(Latency) 동안 즉각적인 시각 효과를 먼저 보여주어 아이들의 이탈을 막는 '이중 루프(Two-Loop) 시스템' 적용
비용 효율성: 고비용 AI 모델 대신 경량화 모델(GPT)과 서버리스(Firebase) 환경을 구축하여 초기 운영 비용 최소화
