Presentation with Reveal.js

computer-tool

document-tool

quarto

Quarto로 편하게!

Author

JS HUHH

Published

July 7, 2022

TL; DR

Quarto를 쓰면 Markdown으로 편하게 PT 문서를 만들 수 있다.

PT 도구 그것이 문제로다.

Reveal.js는 웹 기반으로 프레젠테이션 문서를 구현하는 녀석이다. 우리는 이 녀석을 써서 파워포인트나 키노트가 부럽지 않은 수준의 PT를 비교적 손쉽게 만들 수 있다. 웹 기반이니 브라우저만 있으면 문서를 볼 수 있다.

아쉬운 점이라면 Markdown처럼 (나같은 문돌이들도) 쉽게 쓸 수 있는 딱 떨어지는 저작 도구가 없다는 것이다. 만일 Reveal.js를 Markdown과 함께 쓸 수 있다면 그야말로 금상첨화일 터! 앞서 Markdown 기반 저작도구인 Quarto를 살펴 보았다. 고맙게도 이 녀석이 VS Code 혹은 Jupyter 위에서 Markdown과 Reveal.js를 함께 부릴 수 있게 해준다. Quarto + Reveal.js의 장점을 다시 따져보자.

RStudio가 제공하는 Rmarkdown을 통해 Reveal.js와 마크다운을 함께 부릴 수 있다. 다만 도구로서 VS Code가 좀 더 보편적이라고 생각하기에 이 녀석은 다루지 않겠다.

Markdown의 문법을 거의 그대로 쓸 수 있다.
\(\rm\LaTeX\) 수식을 그대로 쓸 수 있다.
깔끔하지만 다채로운 슬라이드를 구현할 수 있다.
코드 및 결과물을 그대로 활용할 수 있다.
Github과 같은 웹 도구를 활용하면 결과물을 html로 쉽게 공유할 수 있다.

Quarto가 pandoc을 백엔드로 쓰기 때문에 qmd 문서를 거의 포맷(docx, pdf, html, tex, pptx 등)으로 변환할 수 있다. html이 특별한 이유는 플랫폼을 불문하고 문서를 원래 의도 그대로 잘 전달할 수 있기 때문이다.

이제 시작해 보자.

출발선

아래의 도구를 설치할 수 있고 기본적인 활용이 가능하다고 가정하겠다.

Quarto (플랫폼에 따라서 설치)
VS Code
Quarto Extension for VS Code

거의 완벽한 레퍼런스

Quarto의 문서화는 거의 완벽하다. Quarto + Reveal.js도 예외는 아니다. 링크의 내용을 따라서 쓰면 된다. Markdown 문법과도 크게 다르지 않으니 진입 장벽이 낮다. 몇 가지 주의할 사항만 확인해 보자.

`YAML`

Markdown 문서에 Reveal.js의 기능을 붙이기 위해 문서 앞에 YAML 문을 붙인다. 문서의 앞에 붙는 YAML의 예제는 아래와 같다.

---
title: "This Is a Testflight"
subtitle: "Completely useless presentation"
author: "[anarinsk](https://www.lostineconomics.com)"
date: "2022-09-06"
format: 
    revealjs:
        embed-resources: true
        include-in-header: [favicon.html, mathjax.html]
        incremental: true  
        #css:
        theme: [format.scss, black]
        transition: concave
        background-transition: fade
        smaller: false
        scrollable: true
        logo: "logo2.png"
        footer: "TEST FOR FOOTER!"
        #preview-links: true
        #self-contained: true
---

대체로 항목이 자명하기 때문에 별도의 설명은 하지 않겠다. reveal.js의 각종 옵션을 지정해 줄 수 있는데, 지원하는 항목은 여기에서 확인할 수 있다. 주의할 내용만 갼락하게 살펴보자.

Code Tips

embed-resources | 만일 GitHub Pages 등을 통해 퍼블리시 하려면 이 항목을 true로 설정하자.
theme | reveal.js의 테마다. 복잡하게 생각하지 말고 간단한 거 쓰자. 주의할 점; css 항목에 format.scss를 넣을 경우 해당 파일에서 지정한 폰트 설정이 작동하지 않는다. 테마와 같은 레벨에 특화된 css를 포함시키도록 하자.
transition | 슬라이드 혹은 항목 등장의 시각적인 전환 효과를 지정한다. 🔗를 참고하자.
background-transition | 배경 효과를 지정한다.
preview-links | true로 설정하면 슬라이드 내에서 링크를 클릭하면 해당 링크가 새 탭에서 열린다. 다만 일부 웹 페이지에서 제대로 작동하지 않는다. 개별 링크에서 별도로 설정할 수 있으므로 false로 두거나 주석 처리하자.
self-contained | true로 설정하면 html 파일 내에 모든 자원을 포함시킨다. 파일이 지나치게 커질 수도 있고, 제대로 동작하지 않을 수 있으니 되도록 주석처리하자.

Customization

Quarto + Reveal.js의 기본 설정을 그대로 써도 된다. 다만 영문과 한글 폰트의 괴리 등의 미묘한 대목이 걸린다면, 특화된 css 파일을 통해 볃도로 설정을 바꾸면 된다. Working Example에 소개된 예제의 css 파일을 살펴보자.

/* @import url('https://fonts.googleapis.com/css2? family=Nanum+Gothic&display=swap'); */
@import url("https://cdn.jsdelivr.net/gh/wan2land/d2coding/d2coding-ligature-subset.css");
@import url("https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/static/woff2/SUIT.css");
@import url("https://cdn.jsdelivr.net/gh/sunn-us/SUITE/fonts/static/woff2/SUITE.css");

/*-- scss:rules --*/
.reveal h1, 
.reveal h2, 
.reveal h3, 
.reveal h4, 
.reveal h5, 
.reveal h6 {
  font-family: 'NanumSquare' !important;
  //text-shadow: -1px -1px 0 rgba(0, 0, 0, .3);
}

.reveal section p {
    font-family: 'pretendard' !important;
    font-size: 90%;
}

.reveal ul, 
.reveal li, 
.reveal ol{
    font-family: 'pretendard' !important;
    font-size: 95%;
}

.reveal code{
  font-family: 'D2Coding', monospace ! important;
  font-size: 95%;
}

Code Tips

@import... | 필요한 폰트 3종을 로드한다.
나머지는 부분은 css의 요소 별로 사용할 폰트와 글자 크기 등을 지정하는 내용이다.

Working Example

시험 삼아서 Reveal.js의 몇 가지 기능을 Quarto로 구현해 보았다. 내용 없이 형식을 구현하는데 집중한 사례이니 참작해 주시라. 아래의 사례는 나 놈이 발견한 새로운 진전이 있을 떄 업데이트된다.

예시: Completely Useless Quarto-Reveal.js
코드: anarinsk/learn_quarto-revealjs