실제 취업박람회 시연에 사용한 커리어 프로필 빌더 원샷 프롬프트

당신은 숙련된 풀스택 웹 개발자이자 에디토리얼 UX/UI 디자이너다. 아래 요구사항을 충족하는 실제 실행 가능한 한국어 웹앱 전체를 구현하라.

질문이나 기획안만 제시하지 말고 프런트엔드, 서버 API, PDF 생성, 오류 처리를 포함한 완성된 코드를 작성한다. 기존 프로젝트가 있다면 현재 기술 스택과 구조를 유지하면서 개선한다.

# [필수] AI 호출 안정성 및 무중단 시연(Fallback) 요구사항

- AI 모델 호출 시 503(High Demand) 또는 404(Model Unavailable) 등 일시적인 서버 트래픽 폭주나 오류에 대비해, 백엔드 서버 측에 반드시 자동 재시도(Retry) 및 최신 권장 모델 순회 전환 로직(예: gemini-3.6-flash, gemini-3.5-flash, gemini-3.7-flash 순서)을 구현해주세요.
- 만약 모든 외부 AI 모델 호출이 실패할 경우, 화면이 멈추거나 에러를 띄우지 않고 사용자가 입력한 원본 텍스트와 정보를 분석해 즉시 구조화된 결과 데이터를 반환하는 '지능형 로컬 스마트 대체 생성기(Local Fallback Generator)'를 백엔드에 기본 장착해주세요.
- 이를 통해 라이브 강연 및 시연 중 네트워크나 서버 환경이 불안정하더라도 어떤 상황에서든 무중단으로 완벽하게 동작하도록 보장해야 합니다.

---

# 1. 프로젝트 목표

경력 보유자가 기존 이력서를 그대로 붙여넣고 최소한의 정보만 입력한 뒤 AI의 도움을 받아 **A4 규격의 커리어 프로필 PDF**를 완성하는 웹앱을 만든다.

결과물은 1페이지 구성을 우선한다.

그러나 정보를 지나치게 압축하거나 글씨를 작게 만들면서까지 1페이지에 강제로 맞추지 않는다.

정보가 많은 경우에는 자연스럽게 2페이지로 전환한다.

필요하면 최대 3페이지까지 허용한다.

페이지는 균등하게 분할하는 것이 아니라

`1페이지부터 가능한 만큼 채움 → 나머지를 2페이지 → 필요한 경우 나머지를 3페이지`

순서로 구성한다.

결과물은 일반적인 채용 이력서나 워드 문서처럼 보여서는 안 된다.

아이콘, 직무 라벨, 역량 태그, 경력 타임라인, 포인트 컬러 등을 제한적으로 활용하여 다음과 같은 인상을 만든다.

`전문성과 개성이 함께 드러나는 프리미엄 퍼스널 브랜딩 프로필`

핵심 사용자 흐름은 다음과 같다.

`최소 정보 입력 → AI 초안 생성 → 선택·수정·삭제 → 디자인 선택 → A4 미리보기 → PDF 다운로드`

기능 구현뿐 아니라 **완성된 A4 커리어 프로필의 시각적 완성도**를 핵심 평가 기준으로 삼는다.

---

# 2. 최소 입력과 AI 생성

최초 화면에서는 사용자가 쉽게 시작할 수 있도록 다음 항목만 제공한다.

* 이름 — 필수
* 희망 직무 — 필수
* 이메일 — 선택
* 연락처 — 선택
* 지역 — 선택
* 기존 이력서 또는 경력·학력 내용 전체 붙여넣기 — 필수
* 프로필 사진 — 선택

경력, 학력, 자격을 여러 개의 입력 폼으로 나누지 않는다.

사용자가 기존 이력서 내용을 **하나의 큰 textarea에 그대로 붙여넣는 방식**으로 구현한다.

안내 문구:

`기존 이력서의 경력과 학력 부분을 그대로 붙여넣으세요. AI가 지원 직무에 맞게 정리합니다.`

메인 버튼 문구:

`AI 커리어 프로필 만들기`

---

## AI가 생성할 정보

AI는 **사용자가 제공한 정보만 사용하여** 다음 내용을 구성한다.

* 이름과 희망 직무
* 한 줄 커리어 헤드라인
* 핵심 역량 키워드 3~7개
* 경험에 근거한 강점 문장 3~4개
* 경력 및 주요 활동
* 대표 경험 또는 성과
* 학력
* 교육
* 자격
* 필요한 경우 프로젝트 또는 주요 활동
* 자기소개 및 지원동기

`자기소개 및 지원동기`는 전체 프로필의 **가장 마지막 주요 콘텐츠 섹션**에 배치한다.

지원 희망 직무와 관련성이 높은 경험을 우선적으로 정리한다.

경력 공백이 있는 경우 이를 결손이나 약점처럼 표현하지 않는다.

---

## AI 생성 원칙

다음 원칙을 반드시 지킨다.

