revealjs - Presentation Framework

이번 포스트는 revealjs에 대해서 알아보도록 하겠습니다.

회사 생활이나 학교에서 가끔 또는 빈번하게 프리젠테이션을 할 기회가 있습니다. 이때 일반적으로 사용하는 프로그램이 마이크로소프트사의 파워포인트(Microsoft PowerPoint) 또는 애플의 키노트(Keynote)를 이용해 발표 자료를 만들고 이를 통해 프리젠테이션을 합니다. 하지만 파워포인트와 키노트가 가지고 있는 애니메이션과 속성들은 다양해 이를 이용하는데 부족함은 없습니다. 

하지만 발표 자료 중간에 동적으로 코드를 수정하고 변경해야 하는 데모가 필요하다고 가정했을때 여러분은 어떻게 준비를 하시겠습니까?? 만약 저라면 파워포인트 또는 키노트를 이용해 발표자료를 준비하고 데모 파일을 준비하여 에디터와 웹페이지를 열어 데모하고자 하는 파일을 열어둘것 같습니다. 그리고 발표 중간에 데모페이지를 열어야 하는 상황이라면 발표영역을 닫고 준비된 에디터 프로그램과 브라우저를 열어 수정과 새로고침을 통해 변경된 현상을 보여드릴 것 같습니다. 하지만 중간중간 창을 벗어났다 돌아오고 하는 모습들이 집중력을 떨어트릴 수 있고 좋다고만 할 순 없습니다. 그렇다면 이를 대체할 만한 프로그램이 있을까? 라는 질문을 던져봅니다.

질문에 이어 저는 파워포인트, 키노트는 막강한 프리젠테이션 도구라고 말씀드릴 수 있습니다. 하지만 상황에 따라 이번 포스트된 내용에서 공유드리고자 하는 revealjs 가 좋다라고 말씀 드릴 수 있습니다. revealjs 란 간단히 말해 HTML Presentation Framework 입니다. 프로그램이 아닌 HTML + JavaScript + CSS 를 통해 발표 자료를 만들 수 있고 위에서 말씀드렸던 동적인 코드 수정을 통해 바로바로 반영되어 발표를 이어나갈 수 있는 강점이 있습니다.

그렇다면 revealjs 를 어디서 받고 어떻게 동작되는지에 대해 알아보겠습니다.

revealjs 는 아래 경로에서 다운로드 받을 수 있습니다.

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

다운로드는 오른쪽 하단에 보이는 "Download ZIP" 버튼을 통해 받을 수 있고 또는 git 이 설치되어 있다면 git clone 을 통해서도 파일을 받을 수 있습니다. 또는 node 로 설치할 수 있도록 document 에 대한 api 가 설명되어 있으니 이를 참고하시면 도움이 될 것같습니다.

자, 이제 압축을 풀면 아래와 같은 폴더 구조를 가지고 있고 바로 보이는 index.html 파일을 브라우저를 통해 페이지를 열어 어떻게 동작되는지 확인해 볼 수 있습니다. 방향키와 우측 하단에 보이는 화살표 버튼을 이용하여 다음, 또는 이전 페이지로 이동이 가능합니다. 모두 한번씩 동작해 보세요~

기본적인 동작 방식과 revealjs 가 무엇이며 어떤 조합으로 돌아가는지 간단히 알아봤습니다. 

추가적으로 revealjs Framework 를 이용해 꾸미고 편집할 수 있는지 깊숙히 알아가 보도록 하겠습니다.

이번 포스트는 revealjs에 대해서 알아봤습니다.