바이브 코딩 실전 기록 - 비정형 문서 파서(Parser) 개발기

AI 기술로 다양한 문서의 데이터를 자동으로 추출하고 구조화하여, 번거로운 수기 입력 과정을 없애주는 서비스."

이미 몇차례 바이브 코딩으로 결과물을 만들었지만 개발 중 있었던 이슈나 기억해야할 내용 들을 기록해 놓치 못해서 아쉬웠다. 그래서 스스로의 바이브 코딩 과정을 기록하기로 했다. 

개요

• 프로젝트 이름: Synapse (시냅스)
• 한 문장 요약: AI 기술로 다양한 문서의 데이터를 자동으로 추출하고 구조화하여, 번거로운 수기 입력 과정을 없애주는 서비스.
• 페르소나: 역직구 쇼핑몰 대표 '김사장', 물류 포워딩 업체 직원 '박주임'
• 사용 시나리오:
  1. 김사장: 주문 내역으로 문서 자동 생성 후 물류사에 자동 전송.
  2. 박주임: 거래처에서 받은 문서 자동 파싱 후 내부 시스템에 입력.
  3. 박주임의 고객사: 전용 페이지에 문서를 직접 업로드하면 자동 파싱 및 저장.

이번 개발은 문서에서 내용를 추출하여 이를 구조화된 디지털 데이터로 저장하는 기능이다.  운영중인 서비스와 연관되어 무역서류들 관련 작업이 많다. 인보이스, 패킹리스트 등등 그런데 관련 업종 분들은 아시겠지만 대부분 이런 문서들의 내용은 중복되거나 유사항 내용들이 많다. 그런데 문서 형식만 달리 (각 회사별로 다름) 여러번 중복 반복 작성하거나 또 이 문서들에 기재되어 있는 내용들로  배송요청을 물류사에 할 경우 이 내용을 다시 타이핑을 하거나 물류사의 양식에 맞게 관련 서류들의 항목들을 복사 붙여넣기를 해야 합니다. 

문서상의 다양한 내용을 추출(파싱)하여 AI 기술로 텍스트와 데이터를 자동 추출 구조화된 디지털 데이터로 변환하는 서비스. 종이문서의 수기입력과정을 없애주는 솔루션

동기

전자상거래 셀러를 위한 배송 통합관리 시스템을 제공하고 있다 그런데 국제간 전자상거래의 물류업무 진행시 인보이스, 패킹리스트 등 여러 문서들이 전송되고 이를 수작업으로 중복 또는 반복 하여 동일한 내용을 온라인으로 입력하게 됩니다. 이런 수작업을 간소화 할수 있지 않을까 생각을 했다.

해결하려는 구체적 문제 

• 항목: 해결하려는 구체적인 문제
• 선택: 1) 수기 입력 오류 감소, 2) 반복 작업 간소화, 3) 문서 데이터의 디지털화, 4) 외부 시스템 연동을 통한 데이터 자동 전송.
• 근거: 국제 전자상거래 물류 과정에서 발생하는 핵심적인 비효율과 병목 지점을 해결.
• 영향: 이 네 가지 가치를 중심으로 핵심 기능을 설계하고, 마케팅 메시지를 구성함.

사용자 페르소나 

페르소나 1: 김사장님 (30대, 해외 역직구 쇼핑몰 대표)

• 상황: 하루 수십~수백 건의 해외 배송을 직접 처리하며, 매번 인보이스와 패킹리스트에 동일한 고객 정보와 상품 정보를 반복해서 입력하고 있습니다.
• 고통 (Pain Point):
  • 단순 반복 업무에 하루 중 너무 많은 시간을 뺏겨, 정작 중요한 마케팅이나 상품 개발에 집중하지 못합니다.
  • 가끔 정보를 잘못 입력하여 통관이 지연되거나 고객 클레임이 발생할 때마다 큰 스트레스를 받습니다.
