클루리오: 회사 서류로 운영 업무 지도를 그리는 MVP
서버와 LLM 없이 정적 SPA만으로 지도·간트·문서 파이프라인을 3주 만에 공개 배포했다.
- 역할
- 1인 기획 · 개발 · 운영
- 상태
- 2026.10 종료 · 초기명 길그림
- 기술
- Vite 7 · React 19 · TypeScript (strict) · React Router 7 · React Flow · pdf.js · Playwright · Vercel
- 3주
- 첫 커밋부터 공개 배포까지 (86커밋)
- 65
- 항목 · 17영역 · 6부문 (전부 JSON 데이터)
- 0
- 외부 네트워크 요청 (글꼴 자체 제공)
- 4.5:1
- 명도 대비, 라이트·다크 모두
운영 담당 없이 지원금 집행·보고·외주 검수·등록 업무를 혼자 챙기는 개발 직군 대표가 대상이었습니다. 회사 서류를 넣으면 운영 업무를 6부문·17영역의 노드 지도와 간트 일정으로 펼치고, 항목마다 요건 충족 수와 부족 서류, 다음 행동을 보여줍니다. 판정은 하지 않고 자격사 연결로 끝납니다.
상황
앞선 제품(R&D 오토노트, 이후 Kept)은 연구노트 증빙 한 가지를 풀었습니다. 멘토링을 거치며 문제를 '운영 전반을 혼자 챙기는 사람'으로 넓혔고, 시연 범위에 맞게 백엔드와 로그인 없이 어디든 배포되는 정적 SPA로 다시 만들었습니다.
한 일
- 01
구조를 코드가 아닌 데이터에
묶음 6·가닥 17·항목 65와 계약·서류·구성원·기록·도착 규칙을 JSON으로 두고 이름을 코드에 박지 않았습니다. 화면은 데이터 추가만으로 늘어납니다.
- 02
지도·간트·조직도를 URL 하나로
React Flow 위에 자체 배치 알고리즘을 얹어 펼침과 배율을 유지하는 지도를 만들고, 간트는 라이선스·React 버전·연 단위 부재 때문에 직접 구현했습니다. 화면 상태를 전부 URL 쿼리에 두어 지도 ↔ 간트 ↔ 조직도 이동이 링크 하나로 됩니다.
- 03
파생 상태 계층
도착한 서류의 자동 확인, 확정된 초안, 준비 체크를 원본 데이터 위에 얹는 함수 하나를 단계 기계(준비 → 작성 → 제출 → 완료), 초안 자동 작성, 제출 확인이 공유합니다.
- 04
브라우저 안에서 끝나는 문서 파이프라인
pdf.js로 텍스트를 추출(5MB · 20쪽 · 10만 자 제한, 암호 PDF 거부, 15초 타임아웃)하고 정규식으로 필드를 뽑되 출처(문서·쪽·인용)를 보존하며, 충돌값은 빈칸으로 둡니다. SHA-256 지문, 명시 승인 뒤 초안·일정·ICS 생성, 원본을 바이트 그대로 담는 ZIP(store 포맷 · CRC32 직접 구현)까지 서버 없이 처리합니다.
- 05
품질·접근성·공개 운영
Playwright 7종 검사(단언 130개 이상)를 4개 폭에서 돌리고, 명도 대비 4.5:1을 양 테마에서 측정했으며 어두운 테마는 스크립트로 생성합니다. JSON-LD, llms.txt, 앱 경로 noindex와 보안 헤더로 공개 사이트를 운영했습니다.
결과
- 2026-09-27 공개 배포, 10/10 실제 문서 처리 반영.
- 15개 조직 40명에게 설명·시연, 온라인 설문 98명(자체 집계: 서류 부담 90% · 유료 의향 60%).
- 이전 반복 Kept(NestJS · Prisma · Claude SDK · GitHub 커밋/PR 수집 · 사람 승인 관문)에서 문제 정의를 넓혀 피벗.
정직하게 적어 두는 것
- 실사용자와 결제는 없었고 검증 수치는 자체 집계입니다. 2026.10에 종료했습니다.