꿈틀 Front

꿈틀 서비스의 프론트엔드 애플리케이션입니다.
아이들이 직접 선택한 요소들(교훈, 주인공, 배경)을 바탕으로 AI 동화 생성을 요청하고, 실시간 음성 처리(Volume, Pitch, Noise) 기반의 모험 게임을 진행하며, 생성된 동화 읽기(TTS 연동 및 단어장 팝업) 및 독후 학습 활동(퀴즈, 카드 분류, 관계도 그리기)을 제공하는 React Native (Expo) 기반 태블릿 앱 서비스입니다.

🖥️ Serivce Screen

동화 생성	동화 읽기	동화 목록

1단계 — 바구니 분류	2단계 — 별자리 조립	3단계 — 관계도 탐험	Voice Cloning

🛠️ Build Info

• Language: JavaScript / JSX
• Framework: React Native (Expo SDK 54)
• Navigation: React Navigation (Native Stack, Bottom Tabs)
• API Client: Custom Fetch Wrapper & SSE EventSource (실시간 동화 생성 진행 상황 스트리밍)
• Audio / TTS: Expo-Audio, Expo-AV (백경음악 및 효과음 재생, TTS 음성 처리)
• UI & Styling: Vanilla StyleSheet, React Native Reanimated (프레임 드롭 최소화 모션 적용), React Native SVG, Expo Image
• Fonts: One Mobile POP (자녀용 타이포그래피 통일 적용)

📁 Project Structure

src
├── animation         
├── apis  
│   ├── utils
├── assets            
│   ├── fonts          
│   └── image         
├── components        
│   ├── Commentary     
│   ├── Loading        
│   ├── Make           
│   ├── Setting       
│   └── Travel        
├── context           
├── hooks             
│   ├── commentary     
│   ├── voice          
│   └── ...            
├── navigation         
│   └── RootNavigator.js 
├── screens           
│   ├── Collection    
│   ├── Commentary     
│   ├── Login / SignUp 
│   ├── Main          
│   ├── Make           
│   ├── Read           
│   └── Travel        
└── styles           

🧩 Service Modules

• auth
  • JWT 기반 자체 로그인 및 회원가입 프로세스
  • 부모 회원가입 후 자녀 프로필 및 나이 정보 추가 등록 기능 지원
• make
  • 가치관(도덕적 교훈), 주인공 캐릭터(동물/인물), 시간/장소 배경을 터치 인터페이스로 간편하게 커스텀 구성
  • OpenAI API 및 이미지 생성 모델(Flux)과 연동된 백엔드 서비스로 동화 생성 요청
  • EventSource (Server-Sent Events)를 통해 문장 창작, 삽화 드로잉, 단어장 구성 진행률을 실시간 수신 및 표시
• read
  • 완성된 동화책의 문장 및 일러스트 카드 뷰어 구현
  • 페이지별 TTS 오디오 파일 스트리밍을 통한 사운드 스토리텔링 제공
  • 동화 내 수집된 주요 단어들을 터치할 때 즉시 의미가 표현되는 실시간 단어장 팝업
• travel
  • 테마별 섬(중세시대, 판타지, 한국전래동화)으로 구성된 별자리 맵 탐험
  • 자신이 생성하여 책장에 꽂힌 동화책 컬렉션을 은하수(Constellation) 별 노드로 연동하여 책 읽기 및 독후 활동 진입 유도
• commentary
  • 독후 활동 단계별 인터랙션 피드백 제공
  • 인물/사물 카드를 알맞은 카테고리 바구니로 드래그 앤 드롭하는 분류 학습
  • 카드 노드 간의 터치-드래그 드로잉을 통한 관계도 연결선 그리기
  • 인공지능이 생성한 스토리 기반 내용 확인 퀴즈 및 힌트/상세 해설 팝업 레이어 연동
• voice
  • 자녀의 실시간 음성 주파수 피치(Pitch), 마이크 음량 볼륨(Volume), 주변 환경 소음 데시벨(Noise) 실시간 모니터링
  • 동화 연계 게임 이벤트 발생 시 음성 외침 및 정밀 발성 인식을 통한 모험형 스토리 분기 연동
• setting
  • 동화 몰입감을 위한 BGM(배경음악) 사운드 및 상호작용 피드백을 위한 효과음 볼륨 글로벌 제어 (Context 연동)

1. 의존성 설치

npm install

2. Expo 개발 서버 실행

npx expo start

• 터미널 터치 패드 또는 키보드 입력을 통해 i (iOS 시뮬레이터), a (Android 에뮬레이터), 또는 모바일 기기에서 Expo Go 앱을 이용해 QR코드를 스캔하여 실행할 수 있습니다.

---

🔥 Project Convention

📋 Commit Convention

type	name	description
feat	feat/#ISSUE_NUM	⚡️ 새로운 기능 추가
fix	fix/#ISSUE_NUM	🐛 버그 수정
docs	docs/#ISSUE_NUM	📝 문서 수정
refactor	refactor/#ISSUE_NUM	💫 리팩토링
test	test/#ISSUE_NUM	🧪 테스트 코드 작성
chore	chore/#ISSUE_NUM	🛠️ 빌드, 패키지 관련 수정
perf	perf/#ISSUE_NUM	🪄 성능 개선
ci	ci/#ISSUE_NUM	🔄 CI 관련 수정
cd	cd/#ISSUE_NUM	🔄 CD 관련 수정
revert	revert/#ISSUE_NUM	⚠️ 특정 커밋으로 되돌리기
docker	docker/#ISSUE_NUM	🐳 도커 파일 관련 작업

📌 Git Branch Strategy

branch	role
main	- 최종 배포용 브랜치 - dev 브랜치에서 안정화 버전만 병합
develop	- 개발용 브랜치 - 자유롭게 병합