Flash는 10년이 넘는 시간동안 수십억 사용자들에게 비디오, 애니메이션, 인터렉티브한 사이트 그리고 광고를 제공했지만, 이제는 사라질 것입니다. Adobe는 2020년까지 Flash의 지원을 서서히 중단하기로 하였습니다. Firefox는 더 이상 Flash를 지원하지 않으며, Chrome에서도 지원하지 않습니다. 그럼 무엇을 쓸 수 있을까요? Flash에서 제공했던 것들이 가능한 수 많은 공개 표준이 있습니다.

진짜 열린 멀티미디어

Flash는 인터렉티브한 멀티미디어 웹사이트를 구축 및 제공하기 위한 단일화된 플랫폼 제공을 약속했었습니다. 그리고, 대부분의 경우에서 그래왔습니다. 하지만 기술은 절대로 진짜 열려있거나 접근가능하지 않았고, Flash 플레이어는 모바일 장치에게 너무 많은 리소스를 요구했습니다. 이제 Flash가 했던 모든 것들을 오픈소스가 대체합니다. 다음은 여러분이 내일의 인터렉티브한 웹을 구축하거나 웹에서 애니메이션, 게임, 비디오를 제공하는 것에 대해 진지한 고민을 하신다면 배워야할 기술들입니다.

웹 애니메이션

CSS
CSS 애니메이션은 상대적으로 새롭지만 웹 애니메이션을 시작하기에 가장 쉬운 방법입니다. CSS는 레이아웃, 폰트, 색상 등을 명시하는 기본 규칙으로 웹사이트의 스타일을 설정하기 위해 만들어졌습니다. CSS3의 릴리즈와 함께 애니메이션은 이제 표준이 되었고 개발자로서 여러분이 어떻게 브라우저에게 애니메이션할 것인지 알려 줄 수 있게 되었습니다. CSS는 사람이 읽을 수 있으며, 이는 기본적으로 통에 표시된대로 동작함을 의미합니다. 예를 들어, 프로퍼티 “animation-direction”은 정확히 애니메이션의 방향을 설정합니다.

이제 여러분은 CSS를 사용해 부드럽고, 매끄러운 애니메이션을 생성할 수 있습니다. 키프레임, 타이밍 조정, 애니메이션 투명도 등을 생성하는 것은 아주 간단합니다. 또한 모든 애니메이션은 일반적으로 CSS(텍스트, 이미지, 컨테이너 등)를 사용해 스타일링한 어떤 것과도 잘 동작합니다.

CSS 애니메이션은 여러분이 프로그래밍 언어에 익숙하지 않더라도 가능합니다. 많은 오픈소스 프로젝트처럼 여러분이 가지고 놀 수 있는 코드는 웹에 있습니다. Mozilla는 또한 완전한 CSS 애니메이션 문서를 생성 및 유지하고 있습니다. 대부분의 개발자들은 간단한 프로젝트에서는 CSS 애니메이션 사용을, 더 복잡한 사이트에서는 JavaScript 사용을 추천합니다.

JavaScript
이전부터 개발자들은 JavaScript를 사용해 애니메이션을 사용해왔습니다. 기본적인 mouseover 스크립트는 20여년 이상되었고 HTML5 <canvas>엘리먼트를 포함한 오늘의 JavaScript는 더 놀라운 것들을 할 수도 있습니다. 간단한 스크립트라도 훌륭한 결과를 만들어 냅니다. JavaScript를 사용해 도형 그리기, 색상 변경, 이미지 이동이나 변경, 애니메이션 투명도작업을 할 수 있습니다. JavaScript 애니메이션은 SVG (scalable vector graphics) 포맷을 사용하며, 이는 작품이 로드되고 렌더링되는 대신 사실 수학을 기반으로 라이브 드로잉된다는 것을 의미합니다. 이름에서도 알 수 있듯이 이는 어떤 스케일에서도 선명하게 유지되며 완벽하게 제어가 가능합니다. SVG는 anti-aliased 렌더링, 패턴 및 그래디언트 채우기, 정교한 필터 효과, 임의의 경로 자르기, 텍스트 및 애니메이션을 제공합니다. 그리고 물론 이는 공개 표준 W3C 권장사항입니다. SVG, JavaScript, CSS3를 사용해 개발자들은 특정 포맷이나 플레이어를 요구하지 않는 인상적인 인터렉티브 애니메이션을 생성할 수 있습니다.

