본문 바로가기

IT 리뷰/블로그 SEO

어도비 플래시 서비스 종료 후 SWF 작동되게 설정 후기

728x90
반응형

라이믹스 업데이트 후 XE 플래시 게시판이 깨진 이유부터 먼저 봐야 했습니다

예전 XE에서 만든 플래시 게시판을 라이믹스로 올린 뒤 갑자기 게시물 자체가 열리지 않거나, 접속은 되는데 플래시가 실행되지 않는 경우가 꽤 헷갈립니다. 저도 처음에는 단순히 플래시가 단종돼서 끝난 문제라고 생각했는데, 실제로는 문제가 두 단계로 나뉘어 있었습니다.

첫 번째는 라이믹스와 최신 PHP 환경에서 예전 XE용 스킨 문법이 깨진 것이고, 두 번째는 브라우저가 더 이상 기존 Flash Player 방식으로 SWF를 실행하지 않는 것이었습니다.

그래서 이 문제는 한 번에 잡는 것이 아니라, 서버 오류 해결 → 플래시 대체 재생 적용 순서로 가야 훨씬 덜 헤맵니다.

핵심 정리
처음 뜬 오류는 스킨 템플릿 문제였고, 게시물 접속이 된 뒤에도 플래시가 안 보인 이유는 Flash Player 방식이 이미 막혀 있기 때문이었습니다. 따라서 read.html을 먼저 손보고, 그다음 Ruffle 방식으로 바꾸는 흐름이 맞았습니다.

처음 뜬 서버 오류는 read.html의 count 구문부터 정리해야 했습니다

가장 먼저 보였던 오류는 대체로 배열이 와야 하는 곳에 비어 있는 값이 들어왔다는 뜻이었습니다.

이런 경우는 대개 count($변수)처럼 작성된 구문에서 값이 비어 있을 때 생깁니다.

예전 환경에서는 어찌어찌 넘어가던 구문이 최신 PHP에서는 더 엄격하게 잡히면서 게시물 자체가 멈추는 상황이 나온 것입니다.

이때 먼저 열어야 했던 파일은 아래 경로였습니다.

modules/board/skins/default_swf/read.html

count 오류는 이렇게 바꾸면 됩니다

처음 해야 할 일은 아주 단순합니다.

count($변수)처럼 되어 있는 부분을, 값이 비어 있어도 에러가 나지 않도록 배열 기준으로 바꾸면 됩니다.

수정 전

<!--@if(count($extra_keys))-->

수정 후

<!--@if(count((array)$extra_keys))-->

태그 목록도 같은 방식으로 손봤습니다. 아래처럼 태그를 가져오는 구문이 있으면

수정 전

{@ $tag_list = $oDocument->get('tag_list') }

수정 후

{@ $tag_list = (array)$oDocument->get('tag_list') }

이 단계까지 적용하면 보통 게시물 접속 자체가 안 되던 첫 번째 문제는 정리됩니다. 즉 서버 오류는 잡히고, 페이지가 다시 열리기 시작합니다.

여기서 많이 헷갈리는 부분
count 오류를 해결했다고 해서 플래시가 바로 실행되는 것은 아닙니다. 이 단계는 어디까지나 페이지를 다시 열리게 만드는 작업이고, 플래시 재생은 다음 단계에서 따로 처리해야 합니다.

게시물 접속은 되는데 플래시가 실행되지 않았던 이유

read.html을 수정한 뒤 게시물 자체는 다시 열렸지만, 화면에는 플래시가 나오지 않거나 재생 자리만 비어 있는 상태가 남을 수 있습니다.

이건 코드를 덜 고쳐서가 아니라, 예전 XE 스킨이 쓰던 displayMultimedia() 방식이 지금 브라우저 환경에서는 더 이상 정상적으로 동작하지 않기 때문입니다.

즉 이 문제는 Flash Player를 억지로 다시 살리는 것이 아니라, SWF 파일을 대신 읽어 줄 수 있는 방식으로 출력 구조를 바꾸는 것이 핵심이었습니다. 여기서 제가 적용한 방법이 바로 Ruffle 방식이었습니다.

Ruffle을 쓰기 위해 read.html 맨 위에 먼저 넣은 코드

우선 read.html 최상단, 즉 <div class="board_read"> 바로 위에 아래 한 줄을 추가했습니다.

이 스크립트가 있어야 브라우저에서 Ruffle 플레이어를 만들 수 있습니다.

<script src="https://unpkg.com/@ruffle-rs/ruffle/ruffle.js"></script>

기존 Extra Output 구간은 통째로 바꿔야 했습니다

여기서 가장 중요한 부분이 있습니다. 방금 넣은 Ruffle 스크립트만으로는 끝나지 않습니다.

예전 플래시 출력은 보통 Extra Output 구간 안에서 displayMultimedia()로 SWF를 띄우고 있었는데, 이 부분을 그대로 두면 최신 브라우저에서는 재생되지 않습니다.

즉 아래 구간은 새로 아무 데나 추가하는 것이 아니라, 기존 Extra Output 구간을 통째로 교체해야 합니다.

이 부분을 제가 실제로 교체한 방식은 아래와 같았습니다.

