서랍 속 노트 하나
[업무툴 제작기]계약 진행현황 관리 웹파일을직접 만들었습니다 본문
[업무툴 제작기]
계약 진행현황 관리 웹파일을
직접 만들었습니다
B2B 계약이 여러 건 동시에 진행될 때 항상 같은 문제가 생겼습니다. 엑셀에 정리해두면 팀 간 공유가 불편하고, 협업 툴은 열고 필터 걸고 상태 바꾸는 과정이 생각보다 번거로웠거든요. 원하는 건 단순했어요. 각 건마다 단계별로 버튼 딱딱 누르면 상태가 바뀌고, 관련 부서는 따로 요청 없이 실시간으로 현황을 볼 수 있는 것.
결국 직접 만들었습니다. 서버도, 별도 설치도 없이 웹파일 하나로요.
어떻게 작동하나
화면 상단 노란 배너가 보이시나요? "읽기 전용 — 최신 현황이 자동으로 표시됩니다"라고 나오는 부분입니다. 공유 받은 쪽에서 보는 화면이에요. 15초마다 자동으로 최신 데이터를 가져오기 때문에 별도로 새로고침할 필요도 없습니다.
핵심 기능 정리
① 단계별 버튼으로 상태 관리
각 계약 건마다 5개 항목을 독립적으로 관리합니다:
| 항목 | 상태값 | 설명 |
|---|---|---|
| 발주수락서 | ✕✔○ | 필요없음 / 필요함 / 전송완료 |
| 계약서 | ○ / ✕ | 완료 여부 토글 |
| 세금계산서 | ○ / ✕ | 완료 여부 토글 |
| 입금 | ○ / ✕ | 완료 여부 토글 |
| 반환 | ✕!○ | 필요없음 / 반환필요 / 반환완료 |
② 자동 완료 처리
반환 항목에서 ✕(필요없음) 또는 ○(반환완료)를 선택하면 해당 건이 자동으로 완료 탭으로 이동합니다. 따로 완료 처리를 할 필요가 없어요.
③ 관리자 / 읽기 전용 URL 분리
URL 하나로 권한을 구분합니다:
manage.html— 읽기 전용, 15초마다 자동 갱신 (관련 부서 공유용)manage.html?admin— 바로 관리자 모드 (담당자 본인용)
비밀번호 없이 URL 자체로 접근을 제어하는 방식이라 간단하게 운용할 수 있어요.
④ 실시간 공유
데이터는 JSONBin이라는 무료 클라우드 저장소에 저장됩니다. 담당자가 상태를 업데이트하면 공유받은 쪽 화면에 자동으로 반영돼요. Firebase나 별도 서버 없이도 실시간 공유가 가능한 구조입니다.
만들면서 느낀 것
사실 처음엔 구글 시트나 협업 툴로 해결하려 했습니다. 근데 결국 내 워크플로우에 딱 맞게 커스텀하는 데는 한계가 있더라고요. 상대방한테 "이 링크 들어가서 이 뷰 열어서 확인해주세요"라고 하는 것보다, 링크 하나 보내면 바로 보이는 게 훨씬 낫고요.
웹파일 하나로 만드니까 백업도 파일 복사 한 번, 수정도 바로 가능합니다. 복잡한 솔루션보다 내 상황에 맞게 가볍게 만드는 게 결국 더 오래 쓰게 되더라고요.