1. 개요
| 업종 | 달마다, 채널마다 따로 받은 주문·매출 파일을 모아 보고하는 사업자 |
| 사이트 목적 | 여러 파일을 복사해 붙이며 열을 맞추던 일을 올리기 한 번으로 줄이고, 합친 뒤 틀린 칸까지 고치는 업무 도구 |
| 제작 범위 | 화면 2개(작업 · 저장한 작업) · 단계 4개(파일 · 열 맞추기 · 검사·고치기 · 합계·받기) · 예시 파일 3개(6·7·8월, 110줄) |
| 주요 흐름 | 여러 파일 올리기 → 열 맞추기 → 합치고 검사 → 빨간 칸 고치기 → 월·채널 합계 → CSV 받기 / 작업 저장 → 저장한 작업에서 다시 열기 |
올린 파일과 열 맞춤, 고친 칸, 정리 규칙, 직접 고른 열 이름, 저장한 작업은 브라우저에 저장됩니다. 새로고침하거나 다시 들어와도 그대로 남아 있습니다. 올린 파일은 이 브라우저 안에서만 읽고, 어디에도 전송하지 않습니다.
범위 밖: 엑셀(xlsx) 파일 직접 읽기, 서버에 쌓아 여러 사람이 함께 쓰기, 정해진 시간에 자동으로 합치기.
2. 과제
1. 같은 뜻의 열 이름이 파일마다 다르다.
‘주문번호’와 ‘주문 번호’, ‘결제금액’과 ‘금액(원)’처럼 이름이 달라 그대로 붙이면 열이 어긋납니다.
2. 합친 뒤에야 틀린 줄이 보인다.
두 번 들어간 주문, 빈 칸, 날짜 모양이 다른 줄, 금액에 글자가 섞인 줄이 합계를 틀리게 만듭니다. 어디가 틀렸는지 바로 보여야 합니다.
3. 고친 내용을 다음 달에도 써야 한다.
한 번 맞춘 열 이름과 고친 칸이 남아 있어야 다음 달 파일도 같은 방법으로 빠르게 합칩니다.
3. 화면 구조
작업은 첫 화면 한 곳에서 네 단계로 이어지고, 왼쪽 단계 표시가 지금 어디까지 했는지 따라옵니다. 저장한 작업은 주소가 따로 있는 화면이라 뒤로 가기와 새로고침에도 그 자리에 머뭅니다.
4. 주요 기능
열 맞추기
파일마다 7칸(주문번호·주문일·판매채널·상품명·수량·금액·상태)을 열 이름으로 먼저 골라 둡니다. 직접 고른 열 이름은 기억해 두었다가 다음에 올린 파일에 자동으로 씁니다.
합치고 검사하기
합친 줄마다 중복 · 빈 칸 · 날짜 오류 · 숫자 아님 · 수량 0을 검사합니다. 문제 종류별 단추로 그 줄만 보고, 어느 파일 몇째 줄인지 함께 보여 줍니다.
빨간 칸 바로 고치기
빨간 칸을 누르면 입력칸이 열리고, Enter로 저장하면 다시 검사합니다. 고친 칸은 저장되어 새로고침해도 남습니다.
월·판매채널별 합계
문제가 없는 줄만으로 월 × 판매채널 건수와 금액 표를 만듭니다. 합친 파일과 문제 목록을 엑셀에서 바로 열리는 CSV로 받습니다.
- 저장한 작업열 맞춤·고친 칸·정리 규칙까지 이름을 붙여 저장하고, 목록에서 다시 열거나 CSV로 받습니다.
5. 기술
| 반응형 | 1100·860·640px 기준으로 배치가 바뀝니다. PC는 왼쪽 단계 표시와 열 맞추기 3단, 860px 아래는 단계 표시를 위쪽 띠로, 640px 아래는 열 맞추기 1단과 결과 표를 줄마다 카드로 바꿉니다. |
| 글꼴 | 본문 Pretendard, 숫자·코드 Space Grotesk(둘 다 무료 공개 글꼴). 사이트 안에 넣어 외부 요청 없이 불러옵니다. 본문 글꼴은 이 화면에 쓰인 글자만 먼저 받고(62KB), 사용자가 올린 파일에만 나오는 한글은 나머지 2,350자 파일(376KB)에서 필요할 때만 받습니다. 숫자 글꼴 26KB. |
| 이미지 | 사진 없이 만들었습니다. 아이콘은 SVG로 그려 어느 화면에서도 선명합니다. |
| 움직임 | 라이브러리 없이 CSS 전환만 씁니다. 알림이 아래에서 올라오는 정도로 줄였고, 기기에서 움직임 줄이기를 켜면 전환이 멈춥니다. |
| 접근성 | 입력칸마다 이름을 붙였고, 주요 단추는 44px 높이로 눌리기 쉽게 했습니다. 상태는 색과 글자로 함께 알려 주고, 알림은 화면 읽기 프로그램이 읽도록 표시했습니다. 단추와 입력칸은 키보드로도 씁니다. 접근성 측정 휴대폰 100점 · PC 100점. |
| 사용 기술 | HTML·CSS·JavaScript(외부 라이브러리 없음). 화면과 스크립트 합쳐 52KB. 파일은 브라우저 파일 읽기로 열고, 엑셀에서 저장한 EUC-KR 파일은 글자 형식을 판별해 다시 읽습니다. 결과는 브라우저 저장소(localStorage)에 저장하고 다시 읽으며, 내려받는 CSV는 엑셀에서 바로 열리게 만듭니다. 화면은 주소(#/…)로 나눠 뒤로 가기가 동작합니다. |
6. 검수
PC 1440·휴대폰 390 화면에서 실제로 띄워, 사람이 쓰는 순서대로 눌러 본 결과입니다. 저장한 뒤 새로고침하고 다시 조회되는지까지 확인했습니다. (2026-09-23)
| 항목 | PC 1440 | 휴대폰 390 |
|---|
| 화면 오류 | 0 | 0 |
| 깨진 파일 | 0 | 0 |
| 가로 넘침·글자 잘림 | 0 | 0 |
| 동작 시험 | 15 / 15 통과 | 15 / 15 통과 |
동작 시험 15가지: 예시 파일 3개 불러오기(EUC-KR 포함) · 다른 머리글을 같은 열로 맞춤 · 합치고 검사하기 · 빨간 칸 바로 고치기 → 다시 검사 · 새로고침 뒤 고친 칸 유지 · 정리 규칙 끄고 켜기(중복 첫 줄만) · 월·판매채널별 합계 · 합친 파일 CSV 받기 · 문제 목록 CSV 받기 · 작업 저장 → 저장한 작업 · 새로고침 뒤 저장한 작업 조회 · 작업 다시 열기 → 뒤로 가기 · 직접 바꾼 열 이름 기억 · 직접 파일 여러 개 올리기(EUC-KR 포함) · 저장한 작업 삭제
속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준으로 세 번 측정해 같은 값)
| 성능 | 접근성 | 권장사항 | 검색 최적화 |
|---|
| 휴대폰 | 100 | 100 | 100 | 100 |
| PC | 100 | 100 | 100 | 100 |
휴대폰: 첫 화면 표시 1.3초 · 가장 큰 요소 표시 1.7초 · 화면 흔들림 0 · 입력 막힘 0ms PC: 첫 화면 표시 0.4초 · 가장 큰 요소 표시 0.4초 · 화면 흔들림 0 · 입력 막힘 0ms
오토건웍스(AutoGun Works) · 대표 박건우 · 사업자등록번호 342-27-02011 · 경기도 용인시 처인구 남사읍 어진로102번길 92-16 · contact@autogun.co.kr개인정보처리방침 
