[javascript] Reveal.js를 이용한 실시간 스타트업 피칭

27 Nov 2023

javascript

소개

Reveal.js는 HTML과 CSS를 이용하여 웹 기반의 프레젠테이션을 만들 수 있는 오픈 소스 라이브러리입니다. 이 라이브러리는 간단하고 직관적인 문법을 사용하여 사용자들이 쉽게 프레젠테이션을 만들 수 있도록 도와줍니다. 이번 글에서는 Reveal.js를 활용하여 실시간 스타트업 피칭을 진행하는 방법에 대해 알아보겠습니다.

Reveal.js 설치

Reveal.js를 사용하기 위해서는 먼저 설치해야 합니다. 다음의 명령을 사용하여 Reveal.js를 설치할 수 있습니다.

npm install reveal.js

프레젠테이션 생성

Reveal.js를 설치한 후 프레젠테이션을 생성해야 합니다. 프레젠테이션은 HTML 파일 형태로 생성됩니다. 다음의 예시 코드는 기본적인 Reveal.js 프레젠테이션을 생성하는 코드입니다.

<html>
  <head>
    <link rel="stylesheet" href="reveal.js/dist/reset.css" />
    <link rel="stylesheet" href="reveal.js/dist/reveal.css" />
    <link rel="stylesheet" href="reveal.js/dist/theme/black.css" />
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section>
          <h1>스타트업 피칭</h1>
        </section>
        <section>
          <h2>팀 소개</h2>
          <ul>
            <li>팀원 1</li>
            <li>팀원 2</li>
            <li>팀원 3</li>
          </ul>
        </section>
        <section>
          <h2>제품 소개</h2>
          <p>우리 제품은...</p>
        </section>
      </div>
    </div>
    <script src="reveal.js/dist/reveal.js"></script>
    <script>
      Reveal.initialize();
    </script>
  </body>
</html>

위의 코드는 reveal.js/dist 경로에 있는 CSS 파일을 로드하여 프레젠테이션의 스타일을 꾸밀 수 있습니다. 각각의 <section> 엘리먼트는 슬라이드로 간주되며, 내용을 추가할 수 있습니다.

실시간 피칭

Reveal.js를 사용하여 실시간 피칭을 진행하려면 Socket.io 라이브러리를 사용하여 실시간 통신을 구현해야 합니다. 다음의 예시 코드는 실시간 피칭을 위해 Socket.io를 설정하는 코드입니다.

var socket = io();

socket.on('nextSlide', function() {
  Reveal.next();
});

socket.on('prevSlide', function() {
  Reveal.prev();
});

위의 코드는 Socket.io를 사용하여 nextSlide 이벤트와 prevSlide 이벤트를 수신하고, 해당 이벤트가 발생하면 Reveal.js의 next()와 prev() 함수를 호출하여 슬라이드를 이동시킵니다. 실시간 피칭을 진행하는 동안 다른 사용자들은 이벤트를 트리거하여 슬라이드를 동기화할 수 있습니다.

결론

Reveal.js를 이용하여 실시간 스타트업 피칭을 진행하는 방법을 살펴보았습니다. 이 라이브러리를 사용하면 간편하게 웹 기반 프레젠테이션을 만들 수 있으며, Socket.io를 통해 실시간 피칭을 구현할 수도 있습니다. Reveal.js를 활용하여 스타트업 피칭을 더욱 동적이고 효과적인 경험으로 만들어보세요.