1. 개요
| 업종 | 노트·펜·잉크 같은 문구를 파는 온라인 쇼핑몰의 주문·출고·반품 담당 |
| 사이트 목적 | 쇼핑몰에서 들어온 주문을 불러와 출고까지 처리하고, 배송이 끝난 주문의 반품·교환을 회수부터 환불까지 관리하는 운영 화면 |
| 제작 범위 | 주소가 있는 화면 3개 · 겹쳐 열리는 창 2종(주문 상세·반품 상세) · 상품 8종 · 예시 주문 16건 · 예시 주문 파일 1개 |
| 주요 흐름 | 주문 불러오기 → 먼저 볼 것 확인 → 상품 준비 → 송장 입력 출고 → 배송 완료 / 반품·교환 접수 → 회수 → 검수 → 환불 완료 또는 교환 출고 |
주문 상태, 받는 분 정보, 송장번호, 처리 기록, 반품·교환 요청과 환불 금액, 불러온 주문은 브라우저에 저장됩니다. 새로고침하거나 다시 들어와도 그대로 남아 있습니다.
범위 밖: 쇼핑몰·택배사와의 자동 연결(주문 자동 수집, 송장 자동 전송, 배송 추적), 실제 환불 결제, 고객 알림 문자·메일, 로그인과 담당자 권한 나누기, 여러 기기에서 함께 쓰는 서버 저장.
2. 과제
1. 늦어지는 주문을 사람이 찾아다니지 않게 한다.
결제된 지 이틀이 지나도 출고되지 않은 주문, 주소가 빠진 주문은 목록 속에 묻힙니다. 문제가 있는 주문이 이유와 함께 맨 위에 모여 있어야 놓치지 않습니다.
2. 출고 실수를 입력 단계에서 막는다.
송장번호 자릿수가 틀리거나 다른 주문 번호를 붙여 넣으면 고객은 배송 조회를 못 합니다. 출고한 주문을 실수로 취소하는 일도 막아야 합니다.
3. 반품 환불 금액을 매번 계산기로 두드리지 않는다.
단순 변심이면 반품 배송비를 빼고, 무료 배송이던 주문이 반품 뒤 기준 아래로 내려가면 처음 배송비도 뺍니다. 불량이면 빼지 않습니다. 이 규칙이 화면에서 바로 계산되고, 검수 결과에 따라 다시 계산되어야 합니다.
3. 화면 구조

왼쪽 메뉴에서 주문·반품·교환·주문 불러오기로 옮겨 다닙니다. 주문과 반품 요청은 목록 위에 옆에서 밀려 나오는 창으로 열리고, 한 창 안에서 단계를 넘기며 처리합니다. 메뉴 옆 숫자는 먼저 볼 주문과 처리 기다리는 반품 수입니다.
4. 주요 기능

먼저 볼 것 — 출고 지연·정보 누락·금액 확인
결제 후 이틀이 지나도 출고 전인 주문, 주소가 없거나 연락처 형식이 틀린 주문, 상품 금액과 결제 금액이 맞지 않는 주문, 반품 요청이 들어온 주문을 이유와 함께 맨 위에 모읍니다. 문제를 고치면 목록에서 바로 빠집니다.

송장 입력과 출고
주문 창에서 상품 준비 → 송장 입력 출고 → 배송 중 → 배송 완료 순서로 넘깁니다. 송장번호는 숫자 10~13자리만 받고, 다른 주문에 이미 쓴 번호와 받는 분 정보가 빠진 주문은 출고하지 않습니다. 출고 전까지만 취소할 수 있고, 취소할 때는 사유를 골라야 합니다.

반품·교환 접수와 환불 계산
배송이 끝난 주문에서 상품과 수량을 골라 접수합니다. 고르는 대로 환불 예정액이 바로 계산됩니다. 단순 변심이면 반품 배송비 3,000원을 빼고, 무료 배송이던 주문이 반품 뒤 3만 원 아래로 내려가면 처음 배송비 3,000원도 뺍니다. 불량·오배송은 빼지 않고, 교환은 단순 변심일 때 왕복 배송비를 고객 부담으로 표시합니다.

