1. 개요
| 업종 | 오픈마켓·자사몰·라이브 판매 등 여러 채널에서 파는 온라인 판매자 |
| 사이트 목적 | 주문 파일에서 사람이 챙겨야 하는 주문만 골라 네 가지로 나누고, 주문마다 처리 상태와 메모를 남기는 확인 도구 |
| 제작 범위 | 첫 화면 1개 · 주문 상세 창 1개 · 문제 네 가지(미출고·송장 누락·반품 지연·환불 대기) · 예시 주문 33건(채널 4곳) |
| 주요 흐름 | 주문 파일 불러오기 → 기준일·기준 일수 정하기 → 네 줄 확인 → 주문 열기 → 처리 상태·메모 저장 → 문제 목록 CSV |
주문 파일, 기준일, 채널·기준 일수, 주문별 처리 상태·메모·처리 기록은 브라우저에 저장됩니다. 새로고침하거나 다시 들어와도 그대로 남아 있습니다.
범위 밖: 판매 채널·택배사 프로그램과 자동 연동, 송장 조회, 고객 문자·알림 발송, 환불 실행, 여러 기기에서 같은 기록을 함께 쓰는 서버 저장.
2. 과제
1. 문제 주문은 전체 주문 속에 묻혀 있다.
하루 주문 대부분은 잘 나갑니다. 문제는 몇 건 안 되는데 그걸 찾으려고 전체 목록을 매일 훑어야 합니다. 챙길 주문만 남아야 합니다.
2. "며칠 지났나"는 기준이 제각각이다.
출고는 주말을 빼고 영업일로, 반품·환불은 달력 날짜로 셉니다. 기준 일수도 판매자마다 다릅니다. 기준일과 일수를 바꿔 가며 볼 수 있어야 합니다.
3. 누가 어디까지 처리했는지 남지 않는다.
택배사에 연락했는지, 창고에 확인 중인지 메신저로만 오가면 다음 사람이 같은 일을 또 합니다. 주문마다 상태와 메모, 바뀐 기록이 남아야 합니다.
3. 화면 구조

한 화면에서 끝납니다. 위쪽에서 파일·기준일·채널을 고르고, 가운데 네 줄에 문제 주문이 오래된 순으로 놓입니다. 주문을 누르면 옆에서 상세 창이 열려 사유를 보고 처리 상태와 메모를 남깁니다.
4. 주요 기능

문제 주문을 네 줄로 나누기
주문 33건 중 챙길 12건만 미출고 5 · 송장 누락 3 · 반품 지연 2 · 환불 대기 2로 나눕니다. 미출고는 결제 후 영업일(주말 제외)로, 반품·환불은 날짜로 세고, 취소 주문은 뺍니다. 줄마다 기준 일수를 바꾸면 바로 다시 나뉩니다.

주문 열어 사유 확인
카드를 누르면 "송장번호 12345가 10~14자리 숫자가 아닙니다"처럼 걸린 이유가 맨 위에 나오고, 채널·결제일·상품·송장·출고일·반품·환불 날짜가 한 창에 모여 있습니다.

처리 상태와 메모
확인 전 → 확인 중 → 처리 완료 중에서 고르고 메모를 남기면 카드에 바로 표시됩니다. 처리 완료된 주문은 목록에서 빠지고, "처리 완료도 보기"를 켜면 다시 보입니다.

처리 기록
상태를 바꾸거나 메모를 고칠 때마다 시각과 "확인 전 → 확인 중" 같은 기록이 쌓입니다. 새로고침하거나 다음 날 다시 열어도 그대로 남아 있습니다.
- 판매 채널 거르기오픈마켓·라이브 판매·도매 주문·자사몰 중 하나를 누르면 그 채널 주문만 남고, 문제 목록 CSV도 보이는 주문과 상태·메모를 그대로 담아 내려받습니다.
5. 기술
| 반응형 | 1100·640px 기준으로 배치가 바뀝니다. PC는 네 줄이 나란히, 1100px 아래는 두 줄씩, 640px 아래는 네 줄이 위쪽 탭으로 바뀌어 한 줄씩 보고, 주문 상세는 화면 전체로 열립니다. |
| 글꼴 | 본문 Pretendard, 숫자 Figtree(둘 다 무료 공개 글꼴). 이 화면에 쓰인 글자만 남겨 두 파일 합쳐 89KB로 줄였습니다. |
| 이미지 | 사진이 없는 업무 화면입니다. 줄·카드·상태 표시는 CSS로 그렸습니다. |
| 움직임 | 알림 문구가 잠깐 나타났다 사라지는 것 외에는 움직임을 넣지 않았습니다. 기기에서 움직임 줄이기를 켜면 그마저 멈춥니다. |
| 접근성 | 문제 종류 탭·채널 버튼은 눌린 상태를 알려 주고, 기준 일수 칸마다 이름표가 있습니다. 상태는 색과 글자를 함께 쓰고, Esc로 상세 창을 닫습니다. 접근성 측정 100점. |
| 사용 기술 | HTML·CSS·JavaScript(외부 라이브러리 없음). 파일은 브라우저 안에서만 읽고 어디에도 전송하지 않습니다. 머리글이 맞지 않는 파일은 빠진 칸 이름을 알려 주고 받지 않습니다. 상태·메모·기록은 브라우저 저장소(localStorage)에 저장하고, 입력한 글자는 화면에 그릴 때 글자로만 표시합니다. |
6. 검수
PC 1440·휴대폰 390 화면에서 실제로 띄워, 사람이 쓰는 순서대로 눌러 본 결과입니다. 저장한 뒤 새로고침하고 다시 조회되는지까지 확인했습니다. (2026-09-23)
| 항목 | PC 1440 | 휴대폰 390 |
|---|
| 화면 오류 | 0 | 0 |
| 깨진 파일 | 0 | 0 |
| 가로 넘침·글자 잘림 | 0 | 0 |
| 동작 시험 | 13 / 13 통과 | 13 / 13 통과 |
동작 시험 13가지: 첫 방문에 예시 주문 표시 · 예시 주문 파일 불러오기와 네 줄 분류 · 영업일 경계와 취소 주문 제외 · 판매 채널 거르기 · 기준 일수 바꾸기 · 기준일 바꾸기 · 주문 열어 사유 확인 · 처리 상태·메모 저장 · 처리 완료는 목록에서 빠짐 · 새로고침 뒤 상태·메모·처리 기록 유지 · 문제 목록 CSV · 머리글이 다른 파일은 막기 · 직접 올린 주문 파일
속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준으로 세 번 측정해 가운데 값)
| 성능 | 접근성 | 권장사항 | 검색 최적화 |
|---|
| 휴대폰 | 99 | 100 | 100 | 100 |
| PC | 100 | 100 | 100 | 100 |
휴대폰: 첫 화면 표시 0.9초 · 가장 큰 요소 표시 1.5초 · 화면 흔들림 0.000 · 입력 막힘 134ms PC: 첫 화면 표시 0.3초 · 가장 큰 요소 표시 0.4초 · 화면 흔들림 0.000 · 입력 막힘 0ms
오토건웍스(AutoGun Works) · 대표 박건우 · 사업자등록번호 342-27-02011 · 경기도 용인시 처인구 남사읍 어진로102번길 92-16 · contact@autogun.co.kr개인정보처리방침