Powerpoint 없이 코드만으로 PPT 만들기

이전부터 ppt 프레젠테이션 파일을 만들기 위해 마이크로소프트 사의 파워포인트 툴을 사용하거나 MacOS 에서 제공하는 Keynote 등의 툴을 사용하곤 했습니다. 그러다보니 기존에 파일을 생성하고 편집을 하는 분들이 훨씬 익숙하겠지만, 이번에 VS Code 에서 제공하는 플러그인 중 하나인 'Marp for VS Code Extension' 을 설치하여 ppt 파일을 만드는 기능이 추가되었습니다. 

공식 사이트 링크입니다. https://marp.app/

Marp: Markdown Presentation Ecosystem

Extensions -> Marp 검색하면 나오는 확장팩

 

인스톨 후에는 위와 같이 Uninstall 이 활성화 됩니다

 

1. 파일 생성 및 편집하기

'Cmd + N' 키를 눌러 새로운 파일을 생성하고 여기에 입력을 시작합니다. 처음에 아래와 같이 시작하는 문서의 헤더에 입력합니다.

---
marp: true
---

 

이 부분은 마크다운 파일을 만들때 사용하는 front-matter 라는 영역입니다. 이 부분을 작성하지 않으면 아래에 많은 컨텐츠를 작성하여도 ppt로 출력되지 않습니다. 

 

 

2. 본문 채우고 파일 변환하기

그 다음으로 작성할 본문입니다. 기본적으로 마크다운 형식의 포맷을 제공하기 때문에 아래와 같이 적어봅니다. 마크다운 형식이므로 적기 어렵지 않게 '#' 1개면 헤더를 의미하고 '-', '*' 는 항목을 의미합니다. 

# Hello!  

For making presentation in VS Code

 

그리고 아래와 같이 형광색 표시가 되어 있는 아이콘을 누르면 위에 실행할 명령어가 표시되는데, 여기에서 'Export Slide Deck...' 을 눌러서 pdf 나 다른 확장자로 추출이 가능한지 확인해봅니다.

아이콘을 눌렀을 때 뜨는 화면

실제로 PDF 파일로 잘 출력된 화면

 

2-1. 미리보기 켜기 

미리보기를 켜는 옵션은 어렵지 않습니다 'Cmd + K' 다음 'V' 를 눌러줍니다.

이거 못찾아서 삽질하면서 익스텐션 다 지워서 난리난 나..

 

 

3. Theme 입히고 DarkMode 사용하기

그러면 이제 잘 나오는 것 같으니 테마를 입혀보고 라이트 모드로 되어 있는 내용을 다크모드로 변경해볼까 합니다. 

다시 헤더로 돌아가서 아래와 같이 입력해봅니다. 그리고 출력합니다. 

---
marp: true
theme: gaia
class: invert
---

 

gaia Theme , Darkmode 가 적용된 pdf

 

자, 이제 어떤 테마를 사용할 수 있는지, 다크모드는 어떻게 적용하는지 알게 되었습니다.

class 는 invert 를 사용하면 다크모드로 변경되고, theme는 커스텀 테마를 입힐 수 있습니다.

 

3-1. 새 파일을 만들어서 저장하기

아래 링크에서 marp 문법에 맞게 이쁘게 꾸며놓은 무료 테마들을 다운로드 받으실 수 있습니다. 

https://github.com/topics/marp-themes

GitHub: Let’s build from here

 

먼저 아래와 같이 저장할 파일을 생성해두고 저장합니다. 여기서 사용하는 .css 는 HTML 양식에 맞게 쓰셔도 됩니다. 

{
    "markdown.marp.themes": [
        "./theme/custom.abbo.css",
    ],
    "markdown.marp.enableHtml": true
}

 

3-2. 테마 파일 불러오기

'Cmd + ,' 키를 눌러 설정을 여신 후에 'marp theme' 로 검색하면 아래와 같이 테마.css 파일을 저장할 수 있는 공간이 나옵니다. 여기에 3-1 에서 저장했던 파일을 불러옵니다.

 

 

 

4. 페이지 넘버, 헤더, 푸터 표시하기 

다음으로 체크해볼 것은 페이지 번호를 표시하는 것과 헤더, 푸터를 보여주는 것입니다. 아래처럼 작성해줍니다.

---
marp: true
theme: gaia
class: invert
paginate: true
header: 이것은 헤더 영역입니다. 타이핑해봅니다.
footer: 이것은 푸터입니다. 저작권은 ABBO 에게 있어요.
---

 

그리고 똑같이 출력해줍니다. 

헤더, 푸터, 그리고 오른쪽 아래에 1이라고 적혀있는 넘버를 볼 수 있습니다.

 

5. 스타일과 페이지 넘기기 

이제 글꼴의 스타일을 입혀볼 차례입니다. 마크다운의 장점에 맞게 많은 스타일을 쉽게 사용할 수 있습니다. 

_underscore_
`block`
```
code in here 
```
**Bold**

---

## Header2

- item format1
- item2

---

### Header3

* item format2
* item

---

# Number List

1. first
2. second

 

그리고 페이지를 넘기는 문법은 '---' 로 가능합니다. 대신 페이지를 넘길 때는 위/아래 한 줄 씩 줄띄움을 해줍니다.

 

6. 외부링크

링크를 연결시키는 마크다운 문법을 적용시키면 됩니다.

Link [https://abbo.tistory.com] <-- 이렇게 하면 홈페이지 도메인이 보이고

[링크](https://abbo.tistory.com) <-- 이렇게 하면 홈페이지 도메인이 안보입니다.

 

 

 

 

참고는 위대한 노마드 코더님 유투브 영상에서 확인했습니다. 영상에서는 테마를 입히는 방법과 사진을 삽입하는 방법들이 더 많이 들어가 있어 관심있으신 분들은 보시는 것을 추천드립니다! 

https://www.youtube.com/watch?v=Q2PCO0mKEaU