분리형 Reveal.js 프레젠테이션

스타일, 설정, 콘텐츠가 완전히 분리된 reveal.js 기반 프레젠테이션 템플릿입니다.

📁 프로젝트 구조

├── index.html              # 메인 HTML 파일
├── css/
│   └── style.css          # 커스텀 스타일
├── js/
│   ├── slide-loader.js    # 슬라이드 로더
│   └── config.js          # Reveal.js 설정
├── slides/                # 개별 슬라이드 파일들
│   ├── 01-title.html
│   ├── 02-outline.html
│   ├── 03-introduction.html
│   ├── 04-content.html
│   ├── 05-code-example.html
│   ├── 06-image-example.html
│   ├── 07-two-columns.html
│   └── 08-conclusion.html
└── README.md              # 이 파일

🚀 사용법

1. 기본 실행

# 웹 서버로 실행 (권장)
python -m http.server 8000
# 또는
npx serve .

# 브라우저에서 열기
open http://localhost:8000

2. 단일 파일로 실행

브라우저에서 index.html을 직접 열 수도 있지만, CORS 정책으로 인해 슬라이드 로딩이 제한될 수 있습니다.

✨ 주요 기능

🎯 git-use-guide에서 마이그레이션된 고급 기능들

• Mermaid.js 다이어그램 지원: 플로차트, 시퀀스, Git그래프 등
• 파일명 표시 & 복사: 우측 상단에 현재 슬라이드 파일명 표시 및 클릭 복사
• 프로젝터 최적화: 1024x768 해상도 + 압축 클래스 (.compact, .ultra-compact 등)
• Tailwind CSS v4: 최신 유틸리티-퍼스트 CSS 프레임워크
• 고급 이벤트 시스템: 동기화된 슬라이드 로딩 및 초기화

완전한 분리 구조

• HTML: 기본 구조만 포함
• CSS: 모든 스타일링 분리 + 프로젝터 최적화 클래스
• JavaScript: 설정과 로직 분리 + Mermaid 렌더링
• 슬라이드: 각 슬라이드를 개별 파일로 관리

동적 슬라이드 로딩

• 개별 슬라이드 파일을 자동으로 로드
• 파일이 없으면 오류 슬라이드 표시
• 슬라이드 순서는 js/slide-loader.js에서 관리
• NEW: 파일명 데이터 속성 자동 추가

반응형 디자인

• 모바일/태블릿/데스크톱 지원
• 다크 모드 자동 감지
• 한국어 폰트 최적화
• NEW: 프로젝터 환경 특화 최적화 (1024x768)

🎨 커스터마이징

테마 변경

index.html 파일에서 테마를 쉽게 변경할 수 있습니다:

1. 현재 활성화된 테마 라인을 주석 처리:

<!-- <link rel="stylesheet" href="...dist/theme/white.css" id="theme"> -->

2. 원하는 테마의 주석을 해제:

<link rel="stylesheet" href="...dist/theme/black.css" id="theme">

사용 가능한 테마:

• white: 밝은 배경, 검은 텍스트 (기본값)
• black: 어두운 배경, 흰 텍스트
• league: 회색 배경, 흰 텍스트
• beige: 베이지 배경, 갈색 텍스트
• night: 검은 배경, 두꺼운 흰 텍스트
• serif: 브라운 배경, 세리프 폰트
• simple: 흰 배경, 검은 텍스트, 간단한 디자인
• solarized: Solarized 색상 테마
• moon: 블루 배경, 두꺼운 산세리프 텍스트
• dracula: Dracula 색상 테마
• sky: 블루 그라데이션 배경
• blood: 다크 배경, 빨간 포인트

새 슬라이드 추가

1. slides/ 폴더에 새 HTML 파일 생성
2. js/slide-loader.js의 slideFiles 배열에 파일 경로 추가

this.slideFiles = [
    'slides/01-title.html',
    'slides/02-outline.html',
    // 여기에 새 슬라이드 추가
    'slides/09-new-slide.html'
];

스타일 수정

css/style.css 파일을 편집하여 디자인 변경:

• 색상 테마
• 폰트 설정
• 레이아웃
• 애니메이션

설정 변경

js/config.js 파일에서 Reveal.js 설정 수정:

• 전환 효과
• 키보드 단축키
• 플러그인 설정

⌨️ 키보드 단축키

기본 단축키

• → ↓ Space: 다음 슬라이드
• ← ↑: 이전 슬라이드
• Esc: 슬라이드 개요
• F: 전체화면

커스텀 단축키

