reveal.js- 여러가지 특이한 기능으로 무장한 웹 프레젠테이션 프레임워크

최근 html5 규격화와 함께 브라우저들의 기능들이 크게 향상되면서 웹 서비스 들도 예전과는 다르게 훨씬 향상된 모습을 보여주고 있습니다. 웹 베이스 프레젠테이션이라고 하면 일단 가장 유명한 것은 prezi겠죠. Prezi는 웹에서 화면이 동적으로 움직이는 프레젠테이션 서비스인데, 굉장히 동적으로 움직인다는 점에서 파워포인트와 차별화가 되었습니다. 손쉽게 멋있는 프레젠테이션을 만들 수 있어서 많은 사람들이 애용하였죠.

Prezi는 웹에서 돌아가는 프로그램이긴 했지만, 플래시 기반입니다. 순수한 웹이 아닌 거죠. 그러다가 자바스크립트의 라이브러리들이 폭발적으로 늘어나고, 브라우저에서 WebGL을 통한 3D 표현이 가능해 지면서 순수 웹 프레젠테이션 툴들도 나오기 시작했습니다. 그 중 대표적인 것이 impress.js죠. Impress.js는 순수 html/css/js로 만들어진 프레젠테이션 툴 입니다. 컨셉자체는 prezi를 따라해서 화면이 굉장히 동적으로 움직입니다. 게다가 3D효과까지 있어서 화면 기울임효과도 표현할 수 있게 되었습니다. 굉장히 멋있는 프레젠테이션을 만들 수 있게 되었죠. 게다가 Impress.js는 오픈소스이기 때문에 여러 가지 관련 툴들도 나오고 있습니다.

여기서 이야기 할 것은 또 다른 순수 웹 기반의 프레젠테이션툴인 reveal.js입니다. 현재 reveal.js의 가장 큰 약점이라면 아무래도 GUI툴이 전무하다는 것 입니다. 역사가 오래되지 않아서 아직 관련 툴들이 많이 나오지 않았습니다. 하지만 reveal.js 자체의 기능은 굉장히 강력하다고 봅니다. Reveal.js는 파워포인트나 prezi, impress.js에 비해 표현의 자유도는 떨어집니다. 정형화된 틀 안에서 만들어진다는 단점이 있죠. 하지만 오히려 그런 점 때문에 슬라이드 제작은 비교적 쉽습니다.

Reveal.js github 페이지: https://github.com/hakimel/reveal.js

Reveal.js livedemo: http://lab.hakim.se/reveal-js

Reveal.js는 굉장히 멋있는 3D효과를 사용합니다. (하지만 IE에서는 볼 수 없죠. IE는 버립시다.) transition 효과로 default, page, cube, concave, linear가 있는데, 다들 굉장히 멋있는 효과를 보여줍니다. 그리고 한쪽방향으로만 돌아가는 것이 아니고 프레젠테이션들 가로방향, 세로방향으로 나누어서 제작할 수 있습니다.

이 사진은 프레젠테이션 도중 ESC키를 눌렀을 때 나오는 화면입니다. 프레젠테이션의 전체적인 흐름을 볼 수 있습니다. 보시면 프레젠테이션의 흐름이 가로세로로 이루어져 있는 것을 볼 수 있습니다. 사실 이 기능을 어디에 써 먹을지 감이 잘 안오긴 하지만, 잘 활용하면 나름 좋은 효과를 볼 수 있을 듯 합니다.

그리고 reveal.js에서는 모든 속성이 점차적으로 변합니다. 이게 말로 설명하기가 좀 힘드네요. 그러니까 중간에 css 속성을 변환하면 바로 바뀌는 것이 보통인데, reveal.js에서는 천천히 변하게 됩니다. 이런 기능을 어떻게 구현했는지 궁금하네요. 덕분에 특정 슬라이드에서 어떤 속성을 변환하면 천천히 변해서 굉장히 부드러운 프레젠테이션을 할 수 있습니다. 파워포인트는 정말 딱딱한 느낌이 많이 드는 반면 reveal.js는 모든 것이 부드럽습니다. (물론 IE에서 말고)

Default 트렌지션 효과 에서 대각선 슬라이드로 넘어가는 모습니다. 굉장히 부드럽고 멋있게 넘어갑니다. 이런 효과를 보면 정말 지릴수 밖에 없을 듯 합니다.

이제는 Reveal.js의 몇 가지 특이한 기능들을 살펴보겠습니다.

PDF Export

Reveal.js는 웹으로 제작된 프레젠테이션을 PDF로 출력할 수 있는 기능을 가지고 있습니다. 보통 다른 사람 프레젠테이션을 읽어보곤 할 때 프레젠테이션자체를 보는 것 보다 PDF로 변환된 것을 보는 것이 편합니다. Reveal.js는 이런 기능을 가지고 있어서 나중에 프레젠테이션을 정독하고자 할 때 도움이 되겠지요.

Speaker Notes

굉장히 재밋는 기능이라고 생각합니다. 사실 그렇게 특이한 것은 없습니다. 더블 스크린 환경에서 청중들이 보는 것과 발표자가 보는 화면을 다르게 해주는 것입니다. 아래 그림 보세요.

왼쪽과 오른쪽은 서로 다른 화면입니다. 왼쪽은 청중이 보는 화면이고 오른쪽은 발표자가 보는 화면입니다. (양쪽 화면의 해상도가 달라서 캡쳐할 때 오른쪽에 까만색 부분이 나오는데, 저건 원래 없는 부분입니다.) 발표자는 오른쪽 화면과 같이 현재 화면과 다음 화면을 동시에 볼 수

있습니다. Speakernotes는 로컬에서 node 서버를 돌려서 왼쪽 화면에서 슬라이드를 넘기면 오른쪽에서도 자동으로 넘어가도록 되어 있습니다.

미리 저장해둔 노트 또한 볼 수 없습니다. 저 노트는 청중들이 보는 화면에는 나타나지 않고 발표자가 보는 화면에는 나타나게 됩니다.

Speaknotes는 결국 파워포인트에도 있는 기능입니다. 게다가 파워포인트에 있는 기능이 더 강력하지요. 하지만 웹에서 이런 것을 구현했다는 자체가 장족의 발전이라고 생각합니다. 앞으로 또 어떤 대단한 기능이 나오게 될지 기대되게 합니다.