1. 개요
| 업종 | 직원 10~50명 규모 회사의 비용·구매·휴가·출장 결재 (영업팀·재무팀·대표) |
| 시스템 목적 | 종이·메신저로 돌던 결재를 한 곳에 모아, 누구 차례에서 멈췄는지 보이고 반려 사유와 기록이 남게 하는 것 |
| 제작 범위 | 페이지 5개 · 화면 5개 · 요청 종류 4개 · 결재 역할 3개(팀장·재무·대표) |
| 주요 흐름 | 새 요청 → 결재선 자동 → 팀장 승인 → 재무 승인 → (100만 원 이상) 대표 승인 / 반려(사유) → 고쳐서 다시 올리기 / 회수 / 전체 거르기 → CSV 내려받기 |
요청 문서, 결재 단계와 도장, 의견·반려 사유, 진행 기록, 지금 보는 사람은 브라우저에 저장됩니다. 새로고침하거나 다시 들어와도 그대로 남아 있습니다. 위의 "지금 보는 사람"을 바꾸면 요청자·팀장·재무·대표 입장에서 차례로 결재해 볼 수 있습니다.
범위 밖: 회사 계정 로그인과 권한 서버, 첨부 파일 보관, 결재 알림(메일·메신저), 회계 프로그램 연동, 전자서명 법적 효력 처리. 도입할 때 회사 환경에 연결합니다.
2. 과제
1. 결재가 어디서 멈췄는지 모른다.
"결재 올렸어요?" "아직 안 왔는데요"가 반복됩니다. 문서마다 지금 누구 차례인지 보이고, 각자 자기 차례인 것만 모아 봐야 합니다.
2. 금액마다 누가 봐야 하는지 매번 헷갈린다.
소액은 팀장까지, 큰 금액은 대표까지 — 규칙이 머릿속에만 있으면 빠지는 결재가 생깁니다. 종류와 금액을 적는 순간 결재선이 정해져야 합니다.
3. 반려되면 처음부터 다시 쓴다.
왜 반려됐는지 남지 않으면 같은 실수가 반복됩니다. 사유가 기록에 남고, 그 내용을 채운 채로 고쳐서 다시 올릴 수 있어야 합니다.
3. 화면 구조

받은 결재·내 요청·새 요청·전체는 위 메뉴로 오가고, 요청을 누르면 PC에서는 오른쪽에, 휴대폰에서는 한 화면 전체로 문서가 열립니다. 문서마다 주소가 따로 있어 뒤로 가기가 동작합니다.
4. 주요 기능

결재선 자동 — 금액에 따라 대표 결재 추가
비용 청구·구매 요청·휴가·출장 중 종류를 고르고 금액을 적는 동안 결재선이 바로 바뀝니다. 금액이 있으면 팀장 → 재무, 100만 원 이상이면 대표가 붙고, 휴가는 팀장만 봅니다. 요청자가 팀장이면 자기 칸은 건너뜁니다.

승인·반려 — 반려는 사유가 있어야
문서는 차례가 된 사람의 받은 결재에만 나타나고, 그 사람만 승인·반려 버튼이 보입니다. 의견을 적어 승인하면 다음 사람에게 넘어가고, 반려는 사유를 적어야 저장됩니다.

결재란과 진행 기록
문서 위 결재란에 요청·팀장·재무·대표 칸이 놓이고, 승인하면 도장과 날짜가 찍힙니다. 지금 누구 차례인지 칸에 표시되고, 요청·승인·반려·회수가 시간순 기록으로 남습니다.

