1부. Marp로 프레젠테이션 만들기 - 마크다운으로 시작하는 간편한 발표 제작

 

Marp로 프레젠테이션 만들기 - 마크다운으로 시작하는 간편한 발표 제작

 

Marp 시리즈 1부입니다. 다음 연재는 여기에서 확인하실 수 있습니다:

• Marp - 마크다운으로 프레젠테이션 만들기
• 창의력을 발휘하는 Marp 프레젠테이션 커스터마이징

---

Marp 소개

Marp는 마크다운을 사용하여 멋진 슬라이드 덱을 손쉽게 제작할 수 있도록 돕는 강력하고 사용자 친화적인 프레젠테이션 프레임워크입니다. 이 블로그에서는 Marp가 무엇인지, 사용하는 이유, 시작하는 방법, 그리고 GitHub Actions를 통해 GitHub Pages에 자동으로 발표 자료를 호스팅하는 과정까지 함께 알아보겠습니다.

---

Marp란?

Marp는 오픈 소스 프레젠테이션 프레임워크로, 마크다운의 간단함과 유연함을 활용해 커스터마이징이 가능한 아름다운 슬라이드 덱을 쉽게 만들 수 있도록 돕습니다. Marp를 사용하면 복잡한 포맷팅과 디자인 고민 없이 콘텐츠와 메시지에 집중할 수 있습니다. CLI와 VS Code 확장 기능이 제공되며, HTML, PDF, PowerPoint 등 다양한 형식으로 발표 자료를 내보낼 수 있습니다.

---

Marp를 사용해야 하는 이유

Marp를 선택할 만한 이유는 다음과 같습니다.

1. 간편함: 직관적인 마크다운 문법으로 텍스트만 입력하면 발표 자료를 작성할 수 있어 사용이 쉽습니다.
2. 콘텐츠 중심: 복잡한 디자인에 신경 쓸 필요 없이 메시지와 내용 전달에 집중할 수 있습니다.
3. 커스터마이징 가능: 다양한 커스터마이징 옵션으로 자신의 스타일에 맞는 발표 자료를 만들 수 있습니다.
4. VS Code 통합: Visual Studio Code와 원활하게 통합되어 실시간 미리보기를 지원, 편리한 작성이 가능합니다.
5. 다양한 내보내기 옵션: HTML, PDF, PowerPoint 등으로 발표 자료를 내보낼 수 있습니다.

---

Marp로 작업하기

Marp를 사용하는 가장 편리한 방법은 VS Code용 Marp 확장을 사용하는 것입니다. 이 확장은 VS Code에서 프레젠테이션을 실시간으로 미리 볼 수 있어 작성 과정이 매우 원활합니다.

시작하기

VS Code에서 Marp 확장을 설치하고 새 마크다운 파일을 열어 슬라이드를 작성할 수 있습니다. 아래는 예시입니다.

---
marp: true
---

# 나의 발표 자료

---

## 슬라이드 1

- 항목 1
- 항목 2
- 항목 3

---

## 슬라이드 2

![이미지](https://picsum.photos/800/600)

---

## 슬라이드 3

> 이건 인용입니다.

---

## 슬라이드 4

| 열 1 | 열 2 |
|------|------|
| 항목 1 | 항목 2 |
| 항목 3 | 항목 4 |

이와 같이 작성한 후, 실시간 미리보기로 발표 자료의 결과를 확인할 수 있습니다.

---

공식 테마와 리소스

Marp는 몇 가지 기본 테마를 제공하며, 이를 기반으로 맞춤 테마를 제작하거나 영감을 얻을 수 있습니다. Marp 사이트에서 이미지 크기 조정과 위치 설정에 관한 문서도 확인할 수 있어, 더욱 효과적인 커스터마이징이 가능합니다.

---

GitHub Pages와 Marp

저는 발표 자료마다 GitHub 저장소를 생성하여, 각 발표 자료의 슬라이드를 별도의 폴더에 저장하고 있습니다. GitHub Pages를 이용해 HTML 파일을 호스팅하여 공유할 수 있으며, GitHub Actions 워크플로우를 통해 슬라이드 폴더에 변경 사항을 푸시할 때마다 자동으로 발표 자료를 빌드하고 GitHub Pages에 게시할 수 있습니다.

GitHub Actions 워크플로우 예시

name: Deploy marp site to Pages

on:
  push:
    branches: ['main']
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: 'pages'
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Copy images
        run: mkdir build && cp -R slides/img build/img

      - name: Marp Build (README)
        uses: docker://marpteam/marp-cli:v1.7.0
        with:
          args: slides/Slides.md -o build/index.html --html
        env:
          MARP_USER: root:root
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: 'build'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

---

Marp 템플릿

저는 GitHub Pages 및 Actions 워크플로우가 포함된 Marp 슬라이드 템플릿을 만들어 공유하고 있습니다. 이 템플릿을 이용하면 Marp 프레젠테이션을 쉽게 만들고 GitHub Pages에 게시할 수 있습니다. Marp 확장을 이용해 실시간으로 미리보기 하면서 발표 자료를 수정하고, GitHub Pages를 통해 웹에서 바로 공유할 수 있습니다.

---

결론

Marp는 사용이 간편하고 강력한 프레젠테이션 프레임워크로, 마크다운의 간단함과 다양한 커스터마이징 옵션을 통해 발표 자료 제작을 더욱 수월하게 만듭니다. VS Code와의 통합 및 다양한 내보내기 기능을 제공하여, 발표 자료 제작에 필요한 모든 요소를 지원합니다. 공식 문서와 저장소를 확인하여 오늘부터 Marp로 발표 자료를 만들어 보세요!

---

이렇게 작성하면 블로그 형식으로 이해하기 쉽고, Marp에 대한 유용한 정보를 제공할 수 있습니다.

 

 

발췌

 

https://chris-ayers.com/2023/03/26/marp-create-presentations-with-markdown

Marp - Create Presentations with Markdown