Categories: 기타
VSCode Marp 시작 가이드
Marp 시작 가이드
Marp
최근에 노마드 코더가 다뤄보았기에 Marp를 설치 및 사용해보았고, 사용과정에서 받은 인사이트가 있어서 이렇게 글로 남겨보려고 한다. 기존에도 워낙 마크다운으로 작업하는 것을 좋아해서, Marp는 상당히 반갑게 다가오는 툴이었다.
Marp란?
Markdown Presentation Ecosystem의 줄임말인 것으로 보인다. 기존의 마크다운 문법들을 이용하여 프레젠테이션을 만드는 종합툴 같은거라고 생각하면 된다. 하지만 GUI는 당연히 없고 텍스트 에디터에서만 진행한다. 만약 마크다운 문법이 익숙하지 않다면 이 글을 읽고 오는 것을 추천한다.
깃허브를 확인해보면 marp-team에서 개발한 것으로 보이나, people을 보면 한 명만 있다. 아마도 혼자서 모든 개발 과정을 완료하신 듯 하다. 어지간히 마우스 쓰기 싫으셨나보다. 일본분이신 듯하며 marp 자료들을 찾아보면 일본어로 된 자료들이 꽤 많다.
VSCode로 작업하기
VSCode에 Marp for VS Code라는 익스텐션이 있다. 이를 설치하자.
설치하면 아래와 같이 아이콘이 생성된다.
이렇게 되면 설치 끝이다. 다만 Markdown Preview Enhanced라는 익스텐션을 먼저 깔아놨다면 Marp를 사용하는데 문제가 될 수 있다.
우선 해당 문제의 원인은 Markdown Preview Enhanced가 마크다운 미리보기에 대한 모든 단축키와 활성 옵션을 모두 가져가기 때문인 것으로 보인다. 그에 반해 Marp는 VSCode에 내장된 built-in markdown preview를 기반으로 한 듯하다. 적어도 나는 무슨 짓을 하더라도 Marp 미리보기 화면을 열 수 없었다. 해결방법은 아래와 같다.
- 설정에 들어가서
markdown.showPreview옵션을 찾아 단축키를 원하는 것으로 바꾼다. - 또는
ctrl + <shift> + v를 가진Markdown Preview Enhanced미리보기 활성화의 단축키를 지운다.
나는 빌드 단축키를 ctrl + alt + c를 사용하기 때문에, 기존의 빌드 단축키였던 ctrl + shift + b로 markdown.showPreview 단축키를 바꿔주었다. 이제 마크다운 파일을 작성하고, 설정한 단축키를 누르면 아래와 같이 기본 마크다운 미리보기가 잘 작동하게 된다.
이제 Marp 버튼을 클릭하고 Toggle Marp Feature for Current Markdown을 클릭하면 아래와 같이 작동한다.
마크다운의 가장 위쪽에 있는 ---와 --- 사이에 있는 값들은 일반적으로 파일의 설정값들이다. marp 옵션을 true로 활성화함으로써 기본 마크다운 미리보기 엔진이 아닌 marp 엔진이 렌더링하게 된다. marp는 기본적으로 위와 같은 화면을 제공하며, 구분선을 추가함으로써 페이지를 추가할 수 있다. 또한 내부에 아무리 많은 내용이 있더라도, 페이지의 크기는 절대 커지지 않고 고정된다.
| 새 슬라이드 | overflow : hidden |
|---|---|
그리고 아래와 같은 기능들이 있다.
- 예쁜 테마 적용
- 테마 내부의 Class 적용을 통해, 쉽게 스타일 적용
- 모든 페이지에 Header 추가
- 이미지 크기 조절, 특수 효과, 배경으로 적용 등
이 이후 모든 문법들은 documents에서 확인하길 바란다. 모든 상당히 정리가 잘 되어있어서, 쉽게 이해할 수 있을 것이다. 여기서 다룰 내용은 marp 다루기를 극대화하기 위한 꿀팁에 관련된 내용이다.
테마 적용하기
marp-themes에 들어가보면 다양한 테마들이 소개되어있는 것이 보인다. 그 중에서 matsubara0507 / marp-themes 리포지토리의 olive 테마를 적용해보자.
우리에게 필요한 것은 .css파일이다. 다만, .css파일을 직접 다운받아서 관리하는 것은 조금 부담스러운 느낌이 있다. 다운받지 않고 인터넷에서 직접 .css 파일을 받아 관리할 수 있도록 하자.
https://github.com/matsubara0507/marp-themes/blob/master/themes/olive.css
위는 .css파일의 github 주소이다. 하지만 위 링크 그대로는 파일에 대한 정보를 얻을 수 없다. 하지만 뒤에 쿼리 파라미터 ?raw=true를 붙여주면 아래와 같은 주소로 리다이렉션된다.
https://raw.githubusercontent.com/matsubara0507/marp-themes/master/themes/olive.css
이 주소를 settings.json에 넣어 테마로 사용할 수 있도록 해보자. 우선 마크다운을 주로 작업할 워크스페이스에서 settings.json를 키자. .vscode 폴더가 없으면 만들고, settings.json파일을 만들어준다. 만들고 아래와 같이 세팅한다.
{
"markdown.marp.themes": [
"https://raw.githubusercontent.com/matsubara0507/marp-themes/master/themes/olive.css",
]
}
기존에 settings.json 파일이 이미 있다면, 위 설정만 추가한다. 설정을 추가하면 이제 olive테마를 추가할 수 있다.
이제 예쁜 ppt를 만들 수 있을 것만 같은 기분이 들게 된다.
슬라이드 한정 스타일 적용
테마를 바꿀 수는 없지만, 각 테마에는 class가 정의되어 있다. olive에는 default, invert, olive, lead, lead-invert, lead-olive 등이 있다고 한다. default랑 lead만 이용해보자.
class는 맨 위에 선언해줄 수 있다. 우선 선언하는데로 가장 우선순위가 높은 class의 스타일이 적용되는 듯 하다.
---
marp: true
theme: olive
class:
- lead
- default
---
지금은 lead가 적용되어 중앙정렬이 되는 것을 볼 수 있다.
슬라이드에 class를 적용시키는 방법은 2가지가 있다.
<!-- class: lead -->
<!-- _class: lead -->
마크다운 내에 주석처리를 하고, 주석 내부에 위와 같이 작성해준다. 단 _없이 class를 선언하는 경우 현재 슬라이드 이후 모든 슬라이드에 class가 적용된다. 따라서 처음에만 정의해주고 웬만하면 슬라이드 내부에는 _class를 활용하는 것이 좋다.
수식 작성하기
기본 마크다운 미리보기는 수식을 지원하지 않지만, marp는 기본적으로 Katex와 Mathjax를 내장하고 있다. 설정에 math: Katex를 추가해보면 다음과 같이 수식을 작성할 수 있다. 혹 문법을 잘 모른다면 latex 문법을 참고하자.
html 추출 및 웹으로 불러오기
marp 사용의 꽃이라고 볼 수 있다. marp의 아이콘을 클릭하면 Export Slide Deck을 볼 수 있고, 이를 누르면 파일로 저장할 수 있다. 여기서 html파일로 추출하는 것이 가능하다. marp 설정에 들어가면 기본 파일 형식을 바꿀 수 있다.
html파일로 추출하고 실행하면, 전체화면, 발표자 모드 등을 지원한다. 만일 서버가 있다면, 이를 바로 배포하여 웹으로 어디서든지 발표하는 것이 가능할 것이지만, 이것은 당연히 쉽지 않다. github를 극한으로 이용하는 방법을 알아보자.
우선 html 파일을 github에 올려놓자. 그러면 위에서 했던 것처럼, 쿼리 파라미터 ?raw=true를 붙여 주소를 가지고 오자.
https://raw.githubusercontent.com/Seungwuk98/TIL/main/wow.html
하지만 이 http 요청의 결과는 text/plain이므로 웹페이지의 결과물이 보이지 않는다. 도메인을 raw.githack.com으로 바꾸고 결과물을 살펴보자.
https://raw.githack.com/Seungwuk98/TIL/main/wow.html
결과를 text/html로 받게되며 브라우저가 이를 렌더링하게 된다. 복잡하게 gh-pages등으로 배포하는 과정을 겪을 필요없이, 웹사이트처럼 방문하는 것이 가능하다. 또한 ppt까지 git 플로우로 작업한다는 것이 개발자라면 개발자다울수도 있겠다.
마무리 및 총평
markdown을 숨쉬듯이 사용하는터라 상당히 반갑고 좋은 툴이지만 이게 왜 안돼? 할만한, 당연히 될 것같지만 되지 않는 기능들도 몇몇 있는 편이다. 또한 길이가 길어질수록 슬라이드를 관리하는 것이 쉽지 않다. 아마도 영원히 ppt를 대체하는 일은 없겠지만, 빠르고 쉽게 짧은 ppt를 만들 수 있다는 점이 매력으로 다가와 꾸준히 쓸 것 같다. 사실 나도 마우스 잡는게 싫다.
Leave a comment