Adobe Flash가 2020년 12월 31일로 종료됨과 동시에 플래시가 쓰인 홈페이지들 중 아직 HTML5이나 Javascript등으로 변경하지 못한 홈페이지는 이제 먹통인 상태입니다. 특히 메뉴 등이 플래시로 만들어진 경우 클릭조차 안되니까요.
오늘은 그런 홈페이지들을 일단 임시적으로 살리는? 방법을 알아보려고 합니다. 이전 포스팅에서 hls.js에 대해 이야기하면서 Ruffle이란 플래시플레이어 에뮬레이터를 잠깐 언급한 적 있습니다. 아직 한참 만들어가는 프로젝트이므로 거의 매일 새버전이 나오고 있습니다만, 곧 웹상에서 swf를 재생할 수 있는 유일한 방법으로서 많이 쓰일것 같습니다. 이제는 플래시는 가급적 안써야 겠지만. 그렇다고 당장 개편이나 수정이 불가능한 홈페이지들의 경우는 우선 개편하는 동안이라도 작동은 해야 하니까 간단하게 Ruffle을 홈페이지에 적용하는 방법을 알아보고자 합니다.
첨부파일을 다운로드하면 html문서 하나와 데모용의 swf인 tetris.swf 파일, 그리고 ruffle 폴더가 있습니다. 중요한 것은 ruffle 폴더인데, 첨부파일안의 버전은 2021년 1월 17일자 이므로 아래의 Ruffle 사이트에서 최신버전으로 받으셔서 사용하기바랍니다. 홈페이지의 수많은 html문서내의 swf에 일괄적용하고자 하는 경우이므로 Self hosted 파일을 받으셔야 합니다. (브라우저익스텐션이나, 데스크탑용이 아닙니다.)
Ruffle 최신 Release 다운로드 : ruffle.rs/#releases
작업은 크게 웹서버에 적용해야 할 것, HTML문서에 적용해야 할 것, 그리고 적당한 위치에 다운로드한 Self hosted용 Ruffle를 업로드하는 것으로 이루어 집니다. 제일 먼저 제일 간단한 작업부터 해보죠.
위 Ruffle사이트에서 최신의 Self hosted용 파일을 다운로드 후 압축을 풀고 해당 폴더를 웹사이트에 업로드 해줍니다. 가능하면 접근하기 쉬운 위치(예를 들면 웹사이트의 루트경로 등)에 업로드해줍니다. 폴더안 내용은 변경하지 않습니다.
그리고 swf 파일이 쓰이는 모든 html문서를 열어서 아래와 같이 ruffle.js를 로드하는 코드를 넣어 줍니다. 경로는 본인이 업로드한 경로에 맞추어 변경하시면 됩니다.
<script src="./ruffle/ruffle.js"></script>자, 이제 마지막으로 해야 할 일은 웹서버(Web server)의 MIME Type을 추가해주는 작업입니다. 이 부분은 서버를 직접 운영하는 경우는 직접 Apache나 NgineX와 같은 웹서버의 환경설정에 추가해주면 됩니다만, 대부분은 웹호스팅환경이므로 이런 경우는 .htaccess 파일로 만들어 홈페이지의 루트 경로(web root path)로 업로드해 주면 될 것 입니다. wasm은 WebAssembly를 말하는 것으로서 일반 개발언어에서 제작한 바이너리를 웹에서 구동하게 해주는 것이라고 생각하면 될 거 같습니다. 현재 파이어폭스, 크롬, 사파리, 엣지가 지원합니다. 당연 IE는 지원이 안되므로 결과론적으로 Ruffle 역시 IE브라우저는 지원하지 않습니다. (webassembly.org/)
참조 : developer.mozilla.org/ko/docs/WebAssembly
저의 경우 우분투(Ubuntu)에서 Apache웹서버를 이용하므로 /etc/apache2/mods-available/mime.conf 를 열어 아래의 MIME타입을 추가해 줍니다. 웹서버가 wasm 파일을 처리하도록 하는 것인데 Ruffle 폴더안에 wasm파일이 있는 것을 확인 할 수 있을 것 입니다. Ruffle은 Rust라는 언어로 만들어진 것인데 미리 컴파일된 에뮬레이터가 이 wasm인 것 이죠.
AddType application/wasm .wasm만약, 웹서버를 직접 다룰 수 없는 경우 메모장에 위 코드를 넣고 .htaccess 파일(앞에 점 .으로 시작하고 확장자가 없습니다.)로 저장하여 해당 홈페이지 FTP의 루트 폴더에 넣어주면 대부분의 호스팅에서 작동할 것 입니다. 안되는 경우는 해당 호스팅회사가 개별 사이트에서 아파치 웹서버의 환경설정을 변경하지 않도록 해놓은 경우(보안상)이거나 아파치 웹서버가 아닐 수 있습니다. 다른 웹서버의 경우는 github.com/ruffle-rs/ruffle/wiki/Using-Ruffle#configure-wasm-mime-type 의 링크를 참조하세요.(영어)
자, 모든 작업이 끝났습니다. 복잡해 보이지만 Ruffle을 서버에 올리고, 기존 SWF파일을 불러오는 웹페이지에 Ruffle을 로드하는 스크립트 한줄 넣고, 웹서버에는 wasm타입의 파일을 웹서버가 처리할 수 있도록 MIME타입을 추가해주는 것이 끝입니다.
참고로 위 첨부파일의 예제 HTML은 아래의 코드와 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="./ruffle/ruffle.js"></script>
</head>
<body>
<object type="application/x-shockwave-flash" data="./tetris.swf" width="1000" height="500">
<param name="movie" value="./tetris.swf" />
<param name='wmode' value='transparent' />
<param name='allowScriptAccess' value='always' />
</object>
</body>
</html>이제 플래시가 들어간 사이트를 보면 아래와 같이 Ruffle이 실행되는 화면을 볼 수 있습니다. 아직 기존의 Flash처럼 페이지 로드와 함께 자동으로 실행되는 것은 아니지만 ▶ 기호를 누르면 어지간한 플래시는 실행이 됩니다. 다만 아직 복잡한 액션스크립트로 처리되거나 외부동영상을 불러오거나 Flash Component 등은 처리가 안되는게 너무 많긴 합니다만, 타임라인으로 만들어진 간단한 무비나 단순 링크 등의 메뉴용 플래시는 대부분 작동할 수 있을 것이라 봅니다.
Ruffle프로젝트의 로드맵(github.com/ruffle-rs/ruffle/wiki/Roadmap)을 보면 현재 AVM 1.0(액션스크립트 1.0 기반의 플레이어)은 약 70%까지 지원한다고 합니다. 로드맵에서는 궁극적으로 AS3까지 지원을 목표로 한다고하니 곧 이전의 Flash파일 모두가 Ruffle로 재생될 수 있으리라 봅니다만, 그 전에 웹에서 Flash가 거의 사라지지 않을까 생각합니다.
실제 작동되는 화면을 보시려면 Adobe Flash Player를 삭제하시고 아래의 데모사이트를 방문하세요.
모바일 브라우저에서 이제 플래시를 재생시켜 보는 건 덤!
'Web & Media' 카테고리의 다른 글
| Ruffle - Flash player emulator - part 2 (2) | 2023.03.12 |
|---|---|
| MistServer가 완전히 오픈소스가 되었습니다.(무료로 HLS서버 구축) (2) | 2022.03.06 |
| 플래시 플레이어(Flash Player)가 여전히 필요한 경우 (0) | 2021.07.17 |
| HTTP Streaming을 위한 도구 - hls.js (0) | 2021.01.14 |
| UWAMP를 이용한 USB포터블 PHP개발환경 만들기 (0) | 2020.01.07 |
