4.3 KiB
프롬프트 구조 및 내용 해설
(프롬프트) 시각화 생성
이 프롬프트가 하는 일
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 변환에서 본문과 시각화를 연결할 때 파일명이 연결 기준이 됩니다.