AI 인터랙티브 그림책 플랫폼: PicTale
유아 인지 특성을 고려한 UX 설계
Key Results
AI 생성 대기시간 75% 단축
BEXCO 아시아창업엑스포 전시
Project Overview
Situations
초기 서비스 정체성이 교육 앱 vs 놀이 앱 vs 단순 생성 앱 사이에서 흔들리며, 핵심 가치와 구현 우선순위가 불명확
기존 AI 동화 서비스들은 텍스트 입력 중심이거나 성인 UI를 그대로 사용해, 실사용자인 3~6세 유아가 주체적으로 사용하기 어려움
삽화의 캐릭터/스타일 연속성 확보 문제. Img2Img와 Text2Img 방식의 속도·비용·연속성 트레이드오프
Actions & Outcomes
기획: 시장조사 기반 컨셉 수립
경쟁사/시장 조사 기반으로 차별점과 컨셉(니치)을 정의하고 팀 목표 정렬
국내외 유사 서비스(Gemini Storybook, StoryWizard, Bedtime Stories 등)를 설치·분석
'텍스트 시작 + 성인 UI'가 시장의 공통 한계임을 정리. '놀이 + 드로잉 + 공유' 키워드로 서비스 컨셉 제안. Non-typing UX / 연속성 / 속도로 개발 우선순위를 명확화
유아 중심 Text-free 그림책으로 차별화 기획 확정
FE: 논문 기반 UX 설계 + Vibe Coding
유아의 신체/인지 특성을 반영한 UI 설계 및 Vibe Coding으로 개발 효율화
Fitts's Law와 아동 터치 인터랙션 연구(Anthony et al.)를 근거로, 유아의 조작 정확도를 높이기 위해 버튼/핵심 인터랙션 요소를 성인 권장 규격(48px)의 2배인 96px로 설계
Figma MCP와 GitHub Copilot을 활용한 Vibe Coding으로 반복 구현 시간을 약 50% 단축. 확보된 시간을 UX 디테일(애니메이션/피드백) 개선에 재투자
유아 친화적 96px 버튼 + Atomic Design 컴포넌트 구현
AI: 파이프라인 최적화
삽화 연속성을 유지하면서 지연/비용을 낮추는 효율적인 생성 파이프라인 설계
Img2Img는 연속성에 유리하지만 지연이 커서 유아 UX에 부적합. Text2Img는 빠르지만 연속성이 불분명
사용자 그림의 캐릭터 특징/스타일/핵심 요소를 캡션 메타데이터로 추출해 추후 생성 단계에서 컨텍스트로 주입. Text2Img, 병렬 비동기 호출로 전환
- 생성 속도 ~75% 단축
- 동일한 메타데이터 컨텍스트 공유로 연속성 저하 완화
10페이지 생성 대기시간 약 75% 단축
Key Learnings
방향을 잃은 팀은 '의견'이 아니라 '근거'로 이끌어야 한다
좋은 제품은 혼자 만드는 게 아니라, 피드백 루프에서 완성된다
프론트엔드 개발에서 TypeScript는 '생산성'이 아니라 '품질/디버깅 비용'의 문제다
멀티스택 협업에서는 '경계(Contract)'를 분리하는 설계가 핵심이다
AI 적용은 쉽지만, '성능·비용·품질' 트레이드오프를 설계하는 건 어렵다
팀장 역할은 개발뿐 아니라 '일정/갈등 관리'까지 포함한다
Full Gallery
유저의 그림을 기반으로 완성된 그림책
Figma 사용 유아용 레이아웃 기획
블록 선택 + 드로잉 중심 UI/UX
유아 친화적인 컬러로 화면 구성
클릭으로 생성하는 그림책
%2C%202025%2C%20BEXCO%20%ED%8F%AC%EC%8A%A4%ED%84%B0%20%EC%A0%84%EC%8B%9C.png&w=3840&q=75)
우수 프로젝트 선정 및 아시아창업엑스포(FLY ASIA) 2025, BEXCO 포스터 전시