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
화면 오류00
깨진 파일00
가로 넘침·글자 잘림00
동작 시험10 / 10 통과10 / 10 통과

동작 시험 10가지: 받은 결재(내 차례만) · 새 요청(빈칸 확인, 금액별 결재선, 100만 원 이상 대표 추가) · 휴가 요청(평일만 세기, 남은 연차)과 회수 · 팀장 반려(사유 필수)와 승인 · 재무·대표 차례로 최종 승인(도장 4개) · 반려된 요청 고쳐서 다시 올리기 · 내 요청과 연차 계산 · 새로고침 뒤 결재 상태 유지 · 전체 거르기와 CSV 내려받기 · 목록으로 돌아가기(휴대폰 버튼·뒤로 가기)

속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준으로 세 번 측정해 같은 값)

성능접근성권장사항검색 최적화
휴대폰100100100100
PC100100100100

휴대폰: 첫 화면 표시 0.8초 · 가장 큰 요소 표시 1.2초 · 화면 흔들림 0 · 입력 막힘 0ms PC: 첫 화면 표시 0.2초 · 가장 큰 요소 표시 0.3초 · 화면 흔들림 0 · 입력 막힘 0ms

7. 결과

직접 눌러보기 ↗
PC 완성 화면휴대폰 완성 화면
오토건웍스(AutoGun Works) · 대표 박건우 · 사업자등록번호 342-27-02011 · 경기도 용인시 처인구 남사읍 어진로102번길 92-16 · contact@autogun.co.kr
개인정보처리방침