본문 바로가기
Web

Ruffle - Flash Player emulator

by nooree 2021. 1. 17.

Adobe Flash가 2020년 12월 31일로 종료됨과 동시에 플래시가 쓰인 홈페이지들 중 아직 HTML5이나 Javascript등으로 변경하지 못한 홈페이지는 이제 먹통인 상태입니다. 특히 메뉴 등이 플래시로 만들어진 경우 클릭조차 안되니까요. 

 

오늘은 그런 홈페이지들을 일단 임시적으로 살리는? 방법을 알아보려고 합니다. 이전 포스팅에서 hls.js에 대해 이야기하면서 Ruffle이란 플래시플레이어 에뮬레이터를 잠깐 언급한 적 있습니다. 아직 한참 만들어가는 프로젝트이므로 거의 매일 새버전이 나오고 있습니다만, 곧 웹상에서 swf를 재생할 수 있는 유일한 방법으로서 많이 쓰일것 같습니다. 이제는 플래시는 가급적 안써야 겠지만. 그렇다고 당장 개편이나 수정이 불가능한 홈페이지들의 경우는 우선 개편하는 동안이라도 작동은 해야 하니까 간단하게 Ruffle을 홈페이지에 적용하는 방법을 알아보고자 합니다. 

 

ruffle_demo.zip
1.55MB

 

첨부파일을 다운로드하면 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가 거의 사라지지 않을까 생각합니다. 

 

Ruffle의 실행화면
예제파일의 테트리스 SWF파일이 Ruffle로 실행되는 모습


실제 작동되는 화면을 보시려면 Adobe Flash Player를 삭제하시고 아래의 데모사이트를 방문하세요.

모바일 브라우저에서 이제 플래시를 재생시켜 보는 건 덤!

 

https://nooree.github.io/ruffle/

 

https://nooree.github.io/ruffle/

 

nooree.github.io

'Web' 카테고리의 다른 글

Ruffle - Flash Player emulator  (6) 2021.01.17
HTTP Streaming을 위한 도구 - hls.js  (0) 2021.01.14
UWAMP를 이용한 USB포터블 PHP개발환경 만들기  (0) 2020.01.07

댓글6

  • 오... 2021.01.21 10:51

    이런건 티스토리 자체에는 적용할 수 없는건가요??
    답글

    • Favicon of https://nooree.com BlogIcon nooree 2021.01.21 15:27 신고

      웹서버에 MIME 타입을 추가할 수 있어야 하므로 아마 티스토리에 직접 적용은 어려울 듯 합니다. 일반 리눅스환경의 웹호스팅 환경에서는 가능합니다.

  • 오... 2021.01.21 22:30

    답변 감사합니다 저 진짜 컴맹인데 이 글 보고 깃허브도 알고 , 또 따라해서 적용도 해봤습니다
    근데 신기한게 깃 허브에 ruffle을 설치(?) 해두고 나서
    <script src="내경로/ruffle.js"></script> 이것을 전혀 다른 웹페이지에 적용한 뒤 해보니까 또 플래시가 실행이 되네요?? 그러니까 깃허브가 아닌 아예 딴 페이지의 이것만 넣으니 적용이 됩니다 ㄷㄷ...어리둥절 하지만 원래 그런식으로 돌아가는 건지..이 말은 즉, 이 에뮬레이터를 딴 사이트에 일일이 적용시킬 필요 없이 swf 경로만 맞춰주면 사용이 된다는건데..일시적인건지 뭔지는 잘 모르겠지만 되네요 ...ㅎㅎ;;
    답글

    • Favicon of https://nooree.com BlogIcon nooree 2021.01.22 10:02 신고

      Self hosted용 Ruffle의 경우 웹서버의 MIME타입을 설정해야 하는 건데 특정 웹서버에서는 그냥 작동이 되더라고요. 아마도 MIME타입을 설정하지 않아도 wasm을 그냥 바이너리로 처리하니까 되는거 같습니다. 다만, Ruffle이 아직 AVM1.0기준 70%까지만 지원되는 상태이고 AS2.0이상의 복잡한 플래시는 지원이 안되는게 많아서 본격적으로 사용하기는 좀 그렇죠. 대신에 과거에 만들어진 홈페이지들이 대개 움직이는 사진이나 단순 메뉴링크 정도로 활용했기에 당장 플래시를 제거못하는 홈페이지에서는 유용하지 않을까 생각합니다.

  • 도와주세요 2021.01.25 15:48

    블루호스트같은데서도 ruffle이 실행이 될까요?? 아니면 추천해줄만한 웹호스팅 사이트 추천해주세요 제가 플래시게임을 이용한 사이트를 만들고 싶은데 ruffle이 꼭필요해서요
    답글

    • Favicon of https://nooree.com BlogIcon nooree 2021.01.25 16:57 신고

      Ruffle이 모든 플래시 게임이 작동되지 않을 겁니다만 현 시점에서 사용하신다면 웹서버의 설정을 변경할 수 있는 .htaccess의 사용권한이 있는 호스팅을 사용하시면 됩니다. 일부 호스팅에서는 MIME 타입을 지정하지 않아도 작동되기는 한데 정확한건 확인을 해보셔야 합니다. 블루호스트는 제가 잘 모르는 호스팅회사인데 외국계인가요? 반드시 외국계가 아니어도 된다면 카페24같은 곳은 어떨련지요. 카페24 웹호스팅은 사용자가 .htaccess 파일을 추가하여 사용할 수 있습니다.