서버 없이 HTML 한 장으로 소방 법정 서류 5종 PDF 만들기 (소방안전관리자용 무료 작성기)

한국에서 소방 점검 일을 하면서, 소방안전관리자분들이 매달·매년 손으로 채우는 법정 서류를 자동으로 만들어 주는 무료 웹 도구를 만들었습니다. 이 글은 서버 없이 HTML 한 장으로 공문서 서식 PDF를 뽑는 방법을 정리한 기록입니다.

• 작성기: 소방 서류 자동 작성기
• 예시: 업무수행기록표 작성 예시 · 자체점검기록표 작성·게시 예시

왜 만들었나

2·3급 소방안전관리자가 선임되면 챙겨야 할 서류가 생각보다 많습니다.

대부분 한글 파일 서식을 구해서 건물명·연면적·관리자 이름을 매번 다시 씁니다. 같은 정보를 다섯 번 쓰는 일이라, 한 번 입력하면 다섯 서류가 한꺼번에 나오게 만들었습니다.

구조: 입력 1번, 출력 5개

const state = { name, use, area, floors, manager, phone };
const docs = [buildPlan, buildMonthlyLog, buildDrill, buildCrew, buildChecklist];
output.innerHTML = docs.map(fn => fn(state)).join('<div class="page-break"></div>');

각 build 함수는 표(<table>) 문자열만 돌려줍니다. 서버도 데이터베이스도 없어서 입력한 건물 정보가 밖으로 나가지 않습니다. 이 점이 관리자분들이 쓰기 편하다고 하신 부분입니다.

공문서 서식을 A4에 맞추는 CSS

@page { size: A4; margin: 15mm; }
@media print {
  .no-print { display: none; }
  .page-break { page-break-after: always; }
  th { white-space: nowrap; }
  td { font-size: 11px; height: 36px; }
}

법정 서식은 칸이 많아서 그냥 인쇄하면 2쪽으로 넘칩니다. 머리칸은 줄바꿈을 막고, 빈칸 높이를 고정하면 원래 서식처럼 한 쪽에 들어갑니다. PDF 저장은 브라우저의 인쇄 → PDF로 저장을 그대로 씁니다.

12개월치 기록표 한 번에

업무수행기록표는 매달 써야 해서, 시작 달만 고르면 12장을 이어 붙이게 했습니다.

const months = Array.from({length: 12}, (_, i) => new Date(y, m + i, 1));
months.map(d => buildMonthlyLog({...state, ym: d})).join('<div class="page-break"></div>');

해 보니 알게 된 것

• 법이 바뀌면 서식도 바뀝니다. 2025년 12월 개정으로 자체점검기록표 게시 기간이 '30일 이상'에서 '다음 기록표 게시 전까지'로 바뀌어 바로 반영했습니다.
• 사람들이 실제로 검색하는 건 "작성 예시"였습니다. 그래서 건물 용도별(고시원·학원·숙박·요양원·어린이집·공장·상가) 예시 페이지를 따로 만들었습니다.

마무리

소방안전관리자이거나 건물 관리 일을 하신다면 작성기를 그냥 써 보셔도 됩니다. 관할 소방서 제출용으로 다듬은 원본이 필요한 분께는 제가 크몽에서 따로 작성해 드리고 있어서, 작성기 안에 그 안내가 들어 있습니다(이해관계 공개).