1. 개요
| 업종 | 거래처에서 거래명세서·세금계산서·견적서를 메일과 파일로 받아 장부에 옮겨 적는 사업자 |
| 사이트 목적 | 문서마다 같은 칸을 찾아 옮겨 적고 합계를 다시 계산하던 일을, 올리기 → 확인 → 장부 넣기로 줄이는 업무 도구 |
| 제작 범위 | 화면 3개(문서 확인 · 장부 · 찾는 규칙) · 찾는 칸 8개 · 예시 문서 6건(거래명세서 3, 세금계산서 2, 견적서 1) |
| 주요 흐름 | 문서 올리기·붙여넣기 → 원문에서 찾은 칸 확인 → 검산 → 틀린 칸 고치기 → 장부에 넣기 → 장부 CSV 받기 / 못 찾은 칸 → 찾는 규칙에 이름 더하기 |
올린 문서와 고친 값, 장부, 찾는 규칙, 우리 회사 정보는 브라우저에 저장됩니다. 새로고침하거나 다시 들어와도 그대로 남아 있습니다. 올린 파일은 이 브라우저 안에서만 읽고, 어디에도 전송하지 않습니다.
범위 밖: PDF·사진(스캔) 문서 읽기, 인공지능으로 문서 읽기(칸 앞 이름을 찾는 규칙으로만 읽습니다), 홈택스·회계 프로그램 연결, 여러 사람이 함께 쓰는 서버 저장.
2. 과제
1. 같은 칸을 문서마다 다르게 부른다.
‘공급가액’과 ‘공급가’, ‘합계금액’과 ‘총액’, 날짜도 2026.08.03 · 26-08-19 · 2026년 8월 12일처럼 제각각입니다. 이름이 달라도 같은 칸으로 읽어야 합니다.
2. 옮겨 적다 틀린 숫자는 나중에야 드러난다.
사업자번호 한 자리, 합계 한 자리가 틀려도 장부에 그대로 들어갑니다. 넣기 전에 검증 숫자와 공급가액+세액=합계를 맞춰 봐야 합니다.
3. 어디서 읽은 값인지 확인할 수 있어야 한다.
찾은 값만 보여 주면 믿고 넣기 어렵습니다. 원문의 어느 글자에서 찾았는지 함께 보여야 빨리 확인합니다.
3. 화면 구조
문서 확인은 첫 화면 한 곳에서 문서 목록 · 원문 · 찾은 칸을 나란히 봅니다. 장부와 찾는 규칙은 주소가 따로 있는 화면이라 뒤로 가기와 새로고침에도 그 자리에 머뭅니다.
4. 주요 기능
원문에서 찾은 칸 표시
문서 종류·문서번호·작성일·거래처·사업자번호·공급가액·세액·합계 8칸을 찾아 원문의 그 글자에 칸마다 다른 색을 칠합니다. 날짜는 2026-08-03 모양으로 맞춥니다. 두 회사가 나오면 우리 회사가 아닌 쪽을 거래처로 봅니다.
검산 — 사업자번호·합계
사업자번호 마지막 검증 숫자, 공급가액+세액=합계, 세액이 공급가액의 10%인지 확인합니다. 문제가 남으면 장부에 넣기 단추가 잠기고, 칸을 고치면 바로 다시 검산합니다.
장부 — 달별·거래처별 합계
확인을 끝낸 문서가 장부에 쌓이고, 달·거래처·문서번호로 찾습니다. 거래처별 건수와 합계를 붙였고, 같은 거래처·문서번호는 두 번 들어가지 않습니다. CSV로 받으면 직접 고친 칸도 함께 적힙니다.
찾는 규칙 더하기
못 찾은 칸이 있으면 그 칸 앞에 붙는 이름(예: 공급금액·청구금액)을 더합니다. 더하면 올린 문서를 다시 읽어 찾고, 직접 고친 값은 그대로 둡니다.
- 글 붙여넣기와 EUC-KR 파일메일 본문처럼 파일이 없는 문서는 글을 붙여 넣어 읽습니다. 엑셀·메모장에서 저장한 EUC-KR 파일도 글자가 깨지지 않게 읽습니다.
5. 기술
| 반응형 | 1180·960·640px 기준으로 배치가 바뀝니다. PC는 문서 목록 · 원문 · 찾은 칸 3단, 960px 아래는 1단으로 쌓고 문서 목록을 가로로 넘기며, 640px 아래는 장부 표를 문서마다 카드로 바꿉니다. 원문은 칸 안에서만 가로로 넘겨 품목 줄이 끊기지 않습니다. |
| 글꼴 | 본문 Pretendard, 숫자·코드 Source Code Pro(둘 다 무료 공개 글꼴). 사이트 안에 넣어 외부 요청 없이 불러옵니다. 본문 글꼴은 이 화면에 쓰인 글자만 먼저 받고(64KB), 사용자가 올린 파일에만 나오는 한글은 나머지 2,350자 파일(373KB)에서 필요할 때만 받습니다. 숫자 글꼴 23KB. |
| 이미지 | 사진 없이 만들었습니다. 아이콘은 SVG로 그려 어느 화면에서도 선명합니다. |
| 움직임 | 라이브러리 없이 CSS 전환만 씁니다. 알림이 아래에서 올라오는 정도로 줄였고, 기기에서 움직임 줄이기를 켜면 전환이 멈춥니다. |
| 접근성 | 입력칸마다 이름을 붙였고, 주요 단추는 44px 높이로 눌리기 쉽게 했습니다. 상태는 색과 글자로 함께 알려 주고, 알림은 화면 읽기 프로그램이 읽도록 표시했습니다. 단추와 입력칸은 키보드로도 씁니다. 접근성 측정 휴대폰 100점 · PC 100점. |
| 사용 기술 | HTML·CSS·JavaScript(외부 라이브러리 없음). 화면과 스크립트 합쳐 54KB. 파일은 브라우저 파일 읽기로 열고, 엑셀에서 저장한 EUC-KR 파일은 글자 형식을 판별해 다시 읽습니다. 결과는 브라우저 저장소(localStorage)에 저장하고 다시 읽으며, 내려받는 CSV는 엑셀에서 바로 열리게 만듭니다. 화면은 주소(#/…)로 나눠 뒤로 가기가 동작합니다. |
6. 검수
PC 1440·휴대폰 390 화면에서 실제로 띄워, 사람이 쓰는 순서대로 눌러 본 결과입니다. 저장한 뒤 새로고침하고 다시 조회되는지까지 확인했습니다. (2026-09-23)
| 항목 | PC 1440 | 휴대폰 390 |
|---|
| 화면 오류 | 0 | 0 |
| 깨진 파일 | 0 | 0 |
| 가로 넘침·글자 잘림 | 0 | 0 |
| 동작 시험 | 17 / 17 통과 | 17 / 17 통과 |
동작 시험 17가지: 예시 문서 6건 불러오기(EUC-KR 포함) · 원문에서 찾은 칸 표시(8칸) · 다른 형식 문서 읽기(견적서·26-08-19) · 검산: 사업자번호 검증·합계 불일치 찾기 · 틀린 칸 고치기 → 다시 검산 · 장부에 넣기 · 빈 날짜 직접 적기(2026.08.28) → 장부 · 나머지 통과 문서 넣기 · 같은 문서 다시 올리면 중복 막기(직접 올린 파일) · 직접 올린 EUC-KR 파일 읽기 · 새로고침 뒤 장부 조회 · 장부 찾기·거래처별 합계 · 장부 CSV 받기 · 장부에서 빼기 → 새로고침 뒤 유지 · 글 붙여넣기 → 못 찾은 칸 규칙 더하기 · 새로고침 뒤 규칙 유지 → 다시 읽어 찾음 · 뒤로 가기
속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준으로 세 번 측정해 가운데 값)
| 성능 | 접근성 | 권장사항 | 검색 최적화 |
|---|
| 휴대폰 | 100 | 100 | 100 | 100 |
| PC | 100 | 100 | 100 | 100 |
휴대폰: 첫 화면 표시 1.3초 · 가장 큰 요소 표시 1.7초 · 화면 흔들림 0 · 입력 막힘 0ms PC: 첫 화면 표시 0.4초 · 가장 큰 요소 표시 0.4초 · 화면 흔들림 0 · 입력 막힘 0ms
오토건웍스(AutoGun Works) · 대표 박건우 · 사업자등록번호 342-27-02011 · 경기도 용인시 처인구 남사읍 어진로102번길 92-16 · contact@autogun.co.kr개인정보처리방침 
