1. 개요
| 업종 | 인쇄·판촉물처럼 주문마다 견적을 내고 수주하면 명세서를 보내는 제작·납품 사업자 |
| 사이트 목적 | 엑셀 견적 양식을 복사해 고치던 일을 단가표 고르기로 줄이고, 보낸 견적과 수주 여부를 한 목록에서 보는 업무 도구 |
| 제작 범위 | 화면 4개(견적 쓰기 · 견적 목록 · 견적서·거래명세서 · 거래처·단가표) · 견적 상태 4가지 · 기본 거래처 3곳·품목 7개 |
| 주요 흐름 | 거래처 고르기 → 품목 고르기 → 수량·할인 → 부가세 → 견적 저장(번호) → 인쇄 / 목록에서 보냄 → 수주 → 거래명세서 만들기 → 인쇄 |
쓰던 견적, 견적 목록과 상태, 거래명세서 번호, 거래처, 단가표, 우리 회사 정보는 브라우저에 저장됩니다. 새로고침하거나 다시 들어와도 그대로 남아 있습니다. 올린 파일은 이 브라우저 안에서만 읽고, 어디에도 전송하지 않습니다.
범위 밖: 전자세금계산서 발행, 메일·문자로 견적서 보내기(인쇄·PDF로 저장해 보냄), 직인 이미지 넣기, 여러 사람이 함께 쓰는 서버 저장.
2. 과제
1. 견적서 한 장에 계산이 너무 많다.
품목마다 수량 × 단가 × 할인, 부가세 별도·포함, 한글 금액까지 손으로 맞추다 보면 한 곳씩 틀립니다.
2. 보낸 견적이 어디까지 갔는지 모른다.
견적 파일이 폴더에 쌓이기만 하면 어느 건이 수주됐는지, 아직 답이 없는지 한눈에 보이지 않습니다.
3. 수주한 뒤 명세서를 또 새로 쓴다.
견적과 같은 품목·금액을 거래명세서에 다시 옮겨 적습니다. 수주한 견적에서 바로 명세서가 나와야 합니다.
3. 화면 구조
견적 쓰기 화면에서 왼쪽 입력과 오른쪽 견적서 종이가 나란히 바뀝니다. 견적 목록 · 문서 보기 · 거래처·단가표는 주소가 따로 있는 화면이라 뒤로 가기와 새로고침에도 그 자리에 머뭅니다.
4. 주요 기능
견적 쓰기 — 단가표에서 고르기
품목 칸에 단가표 이름을 적거나 고르면 단가·단위가 채워집니다. 수량·할인율을 바꾸면 줄 금액과 오른쪽 견적서가 바로 바뀌고, 쓰던 견적은 저장 전에도 새로고침해도 남습니다.
견적서 종이 — 한글 금액·부가세
공급자 칸, 합계 금액 한글 표기(일금 오십일만일천오백원정), 공급가액·세액·합계를 붙였습니다. 부가세 별도·포함·면세를 바꾸면 공급가액과 세액을 다시 나눕니다. 인쇄하면 종이만 나옵니다.
견적 목록 — 상태 관리
견적마다 작성중 · 보냄 · 수주 · 취소를 바꾸고, 상태별로 보거나 거래처·건명·번호로 찾습니다. 보이는 견적 합계와 수주 합계를 붙였고, 목록을 CSV로 받습니다.
수주 → 거래명세서
수주한 견적에서 ‘명세서 만들기’를 누르면 TS 번호가 붙은 거래명세서가 만들어집니다. 같은 품목·금액을 옮겨 적지 않고 바로 인쇄합니다.
- 거래처·단가표와 우리 회사거래처와 품목을 더하고 단가를 바꾸면 다음 견적부터 반영됩니다. 우리 회사 상호·대표·사업자번호·주소·전화는 견적서 공급자 칸에 들어갑니다.
5. 기술
| 반응형 | 1240·1040·760·640px 기준으로 배치가 바뀝니다. PC는 입력과 견적서 종이 2단, 1040px 아래는 입력 아래에 종이, 640px 아래는 품목 줄을 카드로 바꾸고 종이의 단위·번호 칸을 줄여 표가 넘치지 않게 합니다. 인쇄할 때는 종이만 남깁니다. |
| 글꼴 | 본문 Pretendard, 숫자·코드 DM Mono(둘 다 무료 공개 글꼴). 사이트 안에 넣어 외부 요청 없이 불러옵니다. 본문 글꼴은 이 화면에 쓰인 글자만 먼저 받고(62KB), 사용자가 올린 파일에만 나오는 한글은 나머지 2,350자 파일(375KB)에서 필요할 때만 받습니다. 숫자 글꼴 29KB. |
| 이미지 | 사진 없이 만들었습니다. 아이콘은 SVG로 그려 어느 화면에서도 선명합니다. |
| 움직임 | 라이브러리 없이 CSS 전환만 씁니다. 알림이 아래에서 올라오는 정도로 줄였고, 기기에서 움직임 줄이기를 켜면 전환이 멈춥니다. |
| 접근성 | 입력칸마다 이름을 붙였고, 주요 단추는 44px 높이로 눌리기 쉽게 했습니다. 상태는 색과 글자로 함께 알려 주고, 알림은 화면 읽기 프로그램이 읽도록 표시했습니다. 단추와 입력칸은 키보드로도 씁니다. 접근성 측정 휴대폰 100점 · PC 100점. |
| 사용 기술 | HTML·CSS·JavaScript(외부 라이브러리 없음). 화면과 스크립트 합쳐 56KB. 파일은 브라우저 파일 읽기로 열고, 엑셀에서 저장한 EUC-KR 파일은 글자 형식을 판별해 다시 읽습니다. 결과는 브라우저 저장소(localStorage)에 저장하고 다시 읽으며, 내려받는 CSV는 엑셀에서 바로 열리게 만듭니다. 화면은 주소(#/…)로 나눠 뒤로 가기가 동작합니다. |
6. 검수
PC 1440·휴대폰 390 화면에서 실제로 띄워, 사람이 쓰는 순서대로 눌러 본 결과입니다. 저장한 뒤 새로고침하고 다시 조회되는지까지 확인했습니다. (2026-09-23)
| 항목 | PC 1440 | 휴대폰 390 |
|---|
| 화면 오류 | 0 | 0 |
| 깨진 파일 | 0 | 0 |
| 가로 넘침·글자 잘림 | 0 | 0 |
| 동작 시험 | 18 / 18 통과 | 18 / 18 통과 |
동작 시험 18가지: 단가표 품목 고르면 단가·단위 채움 · 줄 더하기·할인율 계산 · 한글 금액 표기 · 부가세 포함·면세 바꾸기 · 새로고침해도 쓰던 견적 유지 · 견적 저장 → 번호 붙음 · 빈 칸·수량 0 막기 · 상태 바꾸기(보냄 → 수주) · 새로고침 유지 · 수주 견적 → 거래명세서 만들기 · 인쇄 화면(종이만) · 뒤로 가기 · 복사해서 새 견적 → 저장 · 목록 상태별 보기·찾기 · 목록 CSV 받기 · 거래처 더하기 → 견적에서 고르기 · 단가표 단가 바꾸기 → 새 견적에 반영 · 우리 회사 정보 → 견적서에 반영 · 견적 삭제
속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준으로 세 번 측정해 가운데 값)
| 성능 | 접근성 | 권장사항 | 검색 최적화 |
|---|
| 휴대폰 | 99 | 100 | 100 | 100 |
| PC | 100 | 100 | 100 | 100 |
휴대폰: 첫 화면 표시 1.4초 · 가장 큰 요소 표시 1.7초 · 화면 흔들림 0 · 입력 막힘 0ms PC: 첫 화면 표시 0.4초 · 가장 큰 요소 표시 0.4초 · 화면 흔들림 0 · 입력 막힘 0ms
오토건웍스(AutoGun Works) · 대표 박건우 · 사업자등록번호 342-27-02011 · 경기도 용인시 처인구 남사읍 어진로102번길 92-16 · contact@autogun.co.kr개인정보처리방침 
