피드로 돌아가기
I built a free, no-login, unlimited AI invoice tool. Here are the 4 features and the 5 5 3 dunning matrix behind it.
Dev.toDev.to
Frontend

Local-first 아키텍처와 제약 기반 Prompting을 통한 무로그인 AI 송장 툴 구현

I built a free, no-login, unlimited AI invoice tool. Here are the 4 features and the 5 5 3 dunning matrix behind it.

jiahao luo2026년 5월 5일13intermediate

Context

전형적인 CRM 기반 송장 툴의 복잡한 온보딩 과정과 데이터 수집 절차가 사용자 이탈을 유발하는 병목 지점으로 작용. 서버리스 지향의 완전 익명 서비스 제공을 위해 상태 관리의 완전한 클라이언트 이관이 필요했던 상황.

Technical Solution

  • localStorage 기반의 Local-first 데이터 설계를 통한 서버 저장소 제거 및 복잡도 40% 감소
  • Prompt-driven Extraction 구조 채택으로 추론(Reasoning) 과정을 배제하고 엔티티 추출에만 집중시켜 Hallucination 최소화
  • Vision-to-JSON 파이프라인 구축을 통해 텍스트와 이미지 입력을 단일 API 엔드포인트에서 처리하는 통합 인터페이스 설계
  • 관계 기반 Dunning Matrix 로직을 도입하여 고객 관계 상태와 톤앤매너를 조합한 다차원 알림 생성 구조 구현
  • src/lib/ai/client.ts 인터페이스 추상화를 통해 모든 AI 기능을 단일 지점에서 비용 추적 및 버전 로깅 처리
  • Example-based Prompt를 Constraint-based Prompt로 전환하여 출력물의 구조적 경직성을 해결하고 톤의 다양성 확보

- LLM의 환각을 줄이기 위해 '추론'과 '추출' 단계를 분리한 Pipeline 설계 검토 - 사용자 경험 최적화를 위해 서버 상태 저장 대신 브라우저 저장소를 활용한 Stateless 구조 고려 - Prompt 설계 시 예시 데이터 제공보다 명확한 제약 사항(Negative Constraint) 정의를 통한 출력 제어 시도 - AI 기능 확장성을 위해 개별 API 호출이 아닌 통합 AI Client 인터페이스 계층 구축

원문 읽기