1. 개요
| 업종 | 여러 판매 채널에서 주문을 받고 채널별 정산을 따로 받는 온라인 판매 사업자 |
| 사이트 목적 | 매달 주문 내역과 정산 내역을 한 줄씩 눈으로 맞추던 일을 파일 두 개 올리기로 줄이는 업무 도구 |
| 제작 범위 | 화면 2개(대조하기 · 저장한 대조) · 예시 파일 2개(8월 주문 40줄, 정산 38줄) |
| 주요 흐름 | 파일 두 개 올리기 → 열 고르기 → 대조 → 상태별로 보기 → 확인·메모 → CSV 받기 / 대조 저장 → 저장한 대조에서 다시 열기 |
지금 보던 대조 결과, 줄마다 확인 표시와 메모, 저장한 대조 목록은 브라우저에 저장됩니다. 새로고침하거나 다시 들어와도 그대로 남아 있습니다. 올린 파일은 이 브라우저 안에서만 읽고, 어디에도 전송하지 않습니다.
범위 밖: 마켓 관리자 화면에서 정산 파일을 자동으로 받아 오는 연결, 회계 프로그램으로 보내기, 여러 사람이 같은 대조를 함께 보는 서버 저장.
2. 과제
1. 금액이 맞는지 한 줄씩 보면 하루가 간다.
채널마다 수수료가 달라 예상 정산액과 실제 들어온 금액이 조금씩 어긋납니다. 수백 줄을 눈으로 맞추다 보면 틀린 줄을 놓칩니다.
2. 빠진 정산은 표에 보이지 않는다.
정산 파일에 없는 주문은 애초에 줄이 없어서 찾기 어렵습니다. 주문에는 있는데 정산에 없는 건, 반대로 정산만 들어온 건을 따로 골라야 합니다.
3. 확인한 내용이 흩어진다.
어느 건을 마켓에 문의했는지 메모가 엑셀·메신저에 흩어집니다. 대조 결과와 확인 메모가 한자리에 남아 다음 달에도 이어서 봐야 합니다.
3. 화면 구조

대조는 첫 화면 한 곳에서 파일 올리기 → 열 고르기 → 결과까지 이어집니다. 저장한 대조는 주소가 따로 있는 화면이라 뒤로 가기와 새로고침에도 그 자리에 머뭅니다.
4. 주요 기능

대조 결과 — 여섯 가지로 나누기
주문번호 앞뒤 빈칸과 대소문자를 같게 보고 두 파일을 맞춥니다. 금액 차이 · 정산 누락 · 주문에 없음 · 중복 · 형식 오류 · 일치로 나누고, 위에 예상 정산액·실제 정산액·차이 합계를 붙였습니다.

상태별로 보기와 찾기
상태 단추를 누르면 그 줄만 남고, 주문번호·채널·메모로 찾을 수 있습니다. 허용 차이(원)를 정하면 그 안의 차이는 일치로 봅니다.

확인 표시와 메모
줄마다 확인 표시와 메모를 남기면 바로 저장됩니다. 새로고침해도 남아 있고, ‘확인할 건 / 확인 끝’ 숫자가 함께 바뀝니다.