• H: 첫 번째 슬라이드로 이동
• E: 마지막 슬라이드로 이동
• 우측 상단 파일명 클릭: 파일명 클립보드 복사

📄 PDF 출력

URL에 ?print-pdf를 추가하고 브라우저의 인쇄 기능 사용:

http://localhost:8000/?print-pdf

🔧 고급 기능

유틸리티 함수

JavaScript 콘솔에서 사용 가능:

// 현재 슬라이드 정보
PresentationUtils.getCurrentSlideInfo();

// 특정 슬라이드로 이동
PresentationUtils.goToSlide(3);

// 전체화면 토글
PresentationUtils.toggleFullscreen();

// PDF 출력 페이지 열기
PresentationUtils.openPrintVersion();

슬라이드 템플릿

기본 슬라이드

<section>
    <h2>제목</h2>
    <p>내용</p>
</section>

중앙 정렬 슬라이드

<section class="center">
    <h1>제목</h1>
    <p>내용</p>
</section>

수직 슬라이드 그룹

<section>
    <section>
        <h2>메인 슬라이드</h2>
    </section>
    <section>
        <h3>서브 슬라이드</h3>
    </section>
</section>

두 컬럼 레이아웃

<section>
    <div class="two-columns">
        <div class="column">
            <h3>왼쪽</h3>
        </div>
        <div class="column">
            <h3>오른쪽</h3>
        </div>
    </div>
</section>

🎨 CSS 클래스

레이아웃

• .center: 중앙 정렬
• .two-columns: 두 컬럼 레이아웃
• .column: 컬럼 항목

스타일

• .highlight: 하이라이트 배경
• .important: 중요 텍스트 (빨간색)
• .success: 성공 텍스트 (초록색)
• .btn: 버튼 스타일

애니메이션

• .fade-in: 페이드인 효과

특별한 슬라이드

• .slide-intro: 소개 슬라이드 (그라데이션)
• .slide-outro: 결론 슬라이드 (그라데이션)
• .slide-section: 섹션 슬라이드 (그라데이션)

🆕 새로 추가된 고급 기능들

📊 Mermaid.js 다이어그램 지원

슬라이드에 다이어그램을 쉽게 추가할 수 있습니다:

<div class="mermaid">
flowchart TD
    A[시작] --> B{조건 확인}
    B -->|예| C[작업 실행]
    B -->|아니오| D[완료]
</div>

지원하는 다이어그램 타입:

• 플로차트 (flowchart)
• 시퀀스 다이어그램 (sequenceDiagram)
• Git 그래프 (gitgraph)
• 클래스 다이어그램 (classDiagram)
• 간트 차트 (gantt)

🎨 Tailwind CSS v4 유틸리티

최신 Tailwind CSS로 빠르고 유연한 스타일링:

<!-- 색상 박스 -->
<div class="bg-green-100 border-l-4 border-green-500 p-4 rounded">
    <p class="text-green-700 font-medium">성공 메시지</p>
</div>

<!-- 그리드 레이아웃 -->
<div class="grid grid-cols-2 gap-6">
    <div>왼쪽 컬럼</div>
    <div>오른쪽 컬럼</div>
</div>

<!-- 인터랙티브 버튼 -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    클릭하세요
</button>

📁 파일명 표시 & 복사

• 우측 상단에 현재 슬라이드의 파일명 표시
• 파일명 클릭 시 클립보드로 자동 복사
• 개발/디버깅 시 매우 유용

🖥️ 프로젝터 최적화 클래스

프로젝터 환경에서 최적의 가독성을 위한 압축 클래스들:

<!-- 80% 크기 -->
<div class="small-content">내용이 많을 때 사용</div>

<!-- 65% 크기 + 좁은 간격 -->
<div class="compact">매우 많은 내용을 한 화면에</div>

<!-- 50% 크기 + 극소 간격 -->
<div class="ultra-compact">최대한 많은 내용을 압축</div>

📦 종속성

모든 종속성은 CDN을 통해 로드됩니다:

• Reveal.js (최신 버전) - 프레젠테이션 엔진
• Mermaid.js (최신 버전) - 다이어그램 렌더링
• Tailwind CSS v4 - 유틸리티-퍼스트 CSS 프레임워크
• Noto Sans KR - 한국어 폰트
• Highlight.js - 코드 하이라이팅

🌐 브라우저 지원

• Chrome/Edge 80+
• Firefox 75+
• Safari 13+
• 모바일 브라우저 지원

📝 라이선스

이 템플릿은 자유롭게 사용, 수정, 배포할 수 있습니다.