젠스파크로 일반문서-전자책으로 바꾸기
Genspark AI Doc(AI 문서)로 멋진 서식 전자책 만들기
최근 첫 도전으로 직접 전자책을 만들어보았습니다. :)
이대로 판매하기에는 안 이쁜데..
전자책으로 서식을 한 번에 맞출수는 없을까?
그러다 젠스파크의 AI Doc(AI 문서) 기능이 떠올랐습니다.
Genspark AI Doc으로 전자책 만드는 법
1. 템플릿을 고르고
- 여러 템플릿 카테고리 중 'Creative and Marketing'을 골랐어요.
2. 제가 만든 노션 글을 html로 추출하여 첨부(워드파일, txt 파일 모두 무관)
3. AI Doc 채팅창에 HTML을 첨부하며 프롬프트만 올렸는데
프롬프트>>
기본 방향
- 첨부된 파일의 내용을 그대로 유지하면서, 선택한 템플릿의 디자인과 톤앤매너를 적용해주세요.
- 내용을 임의로 추가하거나 삭제하지 말고, HTML 구조와 스타일만 템플릿에 맞춰 변환해주세요.
- AI 툴 매뉴얼 특성을 반영하여 세련되고 전문적인 디자인으로 구성해주세요.
디자인 및 서식 요구사항
1. 템플릿 적용
템플릿의 톤앤매너를 유지하면서도 다음 요소를 자연스럽게 추가해주세요:
- 서식 (제목, 본문, 강조 텍스트 등)
- 글상자 (Tip, Note, Warning 등 정보 박스)
- 구성 요소 (목차, 섹션 구분, 단락 구성 등)
2. 헤더 구성
페이지 맨 위에 logo.png 이미지를 배치하고, 그 옆에 작가 이름 (이름)을 표시해주세요.
3. 메인 이미지 및 버전 표기
메인 이미지(표지) 위에 "Ver 1.0"을 눈에 띄게 표시해주세요.
4. 링크 강조
각 페이지에서 중요한 링크는 다음과 같이 강조해주세요:
- 음영 하이라이트 배경
- 밑줄 또는 버튼 스타일
- 링크 이모지 추가(클릭 가능하다는 것을 직관적으로 알 수 있도록 디자인)
5. 이미지 처리 방식
이미지 placeholder 규칙
- 이미지가 들어갈 자리에는 <img src="1.png">, <img src="2.png"> 형식으로 순서대로 번호를 매겨 태그를 넣어주세요.
- 이미지는 제가 따로 삽입할 예정이므로, 빈 공간(placeholder)만 마련해주세요.
이미지 크기 조정 규칙
- 가로 길이는 콘텐츠 영역에 맞춰 100%로 설정
- 세로 길이는 이미지 비율에 맞게 자동 조정 (height: auto)
- 작은 이미지는 억지로 확대하지 말고 원본 크기 유지
- 이미지에 둥근 모서리(border-radius: 8px) 적용
스타일링 자동 구현 요청
- 다음 디자인 요소들을 자동으로 CSS에 포함하여 구현해주세요:
이미지 Placeholder 스타일
- 기본 상태: 점선 테두리, 회색 배경, "이미지 자리" 안내 텍스트, 200px 고정 높이
- 이미지 삽입 후: 테두리 제거, 배경 제거, 높이 제한 해제하여 이미지 비율에 맞게 자동 조정
- 이미지 자체: 가로 100%, 세로 자동, 둥근 모서리, 은은한 그림자 효과
- 작은 이미지 처리: 원본보다 크게 강제 확대하지 않고 자연스러운 크기 유지
- 인쇄 호환: 페이지 분할 시 이미지가 어색하게 잘리지 않도록 처리
6. 링크 강조 스타일
- 배경: 그라데이션 하이라이트 (파스텔 블루-그린 톤)
- 모양: 둥근 모서리, 적당한 패딩, 미세한 그림자
- 효과: 호버 시 살짝 위로 떠오르는 애니메이션
- 아이콘: � 링크 이모지 자동 추가
- 텍스트: 굵은 글씨, 어두운 색상으로 가독성 확보
7. 정보 박스 스타일
- Tip 박스: 파란색 계열, 왼쪽 굵은 세로선
- Note 박스: 주황색 계열, 왼쪽 굵은 세로선
- Warning 박스: 빨간색 계열, 왼쪽 굵은 세로선
- 공통 스타일: 둥근 모서리, 적당한 패딩, 제목 굵게 표시
8. 버전 표기 스타일
- Ver 1.0 뱃지: 둥근 알약 모양, 파란색 배경, 흰색 텍스트
- 위치: 메인 이미지 위 또는 근처에 눈에 띄게 배치
9. 페이지 구성 순서
1) 표지 페이지 (로고 + 작가 이름 + 메인 이미지 + Ver 1.0 표기)
2) 목차
3) 본문 내용 (첨부 파일 내용 그대로)
4) 발행인 소개 및 저작권 정보
5) 버전 기록 페이지 (Ver 1.0 업데이트 내역 등)
10. 기술적 구현 요청
JavaScript 이미지 처리
- 이미지가 실제로 로드되면 placeholder에 has-image 클래스를 자동으로 추가하여 스타일이 전환되도록 구현
- 이미지 크기가 작을 경우 억지로 확대하지 않고 max-width: 100% 처리
반응형 디자인
- 모바일, 태블릿, 데스크톱에서 모두 깔끔하게 표시
- 인쇄 시에도 깨지지 않는 레이아웃
접근성 고려
- 링크와 버튼의 명확한 시각적 구분
- 충분한 색상 대비로 가독성 확보
더 제대로 하고 싶으시다면 이 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)
❻ 무엇보다도 저의 글을 꾸준히 알려주시는 뉴스레터 구독자분들께 알리는 것이 가장 중요하겠죠?! 메일리의 메일 하단 설정 기능을 이용해서 CTA를 넣었어요.
이런 젠스파크, 직접 써보고 싶으신가요?
아래 링크를 통해 가입하면 10% 할인된 가격으로 유료 플랜을 사용할 수 있습니다.
*특별 이벤트! 해당 링크로 연간 구독을 하시면 제가 발간한 '젠스파크 사용법 A to Z 가이드' 전자책을 무료로 발송해드립니다. (정가 2만원 상당)
무료 체험 링크를 통해 1천 크레딧을 바로 받으실 수 있습니다.
또 다른 할인 방법: 젠스파크 4주 챌린지 신 청시 50%할인
26년 1월 환급형 챌린지(마감), 2월 챌린지 모집 중입니다.
https://www.latpeed.com/stores/mlI1A
