온라인 견적서 기능 개발 개요

웹 기반으로 동작하는 견적서 작성 환경을 구축하며, 실무자가 빠르게 입력·검토·공유할 수 있는 온라인 견적 시스템을 구현한 과정입니다.

개발 배경

기존에는 견적서를 작성할 때 엑셀 또는 문서 편집기가 필수였고, 작성된 파일을 다시 PDF로 변환하거나 출력하기 위해 번거로운 과정을 거쳐야 했습니다. 이를 개선하기 위해 브라우저에서 즉시 입력하고, 계산되고, 출력까지 가능한 웹 기반 견적서 기능을 개발했습니다.

핵심 기능 설명

기본 정보 입력부터 품목 관리, 인쇄·PDF, 임시 URL 공유까지 전체 플로우를 설명합니다.

견적 기본 정보 입력

견적서 상단에는 제목, 진행상태(접수·진행·취소·대기·완료), 받는 사람, 유효기간, 공유기간을 기입할 수 있도록 구성했습니다. 또한 작성자의 상호, 대표자명, 사업자등록번호, 주소, 전화번호, 팩스번호, 그리고 도장 이미지 파일을 업로드할 수 있도록 구현했습니다.

견적 품목 입력 기능

품명, 규격, 수량, 단가, 공급가액, 세액을 항목별로 입력할 수 있으며, 각 행은 정렬 기능과 삭제 기능을 제공합니다. 품목의 합계는 실시간으로 계산되도록 구성하여 작성자가 반복 검산할 필요가 없습니다.

추가사항 및 비고 입력

견적 하단에는 추가 안내사항이나 특이사항을 기입할 수 있는 텍스트 영역을 포함해 문서의 완성도를 높였습니다.

출력 및 공유 기능

PC·스마트폰 어디서든 바로 열람 가능한 공유 URL과 PDF 출력 기능은 사용성의 핵심입니다.

인쇄 및 PDF 저장

작성된 견적서는 인쇄 버튼을 통해 브라우저 인쇄 모달로 즉시 전송되며, 별도 프로그램 설치 없이 PDF 저장 또한 가능합니다. 출력 시 레이아웃이 무너지지 않도록 스타일을 별도 Print CSS로 관리했습니다.

가견적용 임시 URL 생성

가견적 단계에서는 완성된 견적서를 임시 URL 형태로 생성해 상대방에게 공유할 수 있습니다. 공유 기간동안만 열람이 가능하도록 설계했고, PC와 모바일 모두 최적화된 화면을 제공합니다.

주요 구현 코드 예시

웹에서 견적서 기능을 구축하는 핵심 요소는 동적 테이블 관리와 입력 데이터 검증입니다.

품목 행 추가 자바스크립트 예시

function addItemRow() {
    const table = document.getElementById("itemTableBody");
    const row = document.createElement("tr");
    row.innerHTML = ``;
    table.appendChild(row);
}

합계 자동 계산 함수

function calcTotal() {
    let supply = 0;
    let tax = 0;

    document.querySelectorAll("#itemTableBody tr").forEach(row => {
        const qty   = parseFloat(row.querySelector('input[name="item_qty[]"]').value) || 0;
        const price = parseFloat(row.querySelector('input[name="item_price[]"]').value) || 0;

        const s = qty * price;
        const t = s * 0.1;

        row.querySelector(".supply").innerText = s.toLocaleString();
        row.querySelector(".tax").innerText = t.toLocaleString();

        supply += s;
        tax += t;
    });

    document.getElementById("totalSupply").innerText = supply.toLocaleString();
    document.getElementById("totalTax").innerText = tax.toLocaleString();
}

마무리

온라인 견적서 기능은 반복 업무를 줄이고, 실수 위험을 낮추며, 공유 속도를 개선하는 실무 효율화 도구로 자리 잡습니다.

향후 확장 계획

전자서명 기능 추가, 고객별 견적 히스토리 조회, 자동 전송 기능, 템플릿 저장 등 추가 개발 여지가 많습니다. 실무에서의 사용성을 계속 개선하여 높은 완성도의 견적 플랫폼으로 발전시킬 예정입니다.