무료 Invoice Generator, Resume Builder, 그리고 Cover Letter Generator를 만들었으며 회원가입이 필요 없습니다

Source: Dev.to

위에 제공된 내용만으로는 번역할 텍스트가 없습니다. 번역을 원하는 본문을 알려주시면 한국어로 번역해 드리겠습니다.

소개

어제 친구가 무료 인보이스 생성기를 추천해 달라고 했어요. 구글에서 상위 10개의 결과를 열어봤는데 모두 같은 방식을 쓰고 있었어요: 회원가입 벽, 이메일 수집, 혹은 월 $12를 내지 않으면 PDF에 워터마크가 삽입되는 식이었죠. 폼 필드에서 PDF를 생성하는 것은 이미 해결된 문제인데, 어느새 SaaS 카테고리로 전락해 있었습니다.

그래서 저는 하루 만에 세 가지를 직접 만들었습니다:

• Invoice Generator
• Resume Builder
• Cover Letter Generator

세 도구 모두 완전히 브라우저에서 실행됩니다. 데이터가 기기를 떠나지 않으며, 계정도 필요 없고, 워터마크도 없습니다.

기존 도구가 실패하는 이유

지난달에 프리랜서 친구를 위해 무료 인보이스 생성기를 찾아보았습니다. 모든 서비스가 다음 중 하나 이상을 요구했습니다:

• 회원가입 필요
• 하나의 템플릿만 사용 가능
• PDF에 자체 브랜드 삽입
• 자사의 SaaS 제품으로 연결되는 명백한 퍼널

이와 같은 상황은 이력서 작성 도구에도 동일하게 적용됩니다. 무료 티어에서는 기본 템플릿 하나만 제공하고, 전문적인 디자인을 원하면 바로 결제 벽에 부딪히게 됩니다.

문제는, 폼 데이터로부터 PDF를 생성하는 것이 어려운 문제가 아니라는 점입니다. 브라우저에는 필요한 모든 것이 갖춰져 있습니다. pdf-lib는 JavaScript만으로 PDF를 완전히 생성할 수 있는 훌륭한 오픈소스 라이브러리입니다. 인보이스 데이터가 다른 사람의 서버를 거쳐야 할 이유가 전혀 없습니다.

아키텍처 개요

세 가지 도구 모두 공통 PDF‑렌더링 레이어와 PptPresentationMaker(Kitmul에서 가장 복잡한 도구)에서 영감을 받은 템플릿 시스템을 공유합니다. 아키텍처는 간단합니다:

1. React state가 폼 데이터를 보관합니다.
2. HTML/CSS 실시간 미리보기가 입력할 때마다 업데이트됩니다.
3. Download를 클릭하면 pdf-lib PDF가 (Web Worker에서) 생성되어 Blob URL로 제공됩니다.

Source: …

인보이스 생성기

인보이스 생성기는 세 가지 중 가장 기술적으로 흥미로운 프로젝트였습니다.

템플릿

사용 가능한 템플릿은 총 여섯 가지입니다:

1. Clean
2. Modern
3. Classic
4. Bold
5. Minimal
6. Corporate

각 템플릿은 고유한 헤더 레이아웃과 색상 스키마를 가지고 있습니다. 회사 로고를 업로드할 수 있으며, 도구는 클라이언트‑사이드에서 “ 요소를 사용해 로고 크기를 조정한 뒤 embedPng() 로 PDF에 삽입합니다.

기능

• 자동 계산: 소계, 퍼센트 또는 고정 금액 할인, 세율.
• 실시간 미리보기: 즉시 업데이트됩니다.
• 통화 선택기: Intl.NumberFormat을 이용한 로케일‑인식 포맷을 지원하는 12개 통화.
• 헤더 레이아웃 계산: 헤더 높이(로고 + 사업자 정보 + 인보이스 상세)를 동적으로 계산하여, 채워진 필드에 따라 컬러 배경이 축소되거나 확장됩니다.

테이블 렌더링

pdf-lib에는 기본 테이블 개념이 없기 때문에, 나는 공유 drawTable 헬퍼를 작성했습니다. 이 헬퍼는:

• 텍스트 래핑을 기반으로 행 높이를 계산합니다.
• 교차 행 배경을 처리합니다.
• 테이블이 넘칠 경우 자동으로 새 페이지로 넘어갑니다.

이 헬퍼는 이제 세 가지 도구 모두에서 재사용 가능합니다.

이력서 빌더

이력서 빌더는 가장 복잡한 도구이며(~900줄)입니다.

템플릿

다섯 가지 템플릿을 사용할 수 있습니다:

1. Classic – 단일 열, 최대 ATS 호환성
2. Modern – 연락처 정보와 기술을 위한 컬러 사이드바
3. Professional – 두 열 헤더
4. Minimal – 여백이 많은 디자인
5. Executive – 굵은 강조 밑줄

디자인 선택

