개발자라면 코드로 발표 자료를 만들어보자 - Reveal.js 실전 후기

발표 자료를 준비하기 며칠 전, 위 영상을 시청했다. 이 영상에서 사용된 발표 자료는 https://github.com/jxnblk/mdx-deck으로 만든 자료이다. 내가 사용한 Reveal.js와는 다른 라이브러리이지만 이렇게 코드를 이용해서 발표 자료를 만들 수 있다는 걸 알게되었고, 멋있다는 인상을 받았다.

첫 번째와 연결되는 맥락인데, ‘개발자라면 코드로 발표 자료를 한 번 쯤 준비해봐야지!’라는 꿈을 가지고 있었다. 발표 자료를 코드로 준비하면 어떤 느낌일지 궁금했다.

Reveal.js같은 코드 기반 발표자료의 가장 큰 장점이라 할 수 있다. 코드를 아래와 같이 특정 줄을 하이트라이트하며 아름답게 보여줄 수 있다.

git clone https://github.com/hakimel/reveal.js.git

cd reveal.js && npm install

npm start

https://revealjs.com/markup/

태그는 하나의 슬라이드가 된다. 좌우로 넘기는 슬라이드는 하나의

, 상하로 넘기는 슬라이드는

안에서

에서 작성하면 된다.

<section>
  <section data-auto-animate>
    <h3 style="margin-top: -40px" data-id="question">
      리액트를 사용하며 <br />
      이런 궁금증 가져보신 적 있으신가요?
    </h3>
  </section>
</section>

https://revealjs.com/fragments/

<section>
  <h2>목차</h2>
  <ol>
    <li class="fragment fade-left">
      React Fiber의 두 가지 역할
      <ol class="fragment fade-in">
        <li>Fiber 재조정자</li>
        <li>Fiber Node</li>
      </ol>
    </li>
    <li class="fragment fade-left">
      React Fiber의 주요 속성
      <ol class="fragment fade-in">
        <li>updateQueue</li>
        <li>memoizedState</li>
        <li>그 외 속성</li>
      </ol>
    </li>

하나의 슬라이드에서 특정 문구를 숨겨두었다가 점진적으로 보여줄 수 있다.

나타났다가 사라지는 fade-out, 없다가 나타나는 fade-in, 왼쪽에 있다가 오른쪽으로 나타나는 fade-right, 크기가 커지는 grow, 빨간색 글씨로 변하는 hightlight-red 등 다양한 옵션도 함께 설정할 수 있다.

https://revealjs.com/code/

reveal.js는 highlight.js 기반의 코드 하이라이팅 기능을 제공해준다. 또한, 특정 줄을 순차적으로 활성화시킬 수도 있다.

<pre class="fragment fade-in">
  <code class="language-javascript small" data-trim data-line-numbers="|1,2,3,9|1,5-7,9|">
    function ExampleComponent() {
      const [count, setCount] = useState(0);         // 1번째 Hook
      const [text, setText] = useState('hi');        // 2번째 Hook

      useEffect(() => {                              // 3번째 Hook
        document.title = text + count;
      }, [text, count]);
      // ..
    }
  </code>
</pre>

발표를 시작하기 전에 사이트로 배포되어있는 걸 보고 다들 궁금해했다. ‘발표 자료 뭐로 만들었어요?’ 이에 ‘코드로 만들었어요!’라고 하면 다들 신기해했다. “역시 개발자!”라는 이야기를 들을 때면 뿌듯함이 복차올랐다.

내가 물론 PowerPoint, 캔바같은 다른 발표 자료 서비스에 대한 경험이 풍부하지 않다. 학창 시절에 PowerPoint로 발표 자료 조금 만들어본게 전부이다.

그럼에도 나는 이번 발표 자료를 준비하며 무언가 부족하다고 거의 느끼지 않았다. 다양한 애니메이션을 제공해주어 이 부분에 있어서도 부족함을 느끼지 못했고, 오히려 코드에 대한 애니메이션을 넣을 수 있어서 만족스러웠다.

발표 자료를 만들며 가장 아쉬운 점은 화면 우측 상단에 ‘우아한테크코스’라는 로고를 고정시킨다던가, 좌측 상단에 제목을 고정시키지 못한다는 점이었다. 처음에는 이 점이 아쉬웠지만, 나중에는 ‘심플해서 오히려 좋아’로 생각이 바뀌기는 했다.