고쳐서 다시 올리기와 회수
반려·회수된 요청은 내용이 채워진 새 요청으로 고쳐 올리며, 기록에 이전 번호가 남습니다. 아무도 결재하기 전이면 요청자가 회수할 수 있습니다.
- 받은 결재지금 보는 사람 차례인 요청만 오래된 순으로 모이고, 메뉴에 건수가 표시됩니다. PC에서는 첫 요청 문서가 바로 열려 목록과 문서를 나란히 봅니다.
- 내 요청과 연차올린 요청이 최근 순으로 쌓이고 진행·승인·반려·회수 상태가 붙습니다. 승인된 휴가로 쓴 연차와 남은 연차를 계산하고, 휴가 요청은 평일만 세어 남은 연차를 넘으면 막습니다.
- 전체 — 거르기와 CSV 내려받기상태와 종류로 거르면 건수와 금액 합계가 바로 나옵니다. 승인된 비용만 골라 정산용 CSV로 내려받습니다.
5. 기술
| 반응형 | 1000·760px 기준으로 배치가 바뀝니다. PC는 목록 420px + 문서 두 칸, 1000px 아래는 목록 340px, 760px 아래는 목록과 문서가 한 화면씩 바뀌고 메뉴는 네 칸 버튼으로 내려옵니다. 결재란은 휴대폰에서 폭을 나눠 한 줄에 들어갑니다. |
| 글꼴 | 본문 Pretendard(무료 공개 글꼴). 사이트 안에 넣어 외부 요청 없이 불러오고, 쓰인 글자만 남겨 2,010KB → 81KB로 줄였습니다. |
| 이미지 | 사진 없음. 도장은 이미지 없이 CSS 테두리와 글자로 그렸습니다. 전체 전송량은 글꼴 포함 약 110KB입니다. |
| 움직임 | 움직임 없이 즉시 바뀌는 화면으로 만들었습니다. 결재 뒤 결과는 아래 알림으로 알려 줍니다. |
| 접근성 | 입력 칸마다 이름표를 붙이고, 틀린 칸은 테두리와 문장으로 함께 알려 줍니다. 선택된 문서·메뉴는 화면 읽기 프로그램에도 전달되고, 알림은 읽어 주는 영역에 표시합니다. 접근성 측정 100점. |
| 사용 기술 | HTML·CSS·JavaScript(외부 라이브러리 없음). 결재선 규칙은 한 함수에 모아 요청 작성·미리 보기·저장이 같은 규칙을 씁니다. 자료는 브라우저 저장소(localStorage)에 저장하고, 문서 주소(#/doc/번호)로 바로 열립니다. |
6. 검수
PC 1440·휴대폰 390 화면에서 실제로 띄워, 사람이 쓰는 순서대로 눌러 본 결과입니다. 저장한 뒤 새로고침하고 다시 조회되는지까지 확인했습니다. (2026-09-23)
| 항목 | PC 1440 | 휴대폰 390 |
|---|
| 화면 오류 | 0 | 0 |
| 깨진 파일 | 0 | 0 |
| 가로 넘침·글자 잘림 | 0 | 0 |
| 동작 시험 | 10 / 10 통과 | 10 / 10 통과 |
동작 시험 10가지: 받은 결재(내 차례만) · 새 요청(빈칸 확인, 금액별 결재선, 100만 원 이상 대표 추가) · 휴가 요청(평일만 세기, 남은 연차)과 회수 · 팀장 반려(사유 필수)와 승인 · 재무·대표 차례로 최종 승인(도장 4개) · 반려된 요청 고쳐서 다시 올리기 · 내 요청과 연차 계산 · 새로고침 뒤 결재 상태 유지 · 전체 거르기와 CSV 내려받기 · 목록으로 돌아가기(휴대폰 버튼·뒤로 가기)
속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준으로 세 번 측정해 같은 값)
| 성능 | 접근성 | 권장사항 | 검색 최적화 |
|---|
| 휴대폰 | 100 | 100 | 100 | 100 |
| PC | 100 | 100 | 100 | 100 |
휴대폰: 첫 화면 표시 0.8초 · 가장 큰 요소 표시 1.2초 · 화면 흔들림 0 · 입력 막힘 0ms PC: 첫 화면 표시 0.2초 · 가장 큰 요소 표시 0.3초 · 화면 흔들림 0 · 입력 막힘 0ms
오토건웍스(AutoGun Works) · 대표 박건우 · 사업자등록번호 342-27-02011 · 경기도 용인시 처인구 남사읍 어진로102번길 92-16 · contact@autogun.co.kr개인정보처리방침