INTRO

프레젠테이션 자동화 에이전트 개발

김은주 · 개인 프로젝트

PROBLEM

PPT 한 장에 몇 시간이 사라져요

템플릿 고르고 · 색 맞추고 · 아이콘 찾고 · 줄간격 다듬고…
매번 같은 작업을 처음부터 반복합니다

SOLUTION

"발표자료 만들어줘" 한 줄이면 됩니다.

Claude Code 가 HTML 두 파일을 생성합니다 — 청중용 슬라이드 + 발표자용 스크립트. 브라우저만 있으면 어디서든 발표 가능.

OVERVIEW

상황에 따라 골라 쓸 수 있게 여러 가지 버전을 개발했어요.

그중에서도 미니멀한 디자인에 드릴다운 기능을 더한 버전을 소개합니다.

01 · FEATURES

주요 기능들을 하나씩 짚어볼까요?

심플한 디자인 뒤에 특별한 기능이 있어요

MINIMALISM

불필요한 요소를 덜어내었습니다.

한 화면에 한 메시지, 타이포그래피와 여백으로 승부합니다.

DRILLDOWN

상세는 ↓ 아래로 감추자

메인 슬라이드는 깔끔하게 · 추가 설명은 드릴다운

↓ 상세 · 2

WHY

왜 2계층으로 가게 됐을까?

메인 슬라이드에 모든 정보를 쌓으면 청중이 압도됩니다. 핵심 메시지는 크게 · 상세는 ↓ 아래로 숨겨두고 필요할 때 꺼내 쓰는 reveal.js 방식에서 영감을 받았어요.

FEEDBACK

"이게 진짜 필요했어"

Q&A 답변 · 설명 보충 · 계산 근거 같이 "준비는 해뒀는데 메인에 넣긴 부담스러운 것" 을 깔끔하게 처리할 수 있게 돼서 동료들이 바로 써봤다고 해요.

02 · PRESENTER

발표자를 위한 기능도 세심하게 담았습니다.

완벽한 피티를 위한 가이드

LIVE SYNC

BroadcastChannel로 두 탭 연결

발표자 조작 화면 → 청중 화면 실시간 동기화

OFFLINE

폰트도 HTML 안에 탑재했어요.

오프라인 환경에서도 구동 가능해요.

DESIGN SYSTEM

5가지 드릴다운 디자인 풀을 구성했어요.

키보드 ↓ 를 눌러 5개를 차례로 보세요

↓ 상세 · 5

EDITORIAL

기본 · 좌측 코랄 바 들여쓰기

차분한 에디토리얼 톤. 대부분의 상세 설명에 적합한 기본값입니다.

STICKY NOTE

포스트잇 · 기울어진 노란 카드

개인 메모·피드백·캐주얼한 코멘트에 잘 어울립니다. 1.5° 기울기와 부드러운 그림자.

INDEX CARD

큐카드 · 흰 카드 + 상단 코랄 띠

정리된 팁 · 공식 Q&A 답변에 맞는 프로페셔널 톤. 또렷한 그림자로 부각.

NOTEBOOK

공책 페이지 · 파란 줄 + 빨간 여백선

계산 메모·브레인스토밍·노트 필기 느낌. 친근하고 손으로 적어둔 듯한 뉘앙스.

MARGIN NOTE

각주 · 우상단 작은 카드

A-슬라이드가 뒤에 남은 상태로 한 마디 덧붙일 때. 맥락을 잃지 않고 보충할 수 있어요.

THANK YOU

준비한 이야기는 여기까지

질문은 언제든 환영이에요.