저장한 대조
이름을 붙여 대조를 저장하면 주소가 따로 있는 목록에 쌓입니다. 다시 열면 확인·메모까지 복원되고, CSV로 받거나 지울 수 있습니다.
- 열 고르기와 엑셀 저장 파일열 이름을 보고 주문번호·금액 열을 먼저 골라 두고, 잘못 고르면 형식 오류로 알려 줍니다. 엑셀에서 저장한 EUC-KR 파일도 글자가 깨지지 않게 읽고, 빈 파일은 받지 않습니다.
5. 기술
| 반응형 | 900·640px 기준으로 배치가 바뀝니다. PC는 파일 칸 2단·결과 표, 900px 아래는 파일 칸 1단, 640px 아래는 결과 표를 줄마다 카드로 바꿔 가로 넘침 없이 봅니다. |
| 글꼴 | 본문 Pretendard, 숫자·코드 IBM Plex Mono(둘 다 무료 공개 글꼴). 사이트 안에 넣어 외부 요청 없이 불러옵니다. 본문 글꼴은 이 화면에 쓰인 글자만 먼저 받고(60KB), 사용자가 올린 파일에만 나오는 한글은 나머지 2,350자 파일(377KB)에서 필요할 때만 받습니다. 숫자 글꼴 29KB. |
| 이미지 | 사진 없이 만들었습니다. 아이콘은 SVG로 그려 어느 화면에서도 선명합니다. |
| 움직임 | 라이브러리 없이 CSS 전환만 씁니다. 알림이 아래에서 올라오는 정도로 줄였고, 기기에서 움직임 줄이기를 켜면 전환이 멈춥니다. |
| 접근성 | 입력칸마다 이름을 붙였고, 주요 단추는 44px 높이로 눌리기 쉽게 했습니다. 상태는 색과 글자로 함께 알려 주고, 알림은 화면 읽기 프로그램이 읽도록 표시했습니다. 단추와 입력칸은 키보드로도 씁니다. 접근성 측정 휴대폰 100점 · PC 100점. |
| 사용 기술 | HTML·CSS·JavaScript(외부 라이브러리 없음). 화면과 스크립트 합쳐 48KB. 파일은 브라우저 파일 읽기로 열고, 엑셀에서 저장한 EUC-KR 파일은 글자 형식을 판별해 다시 읽습니다. 결과는 브라우저 저장소(localStorage)에 저장하고 다시 읽으며, 내려받는 CSV는 엑셀에서 바로 열리게 만듭니다. 화면은 주소(#/…)로 나눠 뒤로 가기가 동작합니다. |
6. 검수
PC 1440·휴대폰 390 화면에서 실제로 띄워, 사람이 쓰는 순서대로 눌러 본 결과입니다. 저장한 뒤 새로고침하고 다시 조회되는지까지 확인했습니다. (2026-09-23)
| 항목 | PC 1440 | 휴대폰 390 |
|---|
| 화면 오류 | 0 | 0 |
| 깨진 파일 | 0 | 0 |
| 가로 넘침·글자 잘림 | 0 | 0 |
| 동작 시험 | 13 / 13 통과 | 13 / 13 통과 |
동작 시험 13가지: 예시 파일 불러오기 → 자동 대조 · 상태별로 보기(금액 차이만) · 허용 차이 10원으로 다시 대조 · 열 고르기 바꾸기(정산 금액 열을 잘못 고르면 형식 오류로 표시) · 확인 표시·메모 → 새로고침 뒤 유지 · 주문번호·채널 찾기 · 보이는 목록 CSV 받기 · 대조 저장 → 저장한 대조 목록 · 새로고침 뒤 저장 기록 조회 · 기록 열기 → 뒤로 가기 · 직접 파일 올리기(엑셀 저장 형식 EUC-KR 정산 파일) · 빈 파일은 거절 · 저장 기록 삭제
속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준으로 세 번 측정해 같은 값)
| 성능 | 접근성 | 권장사항 | 검색 최적화 |
|---|
| 휴대폰 | 100 | 100 | 100 | 100 |
| PC | 100 | 100 | 100 | 100 |
휴대폰: 첫 화면 표시 1.1초 · 가장 큰 요소 표시 1.5초 · 화면 흔들림 0 · 입력 막힘 0ms PC: 첫 화면 표시 0.3초 · 가장 큰 요소 표시 0.4초 · 화면 흔들림 0 · 입력 막힘 0ms
오토건웍스(AutoGun Works) · 대표 박건우 · 사업자등록번호 342-27-02011 · 경기도 용인시 처인구 남사읍 어진로102번길 92-16 · contact@autogun.co.kr개인정보처리방침