JavaScript 애니메이션은 바운싱, 중지, 멈춤, 되감기 또는 느리게 등을 포함해 아주 세련될 수 있습니다. 인터렉티브하고 마우스 클릭이나 휠에 응답하도록 프로그래밍 할 수도 있습니다. JavaScript에 내장된 새로운 웹 애니메이션 API는 여러분이 키프레임과 엘리먼트에 대한 더 많은 컨트롤로 애니메이션을 잘 조정할 수 있게 해주지만, 여전히 초기 버전이므로 개발 실험중이거나 어떤 기능들은 모든 브라우저를 지원하지 않을 수도 있습니다.

부가적으로, JavaScript 애니메이션은 입력 필드나 폼 제출, 키 입력에 반응하도록 프로그래밍할수도 있기 때문에 웹 게임 생성을 완벽하게 해줍니다.

웹 게임

한때 Flash가 웹 게임을 점령했었습니다. 배우고, 사용하고 배포하는 것이 쉬웠습니다. 아주 강력하기도 해서 수백만 사용자에게 멀티플레이어 온라인 게임을 제공할수도 있었습니다. 하지만 오늘날에는 JavaScript, HTML5, WebGL, WebAssembly를 사용해 더 나은 경험을 제공하는 것이 가능합니다. 최신 브라우저와 오픈소스 프레임워크를 사용해 3D FPS, RPG, 어드벤쳐 게임 등이 가능해졌습니다. 실제로, WebVR과 A-Frame같은 기술을 사용해 웹에서 완벽한 몰입형 가상 현실 경험을 제공할 수도 있습니다.

웹 게임은 오픈소스 프레임워크와 플랫폼이 작동하도록하는 생태계에 의존합니다. 각각은 시각적인것부터 컨트롤, 오디오, 네트워크에 이르기까지 중요한 역할을 합니다. Mozilla Developer Network에 최근 사용중인 기술들의 목록을 작성하였습니다. 다음은 그 중 몇 가지와 용도에 대한 설명입니다:

WebGL
웹 컨텐츠로부터 고사양, 하드웨어 가속 3D(그리고 2D)를 생성할 수 있도록 해줍니다. OpenGL ES 2.0은 웹을 지원하는 구현물입니다. WebGL 2는 더 나아가, 브라우저에서 OpenGL ES 3.0 레벨 사용을 지원합니다.

JavaScript
JavaScript는 웹에서 사용되는 프로그래밍 언어로, 브라우저에서 잘 동작하며 전체적으로 점점 빨라지고 있습니다. 이미 수천여개의 게임 개발에 사용되었고 새로운 게임 프레임워크도 지속적으로 개발되고있습니다.

HTML 오디오
<audio> 엘리먼트는 여러분이 간단한 음향 효과나 음악을 쉽게 재생할 수 있도록 해줍니다. 더 많은 기능이 필요하다면, 정말 강력한 오디오 처리를 위한 Web 오디오 API를 확인해 보세요!

Web 오디오 API
JavaScript 코드로 오디오 재생, 합성 및 조작할 수 있는 이 API는 실시간으로 음악을 재생하고 조작하는 것 만큼 훌륭한 음향 효과를 낼 수 있도록 해줍니다.

WebSockets
WebSocket API는 여러분의 앱이나 사이트가 서버에 연결하여 실시간으로 데이터를 주고받을 수 있도록 해줍니다. 멀티플레이어 턴 기반이나 양방향 기반 게임, 채팅 서비스 등에 완벽합니다.

WebRTC
WebRTC는 비디오 채팅, 보이스 콜링 및 P2P 파일 공유 웹 앱에 사용될 수 있는 굉장히 빠른 API입니다. 낮은 대기 시간(latency)을 요구하는 실시간 멀티플레이어 게임에도 사용될 수 있습니다.

WebAssembly
HTML5/JavaScript 게임 엔진은 전보다 나아졌지만, 네이티브 앱의 성능을 여전히 만족하지 못합니다. WebAssembly는 웹 앱으로 네이티브에 가까운 성능을 가져올 것을 약속합니다. 그 기술은 Unity와 Unreal과 같은 엔진으로 만들어진 게임을 포함한 C/C++ 코드를 브라우저가 컴파일 할 수 있도록 합니다.

WebAssembly 사용으로 웹 게임은 멀티스레딩의 장점갖게 될 것입니다. 개발자는 보안을 손상시키지 않으면서도 네이티브 코드에 근접한 속도로 실행되는 믿기 힘든 3D 웹 게임을 생성할 수 있게 될겁니다. WebAssembly는 게임과 열린 웹을 위한 엄청난 혁신입니다. 이는 웹에 접근할 수 있는 시스템이나 어떤 컴퓨터에서든 동작하는 게임을 생성할 수 있게 된다는 것을 의미합니다. 그리고 브라우저에서 실행되기 때문에 온라인 멀티플레이어 모드로 통합하기가 쉬울겁니다.

