1. 개요

업종거래처 문서(발주서·견적서·거래명세서)를 장부·프로그램에 옮겨 적는 제조·유통·사무 업무
사이트 목적문서에서 뽑아 둔 값을 원문 옆에 놓고, 합계·부가세 같은 규칙으로 점검한 뒤 사람이 확인한 값만 확정해 내려받는 검수 화면
제작 범위첫 화면 1개 · 문서 3종(발주서·견적서·거래명세서) · 기본 항목 9칸 + 품목 줄 · 규칙 점검 4가지
주요 흐름문서 고르기 → 원문과 추출값 대조 → 틀린 값 고치기 → 칸마다 확인 → 검수 완료 → 문서 CSV · 완료 문서 모아 받기

고친 값, 칸별 확인 표시, 메모, 검수 상태, 보던 문서는 브라우저에 저장됩니다. 새로고침하거나 다시 들어와도 그대로 남아 있습니다.

범위 밖: 새 문서를 올려 글자를 읽어 내는 기능 — 이 화면의 추출값은 문서마다 미리 넣어 둔 결과이며, 실제 AI 연결은 도입할 때 연결합니다. 회계 프로그램 연동, 여러 기기에서 같은 결과를 함께 쓰는 서버 저장도 범위 밖입니다. 규칙 점검·값 고치기·확인·저장·내려받기는 화면에서 실제로 동작합니다.

2. 과제

1. 읽어 낸 값이 틀려도 그럴듯해 보인다.

숫자 하나(12개 → 120개)만 잘못 읽혀도 표는 멀쩡해 보입니다. 원문을 옆에 두고, 계산이 맞지 않는 칸을 먼저 짚어 줘야 사람이 빨리 찾습니다.

2. 원문에 없는 값을 만들어 넣으면 안 된다.

견적서의 "유효기간 30일"처럼 원문에 날짜가 없는 칸은 비워 두거나, 사람이 계산해 넣었다면 그렇게 표시가 남아야 합니다.

3. 누가 확인했는지가 남아야 장부에 넣는다.

모든 칸을 사람이 확인해야 검수 완료가 되고, 완료된 문서는 잠겨서 실수로 바뀌지 않아야 합니다.

3. 화면 구조

한 화면에서 원문과 추출값을 나란히 봅니다. 맨 위 탭에서 문서를 고르고, 왼쪽 원문과 오른쪽 검수 칸이 서로 연결되어 있습니다. 휴대폰에서는 "원문 보기 / 추출값 검수" 버튼으로 두 화면을 오갑니다.

4. 주요 기능

규칙 점검 화면

규칙 점검

품목마다 수량 × 단가 = 금액, 품목 합계 = 공급가액, 부가세 = 공급가액의 10%, 공급가액 + 부가세 = 합계 금액을 계산해 맞는지 표시합니다. 발주서에서는 수량이 120으로 읽힌 줄을 "수량 × 단가 = 1,140,000인데 금액은 114,000"으로 짚습니다.

원문 위치 표시 화면

원문 위치 표시

칸마다 붙은 "원문 위치"를 누르면 원문에서 그 값이 있는 자리가 노랗게 강조됩니다. 고친 값이 원문에서 찾아지지 않으면 "원문에서 같은 값을 찾지 못했습니다"로 알려 줍니다.

값 고치면 이어지는 점검 화면

값 고치면 이어지는 점검

견적서의 공급가액을 고치면 부가세와 합계 금액이 맞아야 할 값이 바로 바뀌어 안내됩니다. 원문에 없는 유효기간은 "찾지 못함"으로 표시되고, 사람이 날짜를 넣으면 그 표시가 남습니다.

검수 완료와 내려받기 화면

검수 완료와 내려받기

모든 칸을 확인해야 검수 완료 버튼이 열리고, 완료된 문서는 칸이 잠깁니다. 확인한 칸의 값을 고치면 그 칸의 확인이 풀립니다. 문서 한 장씩, 또는 검수 완료 문서를 모아 CSV로 받고, 처음 값으로 되돌리거나 다시 열 수 있습니다.

5. 기술

반응형980·560px 기준으로 배치가 바뀝니다. PC는 원문과 검수 칸이 나란히, 980px 아래는 원문 보기/추출값 검수 버튼으로 한쪽씩 보고, 560px 아래는 품목 줄이 항목 이름이 붙은 카드로 바뀌고 원문 표도 두 칸으로 접힙니다.
글꼴화면 글자 Pretendard, 원문 문서 Newsreader(둘 다 무료 공개 글꼴). 이 화면에 쓰인 글자만 남겨 두 파일 합쳐 134KB로 줄였습니다.
이미지원문 문서도 이미지가 아니라 글자와 표로 그려, 값 위치를 강조할 수 있게 했습니다.
움직임원문 위치로 부드럽게 이동하는 스크롤과 알림 문구 외에는 움직임을 넣지 않았습니다. 기기에서 움직임 줄이기를 켜면 멈춥니다.
접근성모든 값 칸과 확인 상자에 이름표를 붙였고, 오류·경고는 색과 문장으로 함께 알려 줍니다. 접근성 측정 100점.
사용 기술HTML·CSS·JavaScript(외부 라이브러리 없음). 규칙 점검은 브라우저 안에서 계산합니다. 고친 값·확인·상태는 브라우저 저장소(localStorage)에 저장하고, CSV는 엑셀에서 한글이 깨지지 않게 저장합니다.

6. 검수

PC 1440·휴대폰 390 화면에서 실제로 띄워, 사람이 쓰는 순서대로 눌러 본 결과입니다. 저장한 뒤 새로고침하고 다시 조회되는지까지 확인했습니다. (2026-09-23)

항목PC 1440휴대폰 390
화면 오류00
깨진 파일00
가로 넘침·글자 잘림00
동작 시험13 / 13 통과13 / 13 통과

동작 시험 13가지: 첫 화면 표시 · 규칙 점검 — 수량 × 단가 불일치 찾기 · 원문 위치 표시 · 값 고치기와 오류 해소 · 모든 칸 확인 전 완료 잠금 → 확인 후 검수 완료 · 새로고침 뒤 검수 결과 유지 · 견적서 — 합계·부가세 연쇄 점검 · 메모와 검수 완료 · 고치면 그 칸 확인이 풀림 · 이 문서 CSV · 검수 완료 문서 모아 받기 · 처음 추출값으로 되돌리기 · 검수 다시 열기

속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준으로 세 번 측정해 같은 값)

성능접근성권장사항검색 최적화
휴대폰100100100100
PC100100100100

휴대폰: 첫 화면 표시 1.1초 · 가장 큰 요소 표시 1.7초 · 화면 흔들림 0.005 · 입력 막힘 0ms PC: 첫 화면 표시 0.5초 · 가장 큰 요소 표시 0.6초 · 화면 흔들림 0.005 · 입력 막힘 0ms

7. 결과

직접 눌러보기 ↗
PC 완성 화면휴대폰 완성 화면
오토건웍스(AutoGun Works) · 대표 박건우 · 사업자등록번호 342-27-02011 · 경기도 용인시 처인구 남사읍 어진로102번길 92-16 · contact@autogun.co.kr
개인정보처리방침