핫도그 앱 개발: 반응성 강한 강아지의 훈련 기록 앱

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

앱 개발

대상자

대상자: React Native 개발자, 앱 기획자, 반응성 강한 강아지를 키우는 반려동물 주인
난이도: 초보자~중급자 수준 (React Native 기초 지식 필요)

핵심 요약

앱 목적: HotDog 앱은 반응성 강한 강아지의 훈련 기록 및 목표 관리를 위한 모바일 앱으로, AI 기반의 맞춤형 훈련 도구 제공
기술 스택: Expo (React Native), Tailwind CSS (Nativewind), Supabase 사용 (PostgreSQL 기반 데이터베이스)
핵심 기능:

- 모달 시스템: context/modal-context.tsx를 통한 스택 기반 모달 관리

- 온보딩 흐름: 7단계로 구성된 유저 맞춤형 데이터 수집 프로세스

- AI 기능: 음성 녹음 및 자동 요약 기능으로 훈련 기록 간소화

섹션별 세부 요약

1. 초기 개발 범위

앱 이름: HotDog
목표:

- 모바일 앱: iOS/Android 지원 (Expo Go로 초기 개발)

- 모의 데이터 사용: 백엔드 구현 없이 UI 개발 및 테스트 가능

- 핵심 기능: 목표 설정, 훈련 기록, 강아지 프로필 관리, 커뮤니티 공유

2. 온보딩 흐름

환영 화면:

- 비인증 사용자 대상, 앱 이름 및 로고 표시

- 구글/앱플에어 로그인 (임시 기능) 및 이메일 기반 회원가입/로그인 제공

7단계 온보딩:

Hook Screen: 반응성 강한 강아지의 문제 인식 유도
Reframe Screen: 앱의 핵심 가치 (목표 설정, 진행 추적, 패턴 발견) 강조
Goal Setting Screen: 사용자 맞춤형 훈련 목표 생성 (사전 설정 또는 직접 입력)
How to Log Screen: 음성 녹음 기능을 통한 훈련 기록 방법 교육
Dog Profile Screen: 강아지 이름, 사진, 행동 특성 입력
Community Screen: 커뮤니티 게시물 작성 유도 (템플릿 제공)
최종 화면: 앱 사용 준비 완료 후 메인 화면 이동

3. 핵심 아키텍처 및 UI 구성

모달 시스템:

- modal-context.tsx: 스택 기반 모달 관리

- modal-renderer.tsx: 모달 렌더링 중앙 컴포넌트

- full-screen-modal.tsx: 오른쪽에서 슬라이드 인, 스와이프 제거 기능 지원

4. 주요 기능 및 기능 구현

기능 목록:

- 다중 강아지 프로필 관리 및 공동 소유자 초대

- 훈련 목표 정의/수정/추적

- 칼렌더 기반 일일 훈련 기록 (음성/텍스트 입력)

- 강아지 프로필 상세 정보 (About, Timeline 기능 포함)

- 커뮤니티 피드를 통한 게시물/조언 공유

5. 메인 앱 탭 화면 구조

탭 구성:

- Today (대시보드): 강아지 선택 및 주간 칼렌더 기반 일일 기록

- Goals: 활성 강아지의 훈련 목표 목록

- Dog Profile: 강아지 About 및 Timeline 탭

- Community: 커뮤니티 피드

6. 디자인 및 UX/UI 가이드라인

디자인 원칙:

- 깔끔하고 현대적인 UI, 카드 기반 레이아웃 사용

- 라이트/다크 모드 지원

- 색상 팔레트:

- 라이트 모드: HSL(0, 0%, 20.50%) (검정색)

- 다크 모드: HSL(0, 0%, 98%) (회백색)

- 폰트: 깔끔한 sans-serif 글꼴 사용

7. 기술 스택

프론트엔드: React Native + Expo
스타일링: Tailwind CSS (Nativewind)
백엔드/데이터베이스: Supabase
Supabase 테이블:

- dogs, events, goals, posts, profiles, user_devices, users-dogs

결론

핵심 팁:

- Supabase를 활용한 PostgreSQL 기반 데이터베이스 구조로 확장성 확보

- Tailwind CSS를 통한 빠른 UI 개발 가능

- AI 음성 요약 기능으로 사용자 경험 향상

- 7단계 온보딩 흐름으로 사용자 맞춤형 데이터 수집 가능

구현 방법: Expo Go로 초기 개발 후 Supabase와 연동하여 백엔드 구현, 커뮤니티 피드 기능 확장 추천