graphic-ebook
전문적으로 디자인된 B2B SaaS 전자책(리드 마그넷, 게이트 가이드, 육성 에셋, 백서)을 생성합니다. HTML + CSS → 인쇄 가능한 PDF. 3~10페이지.
중요 규칙
어떤 단계보다 먼저, 다음 규칙은 절대적으로 적용됩니다:
- 모든 페이지는 반드시 A4 캔버스(1200×1697px)에 맞아야 합니다. 콘텐츠 오버플로우 금지.
- 모든 확장형 글꼴 크기는
clamp()를 사용합니다. 고정 px는 테두리나 구조적 요소에만 사용합니다. - 단일 자체 포함 HTML입니다. 모든 CSS는 인라인입니다. 글꼴 CDN
<link>만 유일한 외부 의존성입니다. - HTML을 채팅에 절대 덤프하지 마세요. 파일로 저장하고 요약만 표시합니다.
- 본문이 핵심입니다. 텍스트 컬럼 및 텍스트 사이드바 페이지에서 line-height ≥ 1.75입니다. 단일 컬럼 본문의 max-width ≤ 65ch입니다.
- 일반적인 AI 슬롭 금지: 표시 글꼴로 Inter 사용 금지, 흰색 배경에 보라색-파란색 그라데이션 금지, "감사합니다" 마무리 금지.
- 시각적 리듬: 텍스트 컬럼 페이지를 연속으로 2개 이상 배치하지 마세요. 장 소개, 인용구 콜아웃, 또는 통계 그리드로 끊어주세요.
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }— 필수 글로벌 CSS. 이 설정이 없으면 Chromium이 PDF에서 모든 배경색을 제거합니다.- 표지를 제외한 모든 페이지에는 페이지 바닥글이 있어야 합니다: 페이지 번호 + 브랜드 이름. 각
.slide하단에 절대 위치로 배치합니다.
1단계: 브리프 수집
네 가지 필수 항목입니다. 사용자 프롬프트에 모두 포함되어 있으면 2단계로 건너뜁니다.
누락된 것이 있으면 정확히 다음과 같이 질문하세요:
"전자책을 만들기 위해 다음 네 가지가 필요합니다:
- 주제 — 전자책은 무엇에 관한 것인가요? (구체적으로: '마케팅 팁'이 아닌 'CAC를 낮추는 5가지 방법')
- 대상 독자 — 누가 읽나요? (직무, 회사 규모,痛点: '50~500명 규모 SaaS 회사의 Customer Success Manager 중 이탈률로 어려움을 겪는 분')
- 원하는 액션 — 읽은 후 독자가 무엇을 하길 바라나요? (데모 예약, 템플릿 다운로드, 팀과 공유)
- 콘텐츠 — 기존 콘텐츠가 있나요, 아니면 주제에 맞춰 제가 초안을 작성할까요?"
멈추고 기다리세요. 참조 파일을 읽지 마세요. HTML이나 개요를 생성하지 마세요.
2단계: 전체 수집
9가지 질문을 하나의 메시지에 그룹화하여 모두 물어보세요. 건너뛰면 기본값이 적용됩니다.
콘텐츠
- 페이지 수 — 3
5 (빠른 가이드 / 체크리스트) / 68 (표준 가이드) / 9~10 (심층 분석) (기본값: 6) - 핵심 내용 — 읽은 후 독자가 알거나 해야 할 3~5가지 (장 구조 구성에 활용)
- 브랜드 이름 — 표지와 바닥글에 사용할 회사 또는 제품 이름 (또는 "건너뛰기")
- 브랜드 로고 — URL 또는 "없음"
디자인 5. 스타일 — clean-slate / midnight-editorial / matt-gray / product-minimal / mint-pixel-corporate / warm-earth / brutalist / magazine-red / soft-cloud / "옵션 보여줘" (기본값: clean-slate) 6. 장 수 — 주요 섹션은 몇 개인가요? (기본값: 페이지 수에서 파생)
출력 7. CTA 세부 정보 — 데모 예약 / 뉴스레터 가입 / 템플릿 다운로드 / 기타 (기본값: "데모 예약") 8. 연락처 정보 — 마무리 CTA 페이지용 이메일 + URL (또는 "나중에 추가할게요") 9. 슬러그 — 파일명 슬러그 (예: "churn-reduction-guide-2025"; 건너뛰면 주제에서 파생)
기본값:
| 질문 | 기본값 |
|---|---|
| 페이지 수 | 6 |
| 핵심 내용 | 주제에서 파생 |
| 브랜드 이름 | 없음 |
| 브랜드 로고 | 없음 |
| 스타일 | clean-slate |
| 장 수 | 페이지 수에서 파생 |
| CTA 세부 정보 | 데모 예약 |
| 연락처 정보 | 플레이스홀더 (체크리스트에서 플래그 표시) |
| 슬러그 | 주제의 케밥-케이스 |
스타일 = "옵션 보여줘"인 경우: 3개의 단일 페이지 HTML 미리보기(표지만)를 생성하여 .claude-design/previews/style-a.html, style-b.html, style-c.html에 저장합니다. 각각 자동으로 엽니다. 3단계 전에 사용자에게 선택을 요청하세요.
3단계: 내부 아키텍처
내부적으로 파생합니다. 사용자에게 절대 보여주지 마세요.
장 → 페이지 매핑:
| 페이지 수 | 일반적인 구조 |
|---|---|
| 3 | 표지 + [콘텐츠 페이지 1개] + 마무리 CTA |
| 4 | 표지 + [장 소개 1개 + 텍스트 컬럼 1개] + 마무리 CTA |
| 5 | 표지 + 목차 + [장 소개 1개 + 텍스트 컬럼 1개] + 마무리 CTA |
| 6 | 표지 + 목차 + [장 소개 2개 + 텍스트 컬럼 1개] + 마무리 CTA |
| 8 | 표지 + 목차 + [장 소개 3개 + 콘텐츠 페이지 2개] + 마무리 CTA |
| 10 | 표지 + 목차 + [장 소개 4개 + 콘텐츠 페이지 3개] + 핵심 내용 + 마무리 CTA |
목차 규칙: 전자책 페이지 수가 6페이지 이상이면 포함합니다. 3~5페이지 전자책의 경우 표지에 "내용" 글머리 기호 목록을 사용하거나 완전히 생략합니다.
3-점 CTA 아키텍처 (전자책 페이지 수 ≥ 6인 경우):
- 도입부 CTA (2페이지 이후) — 미묘한 1줄 인라인 언급: "[url]에서 [도구]를 살펴보세요"
- 중간 CTA (통계 그리드 또는 장 소개 이후) — 1줄 CTA가 포함된 작은
.callout--stat또는.callout--tip상자 - 마무리 CTA (마지막 페이지) — 전체 페이지, 주요 전환 액션
시각적 리듬 확인: 계획에 text-column 페이지가 2개 이상 연속으로 나타나면 → 진행 전에 quote-callout 또는 stat-grid를 그 사이에 삽입합니다.
디자인 방향 (스타일 프리셋 + 대상 독자에서 파생 — 사용자에게 절대 표시하지 않음):
| 결정 | 출처 |
|---|---|
| 톤 | 이 대상 독자는 어떤 감정적 레지스터를 기대하는가? (권위적, 에디토리얼, 활기찬, 차분한, 따뜻한…) |
| 시그니처 요소 | 일관되게 사용되는 ONE 시각적 장치: 대형 장식 숫자, 대각선 악센트 바, 도트 그리드 오버레이, 표지의 그라데이션 메시, 룰 라인, 기하학적 도형 블리드. 하나를 선택하세요. 일관되게 사용하세요. |
| 배경 시스템 | 페이지마다 배경이 어떻게 달라지는가? 표지와 장 소개 = 가장 독특함. 콘텐츠 페이지는 조용하지만 완전히 흰색은 아님. 마무리 CTA = 어둡거나 전체 악센트 반전. 3페이지 이상 연속으로 동일한 배경을 사용하지 마세요. |
| 모션 스타일 | .reveal 애니메이션은 무엇을 하는가? 하나를 선택하고 일관되게 유지하세요: translateY(16px) → 0, scale(0.97) → 1, translateX(-12px) → 0. 지연 시간을 0.1초 간격으로 설정하세요. |
| 잊을 수 없는 디테일 | 독자가 디자인에서 기억할 ONE 가지는 무엇인가? CSS를 작성하기 전에 이름을 지정하세요. |
스타일 프리셋만으로 강력한 방향을 도출할 수 없는 경우, 스스로에게 물어보세요: 최고 수준의 디자인 에이전시가 이 특정 대상과 주제에 대해 무엇을 제작할까? 그런 다음 그것을 실행하세요.
본문 밀도 제한:
- 텍스트 컬럼 1열: 페이지당 최대 180~250단어
- 텍스트 컬럼 2열: 최대 280
380단어 (열당 140190) - 텍스트 사이드바: 본문 140~180단어 + 사이드바 ≤70단어
- 장 소개: 40~60단어 (티저만)
- 인용구 콜아웃: 30~45단어
- 통계 그리드: 3~6개 지표, 최소한의 레이블
4단계: 페이지 구조
계획하기 전에 references/page-library.md를 읽으세요.
페이지당 [레이아웃 유형] 레이블이 있는 번호 매기기 목록을 출력합니다. 6페이지 예시:
페이지 1: [cover] — 제목, 부제목, 브랜드
페이지 2: [toc] — 장 제목 3개 + 페이지 번호
페이지 3: [chapter-intro] — 1장 시작
페이지 4: [text-column] — 1장 본문 (1열)
페이지 5: [stat-grid] — 4가지 주요 지표
페이지 6: [closing-cta] — 데모 예약 CTA + 연락처
5단계 전에 사용자에게 확인하세요.
5단계: 콘텐츠 초안
페이지별 사본을 일반 텍스트(HTML 없음)로 작성하세요. 레이아웃 유형별 규칙:
- 표지: 제목 (≤10단어, 가치 또는 긴장감으로 시작 — 일반 레이블 금지) + 부제목 (≤15단어) + 선택적 카테고리 레이블 + 브랜드 이름
- 목차: 장 제목 (각 ≤6단어) + 해당 섹션 번호. 깔끔한 번호 매기기 목록.
- 장 소개: 장 번호 (장식용) + 장 제목 (≤8단어) + 티저 문단 (2~3문장)
- 텍스트 컬럼 (1열): 섹션 제목 + 본문 문단. 최대 250단어. 산문 > 글머리 기호. 모든 문장이 그 자리를 정당화해야 함.
- 텍스트 컬럼 (2열): 동일한 규칙, 열당 140~190단어. 비교, 단계 쌍, 이중 관점에 사용.
- 텍스트 사이드바: 본문 (140~180단어) + 사이드바 콜아웃 유형 (팁 / 경고 / 통계 / 인용구 / 체크리스트) 최대 70단어
- 인용구 콜아웃: 인용구 ≤40단어 + 출처 (이름, 직함, 회사 또는 출처)
- 통계 그리드: 3~6개 지표 — 숫자 + 레이블 + 1줄 컨텍스트. 선택 사항: 아래 1문장 설명.
- 핵심 내용: 5~8개 내용, 각 ≤15단어, 가능하면 명령형 사용
- 마무리 CTA: 제목 ≤5단어 (명령형) + 1문장 본문 + CTA 액션 + 이메일 + URL (모두 필수)
금지 단어 (예외 없음): "powerful", "seamless", "game-changing", "leverage", "innovative", "revolutionary", "transform", "cutting-edge", "robust", "unlock", "scalable" (채움어로 사용 시).
6단계: HTML 생성
생성하기 전에 다음 모두를 읽으세요. 의역하거나 요약하지 말고 실제 파일을 읽으세요.
이 스킬의 참조 파일:
references/design-system.mdreferences/page-library.mdreferences/style-presets.md
번들 에셋 (정확한 경로 — <style> 블록에 전체 축어적 내용 포함):
assets/viewport-base.css— 이 스킬의 디렉토리 내부에 번들로 제공됨
경로 확인:
assets/또는scripts/로 시작하는 모든 경로는 이 SKILL.md 파일이 포함된 디렉토리를 기준으로 합니다. Claude Code 설치 후:~/.claude/skills/graphic-ebook/assets/및~/.claude/skills/graphic-ebook/scripts/. 읽기 전에 SKILL.md 파일 위치에서 실제 경로를 확인하세요.
생성 규칙
-
단일 자체 포함 HTML. 모든 CSS는 인라인입니다. 글꼴 CDN
<link>만 유일한 외부 의존성입니다. -
<style>블록 내부에viewport-base.css의 전체 축어적 내용을 포함하세요. -
viewport-base.css이후에 A4 세로 방향 재정의를 추가하세요 (동일한<style>블록 내):
/* A4 portrait overrides */
html { scroll-snap-type: none; scroll-behavior: auto; }
.slide {
width: 100vw;
height: 100vh;
height: 100dvh;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
scroll-snap-align: none;
}
/* CRITICAL: prevents Chromium from stripping backgrounds in PDF */
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
-
각 페이지 =
<section class="slide">— export-pdf.sh 페이지 감지에 필요합니다. -
각 페이지에 주석을 답니다:
/* === PAGE N: LAYOUT-TYPE === */ -
본문 텍스트:
clamp(0.875rem, 1.25vw, 1.05rem),line-height: 1.75, 텍스트 컬럼 및 텍스트 사이드바 레이아웃의 모든<p>에max-width: min(65ch, 100%). -
통계 숫자: 악센트 색상으로
clamp(3rem, 8vw, 5.5rem)의 히어로. 보조 색상으로clamp(2.5rem, 7vw, 5rem)의 서포트. -
이미지 없음 → CSS 생성 시각 자료만 사용 (그라데이션, 기하학적 도형, 점 패턴, 추상 요소). 플레이스홀더 상자를 절대 표시하지 마세요.
-
SlidePresentation JS 없음.
.reveal애니메이션을 위한 최소한의 IntersectionObserver만 포함하세요. -
장 번호 장식 (장 소개 페이지):
.chapter-number-deco {
font-family: var(--font-display);
font-size: clamp(6rem, 18vw, 14rem);
font-weight: var(--display-weight);
opacity: 0.06;
position: absolute;
top: -0.1em;
right: var(--page-padding);
line-height: 1;
color: var(--accent);
pointer-events: none;
user-select: none;
}
- 타이핑된 콜아웃 상자 (텍스트 사이드바 페이지용):
.callout { border-left: 3px solid; border-radius: var(--card-radius, 4px); padding: clamp(0.75rem, 1.5%, 1.1rem); }
.callout-label { font-size: clamp(0.58rem, 0.8vw, 0.68rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.5em; }
.callout--tip { background: rgba(22, 163, 74, 0.07); border-color: #16A34A; }
.callout--tip .callout-label { color: #16A34A; }
.callout--warning { background: rgba(217, 119, 6, 0.07); border-color: #D97706; }
.callout--warning .callout-label { color: #D97706; }
.callout--stat { background: rgba(var(--accent-rgb, 100,100,100), 0.07); border-color: var(--accent); }
.callout--stat .callout-label { color: var(--accent); }
.callout--quote { background: var(--bg-elevated); border-color: var(--divider); font-style: italic; }
.callout--quote .callout-label { color: var(--text-muted); }
.callout--checklist { background: rgba(8, 145, 178, 0.07); border-color: #0891B2; }
.callout--checklist .callout-label { color: #0891B2; }
- 페이지 바닥글 (표지를 제외한 모든 페이지):
.page-footer {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: clamp(0.5rem, 1%, 0.625rem) var(--page-padding);
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--divider);
font-family: var(--font-body);
font-size: clamp(0.55rem, 0.75vw, 0.65rem);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
}
HTML: <div class="page-footer"><span>[Brand Name]</span><span>[N]</span></div>
-
2열 레이아웃: 왼쪽 열에
border-right: 1px solid var(--divider)가 있는display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4%, 3.5rem);. -
텍스트 사이드바 레이아웃:
display: grid; grid-template-columns: 2fr 1fr; gap: clamp(1.5rem, 3%, 2.5rem);
디자인 품질 규칙 (프론트엔드 디자인 원칙에서)
생성된 모든 전자책의 미적 수준을 결정합니다. 구조적 규칙 이후, 출력 전에 적용됩니다.
타이포그래피:
- 표시 글꼴은 큰 크기에서 개성이 있어야 함. Plus Jakarta Sans 800, Instrument Serif, Syne, Lora, Fraunces — 모두 허용됨. 표시 두께의 Inter = 즉시 슬롭 신호.
- 두 개의 연속된 계층 수준에 동일한 글꼴 두께를 사용하지 마세요. 표지 제목 (800) → 장 제목 (700) → 섹션 제목 (700, 더 작은 크기) → 본문 (400/500).
- 프리셋이 지원하는 경우 표시 글꼴과 정제된 본문 글꼴을 함께 사용하세요 (예: Instrument Serif + Inter, Syne + IBM Plex Sans). 단일 글꼴 스택은 대신 두께 대비를 사용해야 함.
배경 및 분위기:
- 표지는 MUST가 시각적 깊이를 만드는 상당한 장식용
::before또는::after의사 요소를 가져야 함:opacity: 0.04–0.06의 고스트 문자, 기하학적 도형 블리드, 방사형 그라데이션 오버레이, 또는 도트/라인 그리드 패턴. - 장 소개 페이지는 MUST가 인접한 콘텐츠 페이지와 시각적으로 대비되어야 함 —
var(--bg-alt)또는 스타일에 적합한 대체 처리를 사용. - 콘텐츠 페이지(텍스트 컬럼, 텍스트 사이드바)는 흰색/중립색일 수 있음
…
[번역을 위해 잘림]