손그림 슬라이드

무료 handdraw-slides-kr

삐뚤한 선과 형광펜 강조로 워크숍 자료와 활동지를 만듭니다. 배경 이미지와 고칠 수 있는 텍스트를 겹친 이중 레이어로 내보내서, 받는 사람이 글자를 그대로 수정할 수 있습니다.

프리셋 6종 — 클린 스케치·볼드 마커·공책·칠판·청사진·수채
rough.js 로 그리고 Playwright 로 렌더
발주처 제출물이 아니라 내부 자료·워크숍 배포물용입니다
원저작자 danny0926 · MIT

설치 — 한 줄이면 됩니다

npx skills add worlddropus-cmd/dodori-skills@handdraw-slides-kr

Codex 는 $handdraw-slides-kr, Claude Code 와 Antigravity 는 /handdraw-slides-kr 로 부릅니다. 그냥 "제안서 만들어줘" 라고 해도 설명문을 보고 알아서 붙습니다.

35 KB · 빌더 스크립트와 예제 스펙이 함께 들어 있습니다

지시문 전문

아래가 SKILL.md 의 전부입니다. 에이전트가 읽는 것과 같은 글입니다.

Handdraw Slides KR — 손그림 슬라이드

절대 경계 — 먼저 읽는다

이 스킬은 발주처 제안서에 쓰지 않는다.

발주처에 나가는 제안서는 손글씨체를 쓰지 않는 것이 원칙이다. 나눔손글씨 전 계열과 강원교육 계열이 elite-powerpoint-designer의 금지 폰트 목록에 들어 있다. 이 스킬은 정확히 그 반대를 만든다.

대상	이 스킬	대신
발주처 제안서·입찰	금지	elite-powerpoint-designer
정부·공공기관 제출물	금지	elite-powerpoint-designer
사외 발표자료	권장하지 않음	elite-powerpoint-designer
워크숍 배포물·활동지	적합	—
학습자 워크북	적합	—
강의 중 설명 슬라이드	적합 (칠판 느낌)	—
사내 기획 공유·회고	적합	—

"PPT 만들어줘"만으로는 이 스킬을 부르지 않는다. 손그림·스케치·칠판·공책 같은 말이 함께 있을 때만이다. 애매하면 어느 쪽인지 묻는다.

왜 이 형식이 교육에 맞는가

손그림은 "아직 확정되지 않았다"는 신호를 준다. 완성된 장표는 받아 적게 만들고, 스케치는 끼어들게 만든다.

워크숍과 활동지에서 그 차이가 크다. 빈칸이 인쇄체로 반듯하면 채우기가 부담스럽고, 손으로 그린 네모면 편하게 쓴다.

칠판·공책 프리셋은 학습 상황의 시각 언어를 그대로 쓴다. 학습자가 무엇을 하는 자리인지 형식만으로 안다.

한글 설정 — 이걸 안 하면 글자가 깨진다

원본은 대만에서 만들어져 CJK 기본값이 번체 중국어 폰트(Noto Sans TC / Microsoft JhengHei)다. 그대로 쓰면 한글에 글리프가 없어 네모나 폴백으로 나온다.

반드시 font_map의 cjk를 한글 폰트로 지정한다.

{
  "font_map": {
    "heading": "Nanum Pen Script",
    "body": "Gaegu",
    "annotation": "Nanum Pen Script",
    "cjk": "나눔손글씨 펜"
  }
}

두 층을 다 맞춰야 한다.

웹폰트 — HTML 렌더링 단계. 이 배포판의 templates/base.html.j2에 Nanum Pen Script·Gaegu·Noto Sans KR을 추가해 뒀다. CSS에서 이 이름을 쓰면 배경 이미지의 글자가 제대로 그려진다.
PPTX 폰트 — font_map.cjk. 이건 보는 사람 PC에 설치된 폰트 이름이다. 웹폰트 이름과 다를 수 있다.

