1. 개요
| 업종 | 여러 공급처에서 물건을 받아 파는 도소매·온라인 판매 |
| 사이트 목적 | 재고 파일을 올리면 안전 재고 아래 품목을 골라 발주 수량을 제안하고, 공급처별 발주 목록으로 저장·내려받는 업무 도구 |
| 제작 범위 | 주소가 있는 화면 3개(발주 계산·저장한 목록·목록 조회) · 저장 창 1개 · 계산에 쓰는 열 11개 · 예시 재고 파일 1개(24품목·공급처 5곳) |
| 주요 흐름 | 재고 파일 불러오기 → 열 연결 → 발주 수량 계산 → 수량 고치기·빼기 → 저장 → 저장한 목록 다시 열기 → 공급처별 CSV |
불러온 파일, 열 연결, 고친 수량과 뺀 품목, 저장한 발주 목록은 브라우저에 저장됩니다. 새로고침하거나 다시 들어와도 그대로 남아 있습니다.
범위 밖: 쇼핑몰·창고 프로그램과 재고 자동 연동, 공급처에 발주서 메일·팩스 보내기, 엑셀(xlsx) 파일 직접 읽기(CSV로 저장해 올림), 여러 기기에서 같은 목록을 함께 쓰는 서버 저장.
2. 과제
1. 발주는 매번 엑셀에서 손으로 계산한다.
현재고에 입고 예정을 더하고 출고 예정을 빼서, 안전 재고와 비교하고, 최소 발주량과 박스 단위까지 맞추는 일을 품목마다 반복합니다. 파일을 올리면 이 계산이 한 번에 끝나야 합니다.
2. 틀린 행 하나가 전체 계산을 망친다.
공급처가 비었거나 숫자 칸에 글자가 들어간 행이 섞이면 합계가 틀어져도 알아채기 어렵습니다. 못 읽은 행은 이유와 함께 따로 보여야 합니다.
3. 발주는 공급처마다 따로 보낸다.
계산 결과를 공급처별로 다시 나눠 붙이는 데 시간이 더 듭니다. 공급처마다 품목·수량·금액이 묶여 있고, 그대로 내려받을 수 있어야 합니다.
3. 화면 구조

계산은 첫 화면 한 곳에서 끝납니다. 파일 불러오기·열 연결·계산 방식이 왼쪽에, 결과와 공급처 탭이 오른쪽에 있고, 저장한 목록과 목록 조회는 주소가 따로 있어 뒤로 가기와 새로고침에도 그 자리에 머뭅니다.
4. 주요 기능

발주 수량 계산과 요약
가용 재고(현재고 + 입고 예정 − 출고 예정)가 안전 재고보다 적은 품목만 남깁니다. 목표 재고까지 필요한 양과 최소 발주량 중 큰 값을 발주 단위 배수로 올려 제안하고, 맨 위에 대상 품목 수와 제안대로 발주할 때의 금액을 한 줄로 보여 줍니다.

발주 수량 고치기 · 빼기 · 되돌리기
제안 수량을 직접 고치면 "직접 고침 · 제안 96"처럼 원래 값이 옆에 남고, 발주 단위의 배수가 아니면 빨간 표시로 알려 줍니다. 이번에 넣지 않을 품목은 체크를 풀어 빼고, 한 번에 제안 수량으로 되돌릴 수 있습니다.

공급처별로 나눠 보기
공급처 탭마다 품목 수와 금액이 붙어 있어, 누르면 그 공급처 품목만 남습니다. 아래 막대의 합계와 CSV 받기도 고른 공급처 기준으로 바뀝니다.

