+
+
+
+
+
+
+
+
+ 
+ 
+ 함수랑산악회
+
+
+
+ 함수랑산악회
+ 함수랑 슬라이드
+
+ 함수랑산악회
+ Hamsurang Brand HTML Presentation Generator +
+ + Hamsurang Brand HTML Presentation Generator +
+
+
+
+
+
+
+
+ 슬라이드 유형 목차
+
+
+ 1Title오프닝
+ 2Closing클로징
+ 3Agenda목차 (지금 이 슬라이드)
+ 4Section Divider섹션 구분
+ 5Key Point핵심 메시지
+ 6Quote인용문
+ 7Comparison비교 분석
+ 8Flow단계별 흐름
+ 9Card Grid카드 그리드
+ 10Content본문 내용
+ 11Code코드 블록
+ 12Architecture시스템 구조
+ 13Timetable타임테이블
+ 14Timeline타임라인
+
+
+
+
+ Core 4 슬라이드
+모든 발표의 뼈대를 구성하는 4가지 기본 슬라이드 유형
+
+
+
+
+ 14가지 슬라이드 유형
+ Light & Dark 테마 · 발표자 노트 · 풀스크린 지원
단일 HTML 파일로 완성되는 함수랑 브랜드 발표
+
+
+
+ 인용문 슬라이드
+
+
+
+
+ "산을 오르는 것처럼,
좋은 발표는 한 걸음씩 쌓인다."
— 함수랑산악회
+
+
+
+
+ Flexible 10 슬라이드
+내용과 목적에 따라 선택하는 10가지 유연한 슬라이드 유형
+
+
+
+
+ 비교 슬라이드 — 일반 도구 vs 함수랑 슬라이드
+
+
+
+
+ 일반 발표 도구
+ -
+
- PowerPoint / Keynote 의존 +
- 수동 디자인 작업 필요 +
- 브랜드 색상 매번 설정 +
- 파일 전송 및 버전 관리 번거로움 +
+
+ 함수랑 슬라이드
+ -
+
- 단일 HTML 파일 브라우저 실행 +
- AI 자동 콘텐츠 생성 +
- 함수랑 브랜드 자동 적용 +
- 링크 공유 또는 PDF 인쇄 +
+
+
+
+ 발표 제작 흐름
+
+
+
+ STEP 1
+
+ 주제 입력
+주제 & 시간 전달
+→
+
+ STEP 2
+
+ 아웃라인 확인
+슬라이드 구성 검토
+→
+
+ STEP 3
+
+ 테마 선택
+Light / Dark
+→
+
+ STEP 4
+
+ HTML 생성
+브라우저에서 실행
+
+
+
+
+ 핵심 기능
+
+
+
+ 🎨
+
+ Soft Modern 디자인
+함수랑산악회 브랜드 아이덴티티가 담긴 그린 팔레트 디자인 시스템
+
+ 🌓
+
+ Light & Dark 테마
+밝고 개방적인 라이트, 몰입감 있는 다크 — 상황에 맞게 선택
+
+ 💻
+
+ 코드 하이라이팅
+highlight.js 기반 4색 구문 강조 — 개발 발표에 최적화
+
+ 🏔️
+
+ 산 일러스트
+함수랑산악회 상징, Title & Closing 슬라이드에 자동 삽입
+
+
+
+
+ 키보드 단축키
+-
+
- → / Space — 다음 슬라이드 +
- ← — 이전 슬라이드 +
- F — 풀스크린 토글 +
- S — 발표자 노트 팝업 열기 +
- Escape — 풀스크린 종료 +
- Ctrl+P — PDF로 인쇄 / 저장 +
+
+
+
+ 슬라이드 HTML 구조
+<!-- 슬라이드 기본 구조 -->
+<div class="slide slide--content"
+ data-notes="발표자 노트 내용 [2 min]">
+
+ <h2>슬라이드 제목</h2>
+
+ <ul>
+ <li class="a">핵심 내용 1</li>
+ <li class="a">핵심 내용 2</li>
+ <li class="a">핵심 내용 3</li>
+ </ul>
+
+</div>+ 모든 슬라이드는 단일 HTML 파일 · 브라우저에서 즉시 실행 +
+
+
+
+
+ 참조 아키텍처
+
+flowchart LR
+ A[사용자 요청] -->|주제·시간| B[Claude AI]
+ B -->|슬라이드 아웃라인| C{확인·수정}
+ C -->|승인| D[테마 선택]
+ D --> E[HTML 생성기]
+ E -->|단일 파일| F[🌐 브라우저]
+ subgraph refs[참조 파일]
+ R1[generation-rules.md
CSS SSOT] + R2[slide-catalog.md
14종 구조] + R3[html-spec.md
JS · CDN] + end + E --> refs +
+ CSS SSOT] + R2[slide-catalog.md
14종 구조] + R3[html-spec.md
JS · CDN] + end + E --> refs +
+
+
+
+
+
+
+ 발표 타임테이블 예시 (10분)
+| 시간 | +섹션 | +슬라이드 유형 | +비고 | +
|---|---|---|---|
| 00:00 – 01:00 | +오프닝 | +Title · Agenda | +간단 자기소개 | +
| 01:00 – 04:00 | +Core 4 소개 | +Section Divider · Key Point · Quote | +핵심 유형 시연 | +
| 04:00 – 08:00 | +Flexible 10 소개 | +Comparison · Flow · Card Grid · Code · Architecture | +실사용 예시 포함 | +
| 08:00 – 09:30 | +실시간 데모 | +Timetable · Timeline | +라이브 생성 시연 | +
| 09:30 – 10:00 | +마무리 | +Closing | +함바! ⛰️ | +
+
+
+
+ 함수랑 슬라이드 발전사
+
+
+
+ 2024.01
+
+
+
+ 프로젝트 시작
+Core 4종 슬라이드 구현 (Title, Closing, Agenda, Section Divider)
+
+ 2024.04
+
+
+
+ Flexible 10종 추가
+Key Point, Quote, Comparison, Flow, Card Grid 등 10종 확장
+
+ 2024.07
+
+
+
+ highlight.js & mermaid.js 연동
+코드 하이라이팅 4색 테마 및 다이어그램 지원 완성
+
+ 2024.10
+
+
+
+ Light / Dark 이중 테마 완성
+CSS 변수 기반 완전한 테마 시스템 및 인쇄 지원
+
+ 2025.01
+
+
+
+ 함수랑 플러그인 Kit 정식 출시
+Claude Code 플러그인으로 통합, hamsurang-slide 스킬 공개
+
+
+
+
+
+
+
+
+
+ 함수랑과 함께
+
+
+ 함수랑 슬라이드로 브랜드 일관성 있는 발표를 만들어보세요.
+14가지 슬라이드 유형 · Light & Dark 테마 · 단일 HTML 파일
+함바! ⛰️
+
+
+
+
+ 1 / 15
+