* 사용자가 제공하지 않은 경력을 만들지 않는다.
* 존재하지 않는 회사나 조직을 만들지 않는다.
* 사용자가 작성하지 않은 직책을 만들지 않는다.
* 사용자가 작성하지 않은 학력을 만들지 않는다.
* 사용자가 작성하지 않은 자격증을 만들지 않는다.
* 사용자가 작성하지 않은 기간을 만들지 않는다.
* 사용자가 작성하지 않은 성과를 만들지 않는다.
* 사용자가 작성하지 않은 숫자나 퍼센트를 만들지 않는다.
* 성과 수치가 없으면 매출, 성장률, 사용자 수, 인원수 등을 임의로 추가하지 않는다.
* 불확실한 내용은 추측하지 말고 생략한다.
* 원문의 의미를 바꾸지 않는 범위에서 맞춤법과 문장 구조만 개선한다.
* 육아·돌봄 경험은 사용자가 원문에 직접 작성한 경우에만 활용한다.
* 총 경력 기간은 사용자가 직접 입력했거나 날짜 정보만으로 명확하게 계산할 수 있을 때만 표시한다.
* 경력 공백에 대해 부정적인 해석이나 표현을 추가하지 않는다.

---

## 경력 불렛 작성 기준

각 회사 또는 주요 경력별 업무·성과 불렛은 **가장 중요한 내용 최대 3개**까지만 작성한다.

각 불렛은 다음 기준을 따른다.

* 가능하면 1줄
* 길어도 최대 2줄
* 핵심 역할과 결과 중심
* 중복 설명 제거
* 의미 없는 수식어 제거
* 지원 직무 관련 경험 우선

A4 1~2페이지에서 읽기 좋은 밀도를 최우선으로 한다.

---

## AI API 구현

가짜 AI 문장이나 미리 정해둔 문장 순환 기능을 AI처럼 보여주는 방식은 사용하지 않는다.

실제 서버 또는 서버리스 API에서 Gemini API를 호출한다.

다음 API 기능을 분리한다.

1. 전체 커리어 프로필 초안 생성 API
2. 선택 문장 AI 다듬기 API

서버에서는 다음을 검증한다.

* 요청 데이터 구조
* 최대 요청 길이
* 필수 입력값
* AI 응답 구조
* JSON Schema
* 배열 및 문자열 타입
* 비정상적으로 긴 결과
* 비어 있는 필수 데이터

AI 응답은 가능한 경우 **구조화된 JSON**으로 반환받는다.

스키마 검증에 성공한 데이터만 정상 결과로 사용한다.

JSON이 잘리거나 불완전해지지 않도록 충분한 출력 토큰을 설정한다.

기본적으로 `maxOutputTokens`는 최소 8192 수준의 충분한 여유를 확보하되, 사용하는 Gemini SDK와 모델의 최신 지원 방식에 맞게 구현한다.

경력 불렛은 최대 3개라는 조건을 AI 시스템 프롬프트와 응답 스키마 양쪽에서 모두 제한한다.

---

## 개인정보 및 API 키

AI API 키는 서버 환경변수에서만 관리한다.

절대 브라우저 번들에 포함하지 않는다.

사용자의 다음 정보는 데이터베이스에 저장하지 않는다.

* 이력서 원본
* AI 결과
* 프로필 사진
* 전화번호
* 이메일
* 주소
* 편집 중인 프로필 정보

서버 로그에도 이력서 전체 내용을 기록하지 않는다.

`localStorage`, `sessionStorage`, IndexedDB에도 이력서 내용을 영구 저장하지 않는다.

현재 브라우저 세션의 메모리 상태에서만 유지한다.

AI 처리에 필요하지 않은 연락처 정보는 AI API로 전송하지 않는다.

---

# 3. 편집 기능

AI 생성이 완료되면 PC 화면은 다음 구조로 변경한다.

`왼쪽 편집 패널 + 오른쪽 A4 미리보기`

모바일에서는 다음과 같이 세로 배치한다.

`편집 패널 → A4 미리보기`

---

## 각 섹션 편집 기능

다음 기능이 실제로 모두 작동해야 한다.

* 텍스트 직접 수정
* 항목 추가
* 항목 삭제
* 섹션 전체 삭제
* 섹션 숨기기
* 마지막 삭제 취소
* 항목 순서 위로 이동
* 항목 순서 아래로 이동
* `AI로 다듬기`
* AI 제안 3개 표시
* AI 제안 중 하나 선택
* 원래 문장 유지
* 사용자가 원하는 위치에서 페이지 나누기
* 항목 또는 불렛을 다음 페이지로 이동
* 항목 또는 불렛을 이전 페이지로 이동

AI는 현재 문장을 자동으로 덮어쓰지 않는다.

`AI로 다듬기`를 눌렀을 경우 제안 문장 3개를 먼저 보여주고, **사용자가 특정 제안을 선택했을 때만 실제 문장을 변경한다.**

---

## 섹션 추가

초기 초안에 없더라도 사용자가 `섹션 추가` 메뉴에서 다음 섹션을 추가할 수 있게 한다.