저장한 발주 목록 다시 열기
목록 이름을 붙여 저장하면 저장 시각·파일 이름·공급처 수·금액과 함께 쌓입니다. 열면 공급처별 표로 나뉘어 있고, 전체 또는 공급처 하나만 CSV로 내려받습니다. 필요 없는 목록은 삭제합니다.
- 계산에서 뺀 행 안내공급처가 비었거나 숫자 칸에 "열둘" 같은 글자가 들어간 행은 계산에 넣지 않고, 몇 번째 행인지와 이유를 함께 보여 줍니다. 원본을 고쳐 다시 올리면 됩니다.
- 머리글이 다른 파일도 열 연결품목코드·공급처·현재고 등 11개 열을 머리글 이름(SKU, 거래처, 재고 등)으로 자동 연결합니다. 연결되지 않은 필수 열은 빨갛게 표시되고, 직접 고르면 바로 다시 계산합니다.
5. 기술
| 반응형 | 980·720px 기준으로 배치가 바뀝니다. PC는 왼쪽 설정과 오른쪽 결과가 나란히, 980px 아래는 설정이 결과 위로 올라가 한 칸이 되고, 720px 아래는 품목 줄이 항목 이름이 붙은 카드로 바뀌며 아래 합계 막대의 버튼이 한 줄을 나눠 씁니다. |
| 글꼴 | 본문 Pretendard, 숫자 Archivo(둘 다 무료 공개 글꼴). 이 화면에 쓰인 글자만 남겨 두 파일 합쳐 161KB로 줄였습니다. |
| 이미지 | 사진이 없는 업무 화면입니다. 상태 표시와 표는 CSS로 그렸습니다. |
| 움직임 | 알림 문구가 잠깐 나타났다 사라지는 것 외에는 움직임을 넣지 않았습니다. 기기에서 움직임 줄이기를 켜면 그마저 멈춥니다. |
| 접근성 | 모든 입력 칸과 체크 상자에 이름표를 붙였고, 공급처 탭은 탭 역할을 알려 줍니다. 경고는 색과 글자를 함께 씁니다. 접근성 측정 100점. |
| 사용 기술 | HTML·CSS·JavaScript(외부 라이브러리 없음). 파일은 브라우저 안에서만 읽고 계산하며 어디에도 전송하지 않습니다. 엑셀에서 저장한 한글 CSV(EUC-KR)도 읽습니다. 작업 내용과 저장 목록은 브라우저 저장소(localStorage)에 저장하고, 내려받는 CSV는 엑셀에서 한글이 깨지지 않게 저장합니다. 파일 안 글자는 화면에 그릴 때 글자로만 표시해 태그가 실행되지 않습니다. |
6. 검수
PC 1440·휴대폰 390 화면에서 실제로 띄워, 사람이 쓰는 순서대로 눌러 본 결과입니다. 저장한 뒤 새로고침하고 다시 조회되는지까지 확인했습니다. (2026-09-23)
| 항목 | PC 1440 | 휴대폰 390 |
|---|
| 화면 오류 | 0 | 0 |
| 깨진 파일 | 0 | 0 |
| 가로 넘침·글자 잘림 | 0 | 0 |
| 동작 시험 | 16 / 16 통과 | 16 / 16 통과 |
동작 시험 16가지: 첫 화면 표시 · 예시 재고 파일 불러오기와 계산 · 계산값 확인(가용·단위 올림·경계값) · 계산에서 뺀 행 안내 · 열 연결 표시 · 공급처별 보기 · 수량 직접 고치기·단위 경고·되돌리기 · 품목 빼기 · 품목 찾기 · 새로고침 뒤 작업 유지 · CSV 받기 · 발주 목록 저장 · 새로고침 뒤 저장 목록 조회 · 저장 목록에서 공급처별 CSV · 다른 머리글 파일 올리기와 열 직접 연결 · 저장 목록 삭제
속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준으로 세 번 측정해 가운데 값)
| 성능 | 접근성 | 권장사항 | 검색 최적화 |
|---|
| 휴대폰 | 99 | 100 | 100 | 100 |
| PC | 100 | 100 | 100 | 100 |
휴대폰: 첫 화면 표시 1.2초 · 가장 큰 요소 표시 1.8초 · 화면 흔들림 0.000 · 입력 막힘 0ms PC: 첫 화면 표시 0.3초 · 가장 큰 요소 표시 0.4초 · 화면 흔들림 0.000 · 입력 막힘 0ms
오토건웍스(AutoGun Works) · 대표 박건우 · 사업자등록번호 342-27-02011 · 경기도 용인시 처인구 남사읍 어진로102번길 92-16 · contact@autogun.co.kr개인정보처리방침