(🔍상세 과정) 평범한 글을 📚전자책으로 바꾸는 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% 처리 반응형 디자인 - 모바일, 태블릿, 데스크톱에서 모두 깔끔하게 표시 - 인쇄 시에도 깨지지 않는 레이아웃 접근성 고려 - 링크와 버튼의 명확한 시각적 구분 - 충분한 색상 대비로 가독성 확보