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

* '일잘러의 성장노트'는 제 링크드인 포스팅 중 가장 반응이 높았던 포스팅을 순차적으로 공유합니다. 😀

최근 첫 도전으로 직접 전자책을 만들어보았습니다. :)

일단 뚝딱 뚝딱 노션에 글과 이미지를 추가 하고 나서 고민에 빠졌어요.

이대로 판매하기에는 안 이쁜데..
전자책으로 서식을 한 번에 맞출수는 없을까?

그러다 젠스파크의 AI Doc(AI 문서) 기능이 떠올랐습니다.

Genspark AI Doc으로 전자책 만드는 법

📃 템플릿을 고르고

- 여러 템플릿 카테고리 중 'Creative and Marketing'을 골랐어요.

🔗 제가 만든 노션 글을 html로 추출하여 첨부(워드파일, txt 파일 모두 무관)

✍🏻 AI Doc 채팅창에 HTML을 첨부하며 프롬프트만 올렸는데

프롬프트>>

📌 기본 방향
- 첨부된 파일의 내용을 그대로 유지하면서, 선택한 템플릿의 디자인과 톤앤매너를 적용해주세요.
- 내용을 임의로 추가하거나 삭제하지 말고, 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% 처리
반응형 디자인
- 모바일, 태블릿, 데스크톱에서 모두 깔끔하게 표시
- 인쇄 시에도 깨지지 않는 레이아웃
접근성 고려
- 링크와 버튼의 명확한 시각적 구분
- 충분한 색상 대비로 가독성 확보

더 제대로 하고 싶으시다면 이 CSS 코드를 첨부해달라고 하면 됩니다.

CSS 코드 보러가기

🔥 꽤 멋진 전자책 완성!

📋 역시 html로 다운받아, 삽입된 이미지들과 같은 폴더에 넣고 압축하면 이미지도 적재적소에 삽입된 전자책이 완성됩니다.

홍보용 합성 이미지도 나노바나나에게 부탁해서 만들고

역시 AI의 도움으로 상세정보를 작성 후, Latpeed에 판매 상품으로 올리니 하루만에 전자책 제작 및 상품화가 가능했어요.

판매 페이지 보러가기

이걸 어떻게 팔까?

이 전자책을 판매해야겠죠? 일단 저의 주채널(?)인 링크드인에 홍보글을 올렸는데 그냥 판매하는 글은 반응이 높지 않을테니 '정보를 주며 홍보한다.'에 충실했어요.

❶ 부록 역할을 하는 크레딧 사용량 컨텐츠를 공개하며, 댓글 + 공유해주시는 분들께 전자책 50% 할인 코드 전달하기 (래피드에 할인 코드 기능이 있어 편해요.)

>> 조회수 3.5k, 공유+댓글 10개, 링크 방문 수 29개

❷ 이 전자책을 만든 AI 방법도 링크드인에 올렸어요.
댓글을 달아주시는 분들께 구체적인 CSS 코드를 드리기로 했어요.
댓글이 많이 달려야 글이 더 확산하니까요!

>> 조회수 1.2만, 공유+댓글 55개, 링크 방문 수 84개

❸ 스레드에도 올려보았는데, 반응은 높지 않았지만 조회수 합계 500이니 와이낫이죠!

❹ 하지만 중요한 것은 블로그에 올리는 것입니다.

왜냐면 링크드인, 스레드에는 우연히 제 글을 보게 되시는 분들이지만

'전자책 만드는 법', '전자책 AI', '젠스파크 매뉴얼' 등을 검색하시는 분들은 이미 구매 욕구가 있는 분들이기 때문이죠. 같은 조회수도 전환율, 가치가 달라요!

블로그에는 절대 그냥 글을 옮기지 않아요.

AI에게 공략 키워드와 링크드인 글을 주며 이 키워드 SEO 공략에 맞는 블로그 글을 써달라고 하죠.

이웃은 0명에 가깝지만, 네이버 검색 결과 커버를 위해 네이버 블로그 글쓰기도 필수!

❺ 나름 할인 프로모션도 설계하였습니다.

크로스셀링, 업셀링까쥐 (참고: https://brunch.co.kr/@sukistory/66)

❻ 무엇보다도 저의 글을 꾸준히 알려주시는 뉴스레터 구독자분들께 알리는 것이 가장 중요하겠죠?!

- 하단 부분 참고 😆

젠스파크 유료 구독 10% 할인

무료 1천 크레딧 가입

♟️ B2B 마케팅, AI가 판을 바꾸는 순간

마케팅데이터커넥트 13차 밋업 (5/27 저녁)
B2B 마케팅은 긴 호흡의 게임입니다. 리드를 만들고, 데이터를 연결하고, 전환까지의 여정을 설계해야 합니다. 이번 밋업에서는 AI SaaS 스타트업과 글로벌 SaaS에서 B2B 마케팅을 직접 담당하는 두 분이, AI로 이 긴 여정을 어떻게 바꾸고 있는지 실전 경험을 공유합니다.

CRM 데이터 정리부터 고관여 제품의 AI 세일즈까지 - 마케터라면 지금 가장 궁금한 이야기를 한 자리에서 만나보세요.