(🔍상세 과정) 평범한 글을 📚전자책으로 바꾸는 AI 프롬프트

📌 기본 방향
- 첨부된 파일의 내용을 그대로 유지하면서, 선택한 템플릿의 디자인과 톤앤매너를 적용해주세요.
- 내용을 임의로 추가하거나 삭제하지 말고, HTML 구조와 스타일만 템플릿에 맞춰 변환해주세요.
- AI 툴 매뉴얼 특성을 반영하여 세련되고 전문적인 디자인으로 구성해주세요.

🎨 디자인 및 서식 요구사항
1️⃣ 템플릿 적용
템플릿의 톤앤매너를 유지하면서도 다음 요소를 자연스럽게 추가해주세요:
- 서식 (제목, 본문, 강조 텍스트 등)
- 글상자 (Tip, Note, Warning 등 정보 박스)
- 구성 요소 (목차, 섹션 구분, 단락 구성 등)

2️⃣ 헤더 구성
페이지 맨 위에 logo.png 이미지를 배치하고, 그 옆에 작가 이름 (이름)을 표시해주세요.

3️⃣ 메인 이미지 및 버전 표기
메인 이미지(표지) 위에 "Ver 1.0"을 눈에 띄게 표시해주세요.

4️⃣ 링크 강조
각 페이지에서 중요한 링크는 다음과 같이 강조해주세요:
- 음영 하이라이트 배경
- 밑줄 또는 버튼 스타일
- 🔗 링크 이모지 추가(클릭 가능하다는 것을 직관적으로 알 수 있도록 디자인)

🖼️ 이미지 처리 방식
📍 이미지 placeholder 규칙
- 이미지가 들어갈 자리에는 , 형식으로 순서대로 번호를 매겨 태그를 넣어주세요.
- 이미지는 제가 따로 삽입할 예정이므로, 빈 공간(placeholder)만 마련해주세요.

📐 이미지 크기 조정 규칙
- 가로 길이는 콘텐츠 영역에 맞춰 100%로 설정
- 세로 길이는 이미지 비율에 맞게 자동 조정 (height: auto)
- 작은 이미지는 억지로 확대하지 말고 원본 크기 유지
- 이미지에 둥근 모서리(border-radius: 8px) 적용

💅 스타일링 자동 구현 요청
- 다음 디자인 요소들을 자동으로 CSS에 포함하여 구현해주세요:

🖼️ 이미지 Placeholder 스타일
- 기본 상태: 점선 테두리, 회색 배경, "이미지 자리" 안내 텍스트, 200px 고정 높이
- 이미지 삽입 후: 테두리 제거, 배경 제거, 높이 제한 해제하여 이미지 비율에 맞게 자동 조정
- 이미지 자체: 가로 100%, 세로 자동, 둥근 모서리, 은은한 그림자 효과
- 작은 이미지 처리: 원본보다 크게 강제 확대하지 않고 자연스러운 크기 유지
- 인쇄 호환: 페이지 분할 시 이미지가 어색하게 잘리지 않도록 처리

🔗 링크 강조 스타일
- 배경: 그라데이션 하이라이트 (파스텔 블루-그린 톤)
- 모양: 둥근 모서리, 적당한 패딩, 미세한 그림자
- 효과: 호버 시 살짝 위로 떠오르는 애니메이션
- 아이콘: 🔗 링크 이모지 자동 추가
- 텍스트: 굵은 글씨, 어두운 색상으로 가독성 확보

📦 정보 박스 스타일
- Tip 박스: 파란색 계열, 왼쪽 굵은 세로선
- Note 박스: 주황색 계열, 왼쪽 굵은 세로선
- Warning 박스: 빨간색 계열, 왼쪽 굵은 세로선
- 공통 스타일: 둥근 모서리, 적당한 패딩, 제목 굵게 표시

🏷️ 버전 표기 스타일
- Ver 1.0 뱃지: 둥근 알약 모양, 파란색 배경, 흰색 텍스트
- 위치: 메인 이미지 위 또는 근처에 눈에 띄게 배치

📄 페이지 구성 순서
1) 표지 페이지 (로고 + 작가 이름 + 메인 이미지 + Ver 1.0 표기)
2) 목차
3) 본문 내용 (첨부 파일 내용 그대로)
4) 발행인 소개 및 저작권 정보
5) 버전 기록 페이지 (Ver 1.0 업데이트 내역 등)

🛠️ 기술적 구현 요청
JavaScript 이미지 처리
- 이미지가 실제로 로드되면 placeholder에 has-image 클래스를 자동으로 추가하여 스타일이 전환되도록 구현
- 이미지 크기가 작을 경우 억지로 확대하지 않고 max-width: 100% 처리
반응형 디자인
- 모바일, 태블릿, 데스크톱에서 모두 깔끔하게 표시
- 인쇄 시에도 깨지지 않는 레이아웃
접근성 고려
- 링크와 버튼의 명확한 시각적 구분
- 충분한 색상 대비로 가독성 확보