RIDE SALES — 차량 판매·출고 관리 시스템

핵심 성과 · 한눈에 보기

엑셀 수작업 → 하나의 시스템

여러 엑셀 파일에 흩어져 있던 계약·재고·출고·정산 업무를 단일 웹앱으로 통합 — 기획 리드와 프론트엔드 개발을 겸함

출고 문서 자동화 워크플로우 구현

출고품의서·자동차제작증의 생성 → 검수 → PDF → 발행을 시스템화해 수기 문서 작업을 제거

OCR 결과를 믿지 않는 검수 구조 설계

LLM(Claude Sonnet 4.5) OCR 초안을 사람이 보정한 뒤 발행하고, 주민등록번호는 발행 직전에만 비마스킹 재조회

프로토타입 900회+ 반복으로 요구사항 조율

AI 프로토타이핑으로 동작하는 시안을 URL로 공유하며 영업팀·개발팀 사이의 수정 왕복 비용을 축소

01문제 — 모든 것이 엑셀 안에 있었다

계약금부터 재고, 출고, 정산까지 모든 돈의 흐름이 여러 엑셀 파일에 흩어져 있었고, 같은 데이터가 곳곳에 중복돼 현황 파악부터가 일이었습니다.

더 어려운 건 언어였습니다. 같은 업무를 부르는 용어가 사람마다 달라 요구사항이 들을 때마다 흔들렸고, 앞선 기획도 이 지점에서 막혀 있었습니다. 제가 투입되어 처음부터 다시 잡았습니다.

이 프로젝트에서 증명하고 싶은 것

기획은 화면을 그리는 일이 아니라 흩어진 업무의 언어와 흐름을 하나로 합의시키는 일에서 시작한다는 것, 그리고 그 합의를 직접 코드로 구현할 수 있을 때 제품이 얼마나 빨라지는지입니다.

02접근 — 용어와 흐름부터 다시 정리했다

업무를 세 단계의 공통 언어로 재정의

화면보다 도메인부터 그렸습니다. 인터뷰를 반복하며 업무를 계약 → 재고 → 출고 세 단계로 재정의하고, 단계별 문서·상태값·예외 흐름을 함께 적어 팀 전체가 같은 그림을 보게 했습니다.

계약-재고-출고 도메인 흐름 정리 — 팀마다 다르게 부르던 업무를 계약 → 재고 → 출고 세 단계로 합의한 도메인 맵

이해관계자 사이의 돈·차량·서류 흐름 도식화

제조사(KGM) – 회사 – 영업사원 – 고객 사이에 차량과 돈, 서류가 어떻게 오가는지 플로우로 그렸습니다. 중간중간 붙은 메모는 영업팀 인터뷰에서 나온 예외 케이스들입니다.

세일즈 업무 플로우 다이어그램 — 제조사–회사–영업사원을 관통하는 업무 플로우. 합의될 때마다 다시 그렸다

해피패스가 아니라 예외부터 설계

실무 시스템은 취소·환불에서 무너집니다. 해약 주체별 환불·재등록 분기와 문서별 결재 프로세스까지 미리 그렸습니다.

세금계산서·영수증·환불 결재 프로세스 — 문서 유형별 결재 요청 → 승인 → 발행 프로세스

상태값과 계산 로직까지 문서로

상태값 정의와 손익 계산식처럼 다툼이 생기기 쉬운 규칙은 화면 시안 옆에 어노테이션으로 명시해 개발팀과 공유했습니다.

상태값 정의와 손익 계산 로직 어노테이션 — 상태값 정의와 손익 시뮬레이션 계산식 명세

출고 상세 화면 단위 상세 기획 — 출고 상세 화면의 동작·데이터 규칙 어노테이션

전체 기획 캔버스 전경 — 전체 기획 캔버스. 화면 정의 → 상세 기획 → 정책 메모가 한 판에서 관리됐다

말로 안 되면, 클릭되는 프로토타입으로

말로 합의가 안 되면 동작하는 프로토타입을 만들어 URL로 공유했습니다. 영업팀은 클릭해 보며 "이게 아니라 이거"라고 말할 수 있게 됐고, 버전이 900을 넘도록 고치며 의견을 좁혔습니다.