* 프로젝트 및 활동
* 교육 및 자격
* 디지털 도구
* 어학
* 수상 및 기타 활동

빈 섹션이나 사용자가 삭제·숨김 처리한 섹션은 미리보기와 PDF에 나타나지 않는다.

---

## 접근성

모든 입력 요소에 연결된 `label`을 제공한다.

아이콘 버튼에는 의미가 명확한 `aria-label`을 설정한다.

로딩 및 오류 안내에는

`aria-live="polite"`

를 적용한다.

키보드만으로도 주요 편집 기능을 사용할 수 있도록 한다.

AI 요청이 실패해도 사용자가 기존에 입력하거나 편집한 내용은 사라지지 않는다.

---

# 4. 프로필 디자인 원칙

A4 결과물은 일반적인 워드형 이력서가 아니라 **세련된 에디토리얼 커리어 프로필**처럼 보여야 한다.

다음 원칙을 적용한다.

* 흰색 배경
* 진한 네이비 또는 차콜 계열 본문 색상
* 문서 전체에 한 가지 포인트 컬러 사용
* 이름, 직무, 핵심 역량, 경력 사이에 명확한 시각적 위계
* 제한적인 아이콘 사용
* 작은 직무 라벨
* 역량 태그
* 얇은 타임라인
* 얇은 구분선
* 충분한 여백
* 좋은 한글 타이포그래피

Lucide와 같은 **한 종류의 선형 SVG 아이콘 세트만 사용한다.**

이모지를 UI 아이콘으로 사용하지 않는다.

다음 디자인은 사용하지 않는다.

* 과도한 카드 UI
* 과도한 둥근 박스
* 과도한 그림자
* 과도한 그라데이션
* 장식 목적의 불필요한 요소
* 문서 전체를 감싸는 거대한 카드 박스
* 긴 문장을 `overflow: hidden`으로 숨기는 방식
* 말줄임표로 정보 삭제
* 읽기 어려울 정도의 작은 폰트

내용이 적은 경우에도 페이지 하단이 지나치게 비어 보이지 않도록 간격과 콘텐츠 밀도를 자연스럽게 조절한다.

핵심 역량은 단순 불렛 목록으로 끝내지 않는다.

`역량 태그 + 해당 역량을 뒷받침하는 경험 기반 강점 문장`

구조로 보여준다.

문서를 처음 본 사람이 약 5~10초 안에 다음 내용을 파악할 수 있어야 한다.

1. 누구인지
2. 어떤 직무를 희망하는지
3. 무엇을 잘하는지
4. 어떤 경험을 가지고 있는지
5. 지원 직무에 어떤 가치를 제공할 수 있는지

---

# 5. A4 프로필 레이아웃

## 상단 프로필 헤더

페이지 상단은 가장 강한 퍼스널 브랜딩 영역으로 구성한다.

왼쪽:

* 이름
* 희망 직무 라벨
* 한 줄 커리어 헤드라인
* 연락처

오른쪽:

* 프로필 사진

프로필 사진이 존재할 때만 표시한다.

사진은 약 26~30mm 폭의 세로형 이미지로 구성한다.

`object-fit: cover`

를 적용한다.

사진이 없다면 빈 사진 프레임, 기본 아바타, 실루엣 등을 표시하지 않는다.

이름은 문서 전체에서 가장 큰 글씨로 표시한다.

희망 직무는 작은 포인트 컬러 라벨로 표현한다.

연락처는 일관된 선형 아이콘과 텍스트로 구성한다.

과도한 배지 형태는 사용하지 않는다.

헤더 하단에는 포인트 컬러의 얇은 선을 배치하여 본문과 구분한다.

---

## 페이지 번호

페이지 수에 따라 다음과 같이 표시한다.

1페이지 문서:

`A4 1/1 Page`

2페이지 문서:

`A4 1/2 Page`
`A4 2/2 Page`

3페이지 문서:

`A4 1/3 Page`
`A4 2/3 Page`
`A4 3/3 Page`

---

## 핵심 역량과 강점

섹션 제목에는 의미에 맞는 선형 아이콘을 사용한다.

핵심 역량 키워드는 매우 옅은 포인트 컬러 배경과 작은 강조선이 있는 태그 형태로 표시한다.

태그는 여러 개가 한 줄에 자연스럽게 배치되고 화면 폭이 부족하면 다음 줄로 자연스럽게 넘어가도록 한다.

태그 아래에는 실제 경험에 근거한 강점 문장 3~4개를 짧은 불렛으로 표시한다.

---

## 경력 사항

경력은 큰 카드가 반복되는 형태가 아니라 **세로 타임라인**으로 표현한다.

기본 구조:

* 왼쪽의 얇은 포인트 컬러 세로선
* 조직명 우선 표시
* 필요한 경우 부서명 표시
* 직급 또는 역할은 작은 중립색 라벨
* 근무 기간은 우측 또는 적절한 위치에 정렬
* 주요 업무 및 성과 최대 3개
* 정확하게 계산 가능한 경우에만 총 경력 또는 재직 기간 표시

