HTML5, 플래시의 시대가 저문다

몇 년 전만 해도 웹에서 영상을 보거나 화려한 효과를 넣으려면 플래시가 필수였습니다. 잘 만든 홈페이지의 상징이 플래시 인트로이던 시절이었죠. 그런데 올 한 해, '플래시 없이' 이 모든 것을 해내는 HTML5가 빠르게 현실이 됐습니다. 2012년을 마무리하며, 이 새 표준이 무엇을 바꾸고 있는지, 그리고 회사 홈페이지는 무엇을 준비해야 하는지 정리합니다.

HTML5는 무엇이 다른가?

결론부터: 플래시 같은 별도 프로그램 없이, 웹 자체가 영상·애니메이션·그래픽을 다룰 수 있게 됐습니다. 예전에는 영상을 넣으려면 플래시 플레이어가 필요했지만, 이제는 표준 태그 하나로 영상이 재생됩니다. 애니메이션과 그래픽도 마찬가지입니다. 웹이 스스로 할 수 있는 일이 크게 늘었습니다.

왜 플래시의 시대가 저무는가

가장 큰 계기는 스마트폰입니다. 아이폰과 아이패드가 플래시를 지원하지 않기로 하면서, 플래시에 기댄 사이트는 모바일에서 빈 화면이 됐습니다. 스마트폰 사용자가 늘수록 이 문제는 커졌고, 플래시의 자리는 좁아졌습니다.

동시에 HTML5라는 대안이 성숙했습니다. 예전에는 '플래시 말고는 방법이 없어서' 플래시를 썼지만, 이제는 표준 기술로 같은 것을 — 그것도 더 가볍고 모든 기기에서 열리게 — 할 수 있게 됐습니다. 대안이 없던 시절의 정답이, 대안이 생기면서 낡은 선택이 된 것입니다.

HTML5가 가져오는 세 가지 변화

1. 모바일에서 열린다

플래시가 열리지 않던 아이폰·아이패드에서도 HTML5로 만든 영상과 효과는 정상 재생됩니다. '모든 화면에서 열리는 웹'에 한 걸음 더 다가섰습니다. 별도 프로그램 설치 없이 어느 기기에서나 콘텐츠가 열린다는 것은 큰 변화입니다.

2. 검색에 잡힌다

플래시 안에 갇혀 검색되지 않던 콘텐츠가, HTML5에서는 텍스트로 존재해 검색엔진에 읽힙니다. 화려함과 검색 가능성을 동시에 얻을 수 있게 됐습니다. 예전에는 둘 중 하나를 포기해야 했지만, 이제는 그럴 필요가 없습니다.

3. 가볍고 빠르다

무거운 플래시 파일을 내려받지 않아도 되니 페이지가 빠르게 열립니다. 통신 환경이 제한적인 모바일에서 이 차이는 특히 큽니다. 빠른 사이트는 방문자 경험뿐 아니라 검색 평가에도 유리합니다.

반응형과 HTML5, 함께 가는 조합

올해의 두 화두인 반응형 웹과 HTML5는 사실 함께 갈 때 힘을 발휘합니다. 반응형이 '하나의 사이트로 모든 화면에 대응하는 틀'이라면, HTML5는 '그 틀 위에 플래시 없이 열리는 콘텐츠'입니다. 화면 크기에 유연하게 대응하면서, 그 안에 담긴 영상과 효과도 모든 기기에서 열리는 것 — 이 둘을 함께 적용하면 오래가는 사이트가 됩니다. 지금 새로 만든다면 이 조합을 기본으로 삼는 것이 좋습니다.

플래시가 완전히 사라지는 것은 아니다

오해하지 말아야 할 것은, HTML5가 나왔다고 플래시가 하루아침에 사라지는 것은 아니라는 점입니다. 이미 만들어진 플래시 사이트는 PC에서 한동안 동작할 것이고, 특정 분야에서는 플래시가 더 오래 쓰일 수도 있습니다. 중요한 것은 '지금 당장 다 버려라'가 아니라 '앞으로의 방향은 표준'이라는 인식입니다.

