Flash는 화려한 GUI와 다양한 시각 효과를 제공하며 애니메이션 분야에서 오랫동안 사랑받아 온 기술입니다. 사용자는 특정 플랫폼 안에서 멀티미디어와 각종 애니메이션을 자유롭게 구현할 수 있었지만, 브라우저에 완전히 통합되지 않고 별도의 플러그인 형태로 감싸져 동작해야 한다는 한계가 있었습니다.
HTML5 <canvas> 요소란?
HTML5의 <canvas> 요소는 JavaScript를 활용해 그래픽을 손쉽게 그릴 수 있는 강력하고도 간편한 도구입니다. 차트나 그래프 작성, 사진 합성, 간단한(그리고 그리 간단하지 않은) 애니메이션 제작까지 폭넓게 활용할 수 있습니다.
다음은 width와 height라는 두 가지 고유 속성만 가진 아주 간단한 <canvas> 예제입니다. 물론 id, name, class처럼 HTML5의 공통 속성도 함께 사용할 수 있습니다.
<canvas id = "mycanvas" width = "100" height = "100"></canvas>
Canvas vs Flash, 이제 선택은 명확합니다
현재 웹 개발 현장에서는 Canvas가 주류로 자리 잡았으며, Flash는 더 이상 권장되지 않는 구식 기술이 되었습니다. Canvas 하나만으로도 도형 애니메이션, 크기 조절(scale), 변형(transform) 등 다양한 시각 효과를 자유롭게 구현할 수 있습니다.
참고로 Adobe는 2020년 12월에 Flash Player의 공식 지원을 종료했고, 주요 브라우저들 역시 플러그인 지원을 중단했습니다. 따라서 오늘날 웹에서 애니메이션이나 그래픽을 구현하려면 HTML5 Canvas(CSS 애니메이션, WebGL 등과 함께)가 표준적인 선택이라 할 수 있습니다.