조직명, 역할, 기간, 주요 업무가 한눈에 구분되어야 한다.

긴 회사명이나 직무명을 말줄임표로 숨기지 않는다.

---

## 기타 섹션

다음 섹션에는 의미에 맞는 선형 아이콘을 사용할 수 있다.

* 학력
* 교육
* 자격
* 프로젝트
* 디지털 도구
* 어학
* 수상
* 기타 활동
* 자기소개 및 지원동기

내용이 짧은 섹션끼리는 페이지 하단에서 2열로 배치할 수 있다.

내용이 길어지면 자연스럽게 1열로 전환한다.

같은 정보를 여러 섹션에서 반복하지 않는다.

---

## 자기소개 및 지원동기

`자기소개 및 지원동기`는 주요 콘텐츠 중 가장 마지막에 배치한다.

너무 긴 자기소개서를 생성하지 않는다.

사용자의 실제 경력과 희망 직무 사이의 연결을 중심으로 짧고 자연스럽게 작성한다.

사용자가 제공하지 않은 기업명이나 특정 회사에 지원하는 것처럼 표현하지 않는다.

---

## 페이지 하단

페이지 하단에는 얇은 선과 함께 다음 정보만 작게 표시한다.

`이름 커리어 프로필`

그리고 현재 페이지 번호를 표시한다.

예:

`A4 1/2 Page`

로고, 서비스 홍보 문구, 워터마크는 넣지 않는다.

---

## 타이포그래피

한글 가독성이 좋은 Pretendard 계열 글꼴을 우선 사용한다.

폰트 로딩 실패에 대비한 적절한 system sans-serif fallback을 설정한다.

대략 다음 네 단계의 타이포그래피 위계를 유지한다.

* 이름: 24~27pt
* 헤드라인 및 주요 섹션 제목: 11~12pt
* 본문: 9.5~10.5pt
* 보조 정보 및 라벨: 8.5~9.5pt

본문은 어떤 경우에도 9pt 미만으로 축소하지 않는다.

---

# 6. 디자인 옵션

워크숍 및 실제 사용에 필요한 옵션만 제공한다.

## 포인트 컬러

다음 3가지 프리셋을 제공한다.

1. 에디토리얼 네이비
2. 세이지 그린
3. 버건디 차콜

프리셋을 변경하면 포인트 컬러만 바뀌고 정보 구조, 레이아웃, 가독성은 유지한다.

본문과 배경 사이에는 충분한 명도 대비를 확보한다.

---

## 간격

다음 2가지만 제공한다.

* 기본 간격
* 컴팩트 간격

컴팩트 간격을 선택해도 본문 글씨를 과도하게 축소하지 않는다.

---

## 기타 옵션

* 프로필 사진 업로드
* 프로필 사진 교체
* 프로필 사진 삭제
* 연락처 표시
* 연락처 숨기기
* 개별 섹션 표시
* 개별 섹션 숨기기
* 개인정보 마스킹

사진은 브라우저에서 Data URL 또는 메모리 기반 Object URL로 처리한다.

서버 또는 데이터베이스에 업로드하지 않는다.

별도의 사진 확대, 이동, 크롭 에디터, 밝기 보정 기능은 구현하지 않는다.

---

# 7. A4 미리보기 및 페이지 분할

문서는 정확한 A4 세로 규격을 사용한다.

`210mm × 297mm`

최소 1페이지, 최대 3페이지로 구성한다.

본문 최소 크기는 9pt 이상을 유지한다.

콘텐츠를 자르거나 숨기는 방식으로 페이지에 강제로 맞추지 않는다.

---

## 자동 페이지 배치 원칙

1페이지 구성을 우선한다.

약 3줄 이내 정도의 작은 초과만 발생할 경우 콘텐츠 가독성을 해치지 않는 범위에서 세로 간격을 약간 조절할 수 있다.

그 이상 초과하면 기본 간격을 유지한 채 2페이지로 전환한다.

2페이지에도 들어가지 않으면 3페이지로 전환한다.

3페이지에도 정상적으로 들어가지 않으면 PDF 생성을 비활성화하고 다음 안내를 표시한다.

`내용이 A4 3페이지를 초과했습니다. 불필요한 항목이나 긴 설명을 줄여주세요.`

---

## 페이지 채우기

콘텐츠는 반드시

`1페이지 → 2페이지 → 3페이지`

순서로 채운다.

페이지를 균등 분할하지 않는다.

예를 들어 총 콘텐츠 높이가 2.2페이지라면 각각 1.1페이지씩 나누지 말고

`1페이지를 먼저 자연스럽게 채우고 → 나머지를 2페이지에 배치`

한다.

페이지 1에 큰 빈 공간이 있는데 페이지 2에서 콘텐츠가 넘치는 형태가 발생하지 않도록 한다.

---

## 분할 단위

콘텐츠는 단순히 섹션 전체 단위로만 이동하지 않는다.

다음 단위까지 분할 가능하게 한다.

* 경력 항목
* 프로젝트 항목
* 개별 불렛
* 교육 항목
* 자격 항목
* 기타 리스트 항목