<!-- Extra Output -->
<div class="exOut" cond="$oDocument->isExtraVarsExists() && (!$oDocument->isSecret() || $oDocument->isGranted())">
	<!--@if(count((array)$extra_keys))-->
		{@ $extravar_list = (array)$oDocument->getExtraVars() }
		<block cond="isset($extravar_list[1]) && $extravar_list[1]->getValueHTML()">
			<div id="ruffle-container-{$oDocument->document_srl}" style="text-align:center"></div>
			<script>
				window.RufflePlayer = window.RufflePlayer || {};
				window.addEventListener("DOMContentLoaded", function () {
					var ruffle = window.RufflePlayer.newest();
					if (!ruffle) return;

					var player = ruffle.createPlayer();
					var container = document.getElementById("ruffle-container-{$oDocument->document_srl}");
					if (!container) return;

					container.innerHTML = "";
					container.appendChild(player);

					player.style.width = "{$module_info->swf_width}px";
					player.style.height = "{$module_info->swf_height}px";
					player.ruffle().load("{$extravar_list[1]->getValueHTML()}");
				});
			</script>
			<noscript>
				<p><a href="{$extravar_list[1]->getValueHTML()}">SWF 파일 다운로드</a></p>
			</noscript>
		</block>
	<!--@end-->
</div>
<!-- /Extra Output -->

이 구조의 장점은 기존 확장변수에서 SWF 주소를 읽어오고, 문서 번호별로 고유한 컨테이너를 만든 뒤, 그 안에 Ruffle 플레이어를 생성해 SWF를 직접 불러온다는 점입니다.

예전처럼 브라우저 플러그인에 맡기는 것이 아니라, 플래시 자리를 Ruffle이 대신 처리하게 만드는 방식입니다.

제가 최종적으로 적용했던 흐름은 이 순서였습니다

처음에는 서버 오류 때문에 게시물 접속 자체가 안 됐습니다.

그래서 read.html에서 count 관련 구문을 먼저 정리해 접속 오류를 없앴습니다.

그다음에는 게시물은 열리는데 플래시가 실행되지 않아, 기존 displayMultimedia() 구간을 Ruffle 방식으로 바꿨습니다. 마지막으로 캐시를 비우고 브라우저를 강력 새로고침하니 SWF가 다시 보이기 시작했습니다.

정리하면 가장 덜 헤매는 순서는 이것이었습니다. read.html count 오류 해결Extra Output를 Ruffle 코드로 교체캐시 삭제와 Ctrl + F5 새로고침. 처음에는 막막해 보여도 실제로는 순서만 맞추면 정리됩니다.

제가 해보면서 느낀 점

저라면 원본 default_swf 스킨을 바로 덮어쓰기보다는, 폴더를 한 번 복사해서 별도 스킨으로 만들어 테스트하는 쪽을 추천합니다. 처음 손댈 때는 어디가 문제인지 한 번에 안 보이는 경우가 많아서, 원본과 비교할 수 있게 두는 편이 훨씬 마음이 편했습니다.

수정 후에도 꼭 같이 해야 했던 캐시 삭제

파일을 바꿨는데도 화면이 그대로인 경우가 있습니다.

이럴 때는 대부분 코드가 안 먹은 것이 아니라 캐시가 남아 있는 경우입니다. 라이믹스 관리자에서 캐시를 정리하고, 브라우저에서는 Ctrl + F5로 강력 새로고침까지 해줘야 바뀐 템플릿이 제대로 반영됩니다.

이 단계를 빼먹으면 수정 전 화면만 계속 보여서 괜히 다른 곳을 또 건드리게 됩니다.

저는 이런 경우가 꽤 많아서, 파일 수정 뒤에는 이제 거의 습관처럼 캐시부터 먼저 지우고 확인합니다.

여기까지 했는데도 플래시가 안 보인다면 체크할 부분

그래도 화면이 비어 있다면 몇 가지를 더 확인해야 합니다. 가장 먼저 볼 것은 확장변수 번호입니다.

위 코드에서는 $extravar_list[1]에 SWF 주소가 들어 있다는 전제로 작성했기 때문에, 실제 사이트 구조가 다르면 번호가 달라질 수 있습니다.

그다음은 swf_width, swf_height 값입니다.

플레이어는 생성됐는데 크기값이 비정상으로 들어가 있으면 보이지 않는 것처럼 느껴질 수 있습니다. 마지막으로 SWF 파일 자체가 오래된 외부 연동이나 특수한 스크립트를 쓰는 경우라면 일부 자료는 기대만큼 깔끔하게 안 보일 수도 있습니다.

결론적으로 문제는 두 번 나눠서 해결해야 했습니다

라이믹스로 업데이트한 뒤 XE 플래시 게시판이 깨졌다면, 단순히 플래시 단종만 볼 것이 아니라 먼저 read.html 템플릿 오류부터 정리해야 합니다.

그다음 기존 Flash Player 방식이 더 이상 동작하지 않기 때문에, Ruffle 방식으로 출력 구조를 교체해야 실제 SWF가 다시 보일 가능성이 생깁니다.

저도 처음에는 이게 한 번에 해결될 줄 알았는데, 막상 해보니 서버 오류와 재생 방식 문제를 따로 봐야 했습니다.

그래도 순서대로 접근하니 정리가 됐고, 결국 게시물 접속과 SWF 재생까지 모두 해결할 수 있었습니다.

Q. count 오류만 해결하면 플래시도 바로 실행되나요?

아닙니다. count 오류 수정은 게시물 접속을 살리는 단계이고, 플래시 재생은 따로 Ruffle 방식으로 바꿔야 합니다.

Q. Ruffle 코드는 어디에 넣어야 하나요?

read.html 맨 위에는 Ruffle 스크립트 한 줄을 추가하고, 중간의 Extra Output 구간은 기존 Flash 출력 코드를 지우고 Ruffle 플레이어 생성 코드로 통째로 교체해야 합니다.

Q. 수정했는데 반영이 안 되는 이유는 뭔가요?

대부분 캐시 때문입니다. 라이믹스 캐시 삭제와 브라우저 강력 새로고침까지 같이 해야 바뀐 코드가 제대로 보입니다.



728x90
반응형
그리드형