1. 개요
| 업종 | 하루 배차표를 여러 번 고쳐 기사님께 다시 알리는 화물 운송·배송 사업자 |
| 사이트 목적 | 배차표를 고칠 때마다 무엇이 바뀌었는지 찾고, 겹치는 운행을 막고, 기사님께 알리는 일을 한 화면에서 끝내는 업무 도구 |
| 제작 범위 | 화면 2개(비교하기 · 확인 기록) · 보기 2개(변경 목록 · 차량별 시간표) · 예시 배차표 2개(확정본 19건, 수정본 22건) |
| 주요 흐름 | 이전·새 배차표 올리기 → 비교 → 변경 목록·시간표 확인 → 확인 상태·메모 → 기사님 안내 복사 → CSV 받기 / 확인 저장 → 확인 기록에서 다시 열기 |
지금 보던 비교, 배차마다 확인 상태와 메모, 확인 기록 목록은 브라우저에 저장됩니다. 새로고침하거나 다시 들어와도 그대로 남아 있습니다. 올린 파일은 이 브라우저 안에서만 읽고, 어디에도 전송하지 않습니다.
범위 밖: 문자·메신저 자동 발송(안내 문구는 복사해서 붙여 넣음), 운송 관리 프로그램 연결, 여러 사람이 같은 확인을 함께 보는 서버 저장.
2. 과제
1. 고친 배차표는 어디가 바뀌었는지 보이지 않는다.
파일을 새로 받으면 전체가 다시 보입니다. 시간·차량·기사·상하차지 중 바뀐 칸만 이전 값과 나란히 봐야 합니다.
2. 겹치는 운행은 사고로 이어진다.
급하게 고치다 보면 같은 차량이나 기사가 같은 시간에 두 번 잡힙니다. 배차표를 보내기 전에 걸러내야 합니다.
3. 바뀐 내용을 기사님마다 따로 알려야 한다.
기사님은 자기 배차만 알면 됩니다. 기사님별로 바뀐 배차를 모아 문구로 보내고, 확인했는지 남겨야 합니다.
3. 화면 구조
비교는 첫 화면 한 곳에서 두 파일 올리기 → 결과까지 이어지고, 변경 목록과 차량별 시간표를 바꿔 봅니다. 확인 기록은 주소가 따로 있는 화면이라 뒤로 가기와 새로고침에도 그 자리에 머뭅니다.
4. 주요 기능
변경 목록 — 이전 값 → 새 값
배차번호로 두 파일을 맞춰 바뀐 칸만 이전 값 → 새 값으로 표시합니다. 바뀜 · 새로 생김 · 빠짐 · 시간 겹침 · 차량 미정으로 나눠 건수를 붙였습니다.
차량별 시간표
차량마다 05~18시 막대로 운행을 그리고 종류별로 색을 나눴습니다. 막대를 누르면 변경 목록의 그 배차로 옮겨 갑니다.
시간 겹침 찾기
같은 차량이나 같은 기사의 상차~하차 시간이 겹치면 두 배차를 함께 표시합니다. 시간표에서도 빨간 테두리로 보입니다.
기사님별 변경 안내
바뀐 배차가 있는 기사님마다 날짜·배차번호·바뀐 내용을 문구로 만듭니다. 복사 단추로 문자나 메신저에 바로 붙여 넣습니다.
- 확인 상태와 확인 기록배차마다 확인 전 · 확인함 · 연락 필요와 메모를 남기면 바로 저장됩니다. 이름을 붙여 저장한 확인은 기록에서 다시 열어 이어 갑니다.
5. 기술
| 반응형 | 1000·640px 기준으로 배치가 바뀝니다. PC는 목록과 오른쪽 확인 칸 2단, 1000px 아래는 1단, 640px 아래는 변경 목록을 배차마다 카드로 바꿉니다. 시간표는 칸 안에서만 가로로 넘겨 화면 전체가 넘치지 않습니다. |
| 글꼴 | 본문 Pretendard, 숫자·코드 Jetbrains Mono(둘 다 무료 공개 글꼴). 사이트 안에 넣어 외부 요청 없이 불러옵니다. 본문 글꼴은 이 화면에 쓰인 글자만 먼저 받고(63KB), 사용자가 올린 파일에만 나오는 한글은 나머지 2,350자 파일(374KB)에서 필요할 때만 받습니다. 숫자 글꼴 42KB. |
| 이미지 | 사진 없이 만들었습니다. 아이콘은 SVG로 그려 어느 화면에서도 선명합니다. 도표도 계산한 값으로 바로 그리는 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 |
| 동작 시험 | 14 / 14 통과 | 14 / 14 통과 |
동작 시험 14가지: 예시 배차표 불러오기 → 비교 · 바뀐 칸만 이전 값 → 새 값으로 표시 · 시간 겹침만 보기 · 차량별 시간표 · 시간표 칸 누르면 해당 배차로 이동 · 확인 상태·메모 → 새로고침 뒤 유지 · 기사님별 변경 안내 문구 만들기·복사 · 변경 목록 CSV 받기 · 확인 저장 → 확인 기록 · 새로고침 뒤 확인 기록 조회 · 기록 열기 → 뒤로 가기 · 직접 파일 올리기(수정본은 EUC-KR) · 배차번호 열이 없는 파일은 거절 · 확인 기록 삭제
속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준으로 세 번 측정해 같은 값)
| 성능 | 접근성 | 권장사항 | 검색 최적화 |
|---|
| 휴대폰 | 100 | 100 | 100 | 100 |
| PC | 100 | 100 | 100 | 100 |
휴대폰: 첫 화면 표시 1.2초 · 가장 큰 요소 표시 1.7초 · 화면 흔들림 0 · 입력 막힘 40ms PC: 첫 화면 표시 0.4초 · 가장 큰 요소 표시 0.4초 · 화면 흔들림 0 · 입력 막힘 0ms
오토건웍스(AutoGun Works) · 대표 박건우 · 사업자등록번호 342-27-02011 · 경기도 용인시 처인구 남사읍 어진로102번길 92-16 · contact@autogun.co.kr개인정보처리방침 
