A4 PDF & 바닐라 프리젠테이션 가이드

0. 이 도구는 무엇이고, 왜 HTML인가

이력서·계약서·제안서 같은 A4 문서(PDF), 그리고 세미나·발표용 슬라이드를 파워포인트(PPT)나 한글(HWP)에서 마우스로 칸을 맞추느라 고생하는 대신, 텍스트만으로 만드는 도구 모음입니다.

가장 먼저 알아둘 전제가 있습니다. 이건 여러분이 직접 코딩하는 도구가 아니라, LLM 에이전트에게 맡기는 스킬입니다. 여러분은 코드를 외울 필요 없이, "이런 문서를 만들어줘"라고 말로 시키고 결과를 보고 다듬으면 됩니다. 이 가이드도 명령어 암기가 아니라 원리를 이해하고 에이전트에게 잘 맡기는 법에 초점을 둡니다.

1. 딱 한 번만 준비하기

처음 한 번만 도구를 내 컴퓨터에 받아두면 됩니다. 그런데 이것조차 터미널을 열어 명령어를 칠 필요가 없습니다. 에이전트에게 아래 저장소 주소를 던지면서 "준비해줘"라고 말하면 알아서 내려받고 폴더 정리까지 끝내 줍니다.

그러면 에이전트가 저장소를 내려받고(클론), 도구 폴더로 들어가, 사용 설명서(SKILL.md)까지 미리 읽어 둡니다. 여러분은 곧바로 다음 단계로 넘어가 만들고 싶은 것을 말하기만 하면 됩니다.

2. LLM에게 맡기는 법

이 가이드의 핵심입니다. 도구를 깔았다면, 이제 직접 코드를 짜는 대신 에이전트에게 맡깁니다. 전체 흐름은 이렇습니다.

• ① 스킬을 먼저 읽힌다 — 에이전트에게 "이 폴더의 SKILL.md부터 읽어"라고 합니다. 그래야 여백·간격·페이지 나눔 규칙을 지켜서 만듭니다.
• ② 만들 것을 말로 설명한다 — 내용과 원하는 형태를 자연어로 전달합니다.
• ③ 에이전트가 HTML 작성 → 크롬으로 PDF 변환 → 화면에 미리보기까지 자동으로 처리합니다.
• ④ 결과를 보고 고칠 곳을 말한다 — 마음에 안 드는 부분을 그대로 말로 지시하면 다시 다듬어 줍니다.

처음 시킬 때

결과를 보고 다듬을 때

느낌으로도 되지만, 숫자로 말하면 더 정밀합니다

코드 용어를 몰라도 됩니다. "무엇을, 어떤 느낌으로, 몇 장에"만 말해도 에이전트가 알아서 만들어 줍니다. 다만 디자인을 "느낌"으로만 전달하면(예: "간격이 좁아 보여") 결과가 그때그때 들쭉날쭉할 수 있습니다. 더 정밀하게 맞추고 싶다면, 양식의 각 요소를 이름과 숫자로 짚어 주는 편이 훨씬 정확합니다.

숫자를 모를 때는 어렵지 않습니다. 먼저 에이전트에게 "각 요소가 지금 몇 px인지 알려줘"라고 물어본 뒤, 돌려받은 숫자를 기준으로 "이걸 이 값으로 바꿔줘"라고 지시하면 됩니다.

3. A4 PDF가 만들어지는 원리

원리를 알면 에이전트에게 더 정확히 시킬 수 있습니다. 일반 웹페이지는 아래로 끝없이 스크롤되지만, 이력서·계약서는 A4 한 장(가로 210mm, 세로 297mm) 안에서 레이아웃이 딱 맞아야 합니다. 그래서 이 도구는 '한 장씩 끊어지는 종이(하드 페이지)' 방식으로 동작합니다.

① 종이 틀은 a4-base.css가 고정

a4-base.css 파일이 종이 크기·여백·페이지 나눔 같은 '종이의 틀'을 잡아 줍니다. 덕분에 에이전트는 종이 규격을 매번 다시 계산하지 않고, 종이 안에 담길 내용과 디자인에만 집중합니다.

② 변환은 구글 크롬이 담당

완성된 HTML은 convert.py가 구글 크롬을 화면 없이(headless) 실행해 '인쇄하기 → PDF로 저장'을 자동으로 눌러 주는 방식으로 변환합니다. 별도 변환 프로그램(weasyprint 등)이 필요 없는 이유가 이것입니다. 에이전트가 대신 실행하지만, 명령 자체는 이렇게 단순합니다.

③ 에이전트가 지키는 조판 규칙

스킬의 SKILL.md에는 문서를 전문가가 만든 것처럼 보이게 하는 규칙들이 정리돼 있습니다. 핵심만 추리면 이렇습니다.

• 간격은 4의 배수로: 8, 12, 16, 24, 32px처럼 4의 배수만 씁니다. 9, 13px 같은 어중간한 값은 정밀도를 떨어뜨립니다.
• 여러 칸은 1fr로 균등 분할: 표나 카드를 가로로 놓을 때 CSS Grid의 repeat(N, 1fr)로 컴퓨터가 폭을 균등하게 나눕니다.
• 페이지는 분량으로 나눈다: 내용이 한 장을 넘치면 여백을 줄이지 말고 내용 분량과 페이지 분배로 조정합니다.
• 인라인 스타일 금지: 태그 안에 style="..."을 직접 넣지 않고, 모든 디자인 규칙을 <style> 한곳에 모읍니다. 나중에 수정·추적이 쉬워집니다.

4. 바닐라 슬라이드의 원리

바닐라 프리젠테이션(Vanilla Presentation)은 파워포인트 없이, 순수 HTML·CSS·JS만으로 16:9 화면(1280px × 720px) 슬라이드 쇼를 만드는 방식입니다. 크롬 같은 브라우저만 있으면 바로 띄울 수 있고, 화면 전환 모션이 매끄럽습니다.

① 손코딩이 아니라 'JSON 스펙 → 자동 조립'

이 슬라이드는 <div>를 일일이 손으로 짜는 게 아닙니다. 먼저 슬라이드 구조를 JSON 스펙(슬라이드별 제목·메시지·구성요소)으로 잡고, build.py가 그 스펙을 읽어 HTML로 자동 조립합니다. 디자인은 테마 CSS가 통째로 담당해서, 빌드할 때 -t 옵션으로 테마를 고릅니다.

• minimal-tech-hero — 밝은 미니멀 SaaS·AI 랜딩 느낌 (기본값)
• flat-serif — 명조 제목 + 플랫 편집 디자인, 인디고 포인트

② 슬라이드를 잘 만드는 원칙

• 시각 위주, 설명은 말로: 슬라이드에는 표·다이어그램·이미지를 담고, 자세한 설명은 발표자의 말로 합니다.
• 한 장에 컴포넌트 최대 2개: 욕심내 많이 넣지 않습니다. 넘치면 슬라이드를 나눕니다.
• 텍스트는 한 문장으로: 대주제·소주제만 줄바꿈 없이 짧게 적습니다.
• 이동은 방향키: 다음은 오른쪽 방향키(→)나 [Space], 이전은 왼쪽 방향키(←)입니다.

5. 자주 막히는 곳

처음 쓸 때 마주치기 쉬운 상황과 해결 방향입니다. 대부분은 에이전트에게 증상을 그대로 말하면 고쳐 줍니다.

6. 한눈에 보는 요약 비교표

A4 PDF 출력과 바닐라 슬라이드의 차이를 정리하면 다음과 같습니다.