• 목표 (Goal): 문서 작성 및 입력 업무를 자동화하여 '시간 낭비'를 없애고, 더 가치 있는 핵심 업무에 집중하고 싶어 합니다.

페르소나 2: 박주임님 (20대, 물류 포워딩 업체 직원)

• 상황: 하루 종일 수백 건의 무역 서류를 이메일이나 메신저로 받아, 회사 시스템에 수기로 입력하고 확인하는 것이 주된 업무입니다.
• 고통 (Pain Point):
  • 기존 OCR 솔루션의 정확도가 너무 낮아, 결국 모든 것을 눈으로 재확인하고 직접 입력하는 것이 더 빠를 정도입니다.
  • 정보가 누락되거나 잘못 입력되면 전체 물류 프로세스가 멈추고, 고객의 불평을 온전히 감당해야 합니다.
• 목표 (Goal): 비효율적인 수기 입력 업무에서 벗어나, 고객 문의에 더 빠르고 정확하게 응대하는 등 서비스 품질을 높이는 일에 기여하고 싶어 합니다.

최소한의 핵심기능 

• (기능 1) AI 문서 데이터화 엔진:
  • 가치: 이미지(JPG, PNG)나 PDF 형태의 어떤 무역 서류를 올려도, AI가 발송자, 수신자, 상품 목록, 가격 등 핵심 정보를 99%의 정확도로 자동으로 추출하고 구조화해줘요. 이를 통해 박주임님은 수기 입력과 검토에 드는 시간의 90%를 절약할 수 있습니다.
• (기능 2) 워크플로우 자동화 (문서 생성 & 전송):
  • 가치: 김사장님이 쇼핑몰 주문 데이터(엑셀 파일 등)를 업로드하면, 정해진 양식에 맞춰 인보이스와 패킹리스트 수십 장을 한 번에 생성하고, 버튼 하나로 지정된 물류사 시스템에 자동으로 전송해줘요. 송장 작성과 배송 요청에 걸리던 시간을 획기적으로 줄여줍니다.
• (기능 3) 고객사 전용 업로드 포털:
  • 가치: 박주임님이 각 고객사별로 고유한 문서 업로드 링크를 생성해서 전달할 수 있어요. 고객사는 이메일 대신 그 링크에 접속해 서류를 올리기만 하면 되므로, 커뮤니케이션 오류가 줄어들고 데이터가 누락 없이 즉시 시스템에 반영됩니다.

MVP 기능

• 항목: MVP(최소 기능 제품) 핵심 기능
• 선택: 기능 1: AI 문서 데이터화 엔진
• 근거: 서비스의 핵심 기술이며, 가장 먼저 기술적 우위와 시장성을 검증해야 할 기능. 페르소나 '박주임'의 가장 큰 고통(수기 입력)을 직접적으로 해결해 줌.
• 영향: 초기 개발 리소스를 '문서에서 데이터를 정확하게 추출하고 구조화하는 기술'에 집중. 다른 기능(문서 생성, 포털)은 다음 버전으로 계획.

개발 준비 문서 

앞선 개요와 목표 등을 ai와 대화를 통해서 구체화 하면서 개발 준비 문서를 작성했다.

PRD

# PRD (제품 요구사항 정의서) - Synapse v1.0

## 1. 문제 정의

국제 전자상거래 물류 및 포워딩 업무 현장에서는 매일 수십, 수백 건의 인보이스, 패킹리스트 등 다양한 형식의 무역 서류가 발생합니다. 실무자들은 이 문서들의 핵심 정보를 내부 시스템에 옮기기 위해 반복적인 수기 입력 작업을 하고 있습니다. 이 과정은 **많은 시간을 소모**할 뿐만 아니라, 오타나 누락으로 인한 **통관 지연 및 고객 클레임**을 유발하는 고질적인 문제입니다. 기존 OCR 솔루션들은 낮은 정확도로 인해 오히려 재검토 시간을 늘려 실효성이 떨어지는 경우가 많습니다.

## 2. 목표