반품 처리 — 회수 → 검수 → 환불
회수 송장을 넣으면 회수 중, 도착하면 검수로 넘어갑니다. 검수에서 불량이 확인되지 않으면 단순 변심으로 바꿔 배송비를 다시 계산하고, 교환은 교환 상품 송장을 넣어야 끝납니다. 거절할 때는 사유를 골라야 하고, 모든 단계는 반품 건과 원래 주문 양쪽 기록에 남습니다.
- 주문 파일 불러오기쇼핑몰 관리자에서 내려받은 CSV를 올리면 같은 주문번호 줄을 한 주문으로 묶어 미리 보여 줍니다. 이미 있는 주문은 건너뛰고, 모르는 상품 코드는 오류로 빼고, 주소 누락·금액 불일치는 "확인할 것"으로 표시해 추가합니다. 엑셀에서 저장한 한글 파일(EUC-KR)도 글자가 깨지지 않게 읽습니다.
- 주문 목록 — 상태 탭·검색·일괄 처리상태별 탭과 주문번호·주문자·상품 검색으로 거르고, 결제 완료 주문을 여러 개 골라 한 번에 상품 준비로 넘깁니다. 보이는 주문을 상품 줄 단위 CSV로 내려받습니다. CSV는 엑셀에서 한글이 깨지지 않게 저장합니다.
- 반품·교환 목록처리 중·접수·회수 중·검수·완료·거절로 거르고, 요청마다 구분·사유·상품·환불 예정액을 한 줄로 봅니다. 전체 요청은 배송비 차감액과 환불액이 들어간 CSV로 내려받습니다.
5. 기술
| 반응형 | 900px 기준으로 배치가 바뀝니다. PC는 왼쪽 메뉴와 표, 900px 아래는 메뉴가 위쪽 한 줄 탭으로 올라오고 표 줄이 항목 이름이 붙은 카드로 바뀝니다. 상세 창은 PC에서 오른쪽 560px, 휴대폰에서 화면 전체로 열립니다. |
| 글꼴 | 본문 Pretendard, 주문번호·송장번호 나눔고딕코딩(둘 다 무료 공개 글꼴). 쓰인 글자만 남겨 두 파일 합쳐 97KB로 줄였습니다. |
| 이미지 | 사진·그림 파일 없이 글자와 선으로만 구성했습니다. |
| 움직임 | 상세 창이 옆에서 밀려 나오는 것과 알림 문구 외에는 움직임을 넣지 않았습니다. 기기에서 움직임 줄이기를 켜면 멈춥니다. |
| 접근성 | 상세 창은 열리면 창으로 초점이 옮겨지고 Esc로 닫히며, 닫으면 누르던 자리로 초점이 돌아옵니다. 모든 입력 칸에 이름표를 붙였고 틀린 칸은 테두리와 문장으로 함께 알려 줍니다. 상태는 색과 글자를 함께 씁니다. |
| 사용 기술 | HTML·CSS·JavaScript(외부 라이브러리 없음). 주문·반품 기록은 브라우저 저장소(localStorage)에 저장하고 다시 읽습니다. CSV는 따옴표·쉼표가 든 칸까지 직접 읽고, UTF-8로 읽히지 않으면 EUC-KR로 다시 읽습니다. 화면은 주소(#/orders 등)로 나눠 뒤로 가기가 동작하고, 입력한 글자는 글자로만 표시해 태그가 실행되지 않습니다. |
6. 검수
PC 1440·휴대폰 390 화면에서 실제로 띄워, 사람이 쓰는 순서대로 눌러 본 결과입니다. 저장한 뒤 새로고침하고 다시 조회되는지까지 확인했습니다. (2026-09-23)
| 항목 | PC 1440 | 휴대폰 390 |
|---|
| 화면 오류 | 0 | 0 |
| 깨진 파일 | 0 | 0 |
| 가로 넘침·글자 잘림 | 0 | 0 |
| 동작 시험 | 17 / 17 통과 | 17 / 17 통과 |
동작 시험 17가지: 먼저 볼 것(출고 지연·정보 누락·반품 요청) · 상태 탭과 상품 검색 · 주소 채우면 확인 목록에서 빠짐 · 잘못된 송장번호 막기 · 출고 → 배송 중 → 배송 완료와 출고 뒤 취소 막기 · 여러 건 한 번에 상품 준비 · 사유 없는 취소 막기와 주문 취소 · 새로고침 뒤 상태·기록 유지 · 단순 변심 반품 배송비 차감 계산 · 회수 → 검수 → 환불 완료 · 불량 아님 판정 시 교환 배송비 다시 계산 · 사유 고른 반품 거절 · 예시 주문 파일 확인(추가·건너뜀·오류) · 주문 추가 뒤 새로고침과 금액 확인 표시 · EUC-KR 한글 파일 읽기 · 주문 CSV 내려받기 · 반품·교환 CSV 내려받기와 뒤로 가기
속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준으로 세 번 측정)
| 성능 | 접근성 | 권장사항 | 검색 최적화 |
|---|
| 휴대폰 | 100 (세 번 100·100·98) | 100 | 100 | 100 |
| PC | 99 | 100 | 100 | 100 |
휴대폰: 첫 화면 표시 1.1초 · 가장 큰 요소 표시 1.7초 · 화면 흔들림 0.001 · 입력 막힘 0ms PC: 첫 화면 표시 0.3초 · 가장 큰 요소 표시 0.4초 · 화면 흔들림 0.074 · 입력 막힘 0ms
오토건웍스(AutoGun Works) · 대표 박건우 · 사업자등록번호 342-27-02011 · 경기도 용인시 처인구 남사읍 어진로102번길 92-16 · contact@autogun.co.kr개인정보처리방침