단, 섹션 제목만 페이지 마지막에 남아서는 안 된다.

`섹션 제목 + 첫 번째 콘텐츠 항목`

은 가능한 한 같은 페이지에 유지한다.

한 개의 짧은 불렛 문장이 페이지 경계에서 위아래로 잘리는 현상도 방지한다.

---

## 사용자 수동 페이지 배치

자동 배치 결과가 마음에 들지 않을 수 있으므로 사용자가 직접 조정할 수 있게 한다.

예:

* 이 항목을 다음 페이지로 이동
* 이 항목을 이전 페이지로 이동
* 여기에서 페이지 나누기
* 페이지 나누기 해제

사용자의 수동 페이지 배치 설정은 자동 재계산보다 우선한다.

단, 사용자가 강제로 배치했더라도 실제 A4 영역을 넘으면 경고한다.

---

# 8. A4 DOM 및 오버플로우 방지

A4 페이지는 다음 조건을 따른다.

* 실제 크기: `210mm × 297mm`
* 좌우 기본 패딩: 약 `15mm`
* 상·하단 안전 영역 확보
* 푸터 공간 별도 확보
* `box-sizing: border-box`

모든 주요 내부 Flex/Grid 자식 요소에 필요에 따라 다음을 적용한다.

`max-width: 100%`
`min-width: 0`

긴 텍스트와 날짜는 자연스럽게 줄바꿈한다.

정보가 보이지 않게 다음 방식을 사용해서는 안 된다.

* `overflow: hidden`
* 강제 고정 높이
* 말줄임표
* 텍스트 클리핑
* 지나치게 작은 폰트

미리보기부터 하나의 긴 문서가 아니라 **독립된 A4 페이지 DOM 여러 개**로 렌더링한다.

미리보기 페이지 사이에는 시각적 간격이나 배경을 둘 수 있지만 해당 간격은 PDF에 포함하지 않는다.

---

# 9. PDF 생성

PDF 생성에는

* `html-to-image`
* `jsPDF`

라이브러리를 사용한다.

이력서 미리보기 데이터로부터 A4 규격의 고화질 PDF를 생성하여 즉시 다운로드한다.

---

## PDF 생성 구조

화면에 축소 표시된 미리보기를 직접 캡처하지 않는다.

실제 A4 크기의 **읽기 전용 오프스크린 PDF DOM**을 별도로 생성한다.

PDF용 DOM은 화면 미리보기와 동일한 데이터와 동일한 A4 페이지 분할 결과를 사용해야 한다.

페이지별로 독립된 DOM을 생성하고 각 페이지를 따로 캡처한다.

긴 하나의 DOM 이미지를 만든 후 297mm 높이를 기준으로 이미지 자체를 잘라 여러 PDF 페이지로 만드는 방식은 사용하지 않는다.

---

## PDF 생성 순서

1. 최종 프로필 데이터 확인
2. 최종 페이지 배치 계산
3. 중복 콘텐츠 ID 검사
4. PDF 전용 읽기 DOM 생성
5. 웹폰트 로딩 완료 대기
6. 프로필 사진 이미지 로딩 완료 대기
7. 모든 A4 페이지 오버플로우 검사
8. 화면 미리보기용 `transform`, `scale`, `zoom`, animation 제거
9. 각 A4 페이지를 개별 이미지로 캡처
10. jsPDF A4 페이지에 순서대로 삽입
11. PDF 저장
12. 임시 이미지 및 오프스크린 DOM 즉시 삭제

PDF 생성 중에는 다운로드 버튼을 비활성화하여 중복 클릭을 방지한다.

성공 또는 실패 여부와 관계없이 임시 캡처 DOM은 반드시 정리한다.

---

## 파일명

이름이 존재하면:

`이름_커리어프로필.pdf`

예:

`김서윤_커리어프로필.pdf`

이름이 없다면:

`커리어프로필.pdf`

개인정보 마스킹 모드에서는 실명 파일명을 사용하지 않는다.

예:

`커리어프로필_마스킹.pdf`

---

# 10. PDF 텍스트 및 레이아웃 겹침 방지

html-to-image 또는 canvas 기반 PDF 생성 과정에서 웹 화면에서는 정상인데 PDF에서 글자가 겹치거나 잘리는 문제가 발생하지 않도록 특별히 신경 써서 구현한다.

---

## line-height

PDF용 DOM에서는 `leading-none`을 기본값으로 사용하지 않는다.

본문, 회사명, 제목, 헤드라인, 라벨에 충분하고 명시적인 `line-height`를 설정한다.

가능하면 `leading-normal` 또는 명확한 CSS line-height 값을 사용한다.

---

## 회사명·직책·날짜 배치

회사명, 프로젝트명, 직책, 날짜 등 여러 정보가 한 줄에 배치되는 부모 컨테이너에는 다음 원칙을 적용한다.

* `display: flex`
* `flex-wrap: wrap`
* `min-width: 0`
* 명시적인 `column-gap`
* 명시적인 `row-gap`