* **제품 목표:** AI 기술을 통해 무역 서류의 데이터를 99% 이상의 정확도로 자동 추출하고 구조화하여, 실무자들을 비효율적인 수기 입력의 고통에서 해방시킨다.

* **사업 목표 (MVP):** MVP 버전(AI 문서 데이터화 엔진)을 통해 잠재 고객사 10곳 이상의 유료 사용 의사를 확보하여 시장성을 검증한다.

## 3. 사용자 페르소나

* **주요 페르소나: 박주임 (20대, 물류 포워딩 업체 직원)**

* **상황:** 하루 종일 수백 건의 무역 서류를 이메일로 받아, 회사 시스템에 수기로 입력하고 확인하는 것이 주된 업무.

* **고통 (Pain Point):** 기존 OCR 솔루션의 정확도가 너무 낮아 결국 모든 것을 눈으로 재확인. 정보 누락/오입력으로 인한 통관 지연 및 고객 불평에 대한 스트레스가 극심.

* **목표 (Goal):** 단순 반복 업무에서 벗어나, 서비스 품질을 높이는 더 가치 있는 일에 기여하고 싶어 함.

## 4. 사용자 스토리 (MVP)

* `FEAT-1`: **(AI 문서 데이터화 엔진)**

* **"박주임으로서,** 내가 가진 다양한 형식의 인보이스 PDF나 스캔 이미지를 업로드하면, **수기로 입력하는 시간을 90% 이상 절약하기 위해,** 시스템이 발송자, 수신자, 상품 목록, 가격 등의 핵심 정보를 정확하게 추출하여 구조화된 데이터(엑셀 등)로 만들어 주기를 원한다."

 

## 5. 성공 지표 (MVP)

* **North Star Metric:** 잠재 고객사의 유료 전환 의사 수 (목표: 10곳)

* **입력 지표:**

* MVP 데모 시연 횟수 (목표: 20회 이상)

* 데모 참여자의 "정확도가 만족스럽다" 응답 비율 (목표: 80% 이상)

* 주간 활성 사용자(WAU) (베타 테스트 기간 중, 목표: 10명 이상)

## 6. 범위 외 항목 (Non-goals)

* 문서 자동 생성 및 전송 기능

* 고객사별 전용 업로드 포털

* 외부 시스템(ERP, 쇼핑몰 솔루션)과의 실시간 연동

* 모바일 앱 개발 (반응형 웹으로 모바일 확인만 지원)

## 7. 가정과 리스크

* **가정:** Upstage AI와 같은 전문 솔루션을 활용하면 99% 이상의 정확도를 달성할 수 있을 것이다.

* **리스크:** 실제 다양한 비정형 문서에서 기대만큼의 정확도가 나오지 않아 사용자가 여전히 재검증에 많은 시간을 써야 할 위험. (Risk Score: High)

* **완화 전략:**

* 프로젝트 초기에 Upstage AI API를 이용해 PoC(기술 검증)를 진행.

* 오류 발생 시 사용자가 손쉽게 수정하고, 이 수정 데이터를 모델 재학습에 활용하는 'Human-in-the-loop' 메커니즘 도입 고려.

# TRD (기술 요구사항 정의서) - Synapse v1.0

## 1. 시스템 아키텍처 (MVP)
* **프론트엔드:** 반응형 웹 (PC 우선)
* **백엔드:** 없음 (모든 처리는 브라우저 내에서 또는 파일 기반으로 동작)
* **핵심 로직:** 사용자가 업로드한 파일을 외부 AI API(Upstage AI / 또는 구글제미나이, OPEN AI,claude 등)로 직접 전송하고, 결과를 받아 화면에 표시 및 파일로 다운로드. 
* **데이터 저장소:** 사용자 로컬 PC (파일 다운로드 방식)

