영상 "충격!! 소넷5 공개 — AI한테 맡기고 손 뗐는데 문서가 완성됐다 | 오후다섯씨" 무료 다운로드 자료
기사·발표·강의 내용을 여백 없이 A4 한 장에 정리하는 카드형 템플릿입니다. 다크 헤더 + 크림 배경 + 클레이(테라코타) 포인트 컬러 구성이며, HTML 파일 하나로 되어 있어 코딩을 몰라도 텍스트만 바꿔서 쓸 수 있습니다.
A4_원페이저_템플릿/
├── template.html ← 빈 템플릿 (여기서 시작하세요)
├── 템플릿_미리보기.pdf ← template.html을 그대로 PDF로 뽑은 미리보기
├── 예시_Sonnet5/
│ ├── 예시_Claude_Sonnet5.html ← 실제로 채워 넣은 예시 (참고용)
│ └── 예시_Claude_Sonnet5.pdf ← 그 예시의 PDF 결과물
└── prompts/ ← 영상에서 쓴 AI 프롬프트 3개
├── 01_layout_design.md
├── 02_content_fill.md
└── 03_auto_loop.md
막막할 땐 예시_Sonnet5/예시_Claude_Sonnet5.html을 열어서
어떤 자리에 어떤 내용이 들어갔는지 먼저 확인하는 걸 추천합니다.
template.html파일을 마우스 오른쪽 클릭 → 연결 프로그램 → 크롬(Chrome) 으로 엽니다.- 브라우저에 뜬 상태에서
Ctrl+F(맥은Cmd+F) 대신, 메모장/VS Code 등으로template.html을 열어 텍스트 에디터에서 직접 수정합니다.- 파일 안에
<!-- EDIT: ... -->라고 적힌 줄 바로 아래/근처의 한글 문구만 원하는 내용으로 바꿔주세요. 구조(꺾쇠 태그)는 건드리지 않아도 됩니다.
- 파일 안에
- 저장한 뒤 다시 크롬으로 새로고침(F5)하면 바뀐 내용이 바로 보입니다.
- 마음에 들면 PDF로 저장:
Ctrl+P(맥은Cmd+P) → 대상: PDF로 저장- "자세히" 또는 "더보기" 를 눌러 "배경 그래픽"을 반드시 체크 (안 하면 색이 다 빠집니다)
- 용지: A4, 여백: 없음(0) 으로 설정
- 저장하면 끝입니다.
텍스트 에디터가 낯설다면 Windows는 메모장, Mac은 텍스트 편집기(서식 없음 모드) 로도 충분합니다. 다만 줄바꿈이 깨질 수 있어 가능하면 VS Code(무료)를 추천합니다.
prompts/ 폴더 안의 프롬프트 3개를 순서대로 Claude에 붙여넣으면
AI가 디자인부터 내용 채우기, 한 장 자동 맞춤까지 혼자 합니다.
| 파일 | 역할 |
|---|---|
01_layout_design.md |
AI가 레이아웃을 스스로 잡기 |
02_content_fill.md |
긴 글 → A4 한 장 자동 요약·배치 |
03_auto_loop.md |
넘치거나 비면 스스로 수정 (loop) |
Claude 무료 요금제에서 바로 쓸 수 있습니다 → claude.ai
템플릿은 위에서 아래로 이런 흐름입니다. 이 순서대로 채우면 됩니다.
| 구역 | 역할 | 분량 감각 |
|---|---|---|
| 헤더 | 브랜드/카테고리/날짜, 제목, 한 줄 요약 | 제목 2줄 이내, 요약 1~2문장 |
| 개요 + 비교 게이지 | 핵심 내용 리드 문단 + 3단 비교 막대 | 리드 3~4문장 |
| 참고 (우상단) | 보조 설명 + 짧은 리스트 | 불릿 2~4개 |
| 강조 스트립 | 숫자 3개 + CTA(행동 유도) 문구 | 숫자는 짧게, 단위 포함 |
| 범위 / 유의사항 | 리스트 섹션 + 배지 섹션 | 각 3~4줄 |
| 인용구 | 후기·반응 3개 | 각 1~2문장 |
| 푸터 | 출처, 제작자 표기 | 한 줄 |
빈 공간이 남으면 리스트 항목이나 문단을 한두 줄 더 추가해서 채우고, 내용이 넘치면 문장을 줄이거나 리스트 항목 수를 줄이세요.
template.html 상단 <style> 안, :root { ... } 블록의 6개 값만 바꾸면
전체 배색이 한 번에 바뀝니다.
:root{
--cream:#F4F0E6; /* 배경색 */
--ink:#141413; /* 헤더/푸터/진한 텍스트 */
--clay:#D97757; /* 포인트 컬러 */
--clay-deep:#B8532F;
--paper:#FFFFFF;
--muted:#5B564C; /* 보조 텍스트 */
--sand:#E8E1D0; /* 연한 배경(인용구, 게이지 트랙) */
}파일 안에 예시로 2가지 대체 팔레트를 주석으로 넣어뒀습니다 (딥그린×골드, 인디고×코랄).
npm install -D playwright
npx playwright install chromium// render.js
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('file://' + __dirname + '/template.html', { waitUntil: 'networkidle' });
await page.pdf({
path: 'output.pdf',
width: '210mm', height: '297mm',
printBackground: true,
margin: { top: 0, bottom: 0, left: 0, right: 0 }
});
await browser.close();
})();- PDF에서 색이 다 빠지고 흑백처럼 나와요 → 인쇄 대화상자에서 "배경 그래픽" 체크를 안 한 경우입니다.
- 내용이 페이지 아래로 넘쳐서 2페이지가 돼요 → 문단/리스트를 줄이거나
section { padding:4mm 10mm; }의4mm값을 줄이세요. - 한글 폰트가 이상하게 나와요 → 인터넷 연결이 필요합니다 (Google Fonts, Pretendard CDN).
- 표 칸에서 글자가 세로로 쪼개져요 → 문구를 줄이거나
.price-strip .cell의 폭(22mm)을 늘리세요.
자유롭게 수정·재배포하여 사용하셔도 됩니다.
📺 오후다섯씨 YouTube 채널 — AI 실전 활용 영상 매주 업로드