[Marp] 마크다운으로 ppt 만들기 📝 / 프리젠테이션 만들기 📊

들어가며

 개발자들의 글쓰기에 있어서 마크다운은 생명이죠.  노션, 깃허브, 슬랙, 메터모스트, 등등 많은 어플리케이션이 이미 마크다운을 자체적인 텍스트 에디팅 구조로 사용하고 있습니다. 저에게는 더더욱 그렇습니다. 저도 노션, 깃허브는 물론이고 메모용 애플리케이션도 Bear 같은 마크다운용 앱을 사용중입니다. 플레인한 텍스트로 글 깔끔하게 잘쓰는게 쉽지가 않아요 😢 제가 글재주가 있는 것도 아니고, 정해진 대로 계층구조 갖춰서 깔끔하게 쓰는게 편하고 죻죠. 지금 이 티스토리 블로그도 마크다운 기반으로 작성하기 편한 플랫폼으로 손좀 봐볼까 고민까지 하고 있는 중입니다 ㅎㅎ

 

마크다운 편 ㅡ 안

 

---

 

PPT 만들기

저 같이 마크다운 빠들에게 딱 좋은 애플리케이션이 있어서 소개드리는데요, 바로 Marp입니다.

https://marp.app/#get-started

Marp: Markdown Presentation Ecosystem

마크다운 기반으로 작성된 문서를 PPT 화 시켜줍니다.

줄 간격이라던가, 마진 등이 이미 깔끔하게 설정되어 있어서 별 생각없이 내용에 집중해서 작성하면 됩니다.

 

 

위와 같은 페이지를 아래와 같은 문법으로 작성이 가능합니다.

    ---
    theme: gaia
    _class: lead
    paginate: true
    backgroundColor: #fff
    backgroundImage: url('https://marp.app/assets/hero-background.svg')
    ---

    ![bg left:40% 80%](https://marp.app/assets/marp.svg)

    # **Marp**

    Markdown Presentation Ecosystem

    https://marp.app/

    ---

    # How to write slides

    Split pages by horizontal ruler (`---`). It's very simple! :satisfied:

    ```markdown
    # Slide 1

    foobar

    ---

    # Slide 2

    foobar
    ```

 

오픈소스로 만들어진 어플리케이션이라 누구든 무료로 이용할 수 있으며, 2022년 3월 현재 v2.3.2 까지 나와있네요.

 

https://github.com/marp-team/marp

GitHub - marp-team/marp: The entrance repository of Markdown presentation ecosystem

 

 

커스텀 스타일링

 

 

테마는 기본적으로 3가지 정도 제공이 됩니다. 마음에 드는 게 없더라도 부분적으로 직접 스타일링도 가능하고, 직접 커스텀 테마를 만들어 사용할 수도 있습니다.

 

인라인 스타일링

<style>
  :root {
    --color-fg-default: #eff;
    --color-canvas-default: #246;
    /* ... */
  }
  h1 {
  	font-size: 45px;
  }
  h2 {
    color: white;
  }
</style>

 

이런식으로 인라인 스타일 태그를 넣어줘서 스타일을 바꿀 수 있습니다. 기본적인 css 지식이 필요하겠죠?

 

 

테마

테마용 css파일을 직접 작성하는 방법입니다.

/* @theme marpit-theme */

section {
  width: 1280px;
  height: 960px;
  font-size: 40px;
  padding: 40px;
}

h1 {
  font-size: 60px;
  color: #09c;
}

h2 {
  font-size: 50px;
}

위 처럼 이런식으로 css 파일을 작성해주고, 상단에 주석으로 테마 이름을 기재합니다.

 

이후 사용할 때는 마크다운 파일 내에 테마 이름을 기재해 주시면 됩니다.

 

테마 주석을 붙여서 사용 (중간중간 슬라이드에 적용 가능)

<!-- theme: my-theme-->

 

전역 테마로 사용 (문서 상단에 기재)

---
theme: my-theme
---

 

 

 

테마용 css 파일은 cli 로도 가져올 수 있고, vscode 에서 설정을 통해 가져올 수도 있습니다.

marp --theme ./dracula/dracula.css  ./dracula/slides.md -o Dracula-1.0.0.pdf

 

 

더욱 자세한 정보는 아래 문서에서 찾아볼 수 있습니다.

 

https://marpit.marp.app/markdown

Marpit: The skinny framework for creating slide deck from Markdown

 

저는 개인적으로 Dracula 테마를 매우 좋아하는데 Dracula 팀에서 만든 Marp Theme 도 존재합니다!! 에디터도 Dracula만 씁니다 ㅎㅎ (TMI)

 

https://github.com/dracula/marp

GitHub - dracula/marp: 🧛🏻‍♂️ Dark theme for Marp

 

 

 

 

Marp For VS Code

https://marp.app/blog/marp-for-vs-code-v1

Marp for VS Code v1: IntelliSense for Marp directives | Blog | Marp

 

사실 이게 핵심입니다. VSCode 용 marp 플러그인이 있는데요, 이게 없었다면 아마 사용하기 꺼려졌을지도 모르겠네요. 작성하면서 바로바로 preview를 확인할 수 있습니다.

 

아쉽게도 웹스톰과 같은 jetbrain 기반의 에디터에는 이 플러그인이 없더군요ㅠ

 

 

이건 진짜 편해보이죠? 그냥 평범한 마크다운 문서 작성하듯이 작성하면 PPT가 만들어집니다.

 

 

Marp 의 한계

 

 사실 제가 지금까지는 좋은점만 나열해놨지만, 그래도 편한만큼 한계가 있습니다ㅜ

1. UI 프리젠테이션 툴과 달리 도형이나 오브젝트를 그려주는 기능이 없다.
2. 원하는 스타일을 가져가려면 부분적으로 css를 많이 건드려야 할 수도 있다.
3. 페이지가 늘어나게 되면, 문서 자체의 길이가 길어지다보니 수정할 때 무언가 불편하다.
4. 디테일을 살리기가 힘들다.

직접 써본 경험담으로는 평범한 페이지를 작성할때는 바로바로 만들어지고 깔끔하고 편한데, 뭔가 발표 중에 디테일을 살리려고 하다보면 오히려 시간을 더 많이 쏟게 됩니다.. css 도 직접 작성해야 되고, 지원하는 옵션인지, 이것저것 문서 찾아보는 데에 시간을 많이 잡아먹을 수도 있구요. ppt 가 국민 툴인 데에는 이유가 있는 법이죠 ㅎㅎ

 

그래도 깔끔하고 빠르게 ppt 를 만들고 싶은 분, ppt를 좀 더 가벼운 문서로 관리하고 싶은 분들에게는 정말 유용한 툴인 것 같습니다. 저 또한 종종 사용할 것 같네요 😊