## 2. 비기능적 요구사항
* **성능:** 10MB 이하의 이미지/PDF 파일 업로드 후 30초 이내에 데이터 추출 결과 표시.
* **정확성:** 핵심 필드(수신자, 총액 등) 기준 99% 이상의 데이터 추출 정확도.
* **보안:** 사용자가 업로드한 문서는 서버에 저장되지 않으며, API 통신은 모두 TLS 1.2 이상으로 암호화됨. API Key 등 민감 정보는 클라이언트 코드에 노출 금지. (MVP에서는 백엔드 없이 클라이언트에서 직접 호출하므로 이 부분은 프로덕션 전환 시 반드시 변경 필요)
* **사용성:** 기술 비전문가도 별도의 학습 없이 즉시 사용할 수 있는 직관적인 UI.

## 3. 외부 API 연동 명세
* **API 제공자:** Upstage AI
* **사용 모델:**
    * `Document OCR`: 이미지에서 텍스트 추출.
    * `Document Parsing`: 추출된 텍스트에서 의미있는 필드(발송인, 금액 등)를 구조화.
* **인증 방식:** API Key 인증 (HTTP Header에 포함)
* **요청/응답 형식:** RESTful API (JSON)
* **API관련 도큐멘트 참고 주소  https://console.upstage.ai/docs/capabilities/digitize/document-parsing
https://console.upstage.ai/docs/capabilities/digitize/document-ocr
https://console.upstage.ai/api/document-digitization/document-parsing
https://console.upstage.ai/api/document-digitization/document-ocr 

## 4. 권장 기술 스택 (이유 포함)
* **프론트엔드:** **Next.js (React)**
    * **이유:** 풍부한 생태계와 빠른 개발 속도. 서버 사이드 렌더링(SSR) 기능은 MVP 이후 클라우드 전환 시 확장성에 유리.
* **UI 라이브러리:** **Material-UI (MUI)** 또는 **Ant Design**
    * **이유:** 사전 정의된 고품질 B2B 컴포넌트를 제공하여, '깔끔하고 직관적인' 디자인 요구사항을 빠르게 만족시킬 수 있음.
* **핵심 AI 엔진:** **Upstage AI API** 다른 llm도 선택하여 api 입력하여 사용할수 있게 한다 
    * **이유:** 무역 서류에 특화되어 있어 높은 정확도를 기대할 수 있음. 자체 모델 개발 대비 시간과 비용을 획기적으로 절약. (벤더 락인 리스크 존재: 계약 조건 및 API 변경 정책 사전 확인 필요)

## 5. 접근제어·권한 모델
* **MVP 단계:** 해당 없음 (사용자 인증 기능 없음)
* **향후 계획:** 클라우드 전환 시 역할 기반 접근 제어(RBAC) 도입. (예: Admin, Member 역할 구분)

### 4. Database Design (데이터베이스 설계)

