1. 개요

업종화주와 운송사·기사를 이어 주는 화물 운송 중개
사이트 목적화주·배차 담당·기사·정산 담당이 같은 운송 건을 각자 화면에서 이어서 처리하는 운영 시스템
제작 범위주소가 있는 화면 5개 · 겹쳐 열리는 창 2개 · 차종 5종 · 운송사 3곳·기사 6명
주요 흐름요청 접수 → 배차 → 상차 → 운송 → 하차 증빙 → 정산 확정 / 운송번호로 진행 조회

운송 요청, 배차, 단계별 처리 기록, 인수자와 인수증 사진, 정산 상태는 브라우저에 저장됩니다. 새로고침하거나 다시 들어와도 그대로 남아 있습니다.

범위 밖: 실시간 차량 위치, 지도 경로, 문자·알림톡 발송, 세금계산서 발행, 여러 기기에서 같은 데이터를 함께 쓰는 서버 저장, 로그인과 권한 나누기.

2. 과제

1. 전화와 메신저로 흩어진 배차를 한곳에 모은다.

요청은 전화로 받고, 배차는 단체방에서 하고, 결과는 엑셀에 옮겨 적습니다. 누가 어떤 건을 맡았는지 한 화면에서 보여야 빠진 건과 겹친 건이 없어집니다.

2. 맞지 않는 차를 보내는 실수를 막는다.

차종이 다른 기사, 같은 날 이미 운행이 잡힌 기사에게 배차하면 현장에서 되돌리느라 하루가 날아갑니다. 배차할 때 미리 걸러져야 합니다.

3. 하차 증빙이 있어야 정산이 끝난다.

인수증이 늦게 오면 운송사 지급도 늦어집니다. 기사가 하차하면서 바로 증빙을 남기고, 정산 담당은 확인된 건만 골라 확정해야 합니다.

3. 화면 구조

역할마다 주소가 있는 화면을 하나씩 두었습니다. 운송 상세와 하차 증빙은 목록 위에서 열리고, 같은 운송 건이 요청 → 배차 → 기사 → 정산 순서로 넘어갑니다. 뒤로 가기와 새로고침에도 보던 화면에 머뭅니다.

4. 주요 기능

차종·일정이 맞는 기사만 배차 화면

차종·일정이 맞는 기사만 배차

운송 건을 고르면 기사 여섯 명이 모두 나오고, 배차할 수 없는 기사는 이유가 함께 붙습니다. 차종이 다르면 "차종이 다름", 그날 다른 운행이 있으면 "같은 날 ○○ 운행 중"으로 막힙니다. 확정 운임을 고쳐 적고 배차하면 상태와 처리 기록이 바로 바뀝니다.

기사 화면 — 단계 넘기기와 하차 증빙 화면

기사 화면 — 단계 넘기기와 하차 증빙

기사는 휴대폰에서 자기 운행만 보고 상차 완료 → 운송 출발 → 하차 완료 순서로 누릅니다. 하차할 때는 인수자 이름과 인수증 사진이 둘 다 있어야 넘어갑니다. 사진은 폭 480px로 줄여 저장해 다시 들어와도 열립니다.

운송사 정산과 CSV 내려받기 화면

운송사 정산과 CSV 내려받기

하차가 끝난 운행을 월·운송사별로 묶어 운임, 수수료 8%, 지급액을 계산합니다. 확인한 건만 골라 정산을 확정하고, 보고 있는 목록을 CSV 파일로 내려받습니다. CSV는 엑셀에서 한글이 깨지지 않게 저장합니다.

운송 조회 화면

운송 조회

운송번호와 연락처 뒤 네 자리가 둘 다 맞아야 운송 건이 보입니다. 진행 단계, 배차 기사, 인수자와 인수증 사진, 처리 기록을 한 번에 확인합니다.

  • 운송 요청 접수출발지·도착지·상차일·차종·무게·운임·연락처를 받아 운송번호(JM-날짜-순번)를 돌려줍니다. 차종마다 실을 수 있는 무게를 넘으면 "1톤 카고에는 1톤까지"처럼 이유를 알려 주고 접수하지 않습니다. 배차 전 요청은 화주가 직접 취소할 수 있습니다.
  • 배차 관리 목록배차 기다리는 요청, 오늘 상차, 운송 중, 정산 전 건수를 맨 위 한 줄로 보여 줍니다. 상태별로 거르고 운송번호·지역·화주로 검색하며, 배차할 건이 목록 위로 올라옵니다.
  • 운송 상세와 처리 기록화주·경로·화물·운임·기사와 하차 증빙, 단계마다 남은 시각과 내용을 한 창에서 봅니다. 누가 언제 배차하고 취소했는지까지 기록으로 남습니다.

5. 기술

반응형1100·900·760px 기준으로 배치가 바뀝니다. PC는 목록과 상세가 나란히, 1100px 아래는 상세가 화면 전체로 열리고, 900px 아래는 표 줄이 카드로 바뀝니다. 760px 아래는 입력 칸이 한 줄씩 놓이고 정산 표도 항목 이름이 붙은 카드로 바뀝니다.
글꼴본문 IBM Plex Sans KR, 운송번호 IBM Plex Mono(둘 다 무료 공개 글꼴). 이 화면에 쓰인 글자만 남겨 네 파일 합쳐 136KB로 줄였습니다.
이미지화면에는 사진이 없고, 경로 화살표·진행 막대·상태 표시는 CSS로 그렸습니다. 기사가 올린 인수증 사진은 폭 480px JPEG로 줄여 저장합니다.
움직임알림 문구가 잠깐 나타났다 사라지는 것 외에는 움직임을 넣지 않았습니다. 기기에서 움직임 줄이기를 켜면 그마저 멈춥니다.
접근성모든 입력 칸에 이름표를 붙였고, 틀린 칸은 테두리와 문장으로 함께 알려 주며 첫 번째 틀린 칸으로 이동합니다. 상태는 색과 글자를 함께 씁니다. Esc로 상세 창을 닫습니다. 접근성 측정 100점.
사용 기술HTML·CSS·JavaScript(외부 라이브러리 없음). 운송 요청·배차·처리 기록·증빙 사진·정산 상태는 브라우저 저장소(localStorage)에 저장하고 다시 읽습니다. 화면은 주소(#/dispatch 등)로 나눠 뒤로 가기가 동작합니다. 입력한 글자는 화면에 그릴 때 글자로만 표시해 태그가 실행되지 않습니다.

6. 검수

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

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

동작 시험 16가지: 무게 초과 요청 막기 · 운송 요청 접수와 운송번호 발급 · 새로고침 뒤 요청 내역 유지 · 배차 전 요청 취소 · 상태 거르기 · 지역 검색 · 차종·일정 맞는 기사만 배차 · 같은 날 운행 겹치는 기사 막기 · 상차·출발 단계 넘기기 · 사진 없는 하차 막기와 증빙 저장 · 새로고침 뒤 증빙 사진·기록 조회 · 운송사 정산 확정과 수수료 계산 · 정산 CSV 내려받기 · 새로고침 뒤 정산 상태 유지 · 운송번호·연락처 조회 · 뒤로 가기

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

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

휴대폰: 첫 화면 표시 1.5초 · 가장 큰 요소 표시 1.8초 · 화면 흔들림 0.066 · 입력 막힘 0ms PC: 첫 화면 표시 0.4초 · 가장 큰 요소 표시 0.4초 · 화면 흔들림 0.007 · 입력 막힘 0ms

7. 결과

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