개발 과정 전체 흐름
PRD 작성 → Gemini 2.5 Pro로 개선(클로드 4도 이용해봄) → GPTs(ChatPRD)로 마크다운 변환
→ Lovable에서 디자인 구현 → Cursor AI에서 개발 작업
→ GitHub 업로드 → Vercel 배포로 완성개요
안녕하세요. 이번에 모바일 출장 데이터 수집 앱을 1차?라고 해야하나요? MVP라는 단어를 사용하던데 그 정도라고 보면 되려나요...?
여튼 간단하게 초기 개발한 경험을 공유하고자 합니다. 처음 시도해보는 앱 개발이었지만, 스터디 도움으로 1차적으로 만들어볼 수 있었습니다.
초기 목표 설정
처음 계획은 모바일과 PC 간 동기화가 가능한 앱을 만드는 것이었습니다. 하지만 이를 위해서는 백엔드 개발이 필요하다는 것을 알게 되었습니다. 뭐지ㅠㅠ(felo, genspark에 물어보고 좌절)
난관 발생 → 목표 수정
주 목적이 재산세(복잡해서 일부만) 계산 민원 상담 도우미 개발이 업무였고, 이것은 애초 목적이 가볍게 며칠 정도 사용할 도구였기에 다음과 같이 방향을 수정했습니다:
모바일 웹앱으로 개발 방향 변경
PC 동기화 기능 제외
대신 사무실에서 확인 가능하도록 파일 생성 및 첨부하여 이메일 전송 기능 추가
1단계: 요구사항 변화 및 PRD 작성
Gemini 2.5 Pro와 Claude 4를 활용하여 작성한 요구사항을 체계적인 PRD로 발전시켰습니다. 두 AI의 서로 다른 관점을 비교 검토하여 더욱 완성도 높은(?) 문서를 만들 수 있었습니다.
# 프로그램 설명
- 모바일 출장 데이터 수집 앱
- 로그인 기능 별도로 없음.
- 모바일에서 입력한 데이터를 휴대폰이나 태블릿 내부 저장소에 저장할 수 있는 기능
- 위치‧건물 정보를 입력·저장하고 DOCX 형식으로 보고서를 내보낼 수 있음
- DOCX 형식으로 추출이 될 때는 한글로 정상적으로 추출이 되어야 함
- 추출이 될 때에는 각 제목은 14pt, 텍스트 입력된 내용은 12pt
- 주요 기능: 데이터 입력 / 저장된 장소 / 보고서 내보내기
- 데이터 입력 폼: 필수 항목은 지번·주소, 장소 유형(예시: 종교시설, 영유아시설, 주차장, 유흥주점, 멸실, 신축 선택)
- 데이터 입력 중 선택 항목은 건물 층수(B3,B2,B1,1,2,3,4,5층,6층,7층)·내부 정보(텍스트), 특이사항·메모(텍스트)
- 사진 업로드(층별로 최대 3장) + 미리보기·개별 삭제 기능
- 각 층별 사진은 사진첩에서 선택할 수도 있고 카메라로 촬영할 수도 있는 선택지 제공
- 층별 정보 입력 후 추가 버튼을 통해 다음 층수 입력 가능
- 저장 기능은 새 항목 저장 또는 기존 항목 수정
- 저장 시 timestamp 자동 기록
- 저장된 장소 요약‧사진 썸네일 표시
- 저장된 내용의 항목별 수정·삭제 버튼
- 삭제 전 확인 모달 팝업
- 알림: 성공·오류·경고 메시지 1초간 표시
- 저장 파일 형식은 DOCX: 다운로드 시뮬레이션 알림 후 파일 생성
- 메일로 docx 파일 내보내기 기능
- 내보내기 미리보기: 총 장소 수, 각 장소 유형·주소·사진 수 요약
- locations 배열에 장소 객체 저장
- id, address, locationType, floors, notes, photos[], photoData[], timestamp
- 상태 변경 시 localStorage.locationData 에 자동 동기화
- 초기 렌더링 시 저장 데이터 로드·파싱
- UI/UX는 TailwindCSS 클래스로 반응형 레이아웃·스타일링
- 주요 아이콘: Save, Camera, Edit2, Trash2, Download,
#지시
프로그램 설명을 기반으로 잘 구조화된 PRD(Product Requirements Document)를 만들어줘.세부 내용은 커서로 작업했습니다.
2단계: 개발하기
Lovable을 통한 디자인 구현
PRD를 바탕으로 Lovable에서 초기 디자인과 기본 구조를 생성했습니다. 이를 통해 전체적인 UI/UX 방향을 설정할 수 있었습니다.
Cursor AI를 활용한 본격 개발
GitHub에서 Lovable 작업 결과물을 가져와 시작
Claude 4 Sonnet 모델을 종종 활용하여 핵심 기능 구현
단계별로 기능을 완성해나가며 점진적 개발 진행
3단계: 배포 과정에서의 문제 해결
발생한 문제
개발은 완료했지만 실제 앱으로 배포하는 방법을 몰라 막막한 상황이었습니다. 커서에서 했는데... 커서가 다 해주는 거 아니었나?ㅠ
해결 과정
다행히 스터디 톡방에서 도움을 받을 수 있었습니다. 로즈 스터디장님의 정확하고 친절한 안내(cursor → vercel 마무리)로 다음과 같은 배포 과정을 학습했습니다.
GitHub Repository 생성
새로운 저장소 생성 및 주소 복사
코드 업로드
Cursor AI의 Agent 기능 활용
"이 코드를 GitHub에 업로드해줘. 내 repository는 ~~~야"라는 간단한 요청으로 자동 업로드(이것도 방법이 있는데 몰라서 물어봤더니 해주더라구요)
커서에게 github 업로드 방법 물어보기
Vercel 배포
Vercel에서 "Add new..." 선택
GitHub repository import
Deploy 버튼 클릭으로 배포 완료
1차 완성품
Vercel에서 생성된 도메인 주소로 앱 접근 가능
모바일에서 홈 화면 추가하여 네이티브 앱처럼 사용
커서에서 기능 개선(코드 수정) 요청 시 자동으로 앱에 반영되는 부분이 놀라웠음
아직 부족하지만 이제는 조금씩 개선하는 방향으로 진행하려고 합니다.
학습한 부분
PRD 작성 경험치
Cursor AI, Vercel 등 기초적인 활용법 습득
GitHub 생기초 이해(?)
웹앱 배포 및 운영 프로세스 경험
소감
정말 이번 스터디 한 거 정말 잘했다는 생각이 들었습니다.
언제 제가 자그마하다고 하지만 이런 거 만들 수 있었을까요...
단순히 작은 앱을 하나 만든 것을 넘어서, 개발 프로세스를 경험하고 커서, vercel과 같은 도구들을 활용하는 기초적인 방법을 배울 수 있었습니다.
개인 맞춤형 웹앱이라도 어떻게 해볼 수 있다는 게...
특히 스터디의 도움이 큰 힘이 되었습니다. 월요일 강의도 마찬가지였구요.
저희 스터디 멤버분들 고수분들이 많으신데요... 저는 그에 비하면 아는 건 미미하지만 다들 알고 계신 걸로 조언해 주시려고 하는 모습에 또 다른 에너지를 얻었습니다.
올 한 해는 업무가 좀 바쁜 해여서 일정 상 좀 아쉽지만 이번 기수에 배운 게 정말 알차서 내년 기수에는 반드시 꼭 하고 싶다는 생각이 들었습니다.
물론 지금 16기도 잘 마무리 하고 싶습니다^^
감사합니다.
커서에서 claude 4 sonnet 정말 좋은 거 같습니다.(초심자 느낌) opus는 제한 걸릴까봐 못 썼습니다.