```markdown
# Database Design - Synapse v1.0

## MVP 단계: 데이터베이스 미사용

* **근거:** '데이터는 사용자 PC에 저장' 원칙에 따라, 모든 데이터는 세션 단위로 처리되고 파일로만 저장됩니다. 이는 개발 복잡성을 최소화하고 빠른 MVP 출시를 가능하게 합니다.
* **구현:** 모든 데이터 처리는 클라이언트 사이드에서 이루어지며, 최종 결과물은 사용자가 직접 파일(CSV 등)로 다운로드하여 로컬에 저장합니다.

## 향후 계획 (클라우드 전환 시)

```mermaid
erDiagram
    USERS ||--o{ DOCUMENTS : "uploads"
    DOCUMENTS ||--|{ PARSED_FIELDS : "contains"

    USERS {
        string user_id PK "사용자 ID"
        string email "이메일"
        string plan "구독 플랜 (e.g., free, pro)"
        datetime created_at "가입일"
    }

    DOCUMENTS {
        int document_id PK "문서 ID"
        string user_id FK "사용자 ID"
        string file_name "원본 파일명"
        string storage_url "클라우드 저장소 URL"
        string status "처리 상태 (e.g., pending, success, failed)"
        datetime uploaded_at "업로드 시각"
    }

    PARSED_FIELDS {
        int field_id PK "필드 ID"
        int document_id FK "문서 ID"
        string field_name "필드명 (e.g., sender_name)"
        string field_value "추출된 값"
        float confidence_score "신뢰도 점수"
    }

### 5. Design System (기초 디자인 시스템)

```markdown
# Design System - Synapse v1.0

## 디자인 철학
"강력한 기능은 숨기고, 사용법은 극도로 단순하게." 기술 비전문가도 즉시 이해할 수 있는 명확성과 직관성을 최우선으로 한다.

## 색상 팔레트
* **Primary (주요):** `#007AFF` (신뢰감을 주는 파란색)
* **Surface (배경):** `#F8F9FA` (편안한 밝은 회색)
* **Text (글자):** `#212529` (가독성이 높은 검은색)
* **Feedback-Success:** `#28A745` (성공, 완료)
* **Feedback-Error:** `#DC3545` (오류, 경고)

## 타이포그래피
* **Font:** Pretendard (가독성이 뛰어난 범용 고딕체)
* **Heading 1:** 28px, Bold
* **Body:** 16px, Regular
* **Label:** 14px, Medium

## 핵심 UI 컴포넌트
* **파일 업로드 영역:**
    * **상태:** 기본, 드래그 오버(Drag Over)
    * **설명:** 점선으로 영역을 명확히 표시하고, "여기에 파일을 드래그하거나 클릭하여 업로드하세요" 텍스트와 아이콘을 중앙에 배치.
* **버튼:**
    * **종류:** Primary(주요 액션), Secondary(보조 액션)
    * **상태:** 기본(Default), 호버(Hover), 비활성화(Disabled)
* **데이터 테이블 (결과 표시):**
    * **구조:** '필드명'과 '추출된 값'을 2단으로 명확히 구분.
    * **기능:** 각 '추출된 값'은 클릭 시 수정 가능한 입력 필드로 전환.

# Prompt Design - Synapse v1.0

## 문서 목적 및 사용법
- 이 스크립트는 AI 코딩 파트너가 Synapse MVP를 즉시 개발할 수 있도록 **작업 순서, 의사결정 기준, 검증 절차**를 구조화한 실행 가이드입니다.
- 각 마일스톤은 독립적으로 수행 가능하도록 설계되어 있으며, **순차 진행**을 기본으로 합니다.
- 체크리스트가 충족되지 않으면 다음 단계로 이동하지 않습니다. 문제 발생 시 즉시 로그와 수정안을 문서화합니다.

 단계 완료마다 `git status`로 변경 사항을 확인하고, 논리적 단위별 커밋을 권장합니다.

---

## 마일스톤 0: 프로젝트 설정 및 환경 구성
- **Sprint Goal:** Synapse MVP 개발을 위한 Next.js + TypeScript 기반 개발 환경을 1시간 이내에 구축한다.
- **사용자 스토리:** 개발자로서, Synapse MVP 개발을 위한 프로젝트 구조와 필수 라이브러리를 빠르게 구성하고 싶다.

### 준비물
- Node.js 18 이상, npm 9 이상
- Upstage API Key (다음 마일스톤에서 `.env.local`에 저장 예정)

### 실행 스크립트
1. 새 프로젝트 생성  
   ```bash
   npx create-next-app@latest synapse-mvp --ts --tailwind --eslint --app
   ```
2. 생성된 디렉터리로 이동 후 의존성 설치  
   ```bash
   cd synapse-mvp
   npm install axios
   ```
3. UI 컴포넌트 관리 디렉터리 생성  
   ```bash
   mkdir -p src/components
   ```
4. 개발 서버 시동 및 정상 동작 확인  
   ```bash
   npm run dev
   ```
   - `http://localhost:3000` 접속 후 기본 페이지 렌더링을 확인합니다.
   - 오류 발생 시 터미널 로그를 정리하여 문서화합니다.

### Definition of Done
- `npm run dev` 실행 시 에러 없이 서버 시작
- `src/app/page.tsx`를 메인 엔트리로 사용
- `src/components/` 디렉터리가 존재하며 Git에 추적됨
- TypeScript, Tailwind CSS, ESLint 설정 파일이 기본값으로 유지됨

### 로그 & 산출물
- 설치 로그, 오류 스냅샷, 로컬 개발 서버 URL
- 초기 README 또는 개발 노트에 환경 구성 요약 추가를 권장

---

## 마일스톤 1: 핵심 기능 MVP 구현 (FEAT-1)
- **Sprint Goal:** 인보이스 이미지 업로드부터 분석 결과 확인, CSV 다운로드까지의 핵심 사용자 여정을 한 화면에서 완료할 수 있는 MVP를 완성한다.
- **사용자 스토리:** "박주임으로서, 인보이스 이미지 파일을 업로드하면, 화면에서 추출된 데이터를 확인하고 엑셀 파일로 다운로드하고 싶다."

### 준비물
- Upstage Document Parsing API Key → `.env.local`에 `UPSTAGE_API_KEY=...` 형태로 저장
- 라이브러리 추가  
  ```bash
  npm install papaparse
  ```

### 실행 스크립트
1. **환경 변수 세팅**
   - `.env.local` 파일 생성 후 `UPSTAGE_API_KEY` 추가
   - `.gitignore`에 `.env.local` 포함 여부 확인 (create-next-app 기본 포함)

2. **API Route 설계 (서버 전용 호출)**
   - 파일: `src/app/api/parse/route.ts`
   - 구현 내용:
     - `POST` 요청만 허용하며 `FormData`의 파일을 수신
     - `axios`로 Upstage Document Parsing API 호출 (`https://api.upstage.ai/...`)
     - 응답을 그대로 전달하되, 에러 시 상태 코드와 메시지를 명시
     - 타임아웃(예: 30초)과 예외 처리 로깅 추가

3. **파일 업로드 컴포넌트 (`src/components/FileUpload.tsx`)**
   - 드래그 앤 드롭 + 버튼 업로드를 모두 지원하는 UI 작성
   - 선택된 파일을 `File | null` 상태로 보관하고, 부모에게 `onFileSelect` 콜백 제공
   - 허용 확장자: 이미지(`.png`, `.jpg`, `.jpeg`) 및 PDF
   - 파일명 미리보기와 재선택 기능 포함

4. **결과 표시 컴포넌트 (`src/components/ResultDisplay.tsx`)**
   - `props`: `data`(배열 또는 레코드), `onChange`(셀 수정 시 호출), `onDownload`
   - 테이블 형태로 렌더링하고 각 셀은 인라인 편집 가능(예: `contentEditable` 또는 `<input>` 사용)
   - 값 수정 시 상위 상태를 업데이트하여 CSV 다운로드에 반영

5. **페이지 통합 (`src/app/page.tsx`)**
   - 상태 관리: `uploadedFile`, `parsedData`, `isLoading`, `error`
   - 흐름:## 공통 작업 규범
- **코드 스타일:** Next.js(앱 라우터) + TypeScript 기본 템플릿을 따르고, ESLint/Tailwind 기본 규칙을 유지합니다.
- **환경 변수:** 민감 정보는 `.env.local`에서만 관리하며 `NEXT_PUBLIC_` 접두사를 사용하지 않습니다.
- **검증 원칙:** 각 단계를 마치면 `npm run lint`, `npm run build` 또는 명시된 확인 절차를 수행하고 결과를 기록합니다.
- **버전 관리:** 주요
     1. 파일 업로드 → API Route로 `FormData` 제출
     2. 요청 중 로딩 스피너 또는 Skeleton 표시
     3. 성공 시 결과를 `ResultDisplay`에 전달, 실패 시 에러 메시지 출력
   - axios 요청 예시:
     ```ts
     const formData = new FormData();
     formData.append("file", uploadedFile);
     await axios.post("/api/parse", formData, {
       headers: { "Content-Type": "multipart/form-data" },
     });
     ```

6. **CSV 다운로드 기능**
   - `ResultDisplay` 내부 또는 별도 유틸(`src/lib/csv.ts`)에서 `papaparse`를 사용해 JSON → CSV 변환
   - 브라우저 `URL.createObjectURL`로 Blob 생성 후 `result.csv` 이름으로 다운로드 트리거

7. **로딩 & 에러 UX**
   - `isLoading`이 `true`일 때 버튼 비활성화 및 스피너 출력
   - 에러 발생 시 사용자가 재시도할 수 있도록 안내 메시지와 로그를 표시

8. **테스트 및 QA**
   - 이미지 및 PDF로 업로드 시나리오 테스트
   - 응답이 없거나 에러 시나리오(예: 4xx, 5xx)에서 사용자 피드백 확인
   - CSV 파일 열람 후 한글/숫자 인코딩 문제 여부 검증

### Definition of Done
- 사용자가 이미지/문서 파일을 업로드할 수 있다.
- '분석하기' 버튼 클릭 시 로딩 인디케이터가 표시된다.
- API 호출 성공 시 추출 데이터가 테이블로 렌더링되고 셀 단위 수정이 가능하다.
- '엑셀로 저장' 버튼 클릭 시 `result.csv`가 다운로드된다.
- `.env.local`에 저장된 API Key가 클라이언트 번들에 노출되지 않는다.

### 로그 & 산출물
- 성공/실패 API 응답 예시 및 터미널 로그
- 주요 UI 스냅샷 (업로드 전/로딩 중/결과 표시/에러)
- CSV 샘플 파일

---

## 자가 수정 지침 (필수 준수 사항)
- API Key는 절대 클라이언트 코드(`NEXT_PUBLIC_`)에 노출하지 않습니다.
- 모든 외부 API 호출은 서버 전용 라우트(`src/app/api/parse/route.ts` 또는 `/pages/api`)에서 수행해야 합니다.
- 민감 정보가 노출되었다면 즉시 키를 폐기하고, 보안 사고 보고 절차를 따릅니다.
- 위 사항 위반 시 해당 작업을 중단하고 수정 후 QA를 다시 진행합니다.

---

## 다음 단계 제안
- FEAT-2: 다중 문서 업로드 및 배치 처리
- FEAT-3: 결과 히스토리 관리 및 사용자 인증 연동
- 기술 부채 관리: 테스트 자동화, 모니터링, 에러 로깅 체계 확립

코딩 하기

커서로 codex로 프롬프트를 했다. 개발 준비 문서들에 따라서 개발이 진행됐다. 개발은 오래 걸리지 않았다고 개발 서버 확인을 했다. 
그런데 다음과 같은 에러가 브라우져에 계속 발생했다. 

 

사실 문제는 단순히 3000번 포트에 다른 프로제트가 걸려 있어서 생긴 문제 였다. ㅎㅎ(꽤 오랜 시간동안 계속 무한 반복. 꼭 에러메세지를 읽어봐야 한다는 교훈 업음) 
그런데 codex는 마지막에 최종 문제 해결 단계에서 마무리가 제대로 되지 않고 조금 다른 답변을 하는 것 같았다.  암튼 결국 클로드 코드를 가지고 마무리 지을 수 있었다. 

첫번째 결과물은  추출은 됐지만 문서의 메타데이터 들만 추출해서 실패 !!~~

 

수정과정에서 업스테이지의 api중에 사전정의된(학습)된 양식 추출 API가 별도로 사용했다. 특히 무역서류에 대해서 학습된 AI가 있다. 

10월 15일 시점 여기까지 개발은
1차적으로 문서내에서 문서(데이터)를 통해 구조화된 스키마 만들고 그걸 다시 데이터로 추출할수 있게 하는 단계까지 성공 
이후 추가 개발은 어떻게 될지 계속 이어가겠음