아니 학교에서 대회 참여만 해도 마일리지를 준다는 거임.
근데 이 마일리지가 그냥 점수가 아니라 돈으로도 교환 가능하다고 함.
이걸 누가 안해? ㅋ
문제는 시험기간이었고,
대회가 있다는 걸 너무 늦게 알아버린나,
거기에 마감은 3일밖에 안남음..
그래서 첨엔
"참여에 의의를 둔다" 로 시작했다
근데 또 막상 시작하려니까
내 성격상 그게 잘 안됐다.
(완벽주의 + 실용주의 + 감자지만 멋있는 감자가 되고 싶은 곤란한 유형)
그래서, 2일 만에 뭘 만들었냐
처음에는 그냥..
예산관리 플랫폼을 만들까 했다
근데 차별성이 없잖냐..
우선 "예산관리" 자체는 너무 흔했고,
굳이 만들었는데 타 어플이랑 차별성도 없으면
무의미한 프로젝트라고 생각했다.
그래서 방향을 바꿨다.
"누가 실제로 쓸까?" 를 기준으로
마침 나는 내년에 학생회 할 예정인데,
학생회에서 항상 문제 제기 되는게 있다.
바로 예산 투명성,
그리고 그 끝에 항상 따라붙는 횡령 이슈
대부분의 문제는
- 증빙자료가 제대로 남아있지 않음
- 확인하기 어려운 구조
즉, 증빙이 제대로 되고 있는지를 확인하기 어렵다.
그래서 단순한 예산 관리가 아니라,
투명하게 공개되고,
증빙이 자동으로 남는 예산 관리 플랫폼
→ 자치기구와 학생회를 위한 예산 관리 자동화 플랫폼
을 만들어보기로 했다.
프로젝트 소개
해당 프로젝트는 앞서 말했듯,
학생회를 포함한 소규모 조직을 대상으로 한
투명한 예산 관리 및 증빙 자동화 플랫폼이다.
학생회 예산 관리에서 가장 자주 문제가 되는 부분은
금액 자체보다도 과정의 불투명함이라고 생각했다.
- 지출 내역은 존재하지만 증빙 내역이 부족하거나
- 증빙도 있지만 확인하기 어려운 구조이거나
- 결국 신뢰 문제로 이어지는 모든 경우..
그래서 이 프로젝트의 핵심 목표는 단순했다.
"모든 지출이 자동으로 증빙되고,
누구나 예산 흐름을 확인할 수 있게 하자"
핵심 기능
주요 기능은 다음과 같다.
- 예산 지출 내역 등록
- 영수증 이미지 업로드
- OCR을 통한 영수증 정보 자동 추출
- 지출 내역 + 증빙 자료 동시 저장
- 전체 예산 흐름 조회
특히 증빙 자동화를 핵심 기능으로 두고,
사용자가 직접 모든 정보를 입력하지 않아도
영수증 이미지 하나로 최소한의 데이터가 자동생성되도록 설계 했다.
[프로젝트 소개 자료]
https://www.miricanvas.com/v/156dr3d
https://github.com/HBNU-SWUNIV/ossw-competition25-yee
전체 시스템 구조
2일이라는 짧은 기간 동안 진행된 프로젝트였기 때문에
구조는 최대한 단순하게 가져가되,
실제 서비스 흐름과 크게 어긋나지 않도록 구성했다.
Vue (Frontend)
↓ REST API
FastAPI (Backend)
↓
Firebase (Auth / DB)
↓
Azure OCR
- Frontend: 사용자 입력 및 결과 시각화
- Backend: 인증 검증, 비즈니스 로직 처리, OCR 연동
- Firebase: 인증 및 예산 데이터 저장
- Azure OCR: 영수증 이미지 → 텍스트 데이터 변환
기술 스택 선정 이유
"2일 안에 안정적으로 구현 가능한가"
■ Frontend – Vue
React도 고려했지만,
짧은 시간 안에 화면 구성과 상태 관리를 빠르게 하기에는
Vue가 더 적합하다고 판단했다.
(React는 한 번 이해하면 쉽지만, 초보자에겐 너무 어려운.. 흡끍덕발덕
개발자가 계속 공부해야하는 이유 중에 하나랄까..)
컴포넌트 구조를 단순하게 가져갈 수 있고,
초기 설정 부담이 적다는 점도 선택 이유 중 하나였다.
■ Backend – Flask
이번 프로젝트에서는 FastAPI를 사용해 백엔드를 구성했다.
단기간 프로젝트였기 때문에
복잡한 도메인 분리나 과도한 아키텍처보다는,
명확한 엔드포인트와 빠른 연동이 더 중요하다고 판단했다.
FastAPI는
- 비동기 처리 지원으로 OCR API 연동에 유리하고
- 요청/응답 구조를 명확하게 정의할 수 있으며
- 간단한 설정만으로도 안정적인 API를 빠르게 구성할 수 있다는 점에서
이번 프로젝트의 성격에 잘 맞았다.
FastAPI를 사용해 다음과 같은 API들을 구성했다.
- OCR 연동 API (영수증 이미지 처리)
- 예산 데이터 등록 및 조회 API
2일짜리 프로젝트였지만,
실제 서비스 흐름을 기준으로 API를 나누고 구성하려고 했다.
■ Database / Auth – Firebase
테스트 성격의 프로젝트였고,
대규모 데이터 처리나 복잡한 쿼리는 필요하지 않았다.
Firebase를 사용해
- 사용자 인증
- 예산 데이터 저장
을 빠르게 구성했고,
서버에서 별도의 인증 로직을 거의 구현하지 않아도 된다는 점이
단기간 프로젝트에 잘 맞았다.
■ OCR – Azure OCR
이 프로젝트에서 OCR은 단순 보조 기능이 아니라,
증빙 자동화의 핵심이었다.
그래서 OCR 엔진 선택에도 나름의 기준이 있었다.
여러 OCR 서비스를 비교해봤는데,
각각 다음과 같은 이유로 제외했다.
- Google OCR
한국어 인식 자체는 지원하지만,
영수증처럼 글자가 작고 밀집된 이미지
→ 인식 정확도가 기대만큼 나오지 않는 경우가 있었다.
- Naver OCR
국내 서비스인 만큼 정확도는 충분히 좋아 보였지만,
사용을 위해 별도의 승인 절차가 필요
→ 단기간 프로젝트 일정상 바로 적용하기에는 시간이 애매했다.
반면 Azure OCR은
- 한국어 인식 정확도가 비교적 안정적이었고
- API 사용 절차가 단순하며
- 결과 포맷이 정형화되어 있어
→ 빠르게 파싱 로직을 구성하기에 적합했다.
단기간에 구현해야 하는 프로젝트 특성상,
“지금 바로 쓰면서 안정적인 결과를 얻을 수 있는가”가 가장 중요했고
그 기준에서 Azure OCR이 가장 합리적인 선택이었다.
증빙 자동화 처리 흐름
증빙 자동화는 다음과 같은 흐름으로 동작한다.
- 사용자가 영수증 이미지를 업로드
- 프론트엔드에서 이미지를 서버로 전달
- Flask 서버에서 Azure OCR API 호출
- OCR 결과에서 날짜, 금액, 상호명 추출
- 추출 데이터 + 원본 이미지 URL을 함께 저장
이를 통해,
이미지는 증빙으로 남고,
텍스트 데이터는 자동으로 예산 내역이 되는 구조를 만들었다.
■ 증빙 자료 공유 기능 (읽기 전용 공개 페이지)
학생회 예산에서 중요한 건
“증빙이 있다”는 사실보다도
“언제든지 확인할 수 있다”는 점이라고 생각했다.
그래서 증빙을 내부에서만 관리하는 구조가 아니라,
읽기 전용으로 공유할 수 있는 증빙 페이지를 별도로 구현했다.
■ 공유 방식
- 증빙 자료 페이지는 링크 기반으로 생성
- 해당 링크는 QR 코드로도 공유 가능
- 링크에 접속하면 읽기 모드(Read-only) 로만 접근 가능
즉,
외부 사용자는 수정은 불가능하고
확인만 가능한 구조다.
■ 읽기 모드 페이지
- 해당 자치기구(학생회) 구성원 목록
- 등록된 모든 증빙 자료 리스트
- 증빙 자료를
- 연 / 월 / 일 기준으로 필터링하여 조회
단순히 리스트만 보여주는 게 아니라,
실제 회계 확인 상황을 고려해
기간 단위로 빠르게 확인할 수 있도록 구성했다.
■ PDF / CSV 추출 기능
증빙 자료는
화면에서 바로 확인할 수도 있지만,
필요한 경우 문서로 추출할 수 있도록 했다.
- 선택한 기간 기준으로
- PDF 추출
- CSV 추출
- 회계 보고서 제출이나
외부 감사용 자료로 바로 활용 가능
즉,
"보여주기용"이 아니라
"실제로 제출 가능한 증빙 자료"를 만드는 데 초점을 맞췄다.
프로젝트 후기
솔직히 말하면,
2일짜리 프로젝트에 얼마나 기대를 했겠나..
그런데 결과적으로 수상까지 하게 됐고,
(교내대회이긴하지만 캡스톤 팀들과도 겨룸)
짧은 시간이라도
문제 정의가 명확하면 충분히 경쟁력이 있을 수 있다는 걸 느꼈다.
기술적으로 아주 복잡한 프로젝트는 아니지만,
실제 문제를 기준으로 기획하고
끝까지 동작하는 형태로 만들었다는 점에서 의미가 있었다.
그리고 나는...
내년 학생회 활동을 하면서
실제로 사용 가능한 서비스로 발전시켜보고 싶다.
4개의 댓글
Azure OCR: 영수증 이미지 → 텍스트 데이터 변환...
CLOVA OCR도 배치로 잘되는데... 긁적긁적 (상당히 서운하다)
똥 움냠냠움냠냠