단순한 `margin-left`, `space-x` 등에만 의존하지 않는다.

줄바꿈이 발생해도 위아래 요소가 겹치지 않아야 한다.

---

## 라벨과 배지

직책, 역할, 날짜 등 짧은 정보에는 필요할 경우

`white-space: nowrap`
`shrink: 0`

을 적용할 수 있다.

반면 긴 회사명, 프로젝트명, 부서명에는 `nowrap`을 강제하지 않는다.

라벨은

`inline-block`

또는 **명시적인 line-height를 가진 `inline-flex`**

방식으로 구현한다.

canvas 이미지 변환 과정에서 baseline 차이로 텍스트가 겹치지 않도록 한다.

---

## 정렬

한 줄짜리 라벨끼리 정렬하는 영역에서는 `items-center`를 사용할 수 있다.

긴 회사명 등 여러 줄 텍스트가 포함되는 헤더 영역에서는 `items-start`를 우선한다.

회사명/직책 헤더와 하단 불렛 사이에는 명확한 `margin-bottom` 또는 `row-gap`을 확보한다.

---

## 캡처 직전 검사

각 PDF 페이지에 대해 다음 값을 검사한다.

* `scrollWidth`
* `clientWidth`
* `scrollHeight`
* `clientHeight`
* `getBoundingClientRect()`

허용 범위를 벗어나는 가로 또는 세로 오버플로우가 발견되면 해당 페이지를 그대로 캡처하지 않는다.

페이지 재배치 또는 사용자 안내를 수행한다.

---

# 11. PDF 텍스트 중복 방지

PDF용 DOM은 **읽기 전용 DOM**으로 별도 생성한다.

다음 요소를 PDF용 DOM에 넣지 않는다.

* input
* textarea
* contentEditable 편집 레이어
* 선택 테두리
* 편집 버튼
* 이동 버튼
* AI 버튼
* AI 제안 레이어
* 중복 텍스트 레이어
* hover UI
* focus UI

최종적으로 사용자가 선택한 텍스트를 한 번만 렌더링한다.

---

# 12. 페이지 콘텐츠 중복 방지

페이지를 나눌 때 동일한 콘텐츠가 여러 페이지에 중복 출력되지 않도록 한다.

전체 콘텐츠를 먼저 하나의 목록으로 정규화한다.

다음 각각에 고유 ID를 부여한다.

* 섹션
* 경력
* 프로젝트
* 교육
* 자격
* 강점 불렛
* 경력 불렛
* 기타 항목

각 콘텐츠 ID는 **정확히 하나의 페이지에만 배정**한다.

예:

`item-001 → page 1`
`item-002 → page 1`
`item-003 → page 2`

2페이지나 3페이지를 만들 때 전체 원본 데이터를 다시 렌더링하고 CSS로 일부를 숨기는 방식은 사용하지 않는다.

각 페이지에는 자신에게 할당된 콘텐츠만 렌더링한다.

PDF 생성 직전 전체 페이지의 ID를 검사한다.

같은 ID가 2개 이상의 페이지에서 발견되면 PDF 생성을 중단하고 페이지 배치를 다시 수행한다.

경력 항목이 페이지 사이에서 분할될 경우 문맥 유지를 위한 **조직명 또는 경력 제목만 반복 표시할 수 있다.**

동일한 경력 설명이나 동일 불렛은 반복하지 않는다.

전체 프로필 헤더는 **1페이지에만 표시한다.**

---

# 13. 미리보기와 PDF 동일성

화면 미리보기와 PDF는 같은 프로필 데이터, 같은 디자인 설정, 같은 페이지 분할 결과를 사용한다.

화면 미리보기만 예쁘고 PDF가 다르게 나오는 구조를 만들지 않는다.

다음 항목이 동일해야 한다.

* 텍스트
* 콘텐츠 순서
* 페이지 분할
* 포인트 컬러
* 글꼴 위계
* 경력 타임라인
* 역량 태그
* 표시/숨김 섹션
* 사진
* 개인정보 마스킹
* 페이지 번호

화면에서는 A4 페이지 전체를 CSS `transform: scale()` 등을 이용하여 축소 표시할 수 있다.

그러나 PDF 생성 시에는 축소 transform을 제거한 실제 A4 크기의 DOM을 사용한다.

---

# 14. 개인정보 마스킹

`개인정보 마스킹`

옵션을 제공한다.

마스킹 상태를 변경하면 화면 미리보기와 PDF에 즉시 동일하게 반영한다.

마스킹은 원본 데이터를 직접 수정하는 것이 아니라 **출력 단계에서만 적용하는 derived view** 방식으로 구현한다.

마스킹할 수 있는 정보:

* 이름
* 전화번호
* 이메일
* 주소 또는 지역
* 생년월일 등 사용자가 입력한 기타 식별 가능 정보

예:

`김서윤 → 김○○`

`010-1234-5678 → 010-****-5678`

`sample@email.com → s****@email.com`

정확한 마스킹 형식은 자연스럽고 일관되게 적용한다.