AI 프로토타이핑 도구로 만든 동작하는 프로토타입 — AI 프로토타이핑으로 만든 동작하는 시안. 영업팀·개발팀과 실시간으로 공유하며 의견을 좁혔다

개발자가 기획을 하면 달라지는 것

요구사항은 계속 뒤집혔지만, 구현 비용을 아는 사람이 중간에 서 있으니 무거운 요구는 대안으로 조정하고, 반영할 것은 그 자리에서 확정할 수 있었습니다.

03결과물 — 엑셀이 하던 일을 시스템이 한다

기준정보(사업자·회원·영업사원·고객·차량 모델)부터 계약, 재고, 출고, 결제 내역, 문서 발행까지 영업 업무 전체를 다루는 웹앱으로 만들어졌습니다.

대시보드 화면 — 대시보드 — 월 매출, 판매 대수, 진행중 계약을 한눈에

계약 상세 화면 — 계약 상세 — 매입 정보 · 계약/고객 정보 · 손익 시뮬레이션의 3단 구성

출고 상세 화면 — 출고 상세 — 매입/매출 견적 비교, 출고 차량 정보, 결제 내역과 문서 발행 상태

04Deep dive — 출고 문서 자동화

제가 직접 구현한 핵심 기능입니다. 수기로 만들던 출고품의서와 자동차제작증을 시스템 안에서 생성 → 검수 → PDF → 발행까지 처리합니다.

OCR로 읽고, 사람이 검수한다

제작증을 업로드하면 LLM(Claude Sonnet 4.5) 기반 OCR이 초안을 만들지만(파이프라인은 백엔드 구축), 발행 전 사람이 확인·수정하는 단계를 반드시 거치게 설계했습니다. 자동화보다 중요한 건 검수의 자리라고 판단했습니다.

제작증 OCR 업로드 모달 — 제작증 이미지/PDF 업로드 → OCR 파싱

제작증 발행 전 검수 모달 — 발행 전 검수 — 날짜·신청 여부 확인, 전체 OCR 데이터 수정 진입

문서 미리보기 = PDF의 원본

문서는 실제 서식 그대로 DOM으로 렌더링하고, PDF도 같은 DOM을 기준으로 생성(html-to-image + jsPDF)합니다. 보는 것과 발행되는 것이 항상 일치합니다.

민감정보와 도메인 규칙

주민등록번호는 마스킹 상태로 다루다가, 발행 직전에만 비마스킹 API로 재조회해 최신 값을 반영 — 민감정보 노출은 최소화하면서 문서 정확도는 보장
개인 / 개인사업자 / 법인사업자에 따라 문서 표기 방식 분기
공동명의자의 이름·주민등록번호를 줄바꿈 형태로 문서에 반영
공급가액 계산에 탁송료 포함 여부, 보험료, 구조변경 금액, 부가세 제외 기준까지 반영
발행일자와 양도일자를 분리해 반영

발행된 문서는 출고 건에 매핑

생성·발행된 문서는 파일 유형별로 출고 건에 매핑되어, 계약서·견적서·제작증·품의서·영수증을 한 화면에서 찾을 수 있습니다.

파일관리 모달 — 파일관리 — 문서 유형 필터와 출고 건 단위의 파일 매핑

05기술 스택

React TypeScript TanStack Query React Router Tailwind CSS Axios html-to-image jsPDF Figma / FigJam

06배운 것

기획은 언어를 정리하는 일에서 시작한다. 용어가 합의되지 않으면 화면을 아무리 그려도 요구사항은 계속 흔들린다.
만들 수 있는 사람이 기획하면 조정이 빨라진다. 구현 비용을 아는 상태에서 협상하면, 커트할 것과 반영할 것이 그 자리에서 정리된다.
자동화보다 중요한 건 검수의 자리다. OCR·자동 생성 문서처럼 틀리면 안 되는 것일수록, 사람이 확인하는 단계를 워크플로우에 심어야 한다.