Markdown을 슬라이드로 변환
README를 작성하듯이 프레젠테이션을 만드세요. Markdown 제목, 글머리 기호 목록, 코드 블록을 --- 가로줄로 슬라이드마다 구분하면 됩니다. 이 도구는 Reveal.js로 데크를 실시간 렌더링하며(테마: 검정, 흰색, 심플, solarized), Note:로 발표자 노트를, --로 중첩된 세로 슬라이드를 지원하고, 독립 실행형 HTML 파일이나 인쇄용 PDF로 내보낼 수 있습니다.
Markdown이 슬라이드 데크가 되는 방식
-
1
Markdown 작성
`---`로 슬라이드를 구분하세요. 표준 제목, 목록, 코드 블록은 평소와 동일하게 작동합니다.
-
2
발표자 노트 추가
단락 앞에 `Note:`를 붙이세요: 발표자 모드에서만 표시됩니다.
-
3
데크 미리보기
실시간 미리보기에서 방향키로 데크를 탐색하며 확인할 수 있습니다.
-
4
테마 선택
검정, 흰색, league, sky, 심플, solarized: 어떤 Reveal.js 테마든 사용할 수 있습니다.
-
5
내보내기
독립 실행형 HTML 파일 또는 브라우저 인쇄를 통한 PDF.
슬라이드 문법
# 첫 슬라이드
부제 텍스트
---
## 두 번째 슬라이드
- 항목 하나
- 항목 둘
- 항목 셋
Note: 발표자 모드에서만 보이는 발표자 노트입니다.
---
## 코드 슬라이드
\`\`\`python
def hello(name):
return f"Hi {name}"
\`\`\`
---(별도 줄에 하이픈 세 개)는 새로운 가로 슬라이드를 시작합니다.--(하이픈 두 개)는 현재 슬라이드 열 안에서 세로 슬라이드를 시작합니다, 아래 방향키를 누르면 내려갑니다.- 단락 첫머리의
Note:는 발표자 노트가 됩니다.
키보드 탐색
| 키 | 동작 |
|---|---|
| 오른쪽 / 스페이스 | 다음 슬라이드 |
| 왼쪽 | 이전 슬라이드 |
| 아래 / 위 | 세로 스택 탐색 |
s |
발표자 보기 열기 |
o |
슬라이드 개요 |
f |
전체 화면 |
? |
도움말 대화상자 |
레이아웃 팁
- 2단 레이아웃: 슬라이드 안에서 원시 HTML을 사용하세요,
<div class="columns">...</div>. - 프래그먼트 표시: Reveal.js를 직접 사용할 때 글머리 기호 목록이
{.fragment}속성으로 하나씩 애니메이션 표시됩니다. 필요하면 원시 HTML로 추가하세요. - 배경 이미지: 슬라이드 수준 속성
<!-- .slide: data-background="url" -->로 전체 화면 배경을 설정합니다. - 슬라이드 간 자동 애니메이션: Reveal 4는 일치하는 요소 사이의 부드러운 전환을 지원합니다, 테마 설정에서 켜세요.
PDF로 내보내기
실시간 미리보기에서 브라우저 주소에 ?print-pdf를 열고 브라우저의 인쇄 대화상자를 사용하세요. A4 가로, 배경 그래픽 켜기, 여백 최소로 선택합니다. Reveal.js는 페이지당 슬라이드 한 장을 출력하며, 선택 시 추가 페이지에 발표자 노트를 표시합니다.
Markdown 기반 슬라이드가 빛나는 경우
- 코드 예제가 많은 기술 발표.
- 레이아웃이 부차적이고 콘텐츠를 우선하는 데크.
- 문서를 그대로 슬라이드로, 프레젠테이션을 프로젝트 README 옆에 두고 git으로 관리.
- 버전 관리되는 교육 자료.
적합하지 않은 경우
- 이미지 배치를 정밀하게 다루는 디자인 중심의 키노트.
- 복잡한 애니메이션이나 임베드 영상 타이밍이 필요한 슬라이드.
- 템플릿이 모든 세부 사항을 규정하는 브랜드 관리 데크.
자주 묻는 질문
네, 일반적인 Markdown 이미지 문법이 그대로 작동합니다. 내보낸 HTML에서 접근할 수 있도록 절대 URL을 사용하거나 이미지를 먼저 업로드하세요.
네, 선택적으로 유지됩니다. Reveal 인쇄 모드는 “노트를 별도 페이지로” 기능을 지원해, 각 슬라이드가 두 개의 PDF 페이지가 됩니다. 하나는 슬라이드, 다른 하나는 노트입니다.
아니요. 렌더링은 브라우저 안에서 로컬로 이루어집니다. Markdown 소스와 내보낸 HTML은 결코 사용자의 기기를 벗어나지 않습니다.
네. Markdown 상단에 <style> 블록을 추가하거나 테마 설정에서 외부 스타일시트를 연결하세요. 해당 내용이 Reveal.js 출력에 삽입됩니다.
내보낸 HTML은 GitHub Pages, Netlify, S3 등 어떤 정적 호스트에서도 실행되는 독립 실행형 파일입니다. HTML을 업로드하기만 하면 됩니다.
관련 도구
ASCII 표 참조
NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.
HTML 문자 참조
HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.
키보드 단축키 참고표
macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.
보색 찾기
어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.
색상 틴트 생성기
기준 색의 밝은 틴트를 생성합니다. 디자인 시스템 토큰, 배경, 호버 상태를 위한 3-20단계 스케일.
이메일 검증기
이메일 주소를 검증합니다. RFC 5322 구문 검사, 실시간 MX 레코드 조회, 그리고 로컬 파트, 도메인, 길이 정보를 제공합니다. 이메일은 전송되지 않습니다.
이 도구는 다른 언어로도 제공됩니다
- Markdown をスライドに変換 [JA]
- Markdown para Apresentações [PT]
- تحويل ماركداون إلى شرائح عرض [AR]
- Markdown till bildspel [SV]
- Markdown vers Diapositives [FR]
- Markdown zu Folien [DE]
- Markdown ke Slide [ID]
- แปลง Markdown เป็นสไลด์ [TH]
- Markdown sang Slide [VI]
- Markdown a Presentaciones [ES]
- Markdown naar slides [NL]
- Markdown na slajdy [PL]
- Markdown в слайды [RU]
- Markdown'dan Slaytlara [TR]
- 将 Markdown 转换为幻灯片 [ZH]
- Markdown to Slides [EN]
- Markdown in Diapositive [IT]