1. 개요
| 업종 | 온라인몰·오픈마켓·매장 판매를 한 파일로 모아 매달 매출을 보고하는 소매 사업자 |
| 사이트 목적 | 판매 내역 엑셀을 피벗과 차트로 다시 정리하던 월간 보고를 파일 올리기 한 번으로 끝내는 업무 도구 |
| 제작 범위 | 화면 3개(만들기 · 저장한 보고서 · 보고서 한 장) · 예시 엑셀 1개(7~8월 538줄, 시트 2개) |
| 주요 흐름 | 엑셀 올리기 → 시트·달 고르기 → 보고서 확인 → 메모 → 저장 → 저장한 보고서 열기 → CSV·인쇄 |
올린 파일과 열 맞춤, 고른 달, 달별 메모, 저장한 보고서는 브라우저에 저장됩니다. 새로고침하거나 다시 들어와도 그대로 남아 있습니다. 올린 파일은 이 브라우저 안에서만 읽고, 어디에도 전송하지 않습니다.
범위 밖: 쇼핑몰·마켓 판매 내역 자동 수집, 엑셀(xlsx)로 내보내기(CSV로 받음), 메일로 보고서 보내기, 여러 사람이 함께 쓰는 서버 저장.
2. 과제
1. 같은 계산을 매달 손으로 다시 한다.
판매 내역에서 취소를 빼고 환불을 빼고, 채널별·상품별로 나누는 일을 매달 피벗으로 다시 만듭니다.
2. 파일 안의 이상한 줄이 합계를 흔든다.
날짜가 비었거나 금액 칸에 ‘확인중’이 적힌 줄이 섞이면 합계가 틀어집니다. 어느 줄을 왜 뺐는지 보고서에 함께 남아야 합니다.
3. 지난달과 비교해야 보고가 된다.
숫자 하나만으로는 좋은지 나쁜지 알 수 없습니다. 전월 대비 오르내림과 날짜별 흐름을 한 장에서 봐야 합니다.
3. 화면 구조
보고서는 첫 화면 한 곳에서 파일을 올리면 바로 만들어집니다. 저장한 보고서와 보고서 한 장은 주소가 따로 있는 화면이라 원본 파일 없이도 다시 열립니다.
4. 주요 기능
엑셀 그대로 읽어 보고서 만들기
xlsx 파일을 브라우저 안에서 직접 풀어 읽고, 판매 줄이 있는 시트를 골라 씁니다. 순매출(결제 − 환불) · 주문 수 · 객단가 · 환불 4칸에 전월 대비 오르내림을 붙였습니다.
일별·채널별·분류별 도표
일별 순매출 막대 위에 전월을 선으로 겹쳐 흐름을 비교합니다. 판매채널별·분류별 막대에 비중(%)을 붙였고, 많이 팔린 상품 5개를 표로 뽑았습니다.
확인이 필요한 줄
날짜 빈 칸 · 금액에 글자 · 수량 0 · 채널 빈 칸 같은 줄은 합계에서 빼고 원본 몇째 줄인지, 왜 뺐는지 보고서 아래에 남깁니다. 글자로 적힌 날짜(2026.08.14)는 읽어 씁니다.
저장한 보고서
담당자 메모와 함께 저장하면 저장할 때의 숫자 그대로 다시 엽니다. 보고서마다 숫자 CSV를 받고, 인쇄하면 머리글·단추 없이 보고서만 나옵니다.
- 시트·달·열 바꾸기시트가 여럿이면 판매 줄이 있는 시트를 먼저 고르고, 달을 바꾸면 그 달과 전달로 다시 계산합니다. 열 이름이 다르면 열 맞추기에서 직접 고릅니다. CSV(EUC-KR 포함)도 같은 방법으로 읽습니다.
5. 기술
| 반응형 | 900·640px 기준으로 배치가 바뀝니다. PC는 요약 4칸 한 줄과 도표 2단, 900px 아래는 요약 2칸과 도표 1단, 640px 아래는 도표를 휴대폰 폭에 맞춰 다시 그리고 단추를 두 줄로 놓습니다. 인쇄할 때는 보고서만 남깁니다. |
| 글꼴 | 본문 Pretendard, 숫자·코드 Manrope(둘 다 무료 공개 글꼴). 사이트 안에 넣어 외부 요청 없이 불러옵니다. 본문 글꼴은 이 화면에 쓰인 글자만 먼저 받고(55KB), 사용자가 올린 파일에만 나오는 한글은 나머지 2,350자 파일(379KB)에서 필요할 때만 받습니다. 숫자 글꼴 28KB. |
| 이미지 | 사진 없이 만들었습니다. 아이콘은 SVG로 그려 어느 화면에서도 선명합니다. 도표도 계산한 값으로 바로 그리는 SVG입니다. |
| 움직임 | 라이브러리 없이 CSS 전환만 씁니다. 알림이 아래에서 올라오는 정도로 줄였고, 기기에서 움직임 줄이기를 켜면 전환이 멈춥니다. |
| 접근성 | 입력칸마다 이름을 붙였고, 주요 단추는 44px 높이로 눌리기 쉽게 했습니다. 상태는 색과 글자로 함께 알려 주고, 알림은 화면 읽기 프로그램이 읽도록 표시했습니다. 단추와 입력칸은 키보드로도 씁니다. 접근성 측정 휴대폰 100점 · PC 100점. |
| 사용 기술 | HTML·CSS·JavaScript(외부 라이브러리 없음). 화면과 스크립트 합쳐 51KB. 파일은 브라우저 파일 읽기로 열고, 엑셀에서 저장한 EUC-KR 파일은 글자 형식을 판별해 다시 읽습니다. 결과는 브라우저 저장소(localStorage)에 저장하고 다시 읽으며, 내려받는 CSV는 엑셀에서 바로 열리게 만듭니다. 화면은 주소(#/…)로 나눠 뒤로 가기가 동작합니다. xlsx는 브라우저에 들어 있는 압축 풀기 기능으로 직접 풀어 읽습니다. |
6. 검수
PC 1440·휴대폰 390 화면에서 실제로 띄워, 사람이 쓰는 순서대로 눌러 본 결과입니다. 저장한 뒤 새로고침하고 다시 조회되는지까지 확인했습니다. (2026-09-23)
| 항목 | PC 1440 | 휴대폰 390 |
|---|
| 화면 오류 | 0 | 0 |
| 깨진 파일 | 0 | 0 |
| 가로 넘침·글자 잘림 | 0 | 0 |
| 동작 시험 | 16 / 16 통과 | 16 / 16 통과 |
동작 시험 16가지: 예시 엑셀(xlsx) 그대로 읽어 보고서 만들기 · 전월 대비 표시 · 글자로 적힌 날짜(2026.08.14)도 읽고, 이상한 줄 4개는 합계에서 빼기 · 차트: 일별 막대 31개 + 전월 선 · 달 바꾸기(7월) · 시트·열 바꾸기(상태 열 빼면 환불도 매출로) · 메모 적기 → 새로고침 뒤 유지 · 숫자 CSV 받기 · 인쇄 화면(머리글·버튼 숨김) · 보고서 저장 → 저장한 보고서 · 새로고침 뒤 저장한 보고서 열기 · 저장한 보고서 CSV · 뒤로 가기 · 직접 올린 CSV(EUC-KR·다른 열 이름) · 직접 올린 xlsx 읽기 · 저장한 보고서 삭제
속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준으로 세 번 측정해 같은 값)
| 성능 | 접근성 | 권장사항 | 검색 최적화 |
|---|
| 휴대폰 | 100 | 100 | 100 | 100 |
| PC | 100 | 100 | 100 | 100 |
휴대폰: 첫 화면 표시 1.3초 · 가장 큰 요소 표시 1.5초 · 화면 흔들림 0 · 입력 막힘 0ms PC: 첫 화면 표시 0.4초 · 가장 큰 요소 표시 0.4초 · 화면 흔들림 0 · 입력 막힘 0ms
오토건웍스(AutoGun Works) · 대표 박건우 · 사업자등록번호 342-27-02011 · 경기도 용인시 처인구 남사읍 어진로102번길 92-16 · contact@autogun.co.kr개인정보처리방침 
