Daily 사례글 - (250921) n8n해커톤가서 n8n말고 바이브코딩으로 영수증 정리앱 만든 썰 (구상, PRD, 러버블 초벌구이, 커서 편집, 파이어베이스 배포) - 부제 : 본부장님은 이제 더이상 풀칠을 하지 않으셔도 됩니다.

지출결의서 자동 완성 웹앱 PRD (Product Requirement Document)
1. 개요

본 문서는 영수증 이미지를 업로드하면 해당 이미지 내의 정보를 추출하여 지출결의서 양식에 자동으로 기입해주는 웹 애플리케이션 개발에 필요한 기능 및 요구사항을 정의한다. 이를 통해 사용자(기업/개인 사업자)의 수기 작성 업무 부담을 줄이고, 지출결의서 작성의 효율성과 정확성을 높이는 것을 목표로 한다.

2. 목표

영수증 이미지 업로드 시 지출결의서 필수 정보(발의일, 계정과목, 지출명, 금액, 거래처 등) 자동 추출 및 기입.

사용자 친화적인 UI/UX 제공.

다양한 영수증 형식(카드 영수증, 간이 영수증, 세금계산서 등) 지원.

데이터 정확성 및 보안성 확보.

3. 주요 기능

3.1. 사용자 관리 (선택)

회원가입/로그인: 이메일 또는 소셜 로그인 (선택 사항)

프로필 관리: 사용자 정보 수정 (선택 사항)

3.2. 영수증 업로드 및 OCR (광학 문자 인식)

영수증 이미지 업로드:

단일/다중 이미지 업로드 지원 (JPG, PNG 등 이미지 파일 형식)

드래그 앤 드롭 또는 파일 선택 방식

OCR 기반 정보 추출:

영수증 이미지에서 다음 정보 자동 추출:

발의일 (거래일자): 영수증에 표기된 거래 일자

지출명 (품명/내역): 구매한 상품/서비스 명칭 (복수 품목일 경우 주된 품목 또는 대표 품목)

금액: 총 결제 금액

거래처 (가맹점명): 결제한 상점/기관 명칭

세부내역 (선택적): OCR 기술의 한계 및 영수증 형태에 따라 추가 필드 혹은 수동 입력 유도

추출된 정보의 정확성 향상을 위한 후처리 로직 (예: 날짜 형식 통일, 숫자 정규화 등)

3.3. 지출결의서 자동 완성 및 편집

지출결의서 양식 불러오기:

업로드된 영수증 이미지와 함께 제공된 지출결의서 양식을 기반으로 웹 페이지에 양식 구현.