그래서 판단 기준은 명확합니다. 이미 잘 돌아가는 PC 전용 플래시 콘텐츠를 억지로 걷어낼 필요는 없지만, 새로 만드는 것은 HTML5로, 그리고 모바일에서 문제가 되는 것은 우선적으로 전환하는 것입니다. 방향을 표준으로 잡되, 전환의 속도는 회사 상황에 맞게 조절하면 됩니다.

브라우저별 지원은 어떤가

HTML5는 최신 브라우저에서 잘 지원되지만, 오래된 IE 같은 구형 브라우저에서는 일부 기능이 제한될 수 있습니다. 그래서 실무에서는 '최신 브라우저에서는 HTML5의 풍부한 표현을, 구형 브라우저에서는 최소한 내용은 보이도록' 대비하는 방식을 씁니다. 이렇게 하면 어느 환경에서도 방문자가 핵심 정보를 놓치지 않습니다.

다행히 시간이 지날수록 구형 브라우저 사용자는 줄고 있어, 이 부담은 점점 가벼워지고 있습니다. 방문 통계를 확인해 구형 브라우저 비중이 낮다면, HTML5를 적극적으로 활용해도 무리가 없습니다. 지원 범위 역시 감이 아니라 데이터로 정하는 것이 원칙입니다.

지금 무엇을 준비해야 하나

플래시는 앞으로도 한동안 남아 있겠지만, 방향은 분명합니다. 새로 만드는 사이트라면 HTML5 표준을 기본으로 삼는 것이 옳습니다. 기존 플래시 사이트라도 서두를 필요는 없지만, 모바일 접속 비중이 높거나 검색 유입이 중요한 회사라면 개편 우선순위를 앞당길 만합니다. 특히 핵심 정보가 플래시 안에 갇혀 있다면, 그것부터 꺼내는 것이 급합니다.

실제 사례 — 플래시 영상을 걷어낸 회사

한 회사가 제품 소개 영상을 플래시로 만들어 메인에 넣어두었는데, 정작 모바일 방문자는 그 영상을 볼 수 없었습니다. 스마트폰에서는 영상 자리가 빈 공간으로 남았기 때문입니다. 같은 영상을 HTML5 방식으로 다시 넣자, PC는 물론 아이폰과 안드로이드에서도 정상 재생됐습니다. 영상을 새로 만든 것도 아닌데, 그동안 모바일 방문자의 절반 가까이가 핵심 콘텐츠를 못 보고 있었던 셈입니다. 표준으로 바꾸는 것만으로 놓치던 방문자를 되찾은 사례였습니다.

자주 묻는 질문

Q. 기존 플래시 사이트를 당장 바꿔야 하나요?

급하지 않다면 다음 개편 때 HTML5로 옮기는 것으로 충분합니다. 다만 모바일 접속 비중이 높다면 우선순위를 앞당기는 것이 좋습니다. 특히 핵심 정보나 영상이 플래시 안에 있다면 그것부터 꺼내야 합니다.

Q. HTML5면 특별한 프로그램 설치가 필요 없나요?

네, 최신 브라우저는 HTML5를 기본으로 지원합니다. 사용자가 별도로 무언가를 설치할 필요가 없다는 것이 큰 장점입니다. 설치를 요구하지 않으니 이탈도 줄어듭니다.

Q. HTML5로 만들면 플래시만큼 화려하게 되나요?

됩니다. HTML5는 영상, 애니메이션, 그래픽을 모두 다룰 수 있어 충분히 화려한 표현이 가능합니다. 오히려 모든 기기에서 열리고 검색에도 잡히니, 화려함에 실용성까지 더해집니다.

Q. 반응형과 HTML5, 무엇을 먼저 해야 하나요?

둘은 함께 가는 것이 좋습니다. 새로 사이트를 만든다면 반응형 틀에 HTML5 콘텐츠를 담는 방식으로 한 번에 설계하는 것이 가장 효율적입니다. 따로 하면 두 번 일하게 됩니다.

HTML5·반응형 기반의 홈페이지가 필요하면 디자인러버스가 함께하겠습니다.