그래픽 케이스 스터디
고객 성공 사례 세부 정보를 바탕으로 전문적으로 디자인된 B2B 케이스 스터디 PDF를 생성합니다. 출력물은 단일 자체 포함 HTML 파일(모든 브라우저에서 열림)과 인쇄 가능한 PDF입니다. 7가지 페이지 섹션 레이아웃과 9가지 스타일 프리셋을 지원합니다.
필수 규칙 -- 절대 예외 없음:
- 모든 페이지는 A4 캔버스(1200×1697px)에 정확히 맞아야 합니다. 콘텐츠 오버플로우 금지.
- 모든 확장 가능한 글꼴 크기는
clamp()를 사용합니다. 고정 px는 구조적 테두리/선에만 사용합니다. - 단일 자체 포함 HTML: 모든 CSS는 인라인입니다. 글꼴 CDN 링크 외부 종속성 제로.
- 절대 채팅에 HTML을 덤프하지 마십시오. 파일로 저장하고 요약만 표시합니다.
- 결과 통계 숫자는 시각적으로 지배적이어야 합니다. 본문 텍스트 크기의 최소 3배 이상.
- 일반적인 AI 수준의 결과물 금지: 표시 글꼴로 Inter 사용 금지, 흰색 배경에 보라색 그라데이션 금지, "감사합니다" 마무리 금지.
1단계: 간단한 정보 수집
시작하려면 네 가지가 필요합니다. 메시지에 네 가지가 모두 있으면 2단계로 건너뜁니다.
누락된 항목이 있으면 정확히 다음과 같이 질문합니다.
"케이스 스터디를 만들려면 네 가지가 필요합니다:
- 고객 이름 -- 회사 이름(또는 익명화를 위한 설명어: "Fortune 500 소매업체")
- 과제 -- 귀사 제품을 사용하기 전에 겪었던 문제는 무엇입니까? (2-5문장)
- 솔루션 -- 귀사 제품이 문제를 어떻게 해결했습니까? (기능, 접근 방식)
- 결과 -- 측정 가능한 결과: 이상적으로는 3가지 통계(%, 절약된 시간, 수익 영향 등)"
계속 진행하기 전에 네 가지를 모두 기다리십시오.
2단계: 전체 정보 수집
모든 질문을 하나의 메시지에 범주별로 그룹화하여 질문합니다. 사용자는 건너뛸 수 있으며 기본값이 적용됩니다.
"시작하기 전에 몇 가지 질문:
콘텐츠
- 고객 배경 -- 업계, 회사 규모, 위치? (선택 사항, 개요 페이지에 사용됨)
- 추천사 -- 고객 인용문 (최대 40단어) + 발화자 이름 + 직함? (또는 "나중에 추가하겠습니다")
- 페이지 수 -- 1페이지 (요약 카드) / 2페이지 (표준, 기본값) / 4페이지 (상세)
- 고객 로고 -- URL 또는 "없음"
디자인 5. 귀사 이름 -- CTA 페이지용 공급업체 이름(+ 가능한 경우 로고 URL) 6. 스타일 -- clean-slate / midnight-editorial / matt-gray / product-minimal / mint-pixel-corporate / warm-earth / brutalist / magazine-red / "옵션 보여줘" 7. 방향 -- A4 세로 (기본값, 1200×1697) / 가로 4:3 (1200×900)
출력 8. 익명화? -- 회사 이름 유지 / 업계 설명어로 대체 9. 슬러그 -- 파일명 슬러그 (예: "acme-corp-2025"); 건너뛰면 고객 이름에서 파생함"
건너뛴 경우 기본값:
| 질문 | 기본값 |
|---|---|
| 고객 배경 | 없음 |
| 추천사 | 없음 |
| 페이지 수 | 2 |
| 고객 로고 | 없음 |
| 귀사 이름 | 컨텍스트에서 파생 |
| 스타일 | clean-slate |
| 방향 | A4 세로 |
| 익명화 | 이름 유지 |
| 슬러그 | 고객 이름의 케밥 케이스 |
스타일 = "옵션 보여줘"인 경우:
3개의 단일 페이지 HTML 미리보기(표지만)를 생성합니다. .claude-design/previews/style-a.html, style-b.html, style-c.html에 저장합니다. 각각 열기: open .claude-design/previews/style-a.html 등. 케이스 스터디 컨텍스트에 맞는 3가지 스타일 프리셋을 선택합니다. 3단계 전에 사용자에게 선택을 요청합니다.
2.5단계: 내부 페이지 아키텍처 (사용자에게 표시되지 않음)
3단계 전에 내부적으로 파생합니다. 사용자에게 절대 묻지 않습니다.
히어로 메트릭 식별: 결과에서 가장 인상적인 단일 숫자(가장 큰 %, 가장 큰 $, 가장 큰 배율)를 스캔합니다. 이 메트릭은 결과 페이지에서 악센트 색상 처리와 최대 시각적 중요도를 얻습니다.
페이지 수 -> 구조 템플릿:
| 수 | 페이지 순서 |
|---|---|
| 1페이지 | 1페이지: [컴팩트 표지] -- 모든 콘텐츠가 한 페이지에 압축됨 |
| 2페이지 | 1페이지: [표지] + [과제-솔루션] 스택 · 2페이지: [결과] + [추천사-CTA] 스택 |
| 4페이지 | 1페이지: [표지] · 2페이지: [개요] + [과제] · 3페이지: [솔루션] + [결과] · 4페이지: [추천사] + [마무리 CTA] |
시각적 특성은 스타일 선택에서 파생:
- clean-slate → 전문적인 권위, 넉넉한 여백, 엔터프라이즈 안전
- midnight-editorial → 프리미엄 다크, 편집적 무게감, 기술/AI 기업
- matt-gray → 신뢰할 수 있는 중립, 운영적, 이사회 안전
- warm-earth → 접근하기 쉬운 따뜻함, 컨설팅/에이전시/서비스
- brutalist → 대담한 눈길, 디자인 중심, 주목을 끌기
- 지정되지 않은 경우: B2B SaaS는 clean-slate, 기술 회사는 midnight-editorial이 기본값.
3단계: 페이지 구조
계획을 세우기 전에 references/page-library.md를 읽으십시오.
전체 페이지 순서를 계획합니다. references/page-library.md에 있는 7가지 중에서 각 페이지 섹션에 섹션 유형을 할당합니다. 여러 섹션이 한 페이지 내에 쌓일 수 있습니다.
페이지당 [섹션-유형] 레이블이 있는 번호 목록으로 출력합니다. 2페이지 예시:
제안된 구조 (2페이지, clean-slate 스타일):
1페이지:
[표지] -- Acme Corp, 보고 시간 80% 단축
[과제-솔루션] -- 수동 프로세스 / DataPulse 자동화
2페이지:
[결과] -- 시간 80% 절약, 오류 95% 감소, $200K 절감
[마무리 CTA] -- 문의하기: [email protected]
이 구조가 적합합니까, 아니면 조정할 부분이 있습니까?
4단계 전에 확인을 기다리십시오.
4단계: 콘텐츠 초안
페이지 섹션별 카피를 작성합니다. 일반 텍스트만 -- 아직 HTML 없음.
섹션별 카피 규칙:
표지: 회사 이름 + 헤드라인 결과 (최대 12단어, 반드시 숫자로 시작: "Acme, 보고 시간 80% 단축") + 선택적 카테고리 레이블 ("고객 성공 사례")개요: 4가지 사실만 -- 업계 / 회사 규모 / 위치 / 사용 사례 -- 각 값 최대 4단어과제: 컨텍스트 단락 (2-3문장) + 3가지 문제점 (각 1문장, 불렛 채우기 금지)솔루션: 2-3개의 기능 소개 -- 기능 이름 (최대 3단어) + 각 1문장 결과 설명결과: 3가지 메트릭 (숫자 + 짧은 레이블 + 1줄 컨텍스트). 선택 사항: 2문장 설명. 숫자와 동일한 가중치의 본문 카피 제로.추천사: 정확한 인용문 (최대 40단어) + 발화자 이름 + 직함 + 회사마무리 CTA: 헤드라인 (최대 5단어) + CTA 액션 텍스트 (3단어) + 이메일 + URL (모두 필수)
금지어 (예외 없음): "powerful", "seamless", "game-changing", "leverage", "innovative", "revolutionary", "transform", "cutting-edge", "robust", "unlock", "scalable" (형용사 채움어).
카피 철학: 숫자가 형용사를 이깁니다. 모든 섹션을 기능이 아닌 결과로 시작하십시오. 단편도 괜찮습니다.
5단계: HTML 생성
HTML을 생성하기 전에 모두 읽으십시오:
이 스킬의 참고 자료:
references/design-system.mdreferences/page-library.mdreferences/style-presets.md
frontend-slides 상호 참조 (이 정확한 파일을 읽으십시오):
/Users/ksd/Desktop/Varnan_skills/frontend-slides/viewport-base.css--<style>블록 내에 전문 전체를 그대로 포함
생성 규칙:
- 단일 자체 포함 HTML. 모든 CSS는 인라인. 글꼴 CDN
<link>가 유일한 외부 참조. <style>블록 내에viewport-base.css의 전체 내용을 그대로 포함하십시오 -- 요약하거나 줄이지 마십시오.- viewport-base.css를 붙여넣은 후 세로 A4 재정의를 추가합니다:
/* A4 세로 재정의 */
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;
}
- 모든 페이지 섹션 =
<section class="slide">-- export-pdf.sh 감지에 필요. - 각 페이지에 주석:
/* === PAGE N: SECTION-TYPES === */ - 결과 통계 숫자: 최소
clamp(2.5rem, 7vw, 5rem). 히어로 메트릭은 악센트 색상. 기타 메트릭은 보조 텍스트 색상. - 이미지가 제공되지 않음 -> CSS 생성 시각 자료 (기하학적 모양, 그라데이션 배경, 아이콘 같은 CSS 구조). 보이는 자리 표시자 상자를 절대 출력하지 마십시오.
- SlidePresentation JS 없음.
.reveal진입 애니메이션용 최소 IntersectionObserver만 포함 (뷰어 경험; PDF 내보내기는 최종 상태로 자동 렌더링). - 가로 4:3 (요청된 경우): graphic-slide-deck 비율에 맞게
clamp()값 사용 -- 가로 1200×900은 1vw=12px, 세로와 유사.
타이포그래피 규율 (모든 clamp 기반, 1200px A4 세로에 맞게 조정):
- 표지 헤드라인:
clamp(2rem, 5vw, 3.5rem) - 섹션 제목:
clamp(1.25rem, 2.5vw, 2rem) - 본문:
clamp(0.875rem, 1.25vw, 1.1rem) - 통계 숫자 (히어로):
clamp(3rem, 8vw, 5.5rem)악센트 색상 - 통계 숫자 (보조):
clamp(2.5rem, 7vw, 5rem)보조 색상 - 인용문:
clamp(1.1rem, 2vw, 1.5rem)기울임꼴 - 레이블/캡션:
clamp(0.65rem, 0.9vw, 0.8rem)대문자
6단계: 자체 QA
모든 항목을 확인하십시오. 모든 실패를 수정하십시오 -- 건너뛰지 마십시오.
레이아웃 및 렌더링:
- 모든
.slide에height:100vh; height:100dvh; overflow:hidden이 있는가 - 모든 확장 가능한 글꼴 크기가
clamp()를 사용하는가 - 1200×1697 뷰포트에서 콘텐츠 오버플로우가 없는가 -- 각 페이지 밀도를
references/page-library.md제한과 비교하여 확인 - 모든 이미지 자리 표시자 자리에 CSS 생성 시각 자료가 있는가
- CSS에
-clamp(),-min(),-max()가 없는가 -- 음수는calc(-1 * ...)로 감싸기
구조:
- 페이지 수가 3단계 계획과 일치하는가
- 모든 페이지가
class="slide"를 사용하는가 - 3단계의 모든 콘텐츠 섹션이 있는가
-
class="slide"는 내부 div가 아닌<section>요소에만 있는가
디자인 품질:
- 결과 섹션에서 히어로 메트릭이 시각적으로 지배적인가 -- 악센트 색상, 가장 큰 크기, 동일한 가중치의 경쟁 요소 없음
- 스타일 프리셋 토큰이 일관되게 적용되었는가 (색상, 글꼴:
references/style-presets.md참조) - 슬롭 패턴이 없는가 (
references/style-presets.md의 사용 금지 목록 확인) - 타이포그래피 계층 구조가 명확한가: 표지 헤드라인 >> 섹션 제목 >> 본문 (최소 2:1 비율)
콘텐츠:
- 모든 카피에 금지어가 없는가
- 표지 헤드라인이 숫자나 측정 가능한 결과로 시작하는가
- 추천사 인용문이 40단어 이하인가
- 마무리 CTA에 헤드라인 + 액션 + 이메일 + URL (네 가지 모두)이 있는가
- 결과 섹션의 모든 통계에 레이블이 있는가 (숫자만 있는 경우 없음)
7단계: 출력
메인 HTML 저장:
mkdir -p case-study/[slug]
case-study/[slug]/index.html에 작성
열기: open case-study/[slug]/index.html
페이지별 HTML 파일 (항상 생성):
메인 HTML에서 각 <section class="slide">를 추출합니다. 각각에 대해 다음을 포함하는 독립 실행형 파일을 만듭니다:
- 메인 HTML의 전체
<style>블록 (그대로 복사) - 최소 HTML 셸로 감싼 개별
<section class="slide"> - JS 없음 (정적 페이지별 보기)
case-study/[slug]/page-01.html, page-02.html 등에 작성
PDF 내보내기 (A4 세로의 경우 항상 수행):
bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/export-pdf.sh \
case-study/[slug]/index.html \
case-study/[slug].pdf --portrait
가로 4:3이 요청된 경우 --portrait를 생략하고 대신 --compact(1280×720)를 사용합니다.
참고: 첫 번째 실행은 Playwright를 자동으로 설치합니다 (~30-60초). 사용자에게 알립니다.
정리: 2단계에서 스타일 미리보기 파일이 생성된 경우 .claude-design/previews/를 삭제합니다.
8단계: 요약 (채팅에 HTML 없음)
채팅에 다음을 표시합니다:
## 케이스 스터디: [고객 이름]
날짜: [오늘] | 스타일: [스타일] | 페이지: [N] | 형식: A4 세로
공급업체: [귀사 이름] | 고객: [고객 이름]
---
### 파일
메인: case-study/[slug]/index.html
페이지별: case-study/[slug]/page-01.html -> page-0N.html
PDF: case-study/[slug].pdf
---
### 케이스 스터디 체크리스트
- [ ] [IMAGE: logo] 자리 표시자를 실제 로고 파일로 교체
- [ ] 모든 통계가 정확한지 확인 (페이지 [결과 페이지 번호])
- [ ] 고객이 인용문 사용을 승인했는지 확인
- [ ] 회사 이름 철자, 발화자 직함 정확성 확인
- [ ] PDF 페이지 수 = [N]이고 콘텐츠 잘림이 없는지 테스트
- [ ] case-study/[slug].pdf에서 PDF 공유
채팅에 HTML을 출력하지 마십시오.
섹션 참조
| 섹션 | 목적 |
|---|---|
| 표지 | 시작 페이지 -- 고객 이름, 헤드라인 결과, 로고 |
| 개요 | 한눈에 보는 프로필 -- 업계, 규모, 사용 사례 |
| 과제 | 문제 -- 컨텍스트 + 문제점 |
| 솔루션 | 귀사 제품이 문제를 해결한 방법 -- 기능 소개 |
| 결과 | 주요 메트릭 + 뒷받침 설명 |
| 추천사 | 고객의 전체 너비 인용문 |
| 마무리 CTA | 공급업체 로고 + 연락처 정보 + 다음 단계 |