1. 개요

업종소형 전자제품을 조립하는 공장의 자재 창고 (공급처 3곳, 자재 14종)
시스템 목적무엇이 모자라는지, 무엇이 들어오기로 했는지를 한 화면에서 보고, 발주부터 입고·출고까지 수량이 맞게 따라가게 하는 것
제작 범위페이지 4개 · 화면 8개 · 품목 14종(분류 3개) · 공급처 3곳
주요 흐름부족 확인 → 발주서 초안(공급처별) → 저장 / 입고 수량 확인 → 재고 반영 · 일부 입고 / 출고 기록 / 재고 실사 파일 → 차이 반영 / 입출고 기록 → CSV 내려받기

품목 재고, 안전재고, 발주서와 입고 수량, 입출고·조정 기록은 브라우저에 저장됩니다. 새로고침하거나 다시 들어와도 그대로 남아 있습니다.

범위 밖: 여러 사람이 함께 쓰는 서버 저장과 로그인, 바코드 스캐너 연결, 공급처로 발주서 메일 발송, 회계 프로그램 연동. 도입할 때 회사 환경에 연결합니다.

2. 과제

1. "재고가 적다"와 "주문해야 한다"는 다르다.

안전재고보다 적어도 이미 발주해 둔 물량이 오고 있으면 또 주문할 필요가 없습니다. 들어올 수량까지 더해서 정말 모자라는 품목만 골라야 중복 발주가 없어집니다.

2. 발주서와 실제 입고 수량이 어긋난다.

공급처는 나눠서 보내고, 창고는 받은 만큼만 적어야 합니다. 남은 수량과 일부 입고 상태가 발주서마다 보여야 합니다.

3. 장부와 창고 실물이 조금씩 틀어진다.

월말 실사에서 센 수량을 한 줄씩 대조하기는 오래 걸립니다. 다른 품목만 골라 보여 주고, 반영한 조정도 기록으로 남아야 합니다.

3. 화면 구조

재고 → 발주 → 입고 → 입출고 기록 네 화면이 위 메뉴로 이어지고, 주소가 따로 있어 뒤로 가기가 동작합니다. 품목을 누르면 옆에서 상세가 열려 출고와 안전재고 변경을 그 자리에서 합니다.

4. 주요 기능

부족 판정과 발주서 초안 화면

부족 판정과 발주서 초안

현재고에 입고 예정 수량을 더해도 안전재고에 못 미치는 품목만 "부족"으로 고릅니다. 버튼 하나로 공급처별 발주서 초안이 만들어지고, 수량은 안전재고의 두 배까지 채우는 양을 발주 단위로 올려 제안합니다. 수량을 고치면 금액이 바로 바뀌고, 발주 단위의 배수가 아니면 저장되지 않습니다.

입고 처리 — 일부 입고 화면

입고 처리 — 일부 입고

입고를 기다리는 발주서마다 품목별 남은 수량이 나오고, 이번에 들어온 수량을 적어 확인합니다. 재고에 더해지고 입고 기록이 남으며, 다 들어오지 않았으면 "일부 입고"로 남습니다. 남은 수량보다 많이 적으면 저장되지 않습니다.

재고 실사 파일 맞춰 보기 화면

재고 실사 파일 맞춰 보기

창고에서 센 수량을 CSV(코드, 실사 수량)로 올리면 장부와 다른 품목만 골라 차이를 보여 줍니다. 없는 코드나 숫자가 아닌 수량은 건너뛰고 몇 번째 줄인지 알려 줍니다. 반영하면 차이만큼 "조정" 기록이 남습니다.

재고 현황 — 검색·분류·부족만 화면

재고 현황 — 검색·분류·부족만

코드·품목 이름으로 찾고, 체결·전자·포장 분류와 "부족·입고 대기만"으로 거릅니다. 품목마다 현재고·안전재고·입고 예정·상태·창고 위치가 한 줄에 나오고, 휴대폰에서는 카드로 바뀝니다.

  • 품목 상세 — 출고 기록품목을 누르면 현재고·안전재고·입고 예정과 이 품목의 기록이 열립니다. 출고 수량과 보낼 곳(조립 라인·출하 포장·불량 폐기)을 적으면 재고에서 빠지고, 현재고보다 많이 빼려 하면 막습니다.
  • 안전재고 바꾸기품목 상세에서 안전재고를 바꾸면 부족 판정과 메뉴의 부족 숫자가 바로 다시 계산됩니다.
  • 발주 목록 — 직접 쓰기·취소발주서마다 공급처·품목·금액·납기·상태(발주함·일부 입고·입고 끝·취소)가 나오고, 납기가 지나면 표시됩니다. 공급처를 골라 발주서를 직접 쓸 수 있고, 아직 입고되지 않은 발주는 취소합니다.
  • 입출고 기록과 CSV 내려받기입고·출고·조정이 날짜순으로 쌓이고 종류별로 거를 수 있습니다. 지금 거른 기록 그대로 CSV로 내려받습니다.

5. 기술

반응형980·760px 기준으로 배치가 바뀝니다. PC는 위 메뉴와 한 줄 표, 760px 아래는 메뉴가 네 칸 버튼으로 내려오고 표는 품목마다 카드로 바뀝니다. 수량 입력칸은 휴대폰에서 숫자 자판이 뜹니다.
글꼴본문 Pretendard, 코드·수량·금액 IBM Plex Mono(둘 다 무료 공개 글꼴). 자릿수가 세로로 맞아 수량 비교가 쉽습니다. 사이트 안에 넣어 외부 요청 없이 불러오고, 본문 글꼴은 쓰인 글자만 남겨 2,010KB → 79KB로 줄였습니다.
이미지사진 없이 표와 막대로 구성했습니다. 전체 전송량은 글꼴 포함 약 145KB입니다.
움직임라이브러리 없이 CSS 전환으로 만들었습니다. 품목 상세가 옆에서 밀려 나오고, 기기에서 움직임 줄이기를 켜면 전환이 멈춥니다.
접근성수량 입력칸마다 품목 이름이 들어간 이름표를 붙였고, 틀린 칸은 테두리와 문장으로 함께 알려 줍니다. 표의 줄은 키보드로 골라 Enter로 열고, Esc로 창을 닫습니다. 접근성 측정 100점.
사용 기술HTML·CSS·JavaScript(외부 라이브러리 없음). 자료는 브라우저 저장소(localStorage)에 저장하고 다시 읽습니다. 모든 수량 변화는 입고·출고·조정 기록을 거쳐서만 재고에 반영되도록 한곳에 모았습니다. CSV 읽기·쓰기는 직접 구현했습니다.

6. 검수

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

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

동작 시험 11가지: 부족·입고 대기 표시 · 검색·분류·부족만 거르기 · 재고 실사 파일(차이 3건 반영, 잘못된 줄 2건 건너뜀) · 부족 품목 발주서 초안(발주 단위 확인 뒤 저장) · 직접 발주서 쓰기와 취소 · 입고 처리(초과 입력 막기, 일부 입고) · 품목 출고(현재고 초과 막기) · 안전재고 변경과 부족 판정 · 새로고침 뒤 재고·발주·기록 유지 · 입출고 기록 거르기와 CSV 내려받기 · 뒤로 가기

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

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

휴대폰: 첫 화면 표시 1.2초 · 가장 큰 요소 표시 1.7초 · 화면 흔들림 0 · 입력 막힘 0ms PC: 첫 화면 표시 0.3초 · 가장 큰 요소 표시 0.4초 · 화면 흔들림 0.002 · 입력 막힘 0ms

7. 결과

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