소개
급하게 교재를 출판해야 하는 상황이 생 겼습니다.
기존 이펍 기반 전자책 제작은 이미지 배치와 시각 구성에 제약이 많아 시간이 오래 걸렸기 때문에, 더 효율적인 대안을 찾기 위해 AI 기반 자동화 제작 프로세스에 도전하게 되었습니다.
이전에 여행가 J님이 공유해 주셨던 클로드를 활용한 전자책 자동화 프로세스가 기억나서 이를 활용해 보았습니다.
특히 Claude의 MCP 기능과 Artifact 기능, 그리고 HTML 기반 출력 기능을 활용하여, 콘텐츠 작성 외적인 부분(디자인, 레이아웃, 변환 등)을 최소한의 수작업으로 해결하고자 했습니다.
진행 방법
1. Claude MCP 활용해 전자책 콘텐츠 생성
데스크탑 클로드앱 설치 -> Node.js 설치 -> 깃허브에서 youtube-transcript MCP 설치 ->클로드 데스트탑 앱에서 파일->설정->개발자->설정편집(메모장에서 편집도 가능)->깃허브에서 복사해 놓은 코드 붙여 넣기-> 클로드 껐다 켜기->채팅창 하단 설정메뉴에서 잘 적용되었는지 확인
1️⃣데스크탑 클로드앱 설치
2️⃣Node.js 설치 Node.js
3️⃣ 클로드 데스트탑 앱에서 파일-> 설정
4️⃣ 개발자 탭 선택하고 설정 편집열기
5️⃣ claude_desktop_config.json 파일 열어서 깃허브에서 가져온 코드 넣을 준비
6️⃣깃허브에서 firecrawl MCP 설치 get_transcript기능 활용 https://github.com/mendableai/firecrawl-mcp-server 전 Brave search api키 발급으로 진행해서 약간 다를 수도 있으나 여행가 J님 버전으로 설명해 볼께요. (브레이이브 서치는 무료 호출 수가 제한이 있더라구요.) 하다 안되는 부분 있다면 댓글 남겨주세요~ ^^
{
"mcpServers": {
"mcp-server-firecrawl": {
"command": "npx",
"args": ["-y", "firecrawl-mcp"],
"env": {
"FIRECRAWL_API_KEY": "YOUR_API_KEY_HERE",
"FIRECRAWL_RETRY_MAX_ATTEMPTS": "5",
"FIRECRAWL_RETRY_INITIAL_DELAY": "2000",
"FIRECRAWL_RETRY_MAX_DELAY": "30000",
"FIRECRAWL_RETRY_BACKOFF_FACTOR": "3",
"FIRECRAWL_CREDIT_WARNING_THRESHOLD": "2000",
"FIRECRAWL_CREDIT_CRITICAL_THRESHOLD": "500"
}
}
}
}7️⃣ 클로드 앱 한번 껐다 켜서 MCP 잘 적용되었는지 확인.
이제 유튜브 링크를 제공하면 내용을 읽어올 준비 끝~!!
(mcp 이름이 다른 건 전 다른 실습때문에 위의 MCP를 설치했는데 기능은 동일해서 저걸 사용했답니다.)
Claude 프로젝트에 입력한 기본 지침: 여행가J님이 공유 주셨던 것 조금만 가공해서 쓰기~^^ 여행가J님 알럽 쏘 머치~!! ㅎㅎ
youtube-transcript 활용해서
다음 유튜브 영상 트랜스크립트를 사용하여 전자책 형태의 HTML 문서를 만들어주세요:
[https://www.youtube.com/watch?v=XcaS5P-HgUo]
요구사항:
1. 스타일 및 형식:
- 따뜻하고 친근한 어투를 유지하되, 유튜브의 구어체를 문어체('~합니다')로 자연스럽게 변환해주세요
- 실용적인 조언과 인사이트를 강조하고, 복잡한 개념은 쉽게 풀어서 설명해주세요
- 독자에게 직접 질문을 던지고 공감하는 스타일로 작성해주세요
- 본문 글꼴은 가독성 좋은 sans-serif 계열로 사용해주세요
2. 구조:
- 맨 처음에 전문적이면서도 친근한 느낌의 커버 이미지 생성 또는 이미지 위치라고 표기
- 커버 이미지 아래 "북튜버를 위한 [영상 제목]" 형식으로 제목 배치
- 제목 아래에 짧은 인트로 문구 추가
- 목차는 각 소제목으로 이동할 수 있는 하이퍼링크 형태로 구성
- 내용은 독후활동의 위한 유튜브 콘텐츠 제작 설명을 위해 논리적인 섹션을 나누고, 실용적인 소제목 부여
- 각 섹션 끝에 "핵심 포인트" 박스 추가
3. 시각적 요소:
- 핵심 개념을 이해하기 쉬운 다이어그램으로 시각화할 것
- 주요 프로세스는 단계별 흐름도로 표현
- 맨 마지막에 전체 내용을 요약한 마인드맵 형태의 다이어그램 추가 (SVG 활용)
- 따뜻한 색감과 친근한 디자인 요소 활용
4. 실용성 강화:
- 학생들이 바로 활용할 수 있는 체크리스트와 워크시트 형태의 템플릿 포함
- 개념 설명에 실제 유튜브 콘텐츠 제작 방법와 예시를 풍부하게 포함
- 관련한 간단한 프롬프트 예시 포함
5. 추가 요소:
- 경험과 통찰에서 비롯된 "SAY's 팁" 박스를 중간중간 삽입
- 각 섹션마다 독자의 학습에 적용할 수 있는 실용적인 질문 포함
6. 글 스타일은 책의 주제에 부합하도록 선정해.
이 전자책은 해당 유투브의 주제와 내용을 실제로 참고하고 활용할 수 있는 가이드가 되도록 제작해주세요. 친근하고 실용적인 조언 스타일을 그대로 살리면서, PDF 디자인으로 구성해주세요.
YouTube 영상 링크를 Claude에게 입력하여, HTML 기반의 전자책 초안 생성
내 전자책에 맞는 내용 작성 : 디자인 형식이 잡혔으면 이제 내가 작성할 전자책 목차주고 해당 내용 생성 요청
매번 목차부터 작성해서 소주제 작성중이라고 알려주고 챕터별 작성
2. 출력물의 PDF 변환
방법 1: HTML을 https://www.sejda.com/ko/html-to-pdf에서 PDF로 바꾸기
PDF 병합 툴 활용해 하나의 PDF로 합치기 (https://smallpdf.com/kr
)
방법 2: 브라우저에서 HTML 열기 →
Ctrl + P→ 인쇄 옵션에서PDF로 저장선택방법 2가 더 간단하고 빠르게 PDF 완성 가능
3. HTML 세부 조정 – Cursor AI 활용
HTML 파일을 Cursor AI에서 열고 CSS 및 콘텐츠 구조 수정
적용한 예시 수정: 아래는 예시일뿐이고 내 책의 내용에 맞게 텍스트 수정을 주로 진행.
<style>
h1 { font-size: 28px; margin-bottom: 16px; }
p { line-height: 1.6; margin-bottom: 12px; }
</style>
4. PDF를 Ms 워드로 변형해 수정 시도 https://smallpdf.com/kr/pdf-to-word
html로 작성해서인지 이미지, 텍스트 모두 분리되고 하나씩 이동 및 수정 가능~! 대박이죠~!!!
이미지, 텍스트 모두 분리되고 하나씩 이동 및 수정 가능
5. Claude Artifact + MCP + PDF +MS 워드 조합의 장점
Claude의 Artifact 창에서 HTML 구조를 시각적으로 검토 가능
MCP를 통해 다양한 지침 세트를 만들어 실험 가능 (예:
여행 블로그 스타일,교재 스타일,PDF 최적화 버전등)전자책의 레이아웃 등 시각적 요소를 빠르게 작성해 나는 책의 내용에만 집중해도 빠른 시간안에 완성도 있는 책출간 가능
결과와 배운 점
Claude의 HTML 출력은 시각적으로 꽤 정돈되어 있어, 간단한 CSS 수정만으로 출판 품질 수준의 PDF 제작 가능
이미지 중심 콘텐츠에는 PDF 방식이 효과적이라는 점을 재확인
콘텐츠 집필에만 집중할 수 있다는 점에서 생산성 극대화
추후 이펍, PDF, 웹뷰 등을 분기처리한 자동화 템플릿 제작도 가능성 있음
도움 받은 글
J님의 전자책 자동화 사례 (Claude + MCP 활용)
https://www.gpters.org/wealth/post/eat-knowledge-start-up-CcEVfLj0gz02JfP
감자나라님 클로드 MCP 설치
Claude + MCP + Cursor AI 조합은 전자책 자동화 출간을 실험적으로 진행해 보았습니다.
다음편은 내가 원하는 책의 구성과 레이아웃을 벤치마킹을 통해 쉽게 디자인한 방법과 내 원고를 추가해 제대로 된 내 책을 빠르게 생성하는 사례를 소개할께요~
기술만 잘 이해하고 지침만 명확히 설정하면 누구나 활용할 수 있어요! 💡
전자책 16기 홧팅입니다~ ^^
