# 프롬프트 구조 및 내용 해설 ## (프롬프트) 시각화 생성 --- ## 이 프롬프트가 하는 일 05-pre에서 구축된 레퍼런스 라이브러리의 스타일과 구조를 참조하여, 04단계에서 생성된 절 본문 내용을 HTML/CSS/JS로 시각화합니다. 생성된 HTML 파일은 06단계 HTML 변환에서 해당 절에 삽입됩니다. --- ## 전체 구성 한눈에 보기 | 순서 | 구성요소 | 역할 한 줄 요약 | |:---:|---------|--------------| | 1 | **절대 원칙** | 레퍼런스 내용 혼입 및 본문 외 내용 생성 차단 | | 2 | **역할 정의** | AI의 작업 태도 설정 | | 3 | **사전 준비** | 입력값 3가지 확인 | | 4 | **STEP 1** | 시각화 적합 요소 식별 및 레퍼런스 매칭 | | 5 | **STEP 2** | 시각화 구조 설계 | | 6 | **STEP 3** | HTML/CSS/JS 생성 | | 7 | **STEP 4** | 생성 결과 검토 | | 8 | **STEP 5** | 파일 명명 및 저장 보고 | --- ## 1. 절대 원칙 **이 프롬프트에서 하는 역할** 시각화 생성에서 발생하는 두 가지 핵심 오류를 차단합니다. 첫째는 레퍼런스의 텍스트 내용이 시각화에 섞이는 것이고, 둘째는 본문에 없는 내용을 AI가 시각화에 추가하는 것입니다. 시각화는 본문 내용을 시각적으로 표현하는 도구이지 새로운 내용을 생성하는 단계가 아닙니다. --- ## 2. 사전 준비 — 입력값 3가지 **왜 편집장의 시각화 지시가 입력값에 포함되는가** 동일한 절 내용도 프로세스 흐름도로 표현할 수 있고, 비교표로 표현할 수도 있습니다. 어떤 유형이 더 적합한지는 보고서의 전체 맥락과 편집장의 의도에 따라 달라집니다. 지시가 없는 경우 AI가 제안하도록 설계했지만, 편집장의 확인을 거쳐야만 다음 단계로 진행합니다. --- ## 3. STEP 1 — 시각화 적합 요소 식별 및 레퍼런스 매칭 **절 본문 전체를 시각화하지 않는 이유** 서술형 설명 내용은 시각화보다 텍스트로 읽는 것이 더 효과적입니다. 단계·순서, 비교·대조, 구성 요소처럼 구조가 명확한 내용만 시각화 대상으로 식별합니다. 시각화가 적합하지 않은 내용까지 억지로 도식화하면 오히려 가독성이 떨어집니다. **레퍼런스 매칭 결과를 편집장이 확인하는 이유** 레퍼런스 선택은 이후 생성되는 HTML 전체의 스타일을 결정합니다. AI가 선택한 레퍼런스가 편집장의 의도와 다를 수 있으므로, 구조 설계 이전에 확인 단계를 둡니다. --- ## 4. STEP 2 — 시각화 구조 설계 **코드 생성 전에 구조 설계를 먼저 하는 이유** HTML을 바로 생성하면 편집장이 구조 변경을 요청할 때 코드 전체를 다시 작성해야 합니다. 블록 수, 배치 방향, 각 블록에 들어갈 텍스트를 먼저 텍스트로 설계하고 확인받으면 이후 코드 수정 횟수를 줄일 수 있습니다. --- ## 5. STEP 3 — HTML/CSS/JS 생성 **가로 700px 이내 기준을 명시하는 이유** 생성된 시각화는 06단계에서 보고서 HTML에 삽입되고, 07단계에서 A4 규격(본문 가용 너비 약 700px)으로 퍼블리싱됩니다. 이 기준을 초과하면 A4 페이지에서 시각화가 잘리거나 축소됩니다. **`@media print` 스타일을 포함하는 이유** 보고서는 최종적으로 인쇄하거나 PDF로 저장됩니다. 화면에서는 정상으로 보이지만 인쇄 시 배경색이 사라지거나 레이아웃이 깨지는 경우가 있습니다. 인쇄 스타일을 미리 포함하여 출력 품질을 보장합니다. --- ## 6. STEP 4 — 생성 결과 검토 **내용 일치 확인이 가장 먼저 오는 이유** 시각화의 텍스트가 본문과 다른 것은 가장 치명적인 오류입니다. 스타일이 조금 다른 것은 수용 가능하지만, 내용 불일치는 보고서의 신뢰성을 직접적으로 훼손합니다. --- ## 7. STEP 5 — 파일 명명 규칙 **파일명에 절 번호와 제목을 포함하는 이유** 시각화 파일이 여러 개 생성될 때 어느 절의 시각화인지 파일명만으로 즉시 식별할 수 있어야 합니다. 06단계 HTML 변환에서 본문과 시각화를 연결할 때 파일명이 연결 기준이 됩니다.