프로젝트 배경 및 동기
"출장 나갈 때 A4용지에 주소를 적어서 바닥에 놓고 사진을 찍어. 그래야 출장 갔다 와서 사진 찍은 곳이 어딘지 기억할 수 있어. 우린 구글 서비스 접속도 잘 안 되잖아."
업무가 올해 바뀌어 새롭게 맡은 업무 중 출장에 대한 조언입니다.
과거의 노하우는 분명 큰 도움이 됩니다. 때로는 디지털보다 아날로그 방식이 더 효과적일 때도 있지요.
다만 종이에 주소를 적고 사진을 찍는 전통적인 방식을 개선해보고자 이 프로젝트를 시작했습니다.
문과에 개발지식은 0 ... 초보입니다. 물론 저희 팀에서는 컴퓨터 다룰 줄 아는 분이 없어 믿지 못하시겠지만 별명이 얼리어댑터입니다.(최신 기기는 하나도 없음)
훌륭하신 분들과 함께해서 다소 부끄럽지만 올려봅니다.
개발 과정
1. 활용한 도구
Gemini: PRD(제품 요구사항) 초안 작성
ChatGPT: PRD를 마크다운 형식으로 변환
Lovable: UI 디자인 구현
2. 단계별 진행 방법
2.1 요구사항 정리
메모장에 필요한 기능들을 간략히 정리한 후, AI 도구(GPT, Claude, Gemini)를 활용해 구체화했습니다.
2.2 Gemini Canvas 활용
로즈님께서 공유해주신 예시를 참고하여 제미나이 2.5에 다음과 같이 입력했습니다:
#프로그램 설명
[메모장에 내용 정리한 부분 복사 붙여넣기]
---
# 지시
이 PRD를 CursorAI IDE에서 사용할 건데 좀 개선해줘.2.3 ChatGPT의 ChatPRD 활용
Gemini에 서 나온 결과물을 ChatGPT의 ChatPRD 기능을 통해 마크다운 형식으로 재구성했습니다:
[제미나이 내용 붙여넣기]
# 이 PRD를 cursorAI IDE에서 사용할 md 포맷으로 재구조화해줘.결과물은 깔끔한 마크다운 형식의 PRD 문서였으며, 전체 내용은 아래와 같습니다.
# 모바일 출장 데이터 수집 앱 - 제품 요구사항 정의 (PRD)
## 📌 개요
본 문서는 모바일 환경에서 출장 중 위치 및 건물 데이터를 효율적으로 수집하고 관리하기 위한 애플리케이션의 제품 요구사항을 정의합니다. 수집된 데이터는 브라우저의 Local Storage에 안전하게 저장되며, 필요에 따라 PDF 또는 DOCX 형식의 보고서로 내보낼 수 있습니다.
## 🎯 목표
- **비즈니스 목표**
- 현장 데이터 수집 프로세스 간소화
- 오프라인에서도 작동 가능한 모바일 솔루션 제공
- 보고서 생성 및 제출 시간을 단축
- **사용자 목표**
- 빠르고 직관적인 모바일 UI로 데이터 입력
- 저장된 장소에 대한 손쉬운 조회/수정/삭제
- 다양한 보고서 포맷으로 출력 가능
- **비목표 (Non-goals)**
- 중앙 서버 연동이나 실시간 동기화 기능은 포함하지 않음
- 사용자 인증 및 권한 관리 기능은 현재 범위에서 제외
## 🧩 주요 기능
- 위치 및 건물 데이터 입력 (주소, 장소 유형 등)
- 로컬 저장(Local Storage) 및 수정/삭제 기능
- 저장된 장소 목록 조회
- 보고서 PDF/DOCX 형식으로 내보내기
- 사용자 작업에 대한 알림 제공
## 🔁 사용자 Flow
1. 앱 실행
2. 데이터 입력 화면 접근
3. 필수 및 선택 항목 입력, 사진 촬영/업로드
4. 층별 정보 필요 시 추가
5. 데이터 저장
6. 장소 목록 확인
7. 기존 장소 수정/삭제
8. 보고서 내보내기 화면 이동
9. 보고서 형식 선택 (PDF/DOCX)
10. 미리보기 및 다운로드
## 📋 기능 상세 요구사항
### 5.1. 데이터 입력 폼
- **필수 항목**
- 지번/도로명 주소 (텍스트 입력)
- 장소 유형 (드롭다운/라디오 버튼): 종교시설, 영유아시설, 주차장, 유흥주점, 멸실, 신축 등
- **선택 항목**
- 건물 층수: B3 ~ 7층
- 내부 정보, 특이사항/메모: 텍스트 입력
- **사진 업로드**
- 층별 최대 2장 업로드
- 미리보기 및 개별 삭제 가능
- **층 추가**
- '층 추가' 버튼으로 필드 동적 생성
### 5.2. 데이터 저장 및 편집
- **저장**
- ‘저장’ 버튼 클릭 시 Local Storage에 저장
- 저장 시 timestamp 자동 생성
- **편집**
- 목록에서 항목 선택 후 ‘수정’ 버튼 클릭 시 기존 데이터 로드
- 수정 후 ‘저장’ 클릭 시 데이터 업데이트 (timestamp 처리 여부 TBD)
### 5.3. 장소 목록
- 저장된 장소 전체 리스트 제공
- 각 항목에 요약 정보 및 첫 번째 사진 썸네일 노출
- '수정' 및 '삭제' 버튼 제공
- 삭제 시 확인 모달 ("정말 삭제하시겠습니까?")
### 5.4. 알림
- 사용자 작업 후 알림 표시 (저장/수정/삭제/내보내기 등)
- 성공/오류/경고 상태 구분
- 화면 상단 또는 하단에 3초간 표시 후 자동 사라짐
## ✅ 성공 지표
- 사용자당 평균 입력 시간 감소
- 보고서 출력 비율 및 성공률
- 저장된 데이터의 오류율 감소
- 사용성 테스트 후 사용자 만족도 80% 이상
## ⚙️ 기술 고려사항
- Local Storage 용량 제한 검토
- PDF/DOCX 생성 시 클라이언트 기반 라이브러리 사용
- 이미지 업로드 용량 최적화 필요
- 모바일 환경에서의 성능 및 UX 최적화
## ⏳ 마일스톤 및 시퀀싱
1. 기능 정의 및 화면 설계 (XX주)
2. 데이터 입력 및 저장 기능 개발 (XX주)
3. 목록 및 수정/삭제 기능 개발 (XX주)
4. 보고서 내보내기 기능 개발 (XX주)
5. QA 및 사용자 피드백 수집 (XX주)
6. 릴리스 준비 및 배포 (XX주)2.4 디자인 참고 선택
디자인 참고를 위해 두 가지 사이트를 활용했습니다:
원하는 디자인을 찾아 캡처했습니다.
2.5 Lovable에서 UI 구현
Lovable에 캡처한 디자인 이미지를 업로드하고 PRD 내용을 붙여넣어 실제 UI를 구현했습니다.
주요 화면 구성입니다.
3. 개선 사항 및 배운 점
개선 필요사항
a. 커서에 대한 이해도가 거의 없다는 게 첫 번째 문제
b. 내보내기가 안 됨. 알림만 뜸ㅠ
c. 내보내기 했을 때 사진의 해상도 개선이 가능하면 좋겠다.
d. 모바일에 저장했던 것이 사무실에 와서도 바로 확인이 가능하면 좋겠다. 그러면 굳이 파일 내보내기를 하지 않아도 될 것 같다.
e. 자료는 3개월 후 전부 삭제되는 것이 좋겠다. 사진 같은 경우 어차피 공개된 곳이고 내부 사진이긴 하지만 교회나 어린이집 또는 건축 중인지 아닌지 판단, 유흥주점 면적 파악 등 그것도 필요 시 촬영이기 때문이다.
그럼에도 불구하고 기록하는 부분에 어떤 것이 들어갈지 모르니 자동 삭제기능을 넣는 것도 좋다는 생각이다.
배운 점
1주차만 참여해봤지만 온라인뿐만 아니라 오프라인에서 다양한 생각과 아이디어를 나눌 수 있어 매우 유익했습니다. 훌륭한 분들과 함께하면서 때로는 부끄러운 순간도 있었지만, 오랜만에 다양성의 에너지라고 해야할까요... 그런 것들을 느낄 수 있었습니다.
토요일 모임은 개인 일정으로 참여가 어려울 것 같아 아쉽지만, 온/오프라인 1주차만 경험했 음에도 큰 배움을 얻었습니다. 시간이 허락한다면 다른 기수에도 참여해보고 싶은 소중한 경험이었습니다.(토요일 때문에 좀 고민이긴 합니다)
제가 초보인 부분이라 따라가고 있지만 토요일에도 기다려주시고 긍정적인 기운을 주신 스터디장 로즈님과 스터디원분들께 감사드립니다.
원래 두 개 만들려고 했는데... 커서 열심히 배워서 틈틈이 이어나가도록 하겠습니다.