• pdf-lib의 StandardFonts(Helvetica & Helvetica‑Bold)만 사용합니다.
  • 사용자 정의 폰트는 더 보기 좋지만 지원자 추적 시스템(ATS)을 깨뜨릴 수 있습니다.
• 모든 템플릿은 실제 선택 가능한 텍스트를 위에서 아래로 그려서 출력하며, 텍스트 이미지가 없습니다.
• Modern 템플릿조차도 읽기 순서대로 주요 내용을 먼저 그리므로 ATS가 연락처 세부 정보보다 경험을 먼저 읽습니다.

기능

• 섹션을 드래그‑앤‑드롭으로 재배열할 수 있습니다(예: Experience를 Education 위로 이동).
• 인증서, 언어, 프로젝트 등을 추가할 수 있습니다.
• 각 경험 항목은 추가/제거 컨트롤이 있는 여러 개의 글머리표를 지원합니다.
• 다중 페이지 PDF는 섹션 헤더와 내용이 절절되지 않도록 적절한 페이지 나눔을 적용해 생성됩니다.

커버 레터 생성기

커버 레터 생성기는 세 가지 도구 중 가장 간단하지만, 이는 의도된 설계입니다. 커버 레터는 형식이 정해진 비즈니스 레터이며, 서식 오류가 있으면 부실해 보일 수 있습니다.

템플릿

네 가지 템플릿을 사용할 수 있습니다:

1. Traditional – 발신자 정보가 오른쪽 상단에 배치되는 전통적인 표준 형식
2. Modern – 큰 이름과 가로 강조선이 특징인 현대적 디자인
3. Professional – 색상이 적용된 헤더 블록
4. Simple – 깔끔하고 최소한의 레이아웃

모든 템플릿은 비즈니스 레터 규격을 정확히 따릅니다: 발신자 정보 위치, 날짜 형식, 인사말, 본문 단락, 마무리 서명 등.

핵심 포인트

• AI가 레터를 작성하지 않습니다. 사용자가 직접 작성하고, 도구가 형식을 맞춰 줍니다.
• 깔끔한 레이아웃에 사람이 직접 쓴 내용이, 화려한 디자인에 GPT가 만든 레터보다 더 돋보입니다.

개인정보 및 데이터 보안

These three tools handle sensitive information:

• 청구서: business details, client names, financial data
• 이력서: employment history, contact information
• 커버 레터: specific companies you’re applying to

Every alternative I tested (Zoho, Canva, Resume.io, Zety, etc.) sends this data to a server, requires an account, and stores the data under their privacy policies—often using it for “service improvement” (i.e., training models).

브라우저 기반 도구는 프라이버시를 기본값으로 합니다:

• No server to send data to.
• pdf-lib generates the PDF in a Web Worker.
• The browser creates a Blob URL for download, keeping everything local.

결론

폼 데이터에서 PDF를 생성하는 문제는 이미 해결된 것으로, SaaS 유료 장벽 뒤에 가둘 필요가 없습니다. pdf-lib와 클라이언트‑사이드 렌더링을 활용해, 저는 프라이버시‑우선의 무료 도구 세 가지를 만들었습니다:

• Invoice Generator – 6개의 전문 템플릿, 실시간 계산, 로고 삽입.
• Resume Builder – ATS 친화적인 5개의 템플릿, 드래그‑앤‑드롭 섹션, 다중 페이지 지원.
• Cover Letter Generator – 깔끔한 비즈니스 레터 템플릿 4개, AI 없음, 내용에 대한 완전한 제어.

모두 브라우저에서 완전히 실행되며, 회원가입 필요 없음, 워터마크 없음, 데이터가 기기를 떠나지 않음을 보장합니다. 자유롭게 사용해 보고, 무료이면서 신뢰할 수 있는 문서 생성기가 필요한 사람에게 링크를 공유하세요.

Download behavior
다운로드는 로컬 앵커 클릭을 통해 이루어집니다. 데이터는 탭을 닫을 때까지 브라우저 메모리에 존재합니다.

Tools

• Receipt Generator – 청구서의 미러, 수신 측용
• NDA Generator – 간단한 템플릿 기반 법률 문서
• Meeting Minutes Generator – PDF로 변환되는 구조화된 회의록

All follow the same pattern: form data → live preview → clean PDF.
The shared layout helpers make each new tool faster to build than the last.

If you’re a freelancer creating invoices, a job seeker polishing your resume, or anyone who needs a professional document without the signup dance, give these a try. They’re at kitmul.com alongside 400+ other free browser‑based tools.

관련 도구

• PPT 프레젠테이션 메이커
• 텍스트를 PDF로
• PDF 병합기
• 예산 플래너
• 이미지를 PDF로

참고 문헌

• pdf-lib: JavaScript에서 PDF를 생성하고 수정하기
• 지원자 추적 시스템 (Wikipedia)
• Intl.NumberFormat (MDN)
• 미국 비즈니스 레터 형식 (Purdue OWL)
• ATS 파서가 이력서를 읽는 방법 (Jobscan)