소개
4살 포메라니안 남매, 레오와 아미를 돌보는 보호자로서 늘 고민이 있었어요. "아이들의 몸무게, 건강, 식사, 접종, 지출 비용, 아이들과의 추억" 등 다양한 기록들을 여기저기 나눠서 관리하는게 번거로웠거든요. 기존에 있는 앱들을 써보기도 했지만, 딱 제 니즈를 충족하는 앱은 없더라고요. 그래서... 제가 만들기로 했습니다! 😤
앱의 이름은 "오래오래 OraeOrae". 건강하게, 오래오래 같이 살고 싶다는 바람에서 따온 이름이에요. 발음도 쉽고, 한국어의 정서도 담았습니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
앱 개발을 시작하기 전, 우선 ChatGPT의 PRD Builder를 이용해 저만의 제품 정의서를 만들었어요. 그걸 바탕으로 Replit에서 React + Firebase로 MVP를 개발했습니다. 📱
https://chatgpt.com/g/g-PuPOUqhcR-prd-builder
🛠 사용한 도구
ChatGPT: PRD 작성, UI 고민, 기술 조언
Replit: 개발 & 배포 환경 (Replit을 사용한 이유: 실제 API 연동, 데이터 저장, 사용자 입력 기반 대시보드 구성 등 '기능이 있는 앱'을 만들 수 있다고 들어서였고, 기존에 Lovable을 사용해본 경험이 있어 Replit도 간단히 체험해보고 싶었습니다)
Firebase: Firestore, Auth, Storage 활용해 DB 연동 및 이미지 업로드
PRD 생성을 위한 프롬프트
레오, 아미 포메라니안 2마리를 키우고 있는데, 강아지 관리 모바일 앱을 만들고 싶어. 거기에 강아지 관련 모든 것을 기록하고 싶어. 2마리인데 별도로 기록하면 헷갈리고 3번 비용은 구분하기 어려워서 하나로 관리할 수 있도록 하는 앱을 위한 PRD를 만들어줘. Replit을 사용해서 만들려고 해.
0. 강아지 기본 정보 입력: 이름, 나이, 성별, 강아지 등록번호 기재, 프로필 사진 업로드 가능
1. 몸무게: 매일 기록할 수 있도록. 그래프로도 볼 수 있도록 해줘.
2. 식단: 아침 점심 저녁 간식 - 시간과 뭘 먹였는지까지 기록
3. 비용: 강아지를 위해 사용한 비용과 그 비용의 항목 (급여, 병원, 미용, 간식, 장난감, 여행, 유치원, 기타 (주관식 표기) 및 지출처/비용 지급 장소 기록. 항목별로 모아서 비용이 월별로 얼마가 지출되는지 볼 수 있도록 해줘.
--> 1번 몸무게와 3번 비용은 캘린더에서 날짜별로 볼 수 있도록.
4. 건강 상태: 주관식으로 상태가 어떤지 기록 할 수 있도록 하고, 좋음 (Green), 나쁨 (Red)로 컬러 표기.
5. 접종: 어떤 걸 언제 접종했는지 볼 수 있는 기록과, 그 접종을 언제 다시 해야 하는지 다음 접종 리마인더 기능. 접종할 항목이 여러개니까 추가할 수 있는 기능 있어야 함.
6. 병원: 병원 방문 날짜, 진료 항목, 병원 비용 (3번의 비용과 겹치므로, 3번에서 비용 합계 낼때는 미포함)
7. 산책: 오전, 오후, 저녁으로만 구분해서 산책 했음, 안했음으로만 표기하도록ChatGPT와 몇 차례 티키타카 하며 PRD 정리 (너무 길어서 일부만 캡쳐)
결과:
아직 디버깅이 다 안 끝나기도 했고, 저만 쓰려고 만든 거라... 링크는 공유 못 해드리고 어떻게 구현되는지만 보여드릴께요.
📋 주요 기능은 다음 8가지입니다. 모든 기능은 캘린더 기반으로 연결돼 날짜 별로 쉽게 확인할 수 있도록 설계했어요.
프로필 : 강아지 기본 정보 등록 - 이름, 나이, 성별, 등록번호, 사진 등을 프로필에서 입력하면 홈 화면에 기본 정보가 보여집니다. (프로필에서 강아지 생년월일 입력은 연도/월 드롭다운으로 개선)
홈 화면에서 '빠른 기록'에는 아래의 8가지 항목을 빠르게 입력할 수 있는 팝업 UI 방식으로 사용성을 높이고자 했고, 정말 필요한 내용만 입력 최소화 시도.
몸무게 : 날짜별 입력 + 라인 차트로 추이 시각화
식사 : 급여 시간과 음식 종류 기록
산책: 산책 했는지, 언제 (대략 오전, 오후, 저녁으로만 구분) 했는지 - 요약판에 '산책' 안 한 경우 '미완료'라고 빨간색으로 기재해서 산책 안시킨 보호자에게 부담감 백배 주기!
오늘의 추억: 간략하게 사진과 오늘 특별한 순간 기록
비용 : 반려동물 관련 지출 항목별 금액 기록 (통계 탭에서 별도 그래프로도 확인 가능)
건강 : 색상으로 하루 컨디션 구분 + 특이사항은 메모로 기재
접종 : 접종 종류 및 예정일 관리
병원 : 진료 내역, 방문 병원, 비용 기록
배운 점과 나만의 꿀팁을 알려주세요.
1. Replit과 Firebase 연동이 생각보다 복잡했지만, Replit에게 Firebase 화면을 캡쳐해서 질문을 하면서 Q&A를 통해 진행하니 큰 문제는 없었어요.
기능에 문제가 생기면 F12 키로 개발자 도구를 열고, 콘솔 메시지가 보이도록 화면을 캡처해 Replit에 제공하면서 해결을 요청했어요.
Replit이 오류를 수정해가는 과정을 지켜보면, 어떤 문제가 있었는지를 대략적으 로라도 이해할 수 있었어요. 저처럼 코드를 잘 모르는 사람에게는 처음부터 코드 공부를 하는 것이 막막하게 느껴질 수 있지만, 이렇게 실전 속에서 하나씩 부딪히며 배워가는 것도 충분히 의미 있고, 안 하는 것보단 훨씬 낫다는 생각이 들어요. 앞으로는 작업 내역과 질문 흐름을 보며 더 많이 학습해보려고 합니다.
과정 중에 어떤 시행착오를 겪었나요?
앱을 만들고 test를 해보니 예상치 못한 오류들과 UI 버그가 많았어요. 예를 들어:
어떤 기록은 팝업으로 열리고, 다른 건 하단에서 열리는 등 UI 동작이 일관되지 않았고,
프로필 등록이 제대로 되지 않거나, 입력한 데이터가 반영되지 않는 경우도 있었습니다.
수정 요청 시 단순히 텍스트로 설명하는 것보다는 화면을 캡처해 에러 상황이나 원하는 동작을 시각적으로 보여주는 방식이 훨씬 효과적이라는 점도 배웠습니다.
도움이 필요한 부분이 있나요?
'프로필'에서 반려동물 추가 기능을 구현할 때 유독 많은 에러가 발생했어요. Replit에서는 문제를 계속 수정해줬다고 했지만, 결국 약 8번이나 시도한 끝에야 정상 작동이 가능했죠. 😅
최종적으로 받은 해결 메시지는 다음과 같아요:
√ 서버 재시작 완료!
√ API 라우트 우선순위 조정 완료
√ JSON 응답 헤더 자동 설정
이걸 겪으며 궁금했던 건 이런 거예요:
처음부터 제가 프롬프트를 어떻게 작성하거나 PRD에 어떤 내용을 명확히 포함했다면, 이런 반복적인 오류를 줄일 수 있었을까요?
또 하나, 각 값들을 기록하는 버튼은 잘 만들어졌는데도 '저장'이 되지 않는 에러가 발생해서 꽤 여러 번 시도한 끝에야 해결할 수 있었어요. 개발자 도구의 콘솔 탭에서 어떤 메시지가 뜨는지를 캡처해서 Replit에 공유하는 과정을 반복하면서요. 😵💫
이런 문제도 혹시 더 쉽게 해결할 수 있는 방법이 있을까요?
도움 받은 글 (옵션)
PRD Builder GPT, 개발자F 사례글 작성 GPT, 유튜브 윤자동 레플릿 사용법 영상 등
마무리하며...
코드를 모르는 입장에서 Replit에게 최대한 구체적으로 설명한다고는 했지만, 역시 명확한 요구사항 기술과 디버깅 방법에 대한 이해가 정말 중요하구나 하는 걸 크게 느꼈습니다.
바야흐로 바이브코딩 시대! 아주 복잡한 게 아니라면, 정말 내가 필요한 앱은 내가 직접 만들어 쓸 수 있는 시대가 온 것 같아요. 사랑하는 반려동물에게 우리가 원하는 건 딱 하나, 건강하게 오래오래~ 함께 하는 것. 사랑하는 반려동물을 위해, 여러분도 한 번 도전해보세요. 🐶💖
