Selected work

다양한 매체, 하나의 시선.
관심 있는 분야를 골라보세요.

← 작업 목록프로젝트데스크 — 견적서·계약서 웹앱
#웹앱 / 2026

프로젝트데스크견적서·계약서 웹앱

의뢰를 정리하고, 견적서·계약서로 완성하는 작업 공간.

개인 프로젝트 · 기획 · UX/UI · 문서 디자인 · AI 활용 구현 · 배포
프로젝트데스크의 실제 웹사이트 화면프로젝트데스크 사용해보기
썸네일을 누르면 실제 웹사이트가 새 탭으로 열립니다. 아래에서 제작 과정을 볼 수 있습니다.

기획·UX/UI 디자인

기획 · UX/UI · 문서 양식 디자인 · AI 활용 구현 · 배포 디자인 작업의 범위와 금액을 정리하는 견적서·계약서 웹 도구 입력 화면부터 전달 문서의 정보 구조와 출력 형태까지 연결

문제 정의

작업 항목·수량·단가를 정리하고 계약 내용에 다시 옮기는 반복 작업 입력 정보와 전달 문서를 연결해 한곳에서 작성·확인하는 흐름 구성

문서 작성 흐름

양식 선택 → 정보 입력 → 미리보기 → A4 PDF 저장 완성된 양식을 먼저 보여주고 필요한 문서로 바로 이동하도록 구성

양식 선택, 정보 입력, 미리보기, A4 PDF 저장으로 이어지는 작성 흐름
기능을 설명하기 위해 제작 후 재구성한 사용자 흐름입니다.

양식 선택·시작 화면

견적서 예시와 견적서·계약서 시작 버튼을 첫 화면에 배치 그리드·에디토리얼·미니멀 양식으로 문서의 위계와 분위기 구분 입력 데이터는 유지하면서 필요한 양식을 선택하도록 구성

프로젝트데스크의 문서 선택 화면과 세 가지 견적서 예시
2026.11.03 저장 화면. 양식 예시와 문서별 시작 버튼을 함께 보여줍니다.

견적서·계약서 정보 연결

초기 구현에서 견적서의 당사자 정보·작업 범위·금액을 계약 초안으로 연결 지급 조건과 수정 범위는 별도 입력 항목으로 구분 견적 변경 후 계약 내용을 다시 확인하도록 구성

견적서의 공통 정보는 계약서로 연결하고 지급 조건과 수정 범위는 따로 입력하는 구조
GitHub 초기 구현 기록을 기준으로 재구성한 정보 연결 구조입니다.

문서 레이아웃·A4 출력

제목·당사자 정보·작업 항목·최종 금액을 읽는 순서대로 배치 수량·단가·공급가액·부가세의 관계를 표로 정리 화면 미리보기와 A4 출력을 구분하고 긴 항목의 페이지 연결 구성

초기 구현의 샘플 견적서 미리보기와 작업 항목 표
GitHub 초기 구현의 문서 미리보기. 회사·연락처·가격은 화면 확인용 샘플이며 실제 고객 견적이 아닙니다.

사용 흐름 개선

초기 단계형 작성 구조에서 양식 중심의 진입 화면으로 정리 초기 AI 의뢰 분석은 작업 항목을 제안하는 보조 기능으로 구성 제안의 선택·수정, 단가와 계약 조건은 사용자가 결정

GitHub 초기 구현에서 입력 화면과 견적서 미리보기를 나란히 배치한 모습
GitHub 초기 구현을 로컬에서 재현한 화면입니다. 이후 양식 중심의 진입 화면과 비교해 볼 수 있습니다.
초기 단계형 작성 구조에서 양식 중심의 진입 화면으로 정리한 과정
초기 구조는 GitHub index.html, 이후 구조는 2026.11.03 저장 화면을 기준으로 재구성했습니다.

구현·배포

HTML·CSS·JavaScript · GitHub · Firebase Hosting 화면과 문서 기준을 정리한 뒤 AI를 활용해 기능 구현·수정 입력·계산·미리보기는 브라우저에서 처리하고 계정·저장은 Firebase와 연결

확장·검증 방향

첫 방문자의 양식 선택과 작성 시작 과정 확인 긴 작업 항목과 여러 페이지의 A4 출력 점검 실제 작성 과제를 통해 입력 화면과 문서 양식을 다듬을 계획입니다.

프로젝트데스크 사용해보기↗