부가적으로, HTML5/JavaScript 게임 엔진은 아주 많이 나와있습니다. 이런 게임 엔진들은 물리학과 제어같은 기본사항을 처리하여 개발자에게 개발을 위한 프레임워크/세계를 제공합니다. atom과 Quick 2D 엔진 같은 가볍고 빠른것부터, WhitestormJS과 Gladius 같은 완전한 3D 엔진까지 다양합니다. 선택할 수 있는 것은 다양하고 각각은 고유한 장단점을 갖습니다. 하지만 최종적으로 이 모든 것들은 플러그인 없이 최신 웹 브라우저에서 플레이할 수 있는 게임을 생성합니다. 그리고 이런 대부분의 게임들은 좀 더 낮은 사양의 하드웨어에서 실행이 가능하며 이는 더 많은 사용자들에게 닿을 수 있음을 의미합니다. 실제로 웹을 위해 제작된 게임은 태블릿, 스마트폰 그리고 심지어 스마트 TV에서도 실행이 가능합니다.

MDN에 웹 게임 제작을 위한 아주 많은 문서와 순수 JavaScript, Phaser 게임 프레임워크를 사용해 게임을 생성하는 몇 가지 튜토리얼이 있습니다. 웹 게임 개발을 시작하기에 아주 좋습니다.

Video

대부분의 비디오 서비스는 이미 웹 기술과 공개 코덱을 사용하는 HTML5 기반 스트리밍으로 전환하였습니다(일부는 Flash 기반 FLV 또는 FV4 코덱을 사용합니다). 앞서 설명한 것과 같이 Flash 비디오 포맷은 웹 브라우저와 모바일 플랫폼에게 부담을 줄 수 있는 소프트웨어 렌더링에 의존합니다. 최신 비디오 코덱은 비디오 재생을 위해 하드웨어 렌더링을 사용해 반응성과 효율성을 굉장히 높힐 수 있습니다. 불행히도 Flash를 HTML5로 전환하는 방법은 비디오를 재 인코딩하는 것 하나밖에 없습니다. 이는 FFmpeg과 Handbrake 같은 무료 변환기를 통해 HTML5 호환 포맷으로 소스를 변환해야 함을 의미합니다.

Mozilla는 HTML5 호환과 오픈소스 비디오 포맷 WebM 구축 및 향상을 적극적으로 돕고있습니다. WebM은 Matroska 컨테이너 기반이며 VP8과 VP9 비디오 코덱과 Vorbis 또는 Opus 코덱을 사용합니다.

여러분의 미디어를 HTML5 호환 포맷으로 일단 변환하면, 웹 사이트에 비디오를 다시 업로드해야 합니다. HTML5는 내장 미디어 컨트롤을 갖고 있어 플레이어 설치가 필요 없습니다. 식은 죽 먹기 입니다. HTML 한 줄만 사용하면됩니다:

<video src="videofile.webm" controls></video>

네이티브 컨트롤은 브라우저간에는 일관성이 없음을 유의하세요. HTML5로 만들어졌기 때문에 CSS를 사용해 커스터마이징할 수 있고 JavaScript를 사용해 비디오를 링크할수도 있습니다. 이는 접근성을 높히고, 여러분의 고유한 브랜딩을 추가하고 브라우저간에 외형이나 느낌을 일관되게 유지할 수 있음을 의미합니다.

HTML5는 Media Source Extensions (MSEs)을 사용한 적응형 스트리밍을 처리할수도 있습니다. 설치가 어려울수도 있지만 세부 사항을 처리할 수 있는 Shaka 플레이어와 JW 플레이어 같은 패키징된(pre-packaged) 플레이어를 사용하시면 됩니다.

MDN의 개발자들이 과정에 대한 자세한 내용을 포함하는 Flash 비디오의 HTML5 비디오 변환 상세 가이드를 생성하였습니다. 다행히도 그리 어렵지는 않습니다.

Flash 이후

미래의 웹은 열려있고(소망합니다) Flash는 창작을 위한 훌륭한 도구임에도 불구하고 충분히 열려있지 않습니다. 감사히도 많은 오픈 소스 도구가 Flash가 했던 것들을 할 수 있습니다. 하지만 여전히 우리는 초기 단계에 있으며 애니메이션, 인터렉티브한 웹사이트, 웹 게임은 약간의 코딩 지식을 필요로합니다. 여러분이 필요로하는 모든것은 나와있고, 배워보시길 기대합니다.

공개 웹 기술은 Flash보다 훨씬 뛰어나며, 인터넷에 연결된 누구든 접근가능합니다.

이 글은 Dustin Driver의 Life After Flash: Multimedia for the Open Web의 한국어 번역입니다.