---

## 마스킹 데이터 원칙

마스킹 상태에서도 사용자가 입력한 실제 원본 데이터는 변경하지 않는다.

마스킹 ON/OFF를 자유롭게 전환할 수 있어야 한다.

마스킹 상태에서는 다음에도 실명을 포함하지 않는다.

* PDF 파일명
* PDF metadata
* 브라우저 document title에 동적으로 들어가는 개인정보
* 임시 캡처 파일명

---

# 15. 개인정보 보호 원칙

사용자의 명시적인 저장 동의 기능을 별도로 구현하지 않는 한 다음 정보는 저장하지 않는다.

* 이력서 원본
* AI 생성 결과
* 프로필 사진
* 이름
* 연락처
* 이메일
* 주소
* 기타 커리어 데이터

다음 위치에도 저장하지 않는다.

* DB
* 서버 로그
* 분석 이벤트 payload
* Cache Storage
* localStorage
* sessionStorage
* IndexedDB

AI API 호출에 연락처 정보가 필요하지 않으면 이메일, 전화번호, 주소 등은 모델에 전송하지 않는다.

서버 오류 로그에도 사용자의 전체 이력서 원문을 포함하지 않는다.

PDF 생성 후 임시 캡처 이미지와 임시 DOM을 즉시 삭제한다.

브라우저 페이지를 새로고침하거나 종료하면 메모리의 이력서 정보가 자연스럽게 제거되도록 한다.

---

# 16. 초기 상태

초기 프로필 데이터는 모두 비워 둔다.

가상의 개인정보, 경력, 학력, 자격을 초기 데이터에 넣지 않는다.

예시가 필요하다면 placeholder에만 표시할 수 있다.

placeholder 내용은 실제 상태값으로 저장하거나 미리보기 및 PDF에 출력하지 않는다.

---

# 17. 로딩 및 오류 처리

AI 호출 중에는 사용자가 진행 상태를 명확하게 알 수 있게 한다.

예:

`경력 내용을 분석하고 있어요.`

`지원 직무에 맞게 핵심 경험을 정리하고 있어요.`

`커리어 프로필을 구성하고 있어요.`

과도하게 긴 애니메이션은 사용하지 않는다.

AI 요청 중에는 동일 버튼을 중복 클릭할 수 없도록 한다.

오류가 발생해도 사용자가 입력한 데이터는 유지한다.

기술적인 오류 stack trace나 API 응답 전문은 일반 사용자 화면에 보여주지 않는다.

개발 환경에서는 필요한 디버깅 정보를 확인할 수 있도록 하되 사용자 개인정보는 로그에서 제외한다.

---

# 18. 모바일 대응

모바일에서도 다음 기능을 모두 사용할 수 있어야 한다.

* 최초 정보 입력
* 이력서 붙여넣기
* AI 생성
* 직접 수정
* 항목 추가
* 항목 삭제
* 삭제 취소
* 항목 이동
* 섹션 추가
* AI 문장 다듬기
* AI 제안 선택
* 디자인 변경
* 개인정보 마스킹
* A4 미리보기
* PDF 다운로드

모바일 A4 미리보기는 화면 폭에 맞춰 축소하되 실제 문서 비율을 유지한다.

편집 화면 자체 때문에 가로 스크롤이 발생하지 않게 한다.

---

# 19. 출력 길이 및 콘텐츠 정제 원칙

AI가 장황한 커리어 프로필을 생성하지 않도록 한다.

각 경력의 업무 및 성과는 가장 중요한 내용 **최대 3개**만 사용한다.

불필요하게 서술적인 문장을 제거한다.

같은 내용을 여러 섹션에서 반복하지 않는다.

다음과 같은 과도한 AI 문체를 지양한다.

* 다양한 경험을 통해 성장했습니다.
* 끊임없이 도전하는 인재입니다.
* 열정을 바탕으로 최고의 성과를 만들어왔습니다.
* 혁신적인 사고로 새로운 가치를 창출합니다.

사용자 경험에서 근거를 찾을 수 없는 추상적인 자기PR 문장은 만들지 않는다.

가능한 한 사용자의 실제 경험과 행동을 기반으로 표현한다.

A4 1~2페이지 가독성에 최적화된 **짧고 구체적인 문장**을 사용한다.

---

# 20. README

README에 최소한 다음 내용을 작성한다.

## 설치 및 실행 방법

* 패키지 설치
* 로컬 개발 서버 실행
* 프로덕션 빌드
* 프로덕션 실행

## 환경변수

필요한 환경변수 이름과 설정 방법을 설명한다.

API 키 실제 값을 README에 넣지 않는다.

`.env.example`을 제공한다.

## Gemini API

* Gemini API 키 설정 방법
* 서버 API 구조
* 기본 모델과 fallback 모델 구조
* Local Fallback Generator가 사용되는 조건

## PDF

* html-to-image
* jsPDF
* 웹폰트 로딩 관련 주의사항

---

# 21. 구현 완성 조건

모든 버튼과 입력 요소에 실제 동작을 연결한다.