![alt text](https://example.com/receipt_form.png)

추출 정보 자동 기입:

OCR로 추출된 정보를 해당 지출결의서 필드에 자동 기입.

발의일 -> 발의일 필드

거래처 -> 거래처 필드

금액 -> 금액 필드 및 총계 필드

지출명 -> 지출명 필드 및 세부내역의 첫 번째 행 세부내역 필드

관련 근거 문서, 계정과목, 비고 등의 필드는 초기에는 공란으로 두거나, 사용자가 미리 설정한 기본값으로 채울 수 있도록 옵션 제공.

수동 편집 기능:

자동 기입된 정보가 부정확하거나 누락된 경우, 사용자가 직접 해당 필드를 클릭하여 수정 및 추가 가능.

세부내역 필드는 여러 줄 추가 및 각 금액 입력 가능.

계정과목 드롭다운 메뉴 또는 자동완성 기능 (사전 설정된 계정과목 리스트에서 선택).

금액 계산:

세부내역에 입력된 금액들의 합계가 총계에 자동으로 반영되도록 구현.

총계 필드는 자동 계산되어 수정 불가 (읽기 전용).

미리보기:

완성된 지출결의서의 최종 형태를 미리 볼 수 있는 기능.

3.4. 저장 및 출력

저장:

완성된 지출결의서를 웹앱 내에 저장 (사용자 계정별 관리).

초안/완료 상태 구분.

다운로드:

작성된 지출결의서를 PDF, Excel 등 문서 형태로 다운로드.

인쇄:

작성된 지출결의서를 웹에서 직접 인쇄.

3.5. 대시보드 (선택)

월별/연도별 지출 현황 요약.

작성된 지출결의서 목록 조회 및 검색.

4. 기술 스택 (예시)

프론트엔드: React, Vue.js, Angular 등 (또는 Next.js/Nuxt.js 등 프레임워크)

백엔드: Node.js (Express), Python (Django/Flask), Java (Spring Boot) 등

데이터베이스: PostgreSQL, MySQL, MongoDB 등

OCR 엔진: Google Cloud Vision AI, AWS Textract, Naver Clova OCR 등 (또는 오픈소스 Tesseract)

클라우드 플랫폼: AWS, GCP, Azure 등 (호스팅 및 OCR 연동)

기타: 웹 스토리지 (S3, GCS) for 이미지 저장

5. UI/UX 요구사항

직관적이고 사용자 친화적인 인터페이스.

반응형 웹 디자인으로 다양한 기기(PC, 태블릿)에서 사용 가능.

진행 상황 표시 (로딩 스피너, 성공/실패 메시지).

오류 메시지는 명확하게 사용자에게 안내.

6. 비기능적 요구사항

성능: 영수증 업로드 후 정보 추출 및 자동 완성까지의 시간 최소화.

보안: 사용자 데이터 및 금융 정보 보호를 위한 데이터 암호화, 접근 제어, OWASP Top 10 취약점 방어.

확장성: 향후 기능 추가 (예: 다른 문서 자동화, ERP 연동)를 고려한 아키텍처 설계.

안정성: 서비스 장애 최소화, 높은 가용성 확보.

호환성: 주요 웹 브라우저 (Chrome, Firefox, Safari, Edge) 지원.

7. 향후 개선 및 확장 가능성

ERP/회계 프로그램 연동: 작성된 지출결의서 정보를 기존 ERP 또는 회계 프로그램으로 자동 전송.

전자 결재 시스템 연동: 작성된 지출결의서를 전자 결재 시스템으로 올려 승인 절차 진행.

다국어 지원: 여러 언어의 영수증 및 인터페이스 지원.

모바일 앱: 웹 앱 기능을 모바일 앱으로 제공.

카드 내역 연동: 법인 카드 또는 개인 카드 사용 내역을 직접 연동하여 지출결의서 자동 작성.

계정과목 자동 분류: AI/머신러닝 기반으로 지출명에 따른 계정과목 자동 제안.

8. 개발 일정 (예상)

기획/설계: 2주

프론트엔드 개발: 4주

백엔드 개발: 4주

OCR 연동 및 테스트: 3주

통합 테스트 및 디버깅: 2주

배포 및 안정화: 1주

이 PRD는 웹앱 개발을 위한 기본적인 틀을 제공합니다. 개발 과정에서 추가적인 논의와 사용자 피드백을 통해 계속해서 구체화될 수 있습니다.

이거 PDF 출력물이 지켜야하는 양식인데 JSON 파일 만들어줄래?

이 모양이 PDF 양식에 반영되도록 해줘

PDF 인쇄할때 첨부한 영수증 이미지도 같이 붙여줘

PDF에 흰화면만 있는데?

영수증 이미지가 한 페이지에 들어가도록 이미지 사이즈를 고정해줘

영수증 이미지 조정해서 PDF 생성시 무조건 한페이지에 들어가도록 해주고, 영수증 이미지 붙이는 섹션이 깔끔하게되도록 구획을 정해줘

FIREBASE로 -> 콘솔로 이동 -> 프로젝트 만들기 -> 프로젝트 개요 -> 
프로젝트 설정 -> CURSOR로 가서 배포해달라고 에이전트한테 요청 "지금 프로젝트를 FIREBASE에 배포할거야." 라고 쓰고, firebase에서 npm 복사해서 넣음 -> 돌아감 -> 잘 모르지만 일단 Y누름 -> 중간에 FIREBASE CLI가서 AUTH코드 달래서 복붙해서 줌 -> DEPLOY COMPLETE 확인하면 끝