gen_pptx.py는 한글을 이미 CJK로 판정한다. 한글 유니코드 영역(0xAC00–0xD7AF)이 판정 함수에 들어 있고, 감지되면 <a:ea> 슬롯에 폰트를 넣는다. 이름만 한글 폰트로 주면 된다.

딱딱한 손글씨가 필요하면 cjk에 나눔손글씨 고딕아니고고딕 같은 정자 계열을 쓴다. 활동지 본문처럼 읽어야 하는 텍스트에는 흘림체를 쓰지 않는다.

프리셋 고르기

프리셋	인상	쓰는 자리
Notebook	공책·모눈	활동지·워크북 1순위
Blackboard	칠판	강의 중 설명 슬라이드 1순위
Clean Sketch	정돈된 스케치	사내 기획 공유
Bold Marker	굵은 마커	워크숍 안내·아이스브레이킹
Blueprint	청사진·제도	구조·프로세스 설명
Watercolor	수채	감성 자료. 교육에는 잘 안 맞음

한 산출물에 하나만 쓴다. 슬라이드마다 프리셋을 바꾸면 통일감이 무너진다.

6단계 파이프라인

① 내용 구조화   슬라이드당 메시지 하나로 쪼갠다
② 스타일 선택   프리셋 하나 고정
③ 레이아웃 배치  슬라이드마다 다른 레이아웃 — 단조로움 방지
④ HTML 생성    슬라이드별로 HTML/CSS/JS 작성
⑤ 렌더 + 검토   render_slides.py → PNG → 눈으로 확인 → 수정
⑥ 조립         gen_pptx.py → .pptx

⑤의 눈으로 확인하는 단계를 건너뛰지 않는다. 손그림은 요소가 겹치거나 넘치기 쉽다. 렌더된 PNG를 실제로 열어서 본다. 특히 한글은 영문보다 폭이 넓어 넘치기 쉽다.

상세는 references/pipeline.md(파이프라인·파라미터), references/design-system.md(레이아웃 패턴·rough.js 사용법·주석 문법), references/style-presets.md(프리셋 6종 정의)에 있다.

이중 레이어의 의미

산출물은 배경 PNG + 네이티브 편집 가능 텍스트로 겹쳐진다. 그래서 파워포인트에서 글자를 고칠 수 있다.

이게 실무에서 중요하다. 워크숍 직전에 문구가 바뀌어도 전체를 다시 렌더할 필요가 없다.

다만 배경에 그려진 도형과 강조 표시는 이미지다. 그건 못 고친다. 도형 위치가 틀렸으면 다시 렌더한다.

실행 전 확인

항목	확인
파이썬 패키지	`jinja2` · `playwright` · `python-pptx` · `lxml`
브라우저	Playwright chromium
한글 폰트	렌더 환경에 한글 폰트가 설치되어 있어야 배경 이미지 글자가 나온다

render_slides.py는 templates/를 자기 폴더 기준으로 찾는다. 두 파일과 templates/의 상대 위치를 바꾸지 않는다.

검수

렌더된 PNG를 실제로 연다. 요소가 겹치거나 화면 밖으로 나가지 않았는가
한글이 네모로 나오지 않는가. 나오면 cjk 폰트 설정 문제다
글자가 넘치지 않는가. 한글은 같은 자수라도 영문보다 넓다
프리셋이 하나로 통일되어 있는가
읽어야 하는 본문에 흘림체를 쓰지 않았는가
발주처에 나갈 물건이 아닌지 다시 확인한다

출처

파이프라인·디자인 시스템·스타일 프리셋·렌더 스크립트·템플릿의 원저작자는 danny0926(github.com/danny0926/ppt-skills)이며 MIT로 공개되어 있다. 고친 곳과 그대로 둔 곳은 references/LICENSE-danny0926.md에 적어 두었다. 파이썬 코드는 한 줄도 고치지 않았다.