11 KiB
(프롬프트) A4 규격 보고서 형식으로 변환 (HTML)
Gemini 등 생성형 AI가 문서를 분석하면, 결과물은 페이지 구분 없이 내용이 쭉 이어지는 HTML 파일로 나옵니다. 이 프롬프트는 그 HTML을 받아 표지 → 목차 → 요약 → 본문 순서의 A4 규격 보고서 형태로 재조립하는 변환 도구입니다. 출력물은 브라우저에서 바로 인쇄하거나 PDF로 저장할 수 있습니다.
전체 구성 한눈에 보기
| 순서 | 구성요소 | 역할 한 줄 요약 |
|---|---|---|
| 1 | 페르소나 | AI의 작업 태도와 판단 기준 설정 |
| 2 | 원칙 0 | 내용 손실 방지 — 절대 규칙 |
| 3 | 원칙 1 | 레이아웃 품질 기준 — 6가지 규칙 |
| 4 | 제작가이드 가 | 보고서 외형 설계 (CSS) |
| 5 | 제작가이드 나 | 콘텐츠 입력 공간 정의 (Body 구조) |
| 6 | 제작가이드 다 | 실제 변환 처리 로직 (JS 엔진) |
| 7 | 실행 순서 | 전체 처리 흐름 제어 |
1. 페르소나 — AI의 작업 태도 설정
이 프롬프트에서 하는 역할
'지능형 퍼블리싱 아키텍트'라는 역할을 AI에게 부여합니다. 구체적으로는 두 가지 행동 방식을 강제합니다. "스타일 독소 제거" 지시는 원본 HTML의 디자인을 무시하고 A4 기준으로 새로 입히도록 유도하고, "복사기처럼 보존 / 강박증 수준으로 맞춤"이라는 표현은 내용은 절대 건드리지 말고 레이아웃만 정밀하게 처리하라는 이중 명령입니다.
왜 가장 먼저 오는가
AI는 프롬프트를 위에서부터 순서대로 읽고 이후 내용을 해석합니다. 페르소나가 먼저 정의되어야 그 뒤에 나오는 원칙과 코드를 "어떤 태도로" 수행해야 하는지 기준이 생깁니다. 페르소나를 뒤에 두면 AI가 앞의 원칙들을 해석할 때 기준이 없어 느슨하게 적용할 가능성이 높아집니다.
2. 원칙 0 — 내용 손실 방지
이 프롬프트에서 하는 역할
AI가 HTML을 처리하는 과정에서 자주 발생하는 문제인 "내용 요약, 생략, 임의 수정"을 차단합니다. "복사기 모드"라는 단어는 AI에게 편집자가 아닌 복사 도구로 동작하도록 행동 방식을 제한하고, "토씨 하나 바꾸지 않는다"는 표현은 표의 수치나 문장이 변경되는 것을 명시적으로 금지합니다.
왜 원칙 1과 분리되어 있는가
원칙 0은 이 프롬프트 전체에서 어떤 경우에도 예외 없이 지켜야 하는 절대 규칙이고, 원칙 1은 레이아웃 품질에 관한 기술적 규칙으로 상황에 따라 판단이 개입될 수 있습니다. 두 가지를 같은 레벨에 두면 AI가 레이아웃 최적화를 위해 내용을 임의로 조정하는 판단 오류가 생길 수 있어, 우선순위를 명확히 분리한 것입니다.
3. 원칙 1 — 레이아웃 품질 기준 (6가지)
렌더링이란
HTML 코드를 사람이 볼 수 있는 화면으로 표시하는 과정을 렌더링이라 합니다. 이 프롬프트에서는 HTML 코드를 A4 용지 형태의 보고서로 표시하는 것이 렌더링에 해당합니다.
왜 6가지인가
6개는 임의로 정한 숫자가 아닙니다. 실제 변환 작업 과정에서 반복적으로 발생한 레이아웃 문제들을 해결하며 버전을 거듭하는 과정에서 수렴된 규칙들입니다. 각각이 실제로 발생하는 특정 문제에 대응합니다.
각 규칙이 해결하는 실제 문제
| 규칙 | 없으면 발생하는 문제 |
|---|---|
| Deep Sanitization | Gemini 출력 HTML의 색상·글자크기가 A4 디자인을 덮어씌워 보고서 외형이 망가짐 |
| H1 Only Break | 모든 소제목에서 페이지가 나뉘어 페이지 수가 과도하게 늘거나, 아무데서도 안 나뉘어 내용이 뭉침 |
| Orphan Control | 소제목만 페이지 맨 아래에 홀로 남고 내용은 다음 페이지에 있는 어색한 구성 발생 |
| Smart Fit | 표·그림이 페이지를 조금만 넘어도 다음 페이지로 밀려나 현재 페이지 하단이 텅 빔 |
| Gap Filling | 그림이 다음 페이지로 넘어가면서 현재 페이지 하단에 불필요한 공백 발생 |
| Visual Standard | 여백과 캡션 위치 기준이 없어 페이지마다 정렬이 제각각 |
왜 원칙 0 다음에 오는가
내용 보존(원칙 0)이 확보된 이후에 레이아웃 품질(원칙 1)을 논의하는 것이 논리적 순서입니다. 레이아웃 규칙을 먼저 두면 AI가 레이아웃 최적화를 위해 원칙 0을 희생하는 판단을 할 수 있습니다.
4. 제작가이드 가 — 보고서 외형 설계 (CSS)
이 프롬프트에서 하는 역할
보고서의 시각적 외형 전체를 코드로 정의합니다. 글자 크기, 색상, 여백, 제목 스타일, 표 디자인 등이 여기서 결정됩니다. AI는 앞서 배운 원칙들을 이 CSS 설계도를 기반으로 구현합니다.
주요 항목과 영향
| CSS 항목 | 보고서에서의 영향 |
|---|---|
:root 색상 변수 |
--primary: #006400 한 줄을 바꾸면 보고서 전체 색상 테마가 변경됨 |
.sheet |
A4 용지 1장의 물리적 크기(210mm × 297mm) 고정 |
.body-content |
본문 작업 영역을 상하좌우 20mm 여백 안쪽으로 제한 |
h1, h2, h3 |
제목 계층별 글자 크기와 색상을 차별화하여 가독성 확보 |
.highlight-box |
강조 박스의 배경색·테두리·글자 크기 통일 |
.squeeze |
요약 페이지가 약간 넘칠 때 자동 압축 적용 (행간·자간 축소) |
왜 Body 구조(나) 보다 먼저 오는가
CSS가 먼저 선언되어야 그 다음에 나오는 HTML 구조와 JS 엔진이 스타일을 참조할 수 있습니다. HTML → JS 순서로 실행되는 웹 브라우저의 기술적 특성 때문에 이 순서는 변경이 불가합니다.
5. 제작가이드 나 — 콘텐츠 입력 공간 (Body 구조)
이 프롬프트에서 하는 역할
원본 HTML을 역할별로 분리하여 주입할 수 있는 4개의 전용 공간을 정의합니다. AI에게 "원본 내용을 이 4개 박스에 나눠 담아라"는 입력 인터페이스 역할을 합니다.
4개 박스의 역할
| 박스 | 담기는 내용 | 처리 방식 |
|---|---|---|
#box-cover |
문서 제목, 부제, 작성 정보 | 중앙 정렬 표지로 생성 |
#box-toc |
목차 | 3계층 목차로 자동 포맷 |
#box-summary |
요약 내용 | 1페이지 압축 우선 적용 |
#box-content |
본문 전체 | 페이지 분할 렌더링 |
<template>의 역할
JS 엔진이 새 페이지가 필요할 때마다 이 템플릿을 복제하여 A4 용지를 찍어냅니다. 머리말·본문 영역·꼬리말 구조가 매 페이지에 동일하게 적용되는 것이 이 구조 덕분입니다.
6. 제작가이드 다 — 실제 변환 처리 로직 (JS 엔진)
왜 세분화되어 있는가
변환 처리는 하나의 거대한 코드 덩어리가 아니라 역할이 분리된 함수들의 조합입니다. 각 함수가 독립된 하나의 임무만 수행하도록 설계되어 있어 오류 발생 시 해당 함수만 수정할 수 있습니다.
다-1. 초기화 및 설정
렌더링을 시작하기 전에 기준값을 먼저 세팅합니다.
maxHeight: 970은 A4 용지(297mm)에서 상하 여백(각 20mm)을 뺀 본문 가용 높이를 픽셀로 환산한 값으로, 이후 모든 페이지 분할 판단의 기준이 됩니다.
await document.fonts.ready는 웹폰트가 완전히 로드된 후 실행을 시작하도록 대기시킵니다. 폰트가 로드되기 전 실행하면 글자 너비 계산이 틀려 페이지 분할 위치가 어긋납니다.
다-2. Sanitizer (detox 함수)
Gemini 출력 HTML에 포함된 Tailwind CSS·인라인 스타일을 제거하고 A4 CSS 엔진과 충돌하지 않는 상태로 세탁합니다. 이 처리가 없으면 원본의 색상·글자크기·여백이 A4 디자인을 덮어씌웁니다. SVG(차트·그래프) 내부는 구조가 복잡하여 건드리면 깨지므로 예외 처리합니다.
다-3. 목차 포매터 (formatTOC 함수)
원본 HTML의 제목 태그(H1/H2/H3)를 읽어 3계층 목차를 자동 생성합니다. 원본 목차 구조의 품질과 무관하게 항상 일정한 형태의 목차 페이지가 출력됩니다.
다-4. 노드 평탄화 처리 (getFlatNodes 함수)
HTML은 div 안에 section 안에 article처럼 중첩 구조로 되어 있습니다. 이를 렌더링 엔진이 하나씩 배치할 수 있는 단위 블록들의 목록으로 풀어냅니다. 이 처리 없이는 중첩 구조 때문에 페이지 분할 위치를 계산할 수 없습니다.
다-5. 핵심 렌더링 엔진 (renderFlow 함수)
콘텐츠를 A4 용지에 실제로 배치하는 핵심 처리입니다. 배치 → 자간 최적화 → 넘침 감지 → 분할 또는 이동의 4단계로 동작하며, 원칙 1의 6가지 규칙이 코드로 구현되는 곳입니다.
다-6. 페이지 생성기 (createPage 함수)
렌더링 엔진이 "새 페이지 필요"를 판단하면, 이 함수가 실제 A4 용지 한 장을 생성합니다. 표지·목차·본문에 따라 레이아웃이 다르게 적용됩니다.
7. 실행 순서 — 전체 처리 흐름 제어
왜 마지막에 오는가
실행 순서는 앞서 정의된 CSS·HTML 구조·JS 함수들을 모두 호출하는 총괄 지휘 역할입니다. 구성 요소들이 모두 정의된 이후에 실행되어야 하기 때문에 가장 마지막에 위치합니다.
처리 순서와 각 단계의 이유
① 표지 생성 → 항상 첫 페이지. 순서 변경 불가
② 목차 렌더링 → 페이지 번호 제외. 본문보다 반드시 앞에 위치
③ 요약 압축 사전 측정 → 렌더링 전에 미리 1페이지 초과 여부를 계산.
렌더링 이후에는 수정 불가하여 이 순서가 필수
④ 요약 렌더링 → 압축 처리 결과를 적용하여 출력
⑤ 본문 렌더링 → 페이지 번호 시작. 가장 많은 처리 시간 소요
⑥ 긴 제목 자동 축소 → 렌더링 완료 후 가로로 넘치는 제목을 축소
⑦ 자간 통합 조정 → 전체 페이지를 대상으로 자간 최적화 1회 추가 적용
⑧ 마지막 페이지 병합 → 마지막 페이지 내용이 3줄 이하이면 앞 페이지에 합쳐 페이지 낭비 방지
⑨ 원본 데이터 삭제 → raw-container를 화면에서 제거하여 최종 출력물만 표시
③번 "요약 압축 사전 측정"이 별도 단계로 존재하는 이유는, 요약 페이지가 1페이지를 소폭 초과할 때 강제로 2페이지로 넘기지 않고 글자 크기·행간을 미리 조정하여 1페이지 안에 맞추기 위해서입니다. 렌더링이 완료된 이후에는 이 조정이 불가능하여 반드시 렌더링 전에 처리합니다.