안녕하세요, 김은주입니다.
오늘 소개해드릴 건 제 개인 프로젝트 — 프레젠테이션 자동화 에이전트예요.
(화면의 말풍선 · 스파클 그려지는 모션을 함께 보며)지금 이 슬라이드도 제가 만든 시스템으로 생성된 HTML 한 장입니다.
시작은 단순했어요. PPT 한 장에 너무 많은 시간을 쓰고 있었거든요.
템플릿 고르고 색 맞추고 아이콘 찾고… 매번 처음부터 반복.
[2초]너무 비효율적이라고 느꼈어요.
그래서 생각했어요. "발표자료 만들어줘" 한 줄이면 끝나야 하지 않을까?
Claude Code 스킬로 정의해서, 자연어 한 줄이면 청중용 HTML + 발표자용 HTML 두 파일이 자동으로.
PowerPoint 없어도 브라우저만 있으면 됩니다.
하나로 모든 발표를 커버하기 어려워서 상황에 맞게 여러 버전을 만들었어요.
그중 오늘 보여드릴 건 미니멀 디자인에 드릴다운 기능을 더한 버전입니다.
(다음 슬라이드부터 이 버전의 특징을 하나씩)이제 주요 기능을 하나씩 짚어볼게요.
심플한 디자인 뒤에 숨겨진 특별한 기능이 있어요.
첫 번째, 덜어내기입니다.
단 6개 클래스만 써요 — head-lg, head, caption, blue, illust, sub.
한 화면 = 한 메시지. 타이포그래피와 여백으로만 승부합니다.
두 번째 — 드릴다운.
메인 슬라이드는 깔끔하게. ↓ 키를 누르면 상세 내용이 아래에서 올라옵니다.
(↓ 키를 눌러 B-슬라이드 두 개 차례로 보여주기)Q&A 나올 때 쓸 답변, 설명 보충, 계산 근거 — 이런 것들이 항상 고민이었어요.
메인에 넣으면 무거워지고, 빼자니 준비한 게 아까운 정보들.
그래서 숨겨놓고 필요할 때만 꺼내쓰는 구조로. reveal.js 의 수직 슬라이드에서 영감 받았어요.
이 기능 만들고 동료한테 보여줬는데 — "이게 진짜 필요했어" 라고 하더라고요.
발표 준비하면서 늘 갖고 있던 "이거 어디에 넣지?" 고민이 자연스럽게 풀린다고.
이제 발표자를 위한 기능으로 넘어갈게요.
완벽한 피티를 위한 가이드들을 세심하게 준비했습니다.
발표자 뷰에서 조작하면 청중 화면이 실시간 동기화됩니다.
슬라이드 이동·펜·스포트라이트까지 전부.
(↓ 로 드릴다운 디자인 풀 보여주기)두 번째 — 폰트도 HTML 안에 탑재했어요.
발표장 인터넷이 끊겨도, 이메일로 받은 사람이 열어도 똑같이 보여야 하니까.
오프라인 환경에서도 구동 가능합니다.
마지막으로 디자인 풀을 보여드릴게요.
같은 기능도 톤에 따라 5가지로 — 상황에 맞게 골라 쓸 수 있도록 만들었습니다.
(↓ 키로 5개를 차례로 보여주기 — Editorial → Sticky → Card → Notebook → Margin)첫 번째는 에디토리얼. 좌측 코랄 바에 들여쓴 본문. 기본값입니다.
매거진 사이드바 같은 차분한 톤.
두 번째 — 포스트잇. 노란 카드가 1.5° 기울어져서 붙어 있죠.
개인 메모나 캐주얼한 피드백에 잘 어울려요.
세 번째는 큐카드. 흰 카드 위에 코랄 띠, 또렷한 그림자.
공식적인 답변·정리된 팁에 맞는 프로페셔널 톤.
네 번째 — 공책 페이지. 파란 가로줄과 빨간 세로 여백선.
계산 메모나 노트 필기 같은 친근한 뉘앙스.
마지막 — 마진 메모. 우상단에 작은 카드, 메인 슬라이드는 뒤에 남아 있어요.
맥락을 잃지 않고 한 마디 덧붙일 때 쓰는 각주 스타일.
준비한 이야기는 여기까지입니다.
질문은 언제든 환영이에요.
(체크마크 + 컨페티 애니메이션 감상)고맙습니다.
[2초]