미래의 이러닝 환경에서 플래시는 어떤 형태로든 지금보다는 영향력이 줄어들 것 같습니다. HTML5가 기본체력을 튼튼하게 하고 시장에 나올 준비를 하고 있습니다.

관련 글 : http://channy.creation.net/blog/776

위의 글에 정리된 내용을 읽다 보면 HTML5가 갖고 있는 기능 중에 눈에 띄는 것이 몇 가지 있습니다. 2차원 그래픽 API에 사용할 수 있는 canvas 요소, 내장 비디오/오디오 재생을 위한 video/audio 요소, 드래그앤드롭이 가능하게 해주는 기능 등이 그것입니다.

이러닝 콘텐츠 개발 시에 플래시를 사용하는 가장 큰 이유가 멀티미디어 요소의 구현이 용이하고, 드래그앤드롭과 같은 상호작용성을 지원하는 기능을 구현할 수 있기 때문인데, HTML5에서 이러한 기능을 기본적으로 지원한다면 이러닝 콘텐츠의 플래시 의존성이 조금은 낮아질 수 있으리라 기대할 수 있습니다.

※ 주의! 아래에 있는 링크로 접속했을 때 기능이 정상적으로 동작하지 않은 경우가 있을 겁니다. 이 경우에는 파이어폭스나 크롬의 최신 버전을 설치해서 확인하세요. IE에서는 정상동작이 안될 수 있습니다. 특히 IE6은 사용하지 마세요. 이제 없어져야 할 대상입니다. 본 블로그는 IE6를 지원하지 않습니다.

1. canvas 요소를 활용한 캔버스 구현 예

예시 사이트1 : http://caimansys.com/painter/

이 사이트에 접속하면 그림을 그릴 수 있는 캔버스가 하나 보일 겁니다. 마우스로 그림을 그릴 수도 있습니다. 그리고 오른쪽의 ▶ 버튼을 클릭하면 캔버스에 그려진 내용의 히스토리에 따라 애니메이션 되어 나타납니다.

2. canvas 요소를 활용한 3D 구현 예

예시 사이트2 : http://www.tapper-ware.net/canvas3d/

키보드의 방향키를 움직여 보세요. 자동차가 3차원 공간을 움직이는 모습을 볼 수 있을 겁니다. canvas 태그를 활용하여 3차원 형식으로 객체의 움직임을 지원하는 예제입니다.

이러한 기능을 플래시로 구현했나고요? 아닙니다. HTML5에서도 활용될 canvas 기능을 활용한 것입니다. 플래시로 공들여 만든 것과는 비교가 안될 정도의 모습이지만 플래시에 의존하지 않고도 이런 모습을 구현할 수 있는 것 자체가 의미 있는 일일 겁니다.

3. HTML5로 구현한 동영상 플레이어

관련 글 : http://jilion.com/sublime/video 

HTML5에서 지원하는 기능과 자바스크립트만을 가지고 플래시 동영상 플레이어에서나 봄직한 인터페이스를 구현한 예도 있습니다. 위의 링크에 올려져 있는 동영상을 플레이해 보시고, 큰 화면으로 봐보세요. 그리고 작은 화면으로 다시 돌아와 보세요. 플래시를 사용하지 않고도 미려한 GUI로 동영상 플레이어를 구현해 내었습니다.

4. 오픈소스 플래시 프로젝트(Open Source Flash Project)

여기에 하나 더, 오픈소스 플래시 프로젝트라는 것이 있습니다.

관련 주소 1 : http://osflash.org/
관련 주소 2 : http://antimatter15.com/wp/ajax-animator/
관련 주소 3: http://antimatter15.com/ajaxanimator/

플래시의 독점적인 환경을 오픈소스로 구현해 보고자 노력하는 프로젝트입니다. 특히 AJAX 애니메이터라는 도구를 한번 보세요. 자바스크립트를 사용하여 플래시의 특징인 타임라인과 키프레임이라는 개념을 구현하고 있습니다. 플래시에 비하면 정말 허접(?)한 수준의 저작환경이지만, 탈플래시를 향한 노력은 최고 수준이 아닌가 싶습니다.

이렇듯 플래시에서 벗어나고자 하는 다각도의 노력들이 웹세상에서 이루어지고 있습니다. 미래의 이러닝을 위해 우리는 어떤 노력을 해야할지 진지하게 고민해 봐야 할 것 같습니다.