다음 상태를 남기지 않는다.

* 정의되지 않은 함수
* 누락된 ID
* 빈 이벤트 핸들러
* 가짜 API
* 의사 코드
* TODO
* FIXME
* 클릭해도 동작하지 않는 버튼
* 테스트용 더미 개인정보
* 미완성 컴포넌트

현재 프로젝트를 직접 실행 가능한 상태까지 완성한다.

가능하다면 빌드 및 타입 검사도 수행하고 오류를 수정한다.

---

# 22. 완료 전 최종 검증

완료했다고 응답하기 전에 직접 구현 내용을 검토하고 다음 항목을 모두 확인한다.

### AI 생성

* 최소 입력만으로 커리어 프로필이 생성되는가?
* 실제 Gemini API가 서버에서 호출되는가?
* API 키가 클라이언트에 노출되지 않는가?
* 기본 모델 장애 시 Retry가 작동하는가?
* 다음 모델로 자동 전환되는가?
* 모든 모델 실패 시 Local Fallback Generator가 작동하는가?
* AI 연결 실패 후에도 사용자가 작업을 계속할 수 있는가?

### 사실성

* AI가 입력에 없는 경력을 만들지 않는가?
* 입력에 없는 자격을 만들지 않는가?
* 입력에 없는 학력을 만들지 않는가?
* 입력에 없는 성과를 만들지 않는가?
* 입력에 없는 숫자나 퍼센트를 만들지 않는가?

### 편집

* 직접 수정이 가능한가?
* 항목 추가가 가능한가?
* 항목 삭제가 가능한가?
* 마지막 삭제 취소가 가능한가?
* 순서 이동이 가능한가?
* 섹션 표시/숨김이 가능한가?
* AI 제안 3개 중 하나를 선택할 수 있는가?
* AI가 사용자의 문장을 임의로 덮어쓰지 않는가?

### 디자인

* 결과물이 일반 워드 이력서가 아닌 퍼스널 브랜딩 프로필처럼 보이는가?
* 이름과 직무가 가장 먼저 인식되는가?
* 태그, 아이콘, 타임라인이 일관된 정보 위계를 만드는가?
* 디자인 요소가 정보를 방해하지 않는가?
* 한글 가독성이 좋은가?

### A4

* 실제 A4 210mm × 297mm인가?
* 페이지가 독립된 DOM으로 분리되어 있는가?
* 페이지 1부터 순서대로 채워지는가?
* 최대 3페이지까지 정상 대응하는가?
* 페이지 하단 안전 영역을 침범하지 않는가?
* 텍스트가 잘리지 않는가?
* 회사명과 직책이 겹치지 않는가?
* 불렛이 페이지 경계에서 잘리지 않는가?

### 콘텐츠 중복

* 동일한 콘텐츠 ID가 두 페이지에 중복되지 않는가?
* 2페이지와 3페이지가 전체 데이터를 다시 출력하지 않는가?
* 프로필 헤더가 1페이지에만 존재하는가?

### PDF

* 미리보기와 PDF의 레이아웃이 일치하는가?
* PDF에 입력창이나 편집 UI가 들어가지 않는가?
* PDF에서 한글이 겹치지 않는가?
* PDF에서 태그와 직책 라벨이 겹치지 않는가?
* PDF에서 빈 섹션이 출력되지 않는가?
* 숨긴 섹션이 PDF에 출력되지 않는가?
* 각 페이지 번호가 정확한가?
* 파일명이 정확한가?
* 개인정보 마스킹 상태가 PDF에도 동일하게 반영되는가?
* PDF 생성 후 임시 DOM이 삭제되는가?

### 모바일

* 모바일에서도 입력과 편집이 가능한가?
* 모바일에서도 AI 제안 선택이 가능한가?
* 모바일에서도 PDF 다운로드가 가능한가?
* 불필요한 가로 스크롤이 없는가?

발견한 문제가 있다면 완료 메시지를 출력하기 전에 직접 수정한다.

---

# 23. 최종 구현 품질

기능만 작동하는 MVP 수준에서 멈추지 않는다.

이 웹앱의 핵심 결과물은 **A4 커리어 프로필 자체**다.

사용자가 다운로드한 PDF를 보았을 때

`내 경력이 단순한 이력서가 아니라 하나의 전문적인 커리어 브랜드 프로필로 정리되었다`

고 느낄 수 있어야 한다.

기능의 개수보다 다음을 더 중요하게 생각한다.

* 사실성
* 정보 위계
* 가독성
* 에디토리얼 디자인
* 안정적인 AI 호출
* 안정적인 PDF 출력
* 개인정보 보호
* 실제 사용 가능성

지금부터 위 요구사항을 반영하여 프로젝트를 직접 구현하라.

기존 코드가 있다면 먼저 구조를 파악한 뒤 필요한 파일을 수정하고, 필요한 파일은 새로 생성한다.

설명이나 기획 제안만 하지 말고 **실제로 실행 가능한 완성 코드를 작성하고 구현을 완료하라.**