Tech

HTML5 웹 프리젠테이션 도구 베스트 3

Impress.js 화면

‘웹 프리젠테이션 도구’의 시대

‘웹 프리젠테이션 도구’를 떠올리면 프레지(Prezi)를 먼저 떠올릴 사람이 많을 것이다. 하지만 요즘은 HTML5의 시대답게 (프레지는 플래쉬 기반이다) HTML5만으로 브라우져에서 프리젠테이션을 구현할 수 있다. HTML코드만 조금 알면 비싼 MS 파워포인트나 프레지를 사용하지 않고도 멋들어진 프리젠테이션을 만들 수 있다. 요즘에 많이 사용하는 HTML5 웹 프리젠테이션 도구 베스트3를 소개한다.

1. Impress.js

웹 프리젠테이션 도구 - Impress.js 화면
Impress.js 데모 화면

요즘 혜성처럼 뜨고 있는 웹 프리젠테이션 도구다. 이 웹 프리젠테이션 도구를 사용하면 프레지와 같은 효과를 낼 수 있는 웹 프리젠테이션을 제작할 수 있다. 다만, 프레지와 같은 가입형은 아니고 자바스크립트 파일뿐이기 때문에 사용자가 직접 HTML코드를 작성해야 한다는 단점이 있다. 그래도 간단한 HTML 코드만 알면 쉽게 만들 수 있다. 근데 개발자는 뭔깡인지 사용법 문서화를 안해놓았다. 그저 ?도트 큰 스타워즈 요다가 나와서 “Use the source, Luke” 이딴 얘기만 하는데… 이 웹페이지를 참조하면 쉽게 만들 수 있다.

HTML내의 DIV 태그에 클래스를 적용해서 하나의 슬라이드를 만든는 방식이다. 한 가지 단점은 인터넷 익스플로러를 지원하지 않는다. HTML5를 잘 지원하는 편인 IE 10에서도 작동하지 않는다.

데모 보기
파일 다운로드 받기(GitHub)

2.?Reveal.js

Reveal.js 데모화면
Reveal.js 데모화면

Impress.js가 프레지와 비슷하다면 Reveal.js는 키노트와 비슷한 웹 프리젠테이션 도구다. Reveal.js는 기본적인 프리젠테이션 기능에 충실하다. 하지만 그렇다고 쿨하지 못하다는 것은 아니다. 기본적인 웹 프리젠테이션 도구이긴 하지만 멋들어지고 세련된 3D 전환효과가 가능하다. 또한 좌우가 아닌 상하로도 슬라이드를 이동시킬 수 있다.

하나의 슬라이드는 HTML5에서 새로 생긴 엘레멘트인 article태그를 사용해서 만들수 있다.?IE, 크롬, 파이어폭스에서 모두 잘 돌아간다. IE는 10만 테스트해봤는데 아마 9 이하에서는 제대로 동작하지 않을 가능성이 농후하다.

데모 보기
파일 다운로드 받기 (GitHub)

3. Deck.js

Deck.js 데모화면
Deck.js 데모화면

원래 맨 처음에 생긴 HTML5 웹 프리젠테이션 도구였으나, 요즘은 좀 핫한 이슈에서 밀려있는듯. 기본적인 웹 프리젠테이션이지만 애니메이션도 좋고, 쓸만한 편이다.

section 태그가 하나의 슬라이드가 되는 방식이다. IE, 크롬, 파이어폭스에서 모두 잘 돌아간다. IE는 10만 테스트해봤는데 아마 9 이하에서는 제대로 동작하지 않을 가능성이 농후하다.

데모보기
파일 다운로드 받기(GitHub)

그 밖에 Google Slides Templates?도 있으나, 가장 기본적인 기능만 있어서 베스트 3에는 넣지 않았다.

Leave a Reply

Leave a Reply

Your email address will not be published. Required fields are marked *