Digital Marketing우리가 HTML5 배너를 만들어야 하는 이유

유선영


NEODIGM ♥ HTML5


네오다임에 영상팀이 갖춰지기 전, 웹팀에서도 과거에 온라인에서는 swf 배너, 오프라인에서는 행사 시작 전이나 Break time에 스크린에 띄워두는 인포플래시 작업이 Flash를 통해 종종 이루어지곤 했습니다.

앞서 말씀드린 것처럼 공수가 많이 들어가고 작업 시간도 많이 소요될 뿐만 아니라 여러 가지 환경에서 보여지기 불안정하지만 그때의 우리가 Flash를 사용하여 배너, 인포플래시 작업을 했던 이유는 무엇일까요? 단컷 배너, 인포브릿지 이미지로 물론 대체 가능한 제작물이지만 모션이 들어간 역동적인 이미지는 사람들의 이목을 끌고 더 기억에 잘 남기 때문입니다.

실제로 한 Adform의 연구에 따르면 단컷배너 보다 모션배너가 클릭률이 크게 증가했다고 합니다.
요즘은 글보다는 영상을 찾는 사람이 많아지면서 포털보다는 유튜브가 대세가 되며 영상 콘텐츠의 영향력이 커지고 있는 만큼 네오다임도 영상팀이 신설되어 트렌드의 방향에 맞춰 발 빠르게 움직이고 있습니다. 영상의 시대가 펼쳐지며 그에 따라 광고 배너도 정적인 배너에서 애니메이션으로 변화하고 있습니다. Animate를 사용하여 만든 HTML5 배너는 모션이 들어가는 것뿐만 아니라 배너가 반응형으로 표시될 수 있게 작업이 가능하므로 반응형 웹에 사용하기에도 적절할 것이라고 생각합니다.


네오다임에서 작업하는 광고 배너의 종류

네오다임에서 작업하는 광고 배너의 종류는 크게 JPG 단컷배너, GIF 단컷롤링배너, HTML5 배너 3가지로 나눌 수 있습니다.

JPEG 배너는 높은 색상 수로 Low, Medium, High, Very High, Maximum 버전으로 저장할 수 있습니다.
용량을 낮출 수 있지만 그에 따라 이미지 품질도 낮아지고 애니메이션이 들어가지 않기 때문에 비교적 눈에 띄지 않을 수 있습니다.


네오다임에서는 단컷배너 여러 장을 롤링하여 GIF배너도 작업하고 있습니다.
컷이 넘어가는 액션이 들어가 있기 때문에 JPGE 단컷 배너보다는 사용자의 시선을 잡을 수 있지만 GIF의 경우 매체사에 따라 파일 크기의 제한으로 이미지에 노이즈가 생기는 등 해상도를 낮춤으로 화질이 낮아지는 단점이 있습니다.


 


HTML5 배너는 JPG, GIF 배너보다 제작하기 복잡하고 제작 시간은 오래 걸리지만 파일 크기가 작고 모든 단일 브라우저에서 허용되는 형식입니다.
(위 Adobe 배너를 클릭하시면 웹브라우저에서 HTML5 배너가 실행되는 것을 확인하실 수 있습니다.)


HTML5란?

HTML5는 HTML의 새로운 버전입니다.
WWW(World Wide Web)을 통해 제공되는 정보를 나타내는 목적으로 사용하는 마크업 언어이고, 웹 표준으로 확정된 HTML의 5번째 버전이기 때문에 HTML5라 칭합니다.

HTML5 이전에는 HTML 만으로 웹에 표현이 불가능하여 Flash, Active-X 등의 플러그인을 사용하였기 때문에 웹의 접근성이 떨어졌습니다.
HTML5는 외부 Active-X와 같은 플러그인을 사용하지 않고도 웹 서비스를 제공할 수 있습니다.
기존 HTML은 다양한 서비스와 다양한 기능들을 추가할 수 없는 환경이었고, 여러 가지 스마트 디바이스가 대중화되면서 모바일 웹 환경에서 제대로 된 구현이 어렵지만 HTML5는 별도의 외부 기술(플러그인) 없이 그래픽, 음악, 영상 등을 자유롭게 표현할 수 있습니다.


스티브잡스가 Flash를 버린 이유

애플이 애플 제품에 Adobe Flash를 사용하지 않는 것과 관련해 당시 애플의 최고 경영자인 스티브 잡스는 홈페이지를 통해 자사 제품에 Flash를 탑재하지 않은 6가지 이유에 대해 입장을 밝혔습니다.

Flash는 Adobe만 판매하고 가격 결정도 어도비만 내릴 수 있다는 점에서 매우 폐쇄적이고 보안성이 약하며 모바일 기기에서 정상적으로 작동하지 않아 안정성 부분에서도 취약하다고 이야기하였습니다. 또한 Flash는 마우스를 이용하는 PC 기반으로 개발되었기 때문에 터치스크린 방식의 휴대폰, 태블릿 PC 등에서는 적합하지 않다고 설명하였습니다.

가장 중요한 이유로는 "개발자들에게 가장 진보적이고 혁신적인 플랫폼을 지속적으로 제공하기를 원하며, 개발자들이 이제껏 볼 수 없는 최고의 애플리케이션을 만드는 걸 돕고 싶다"라고 입장을 밝혔습니다.


BYE, Flash! Hello, Animate


2010년 이후로 대세가 된 모바일 플랫폼에서는 플래시가 지원되지 않았고 이때를 기점으로 그동안 개발이 정체되어 있었던 웹 표준 기술도 빠르게 개발되었기 때문에 웹 개발자들이 플래시 사용을 자제하기 시작하면서 어도비도 이에 맞추어 웹 표준 기술을 지원하기 시작했습니다.

웹콘텐츠 제작 프로그램이었던 Flash는 앞서 스티브잡스가 이야기했듯이 보안성과 안정성 측면에서 하였기 때문에 웹 표준/HTML5에 맞추어 Adobe Flash에서 변경된 프로그램이 Adobe Animate입니다.

Adobe Animate는 HTML5 확장자 뿐만 아니라 gif, fla, swf 등 여러 확장자로도 저장이 가능해 여러 매체사들의 확장자 가이드에 맞추기 용이합니다.

온라인 배너라는 것은 어찌 보면 네오다임의 큰 업무들 중에 작은 비중을 차지하는 부분일 수 있지만 사소한 부분부터 트렌드를 따라가고 발전한다면 앞으로의 비즈니스에 긍정적인 영향을 줄 것이라고 생각합니다.

11 2

neodigm

서울시 서초구 서초대로 346 서초동아빌라트 1동 2F
Tel 02-598-9898 | Fax 02-598-9848
개인정보보호정책

Copyright (c) 2017 neodigm All right reserved.

neodigm

서울시 서초구 서초대로 346 서초동아빌라트 1동 2F
Tel 02-598-9898 | Fax 02-598-9848 | 개인정보보호정책

© 2021. neodigm, Inc. All rights reserved.