웹 브라우저 호환성_배너 이미지 대체 방법

플래시로 만든 것 같은 멋진 애니메이션 배너를 웹 표준 플랫폼 기술로 디자인 하는 것은 가능하다. 그러나 오래된 웹 브라우저에서는 동작하지 않는다. HTML5, CSS3, jQuery 같은 것은 새로운 기술이다. 이런 새로운 기술이 적용된 배너가 제대로 동작하지 않는 IE6, 7, 8 같은 오래된 웹 브라우저에서 웹 표준 플랫폼 기술을 이용한 애니메이션 사운드 재생이 되도록 하는 것은 매우 어려운 일이다.

웹 배너의 기본적인 기능을 지키면서 대체하는 방법으로 첫 번째는 어도비 플래시(Adobe Flash) 기술을 이용하는 방법이다. 그러나 이 기술은 웹 브라우저에 설치해야만 동작하는 기술이기 때문에, 애플 기기인 아이폰, 아이패드 등에서는 동작하지 않는다.

두 번째 방법은 이미지로 대체하는 것이다. 이미지는 전통적으로 배너 디자인을 할 때 자주 활용된다. 배너의 기본적인 기능 구현은 물론이고, 웹 브라우저의 호환성 문제로 골치 아플 필요가 없다. 다만 애니메이션이나 사운드 재생 기능을 구현할 수는 없다.

여기에서는 두 번째 방법인 이미지 대체 방법으로 오래된 웹 브라우저에서 배너를 구현한다. 우선 먼저 해야 할 일은 오래된 웹 브라우저를 판별하는 것이다. 그리고 오래된 웹 브라우저에서 이미지로 보일 수 있도록 코드를 수정해야 한다.

이 방법을 이용하면 오래된 웹 브라우저에서는 이미지 배너로, 최신형 웹 브라우저에서는 멋진 애니메이션과 사운드 재생이 이루어지는 배너로 사용자에게 보일 수 있다. 사용자는 불평할 이유가 없다. 이미지 배너가 아닌 애니메이션 배너를 보고 싶은 사용자는 그저 웹 브라우저를 최신 웹 브라우저로 업그레이드하면 되기 때문이다.

웹 브라우저의 호환성을 고려하여 이미지로 만드는 방법은 아래 동영상을 참고하자.

답글 남기기