HTML5 프리젠테이션 도구를 아시나요?

HTML5 프리젠테이션 도구를 아시나요?

외부 강연을 하다보면 발표 자료를 자주 만드는데, 대부분 MS PowerPoint나 Apple Keynote 같은 것을 사용하게 됩니다. 그리고 나서 Slideshare나 Slidedeck 같은데 올리고 공유하게 되지요. 하지만 HTML 마크업만 조금 배우고, 손 코딩에 익숙한 분들에게는 '웹 기반 프리젠테이션 도구'를 추천합니다.

전용 프로그램 만큼 강력한 기능을 제공해 주고, 무엇 보다 웹 브라우저만 있으면, 어디서나 쉽게 PT가 가능하고 웹 콘텐츠를 풍성하게 할 수 있으니까요. (아래 데모들은 모바일 보다는 PC 웹 브라우저 특히, 파이어폭스나 크롬에서 잘 보입니다.)

1. Reveal.js
Github에서 당당하게 가장 많은 인기를 끌고 있는 웹 프리젠테이션 도구로 상세한 문서화 및 다양하고 신규 기능이 계속 업데이트 되고 있음
* 데모: http://lab.hakim.se/reveal-js/
* 소스코드: https://github.com/hakimel/reveal.js

2. Impress.js
CSS3의 3D 전환 효과를 이용하여, Prezi와 유사한 동적이고 3차원 전환 프리젠테이션을 할 수 있는 도구임
* 데모: http://bartaz.github.io/impress.js
* 소스코드: https://github.com/bartaz/impress.js

c.f.) WebGL을 이용한 프리젠테이션 도구로 마우스로 PT 이동 및 줌인/아웃도 가능함
* 데모: http://fhtr.org/webgl_presentation.html#9
* PT 에디터: http://fhtr.org/editor (오른쪽 상단의 Edit를 누르면 다양한 효과 가능)
* 소스코드:https://github.com/kig/kig.github.com/blob/master/webgl_presentation.html

3. Google HTML5 Slides
HTML5 발표 도구의 시초로 구글에서 HTML5 데모를 하기 위해 만들었던 것으로 유명해져서 Google I/O에서 발표 시 사용되고 있음
* 데모: http://io-2012-slides.googlecode.com/git/template.html
* 소스코드: http://code.google.com/p/html5slides/ (2012년 버전https://code.google.com/p/io-2012-slides/)

4. Shwr.me
전체 슬라이드 미리보기를 할 수 있고, 바로 프리젠테이션으로 들어갈 수 있는 장점 있음
* 데모: http://shwr.me/
* 소스코드: https://github.com/shower/shower

5. 그 밖에 추천 도구
1) Shwr.me: 전체 슬라이드 미리보기를 할 수 있고, 바로 프리젠테이션으로 들어갈 수 있는 장점 있음
* 데모: http://shwr.me/
* 소스코드: https://github.com/shower/shower
2) Deck.js: HTML 발표 도구 중 유명했으나, 최근에는 업데이트가 계속 되지는 않고 있음
* 데모: http://imakewebthings.github.com/deck.js/introduction
* 소스코드: https://github.com/imakewebthings/deck.js
3) Mozilla Template: Mozilla 커뮤니티에서 사용하고 있는 발표 템플릿
* 소스코드: https://github.com/codepo8/mozilla-presentation-templates

쭉 보시고 나시면 이걸로 어떻게 PT를 만들지 하는 생각이 드실 거에요. 소스 코드(Ctrl-U)를 열어서 내용이 있는 부분의 HTML 마크업만 고치면 그대로 나만의 PT가 될 수 있습니다.

참고) 생활 코딩의 HTML 온라인 배우기 http://opentutorials.org/course/11