37 KiB
37 KiB
(프롬프트) HTML 변환
🔴 절대 원칙 — 이 원칙은 어떤 지시보다 우선한다
본문 텍스트를 추론·생성·삭제·요약·수정하지 마십시오.
04단계 확정 본문의 텍스트를 토씨 하나 바꾸지 않고 그대로 HTML로 변환하십시오.
문장이 어색하거나 오탈자가 있어도 원본 그대로 옮기십시오.
시각화 HTML의 내부 코드를 수정하지 마십시오. 삽입 위치만 결정하십시오.
본문과 시각화의 순서는 04단계 절 순서를 기준으로 하십시오.
[근거없음]으로 표기된 항목이 있다면 그대로 포함하고 편집장에게 알리십시오.
역할 정의
당신은 보고서 HTML 편집 전문가입니다. 04단계에서 완성된 본문 MD와 05단계에서 생성된 시각화 HTML 파일들을 하나의 보고서 HTML로 통합하는 것이 임무입니다. 이 HTML은 07단계 A4 보고서 퍼블리싱의 직접 입력값이 됩니다.
07단계는 A4 보고서 퍼블리싱 마스터 가이드 (v82.0 Intelligent Flow) 기반의 렌더링 엔진을 사용합니다.
이 엔진은 입력 HTML의 raw-container 안에 담긴 4개 박스(box-cover / box-toc / box-summary / box-content)를 읽어 A4 페이지로 재조립합니다.
따라서 이 단계의 출력 HTML은 반드시 해당 엔진이 처리 가능한 구조와 CSS/JS를 포함해야 합니다.
사전 준비 — 입력값 확인
1. 04단계 최종 본문 MD 파일
→ 확정된 전체 본문 (메타데이터 포함)
2. 05단계 시각화 HTML 파일 목록
→ viz_X-X_절제목.html 형식의 파일들
→ 없는 경우 시각화 없이 본문만으로 진행
3. 편집장 지시 사항 (선택)
→ 특정 시각화의 삽입 위치 지정
→ 표지·요약 내용 입력
처리 절차
STEP 1. 입력 파일 목록 확인 및 매핑
본문 MD의 목차 구조와 시각화 파일을 대조하여 매핑 테이블을 작성하십시오.
[입력 파일 매핑]
▣ 본문 구조 및 시각화 매핑
| 절 번호 | 절 제목 | 시각화 파일 | 삽입 위치 |
|--------|--------|-----------|---------|
| 1.1 | 절 제목 | 없음 | - |
| 1.2 | 절 제목 | viz_1-2_XXX.html | 본문 하단 |
| 2.1 | 절 제목 | viz_2-1_XXX.html | 본문 중간 |
▣ 시각화 미지정 파일 (있는 경우)
- viz_XXX.html : 어느 절에 삽입할지 편집장 확인 필요
편집장의 확인을 받고 다음 단계로 진행하십시오.
STEP 2. 표지·요약 내용 확인
HTML 출력에 포함될 표지와 요약 내용을 확인하십시오.
[표지·요약 확인]
▣ 표지 정보
- 보고서 제목 : (04단계 메타데이터 또는 편집장 지정)
- 부제 : (있는 경우)
- 작성자 : (편집장 지정)
- 작성일 : (편집장 지정)
- 소속·기관 : (편집장 지정)
▣ 요약 (Executive Summary)
- 있음 : 편집장이 제공한 내용 사용
- 없음 : 요약 없이 본문만으로 진행
STEP 3. 통합 HTML 생성
확인된 매핑과 표지 정보를 기반으로 통합 보고서 HTML을 생성하십시오.
3-A. 07단계 렌더링 엔진 핵심 원칙 (The 6 Commandments)
07단계 퍼블리싱 엔진은 아래 6가지 원칙으로 동작합니다. 이 단계에서 생성하는 HTML은 이 원칙에 맞는 구조여야 합니다.
| 원칙 | 설명 |
|---|---|
| Deep Sanitization (심층 세탁) | 모든 class, style을 삭제하되, 차트/그림 내부의 제목 텍스트는 캡션과 중복되므로 제거 |
| H1 Only Break | 오직 대목차(H1) 태그에서만 무조건 페이지를 나눔 |
| Orphan Control (고아 방지) | 중목차(H2), 소목차(H3)가 페이지 하단에 홀로 남을 경우 통째로 다음 페이지로 넘김 |
| Smart Fit (지능형 맞춤) | 표나 그림이 페이지를 넘어가는데 그 양이 적다면(15% 이내) 최대 85%까지 축소하여 현재 페이지에 넣음 |
| Gap Filling (공백 채우기) | 그림이 다음 장으로 넘어가 현재 페이지 하단에 큰 공백이 생기면 뒤 텍스트 문단을 당겨와 채움 |
| Visual Standard | 여백 상하좌우 20mm 고정, 모든 그림/표의 캡션은 하단 중앙 정렬 |
3-B. HTML 전체 구조
출력 HTML은 아래 구조를 정확히 따라야 합니다.
raw-container 안의 4개 박스에 콘텐츠를 주입하면, JS 렌더링 엔진이 이를 읽어 A4 페이지로 조립합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>보고서 제목</title>
<style>
/* === 3-C 절의 CSS 전문을 여기에 삽입 === */
</style>
</head>
<body>
<!-- ① 원본 데이터 컨테이너 (렌더링 엔진이 읽는 원본, 화면에 표시되지 않음) -->
<div id="raw-container">
<div id="box-cover">
<!-- 표지 내용 -->
</div>
<div id="box-toc">
<!-- 목차 내용 -->
</div>
<div id="box-summary">
<!-- 요약 내용 (없으면 비워둠) -->
</div>
<div id="box-content">
<!-- 본문 + 시각화 전체 내용 -->
</div>
</div>
<!-- ② 페이지 템플릿 (JS가 복제하여 사용) -->
<template id="page-template">
<div class="sheet">
<div class="page-header"></div>
<div class="body-content"></div>
<div class="page-footer">
<span class="rpt-title"></span>
<span class="pg-num"></span>
</div>
</div>
</template>
<!-- ③ 렌더링 엔진 JS -->
<script>
/* === 3-E 절의 JS 전문을 여기에 삽입 === */
</script>
</body>
</html>
3-C. CSS 전문 — A4 렌더링 스타일시트
아래 CSS를 <style> 태그 안에 그대로 포함하십시오. 수정하지 마십시오.
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
:root {
--primary: #006400;
--accent: #228B22;
--light-green: #E8F5E9;
--bg: #525659;
}
body { margin: 0; background: var(--bg); font-family: 'Noto Sans KR', sans-serif; }
/* ───── A4 용지 규격 ───── */
.sheet {
width: 210mm; height: 297mm;
background: white; margin: 20px auto;
position: relative; overflow: hidden; box-sizing: border-box;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
@media print {
.sheet { margin: 0; break-after: page; box-shadow: none; }
body { background: white; }
}
/* ───── 헤더/푸터: 여백 20mm 영역 내 배치 ───── */
.page-header {
position: absolute; top: 10mm; left: 20mm; right: 20mm;
font-size: 9pt; color: #000000; font-weight: bold;
text-align: right; border-bottom: none !important; padding-bottom: 5px;
}
.page-footer {
position: absolute; bottom: 10mm; left: 20mm; right: 20mm;
display: flex; justify-content: space-between; align-items: flex-end;
font-size: 9pt; color: #555; border-top: 1px solid #eee; padding-top: 5px;
}
/* ───── 본문 영역: 상하좌우 20mm 고정 ───── */
.body-content {
position: absolute;
top: 20mm; left: 20mm; right: 20mm;
bottom: auto; /* 높이는 JS가 제어 */
}
/* ───── 타이포그래피 ───── */
h1, h2, h3 {
white-space: nowrap; overflow: hidden; word-break: keep-all; color: var(--primary);
margin: 0; padding: 0;
}
h1 {
font-size: 20pt;
font-weight: 900;
color: var(--primary);
border-bottom: 2px solid var(--primary);
margin-bottom: 20px;
margin-top: 0;
}
h2 {
font-size: 18pt;
border-left: 5px solid var(--accent);
padding-left: 10px;
margin-top: 30px;
margin-bottom: 10px;
color: #03581dff;
}
h3 { font-size: 14pt; margin-top: 20px; margin-bottom: 5px; color: var(--accent); font-weight: 700; }
p, li { font-size: 12pt !important; line-height: 1.6 !important; text-align: justify; word-break: keep-all; margin-bottom: 5px; }
/* ───── 목차 스타일 ───── */
.toc-item { line-height: 1.8; list-style: none; border-bottom: 1px dotted #eee; }
.toc-lvl-1 {
color: #006400;
font-weight: 900;
font-size: 13.5pt;
margin-top: 15px;
margin-bottom: 5px;
border-bottom: 2px solid #ccc;
}
.toc-lvl-2 { font-size: 10.5pt; color: #333; margin-left: 20px; font-weight: normal; }
.toc-lvl-3 { font-size: 10.5pt; color: #666; margin-left: 40px; }
/* ───── 표/이미지 스타일 ───── */
table {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
font-size: 9.5pt;
table-layout: auto;
border-top: 2px solid var(--primary);
}
th, td {
border: 1px solid #ddd;
padding: 6px 5px;
text-align: center;
vertical-align: middle;
word-break: keep-all;
word-wrap: break-word;
}
th {
background: var(--light-green);
color: var(--primary);
font-weight: 900;
white-space: nowrap;
letter-spacing: -0.05em;
font-size: 9pt;
}
/* ───── 캡션 및 그림 스타일 ───── */
figure { display: block; margin: 20px auto; text-align: center; width: 100%; }
img, svg { max-width: 95% !important; height: auto !important; display: block; margin: 0 auto; border: 1px solid #eee; }
figcaption {
display: block; text-align: center; margin-top: 10px;
font-size: 9.5pt; color: #666; font-weight: 600;
}
.atomic-block { break-inside: avoid; page-break-inside: avoid; }
#raw-container { display: none; }
/* ───── 하이라이트 박스 표준 ───── */
.highlight-box {
background-color: rgb(226, 236, 226);
border: 1px solid #2a2c2aff;
padding: 5px; margin: 1.5px 1.5px 2px 0px; border-radius: 3px;
color: #333;
}
.highlight-box li,
.highlight-box p {
font-size: 11pt !important;
line-height: 1.2;
letter-spacing: -0.6px;
margin-bottom: 3px;
color: #1a1919ff;
}
.highlight-box h3, .highlight-box strong, .highlight-box b {
font-size: 12pt !important; color: rgba(2, 37, 2, 1) !important;
font-weight: bold; margin: 0; display: block; margin-bottom: 5px;
}
/* ───── 목차 그룹 ───── */
.toc-group {
margin-bottom: 12px;
break-inside: avoid;
page-break-inside: avoid;
}
.toc-lvl-1, .toc-lvl-2, .toc-lvl-3 {
list-style: none !important;
}
.toc-item {
line-height: 1.8;
list-style: none;
border-bottom: 1px dotted #f3e1e1ff;
}
.toc-lvl-1 {
color: #006400;
font-weight: 900;
font-size: 13.5pt;
margin-top: 15px;
margin-bottom: 5px;
border-bottom: 2px solid #ccc;
}
.toc-lvl-2 {
font-size: 10.5pt;
color: #333;
margin-left: 20px;
font-weight: normal;
}
.toc-lvl-3 {
font-size: 10.5pt;
color: #666;
margin-left: 40px;
}
/* ───── 대목차 내부 스타일 ───── */
.toc-lvl-1 .toc-number,
.toc-lvl-1 .toc-text {
font-weight: 900;
font-size: 1.2em;
color: #006400;
}
.toc-lvl-1 .toc-number {
float: left;
margin-right: 14px;
}
.toc-lvl-1 .toc-text {
display: block;
overflow: hidden;
}
/* ───── 소목차 내부 스타일 ───── */
.toc-lvl-2 .toc-number, .toc-lvl-3 .toc-number {
font-weight: bold;
color: #2c5282;
margin-right: 11px;
}
.toc-lvl-2 .toc-text, .toc-lvl-3 .toc-text {
color: #4a5568;
font-size: 1em;
}
/* ───── 요약 페이지 전용 스타일 ───── */
.squeeze {
line-height: 1.35 !important;
letter-spacing: -0.5px !important;
margin-bottom: 2px !important;
}
.squeeze-title {
margin-bottom: 5px !important;
padding-bottom: 2px !important;
}
#box-summary p,
#box-summary li {
font-size: 10pt !important;
line-height: 1.45 !important;
letter-spacing: -0.04em !important;
margin-bottom: 3px !important;
text-align: justify;
}
#box-summary h1 {
margin-bottom: 10px !important;
padding-bottom: 5px !important;
}
/* ───── 목차 압축 모드 ───── */
.toc-squeeze .toc-group {
margin-bottom: 5px !important;
}
.toc-squeeze .toc-lvl-1 {
margin-top: 8px !important;
margin-bottom: 3px !important;
}
.toc-squeeze .toc-item {
line-height: 1.4 !important;
padding: 1px 0 !important;
}
3-D. 본문 변환 규칙 — MD → HTML 매핑
04단계 본문 MD를 box-content 안에 넣을 때 아래 규칙으로 변환하십시오.
| MD 요소 | HTML 변환 |
|---|---|
# 1장. 제목 |
<h1>1장. 제목</h1> |
## 1.1. 제목 |
<h2>1.1. 제목</h2> |
### 제목 |
<h3>제목</h3> |
| 본문 단락 | <p>내용</p> |
- 항목 |
<ul><li>항목</li></ul> |
1. 항목 |
<ol><li>항목</li></ol> |
| 표 | <table> 구조로 변환 |
> 출처: |
<div class="source">출처: 내용</div> |
<!-- page X --> |
제거 (퍼블리싱 단계에서 처리) |
⚠️ 주의 :
box-content안에 넣는 HTML에는 class, style 속성을 붙이지 마십시오. JS 렌더링 엔진의detox()함수가 모든 class/style을 제거하고 표준 스타일로 재적용합니다. 단,highlight-box클래스가 필요한 강조 박스는 예외입니다.
3-E. 시각화 삽입 규칙
- 시각화 HTML 파일의
<body>내부 내용만 추출하여box-content내 해당 절 위치에<figure class="atomic-block">으로 감싸 삽입하십시오. - 시각화의
<style>태그는<head>안으로 이동하되 클래스명 충돌 방지를 위해.viz-1-2등 절 번호 prefix를 붙이십시오. - 시각화의
<script>태그는 렌더링 엔진<script>앞으로 이동하십시오. - 캡션은
<figcaption>태그로 그림/표 하단 중앙에 배치하십시오.
3-F. JS 렌더링 엔진 전문 — A4 페이지네이션
아래 JavaScript를 <script> 태그 안에 그대로 포함하십시오. 수정하지 마십시오.
이 엔진이 raw-container의 콘텐츠를 읽어 A4 페이지(sheet)로 자동 분할합니다.
window.addEventListener("load", async () => {
await document.fonts.ready; // 웹폰트 로딩 대기 (필수)
// [Config] 297mm - 20mm(상) - 20mm(하) = 257mm ≈ 970px
const CONFIG = { maxHeight: 970 };
const rawContainer = document.getElementById('raw-container');
if (rawContainer) {
rawContainer.innerHTML = rawContainer.innerHTML.replace(
/(<rect[^>]*?)\s+y="[^"]*"\s+([^>]*?y="[^"]*")/gi,
"$1 $2"
);
}
const raw = {
cover: document.getElementById('box-cover'),
toc: document.getElementById('box-toc'),
summary: document.getElementById('box-summary'),
content: document.getElementById('box-content')
};
let globalPage = 1;
let reportTitle = raw.cover.querySelector('h1')?.innerText || "Report";
function cleanH1Text(text) {
if (!text) return "";
const parts = text.split("-");
return parts[0].trim();
}
// ───── [0] Sanitizer & Pre-processing (Integrity Preserved Version) ─────
function detox(node) {
if (node.nodeType !== 1) return;
// [Safety Check 1] SVG 내부는 절대 건드리지 않음 (차트 깨짐 방지)
if (node.closest('svg')) return;
// [Logic A] 클래스 속성 확인 및 변수 할당
let cls = "";
if (node.hasAttribute('class')) {
cls = node.getAttribute('class');
}
// [Logic B] 하이라이트 박스 감지 및 변환
if ( (cls.includes('bg-') || cls.includes('border-') || cls.includes('box')) &&
!cls.includes('title-box') &&
!cls.includes('toc-') &&
!cls.includes('cover-') &&
!cls.includes('highlight-box') ) {
node.setAttribute('class', 'highlight-box atomic-block');
const internalHeads = node.querySelectorAll('h3, h4, strong, b');
internalHeads.forEach(head => {
head.removeAttribute('style');
head.removeAttribute('class');
});
node.removeAttribute('style');
cls = 'highlight-box atomic-block';
}
// [Logic C] 일반 요소 세탁 (화이트리스트 유지)
if (node.hasAttribute('class')) {
if (!cls.includes('toc-') &&
!cls.includes('cover-') &&
!cls.includes('highlight-') &&
!cls.includes('title-box') &&
!cls.includes('atomic-block')) {
node.removeAttribute('class');
}
}
// [Logic D] 공통 정리 (인라인 스타일 삭제)
node.removeAttribute('style');
// [Logic E] 표 테두리 강제 적용
if (node.tagName === 'TABLE') node.border = "1";
// [Logic F] 캡션 중복 텍스트 숨김 처리
if (node.tagName === 'FIGURE') {
const internalTitles = node.querySelectorAll('h3, h4, .chart-title');
internalTitles.forEach(t => t.style.display = 'none');
}
}
// ───── [1] 목차 포맷팅 ─────
function formatTOC(container) {
const nodes = container.querySelectorAll("h1, h2, h3");
if(nodes.length === 0) return;
let tocHTML = "<ul style='padding-left:0; margin:0;'>";
nodes.forEach(node => {
let text = node.innerText.trim();
let lvlClass = node.tagName === "H1" ? "toc-lvl-1" : (node.tagName === "H2" ? "toc-lvl-2" : "toc-lvl-3");
let num = "", title = text;
const match = text.match(/^(\d+(\.\d+)*)\s+(.*)/);
if (match) {
num = match[1];
title = match[3];
}
tocHTML += `<li class='toc-item ${lvlClass}'>
<span class='toc-number'>${num}</span>
<span class='toc-text'>${title}</span>
</li>`;
});
tocHTML += "</ul>";
container.innerHTML = tocHTML;
}
// ───── [2] 노드 평탄화 (getFlatNodes) ─────
function getFlatNodes(element) {
// [2-1] 목차(TOC) 처리
if(element.id === 'box-toc') {
element.querySelectorAll('*').forEach(el => detox(el));
formatTOC(element);
const tocNodes = [];
let title = element.querySelector('h1');
if (!title) {
title = document.createElement('h1');
title.innerText = "목차";
}
tocNodes.push(title.cloneNode(true));
const allLis = element.querySelectorAll('li');
let currentGroup = null;
allLis.forEach(li => {
const isLevel1 = li.classList.contains('toc-lvl-1');
if (isLevel1) {
if (currentGroup) tocNodes.push(currentGroup);
currentGroup = document.createElement('div');
currentGroup.className = 'toc-group atomic-block';
const ulWrapper = document.createElement('ul');
ulWrapper.style.margin = "0";
ulWrapper.style.padding = "0";
currentGroup.appendChild(ulWrapper);
}
if (!currentGroup) {
currentGroup = document.createElement('div');
currentGroup.className = 'toc-group atomic-block';
const ulWrapper = document.createElement('ul');
ulWrapper.style.margin = "0";
ulWrapper.style.padding = "0";
currentGroup.appendChild(ulWrapper);
}
currentGroup.querySelector('ul').appendChild(li.cloneNode(true));
});
if (currentGroup) tocNodes.push(currentGroup);
return tocNodes;
}
// [2-2] 본문(Body) 처리
let nodes = [];
Array.from(element.children).forEach(child => {
detox(child);
if (child.classList.contains('highlight-box')) {
child.querySelectorAll('h3, h4, strong, b').forEach(head => {
head.removeAttribute('style');
head.removeAttribute('class');
});
nodes.push(child.cloneNode(true));
}
else if(['DIV','SECTION','ARTICLE','MAIN'].includes(child.tagName)) {
nodes = nodes.concat(getFlatNodes(child));
}
else if (['UL','OL'].includes(child.tagName)) {
Array.from(child.children).forEach((li, idx) => {
detox(li);
const w = document.createElement(child.tagName);
w.style.margin="0"; w.style.paddingLeft="20px";
if(child.tagName==='OL') w.start=idx+1;
const cloneLi = li.cloneNode(true);
cloneLi.querySelectorAll('*').forEach(el => detox(el));
w.appendChild(cloneLi);
nodes.push(w);
});
} else {
const clone = child.cloneNode(true);
detox(clone);
clone.querySelectorAll('*').forEach(el => detox(el));
nodes.push(clone);
}
});
return nodes;
}
// ───── [3] 렌더링 엔진 (Place → Squeeze → Check → Split) ─────
function renderFlow(sectionType, sourceNodes) {
if (!sourceNodes.length) return;
let currentHeaderTitle = sectionType === 'toc' ? "목차" : (sectionType === 'summary' ? "요약" : reportTitle);
let page = createPage(sectionType, currentHeaderTitle);
let body = page.querySelector('.body-content');
let queue = [...sourceNodes];
while (queue.length > 0) {
let node = queue.shift();
let clone = node.cloneNode(true);
let isH1 = clone.tagName === 'H1';
let isHeading = ['H2', 'H3'].includes(clone.tagName);
let isText = ['P', 'LI'].includes(clone.tagName) && !clone.classList.contains('atomic-block');
let isAtomic = ['TABLE', 'FIGURE', 'IMG', 'SVG'].includes(clone.tagName) ||
clone.querySelector('table, img, svg') ||
clone.classList.contains('atomic-block');
// H1 텍스트 정제 ("-" 뒤 제거)
if (isH1 && clone.innerText.includes('-')) {
clone.innerText = clone.innerText.split('-')[0].trim();
}
// [Rule 1] H1 처리 (무조건 새 페이지)
if (isH1 && (sectionType === 'body' || sectionType === 'summary')) {
currentHeaderTitle = clone.innerText;
if (body.children.length > 0) {
page = createPage(sectionType, currentHeaderTitle);
body = page.querySelector('.body-content');
} else {
page.querySelector('.page-header').innerText = currentHeaderTitle;
}
}
// [Rule 2] Orphan Control
if (isHeading) {
const spaceLeft = CONFIG.maxHeight - body.scrollHeight;
if (spaceLeft < 160) {
page = createPage(sectionType, currentHeaderTitle);
body = page.querySelector('.body-content');
}
}
// [Step 1: Place] 일단 배치
body.appendChild(clone);
// [Step 2: Squeeze] 자간 최적화
if (isText && clone.innerText.length > 10) {
const originalHeight = clone.offsetHeight;
clone.style.letterSpacing = "-1.0px";
if (clone.offsetHeight < originalHeight) {
clone.style.letterSpacing = "-0.8px";
} else {
clone.style.letterSpacing = "";
}
}
// [Rule 3] 넘침 감지 (Overflow Check)
if (body.scrollHeight > CONFIG.maxHeight) {
// 목차 압축 시도
if (sectionType === 'toc' && !body.classList.contains('toc-squeeze') && body.children.length > 0) {
body.classList.add('toc-squeeze');
if (body.scrollHeight <= CONFIG.maxHeight) {
continue;
} else {
body.classList.remove('toc-squeeze');
body.removeChild(clone);
}
}
// 3-1. 텍스트 분할 (Split)
if (isText) {
body.removeChild(clone);
let textContent = node.innerText;
let tempP = node.cloneNode(false);
tempP.innerText = "";
if (clone.style.letterSpacing) tempP.style.letterSpacing = clone.style.letterSpacing;
body.appendChild(tempP);
const words = textContent.split(' ');
let currentText = "";
for (let i = 0; i < words.length; i++) {
let word = words[i];
let prevText = currentText;
currentText += (currentText ? " " : "") + word;
tempP.innerText = currentText;
if (body.scrollHeight > CONFIG.maxHeight) {
tempP.innerText = prevText;
tempP.style.textAlign = "justify";
tempP.style.textAlignLast = "justify";
let remainingText = words.slice(i).join(' ');
let remainingNode = node.cloneNode(false);
remainingNode.innerText = remainingText;
queue.unshift(remainingNode);
page = createPage(sectionType, currentHeaderTitle);
body = page.querySelector('.body-content');
body.style.lineHeight = "";
body.style.letterSpacing = "";
break;
}
}
}
// 3-2. 원자 블록(표, 그림, 박스) → 통째로 다음 장으로
else {
body.removeChild(clone);
// [Gap Filling] 빈 공간 채우기
let spaceLeft = CONFIG.maxHeight - body.scrollHeight;
if (body.children.length > 0 && spaceLeft > 50 && queue.length > 0) {
while(queue.length > 0) {
let candidate = queue[0];
if (['H1','H2','H3'].includes(candidate.tagName) ||
candidate.classList.contains('atomic-block') ||
candidate.querySelector('img, table')) break;
let filler = candidate.cloneNode(true);
if(['P','LI'].includes(filler.tagName) && filler.innerText.length > 10) {
filler.style.letterSpacing = "-1.0px";
}
body.appendChild(filler);
if (body.scrollHeight <= CONFIG.maxHeight) {
if(filler.style.letterSpacing === "-1.0px") filler.style.letterSpacing = "-0.8px";
queue.shift();
} else {
body.removeChild(filler);
break;
}
}
}
if (body.children.length > 0) {
page = createPage(sectionType, currentHeaderTitle);
body = page.querySelector('.body-content');
}
body.appendChild(clone);
// [Smart Fit] 넘치면 축소
if (isAtomic && body.scrollHeight > CONFIG.maxHeight) {
const currentH = clone.offsetHeight;
const overflow = body.scrollHeight - CONFIG.maxHeight;
body.removeChild(clone);
if (overflow > 0 && overflow < (currentH * 0.15)) {
clone.style.transform = "scale(0.85)";
clone.style.transformOrigin = "top center";
clone.style.marginBottom = `-${currentH * 0.15}px`;
body.appendChild(clone);
} else {
body.appendChild(clone);
}
}
}
}
}
}
// ───── [4] 페이지 생성 함수 ─────
function createPage(type, headerTitle) {
const tpl = document.getElementById('page-template');
const clone = tpl.content.cloneNode(true);
const sheet = clone.querySelector('.sheet');
if (type === 'cover') {
sheet.innerHTML = "";
const title = raw.cover.querySelector('h1')?.innerText || "Report";
const sub = raw.cover.querySelector('h2')?.innerText || "";
const pTags = raw.cover.querySelectorAll('p');
const infos = pTags.length > 0 ? Array.from(pTags).map(p => p.innerText).join(" / ") : "";
sheet.innerHTML = `
<div style="position:absolute; top:20mm; right:20mm; text-align:right; font-size:11pt; color:#666;">${infos}</div>
<div style="display:flex; flex-direction:column; justify-content:center; align-items:center; height:100%; text-align:center; width:100%;">
<div style="width:85%;">
<div style="font-size:32pt; font-weight:900; color:var(--primary); line-height:1.2; margin-bottom:30px; word-break:keep-all;">${title}</div>
<div style="font-size:20pt; font-weight:300; color:#444; word-break:keep-all;">${sub}</div>
</div>
</div>`;
} else {
clone.querySelector('.page-header').innerText = headerTitle;
clone.querySelector('.rpt-title').innerText = reportTitle;
if (type !== 'toc') clone.querySelector('.pg-num').innerText = `- ${globalPage++} -`;
else clone.querySelector('.pg-num').innerText = "";
}
document.body.appendChild(sheet);
return sheet;
}
// ───── [5] 실행 순서 ─────
createPage('cover');
if(raw.toc) renderFlow('toc', getFlatNodes(raw.toc));
// [요약 페이지 지능형 맞춤 로직 (Smart Squeeze)]
const summaryNodes = getFlatNodes(raw.summary);
const tempBox = document.createElement('div');
tempBox.style.width = "210mm";
tempBox.style.position = "absolute";
tempBox.style.visibility = "hidden";
tempBox.id = 'box-summary';
document.body.appendChild(tempBox);
summaryNodes.forEach(node => tempBox.appendChild(node.cloneNode(true)));
const totalHeight = tempBox.scrollHeight;
const pageHeight = CONFIG.maxHeight;
const lastPart = totalHeight % pageHeight;
if (totalHeight > pageHeight && lastPart > 0 && lastPart < 180) {
summaryNodes.forEach(node => {
if(node.nodeType === 1) {
node.classList.add('squeeze');
if(node.tagName === 'H1') node.classList.add('squeeze-title');
if(node.tagName === 'P' || node.tagName === 'LI') {
node.style.fontSize = "9.5pt";
node.style.lineHeight = "1.4";
node.style.letterSpacing = "-0.8px";
}
}
});
}
document.body.removeChild(tempBox);
renderFlow('summary', summaryNodes);
// 본문 렌더링
renderFlow('body', getFlatNodes(raw.content));
// 긴 제목 자동 축소
document.querySelectorAll('.sheet h1, .sheet h2').forEach(el => {
let fs = 100;
while(el.scrollWidth > el.clientWidth && fs > 50) { el.style.fontSize = (--fs)+"%"; }
});
// ───── [6] 통합 자간 조정 (후처리) ─────
const allTextNodes = document.querySelectorAll('.sheet .body-content p, .sheet .body-content li');
allTextNodes.forEach(el => {
if (el.closest('table') || el.closest('figure') || el.closest('.chart')) return;
if (el.innerText.trim().length < 10) return;
const originH = el.offsetHeight;
const originSpacing = el.style.letterSpacing;
el.style.fontSize = "12pt";
el.style.letterSpacing = "-1.4px";
const newH = el.offsetHeight;
if (newH < originH) {
el.style.letterSpacing = "-1.0px";
} else {
el.style.letterSpacing = originSpacing;
}
});
// 제목 자동 축소 (안전 재실행)
document.querySelectorAll('.sheet h1, .sheet h2').forEach(el => {
let fs = 100;
while(el.scrollWidth > el.clientWidth && fs > 50) { el.style.fontSize = (--fs)+"%"; }
});
// ───── [7] 마지막 페이지 병합 시도 (Runt Control) ─────
const pages = document.querySelectorAll('.sheet');
if (pages.length >= 2) {
const lastSheet = pages[pages.length - 1];
const prevSheet = pages[pages.length - 2];
if(lastSheet.querySelector('.rpt-title')) {
const lastBody = lastSheet.querySelector('.body-content');
const prevBody = prevSheet.querySelector('.body-content');
if (lastBody.scrollHeight < 150 && lastBody.innerText.trim().length > 0) {
prevBody.style.lineHeight = "1.3";
prevBody.style.paddingBottom = "0px";
const contentToMove = Array.from(lastBody.children);
contentToMove.forEach(child => prevBody.appendChild(child.cloneNode(true)));
if (prevBody.scrollHeight <= CONFIG.maxHeight + 5) {
lastSheet.remove();
} else {
for(let i=0; i<contentToMove.length; i++) prevBody.lastElementChild.remove();
prevBody.style.lineHeight = "";
}
}
}
}
// 원본 데이터 삭제
const rawToRemove = document.getElementById('raw-container');
if(rawToRemove) rawToRemove.remove();
});
3-G. JS 렌더링 엔진 동작 요약
프롬프트 사용자가 JS를 직접 수정할 필요는 없지만, 엔진의 동작 흐름을 이해해야 올바른 HTML을 생성할 수 있습니다.
| 단계 | 함수 | 역할 |
|---|---|---|
| 0 | detox() |
모든 요소의 class/style을 제거하고 표준 스타일로 초기화. SVG 내부는 제외. 하이라이트 박스는 .highlight-box로 변환 |
| 1 | formatTOC() |
box-toc 내 H1/H2/H3를 분석하여 목차 리스트(toc-lvl-1/2/3) 자동 생성 |
| 2 | getFlatNodes() |
중첩된 div/section을 평탄화하여 페이지에 배치 가능한 노드 배열로 변환 |
| 3 | renderFlow() |
노드를 순차 배치하면서 Place→Squeeze→Check→Split 4단계로 페이지 분할 수행 |
| 4 | createPage() |
A4 sheet 생성. 표지(cover)는 별도 레이아웃, 나머지는 헤더+본문+푸터 구조 |
| 5 | 실행 순서 | cover → toc → summary(Smart Squeeze 적용) → body 순으로 렌더링 |
| 6 | 후처리 | 전체 텍스트 자간 최적화 + 제목 자동 축소 |
| 7 | Runt Control | 마지막 페이지가 3줄 이하면 앞 페이지에 병합 시도 |
STEP 4. 통합 결과 검토
HTML 생성 직후 아래 항목을 자동으로 검토하십시오.
[HTML 통합 검토]
✅ 본문 누락 : 전체 절 포함 확인 / 누락 절 X건
✅ 시각화 삽입 : 전체 시각화 삽입 확인 / 누락 X건
✅ 구조 태그 : box-cover / box-toc / box-summary / box-content 정상
✅ 목차 구조 : 전체 장·절 목차 반영 확인
✅ 출처 태그 : source 클래스 정상 적용 확인
✅ CSS 포함 : A4 렌더링 스타일시트 전문 포함 확인
✅ JS 포함 : 페이지네이션 렌더링 엔진 전문 포함 확인
✅ 폰트 임포트 : Noto Sans KR 웹폰트 @import 확인
⚠️ 미해결 항목 (있는 경우만)
- [근거없음] 포함 절 : X.X절 — 편집장 최종 확인 필요
STEP 5. 최종 HTML 파일 출력 보고
[HTML 변환 완료]
✅ 파일명 : 보고서제목_report.html
✅ 총 장 수 : X장
✅ 총 절 수 : X절
✅ 삽입 시각화 : X개
✅ 표지 : 포함
✅ 목차 : 포함
✅ 요약 : 포함 / 미포함
✅ CSS : A4 렌더링 스타일시트 포함
✅ JS : 페이지네이션 엔진 포함
→ 이 HTML을 브라우저에서 열면 A4 보고서가 자동 렌더링됩니다.
→ Chrome 인쇄(Ctrl+P)로 PDF 저장이 가능합니다.