[개.고.생] 코드 수정 없이 플래시 콘텐츠 교체하기

RIP 플래시

올해 1월 12일 플래시는 웹 역사의 뒤안길로 사라져 영면하게 되었다.
한때 플래시로 먹고 살긴 했지만.. FE개발로 갈아탄지 오래 되어서인지, 없어진다 없어진다 예고를 계속 해서인지는 모르겠지만 생각보다는 감흥이 없었다.

아무튼 몇 년 전 부터 서비스 전체에서 사용중인 플래시를 제거하거나 대체 콘텐츠를 개발하는 업무가 진행되고 있었고, 2016년 말에 나도 그런 업무를 하나 맡게 되었다.

생각보다 복잡했던 서비스

당시 맡게 되었던 서비스는 인터렉티브한 UI를 여러개의 플래시 파일로 나눠서 개발이 되어 있었고, 이 플래시 UI들이 js와 연동해서 동작하는 형태였다. 뿐만 아니라 메인 콘텐츠가 플래시인 것도 있고 HTML + js 인것도 있는 그런 형태였다.

플래시 대체 콘텐츠 개발도 할 일이 꽤 되었지만, 기존 서비스에 대체 콘텐츠를 적용하는 것도 큰 공사가 될 상황이었다. 더군다나 2010~2011년에 개발된 js 소스를 수정해야 하는 상황이니 가급적이면 기존 소스를 수정하지 않을 수 있는 방법이 필요했다.

플래시인척 하기

그래서 플래시 파일을 embed 하는 js 라이브러리를 재정의하여, 플래시 파일 대신 HTML + js로 개발된 콘텐츠가 출력되도록 하는 방법을 고민하게 되었다.

해당 라이브러리는 대략 아래와 같이 사용하는 형태였다.

flashObject('/path/UI_1.swf', 'elementId', 'width', 'height',{
  flashVars: 'a=1&b=2',
  ...
});

플래시 파일명과 동일한 js 모듈들을 만들고, 기존 flashObject를 재정의한 함수에서 파라미터로 전달된 파일명을 추출하여 해당 모듈을 출력하는 방식으로 처리했다.

그리고 플래시와 js가 통신하는 기존 인터페이스를 동일하게 구현하여 기존 소스를 수정하지 않아도 되도록 하고, 플래시 콘텐츠간의 통신은 ViewModel을 이용하여 상태를 동기화 했다.

적용한 효과

이렇게 설계한 덕분에 기존 페이지에 플래시 대체 콘텐츠 js 파일을 로드하는 script 태그 하나만 추가하면 기존 소스를 수정할 필요 없이 대체 콘텐츠가 출력될 수 있었다.
만약 이렇게 설계하지 않았었다면, 백엔드 담당자와 함께 레거시 코드를 갈아 엎는 대공사를 했을 것이다.

게다가 플래시 플레이어가 지원 종료되기 전까지는 한동안 IE 하위 브라우저에서는 플래시 콘텐츠를 노출하도록 했는데, 이 또한 플래시 대체 콘텐츠 js 파일을 로드하지 않도록 분기 처리만 하면 되어서 간단하게 대응할 수 있었다.

물론 한동안 그렇게 서비스하다가 작년에 분기처리는 삭제하고, IE 하위 브라우저에서는 콘텐츠 노출 없이 지원하지 않는다는 안내문구 출력으로 최종 마무리하게 되었다.