HTML5를 사용한 디스플레이 광고 – 반응형 광고를 만드는 방법

이 기사에서는 HTML5 반응형 배너 광고가 모든 디지털 광고주에게 필수인 이유를 설명합니다. 디자이너에서 디지털 전문가, 대행사에서 사내 팀에 이르기까지 HTML5 디스플레이 광고는 이제 기본 배너 형식입니다.

특히, 그 어느 때보다 많은 수의 기기와 그에 맞는 플랫폼이 제공됨에 따라 시청자의 행동에 적응할 수 있는 능력이 매우 중요합니다. 배너 광고가 호환되지 않거나 화면 크기 변경에 대응할 수 없거나 모바일에서 작동하지 않는다면 문제가 있는 것입니다. HTML5 반응형 디스플레이 광고는 브랜드가 온라인에서 번창하는 데 필요한 유연성과 기술을 제공합니다.

특히 HTML5는 디지털 마케터에게 다음과 같은 기능을 제공합니다.

• 다양한 형식과 크기로 빠르게 확장
• 디자인에 대한 궁극적인 통제력 보유
• 광고 변형 및 번역을 쉽게 생성
• 대량 생산 리치 미디어 배너
• 비디오 및 모바일 디스플레이의 성장 활용
• 데이터 피드로 배너를 동적으로 업데이트
• 팀 간, 사내에서 효과적으로 협업

예, 특히 오늘날 귀하의 아름다운 디스플레이 광고가 모바일에서 볼 가능성이 그 어느 때보다 높아짐에 따라 반응형 디스플레이 광고를 구축하는 것이 그 어느 때보다 중요해졌습니다. 2020년의 Bannerflow 연구에 따르면 모바일 디스플레이 광고는 데스크톱을 약간 앞질렀습니다. 오늘날 유럽에서는 디스플레이 광고 조회수의 거의 2/3가 휴대기기에서 발생합니다. 또한 모바일 사용자는 매일 4시간 이상 스마트폰을 사용하므로 디지털 광고주가 무시할 수 없는 참여입니다. 정적, gif, 플래시 배너의 구시대는 이미 지났습니다. 아니면 적어도 그래야 합니다.

HTML5 디스플레이 광고를 만들어야 하는 이유는 무엇입니까?

HTML5 디스플레이 광고를 제작할 이유가 더 필요하십니까? 우선 우리 게임은 전환에 관한 것이며 경쟁이 치열합니다. 모든 사람은 관심을 끌기 위해 필사적입니다. 마음을 사로잡는 데 실패하면 게임이 종료됩니다. HTML5는 리치 미디어와 다양한 광고 형식을 통해 비교할 수 없는 디자인 기회를 제공합니다. 배너 디자인에 대한 모범 사례를 따르지 않는다면 경쟁자가 그렇게 할 수 있습니다. 게다가 디스플레이 광고는 특히 프로그래밍 방식 내에서 도달 범위에서 항상 성장하고 있습니다.

예를 들어 영국에서 무슨 일이 일어나고 있는지 생각해 보십시오. eMarketer 보고서에 따르면 2020년 영국 광고주는 프로그래밍 방식 광고에 67억 9000만 파운드를 지출했습니다. 코비드-19 팬데믹의 영향에도 불구하고 프로그래밍 방식 디스플레이 광고 지출은 현재 영국 전체 디지털 디스플레이 광고 지출의 92%를 차지합니다. 그리고 이 비율은 2022년까지 94.5%에 도달하고 90억 1천만 파운드를 차지할 것으로 예상됩니다! 이러한 성장을 최대한 활용하려면 HTML5를 통해 더 나은 광고를 생성하는 것이 우선되어야 합니다.

또한 기업이 모든 디지털 마케팅 전반에 걸쳐 "모바일 우선" 사고를 채택함에 따라 웹사이트, 방문 페이지 및 배너가 반응형인지 확인하는 것이 최소한의 요구 사항입니다. HTML5를 사용하면 모바일에 적합하고 반응이 빠르고 기능이 풍부한 배너를 만들 수 있습니다. 데스크톱용 정적 캠페인을 디자인한 다음 각 배너를 개별적으로 확장하는 대신 HTML5로 확장할 수 있습니다!

광고는 오랫동안 모바일로 전환되었으며 HTML5는 필요한 배너를 만드는 방법입니다.

HTML5는 무엇과 관련이 있습니까?

HTML5가 보편적으로 채택되기 전에는 다양한 기기에서 광고 캠페인을 실행하는 것이 힘든 작업이었습니다. 배너 광고가 나타날 수 있는 모든 다른 화면에 대해 배너를 수동으로 만드는 것은 슬로건이었습니다. HTML5는 반응형 웹사이트와 마찬가지로 배너 광고를 만드는 최적의 방법입니다.

HTML5 Hypertext Markup Language의 최신 업데이트입니다. 반응형을 포함하여 웹 페이지의 내용과 디자인을 설명하는 데 사용되는 표준 언어입니다. HTML5는 여러 기기에서 배너 광고를 실행할 수 있는 유연성을 제공하므로 온라인 광고에서 중요합니다.

게시자와 광고주 모두 모든 플랫폼에 적합한 배너를 통해 적응형 광고 캠페인을 만들 수 있는 수단을 제공합니다. 플래시를 사용하는 것과는 달리(오, 얼마나 기이한지요) 이것은 동일한 광고의 수백 가지 버전을 만들 필요가 없다는 것을 의미합니다. 광고 버전 수를 줄이면 오류 가능성도 줄어들고 배너 제작도 늘어납니다.

HTML5 배너 광고 내에서 텍스트, 이미지, 비디오 및 JavaScript는 모든 웹 페이지와 동일한 방식으로 조정 가능하며 편집 가능합니다. HTML5 배너 광고도 동적으로 최적화되므로 광고는 어디에서나 완벽하게 보입니다. 게다가 HTML5 배너 광고는 휴대기기에서 완벽하게 작동합니다! 기능 손실도 없기 때문에 더 많은 청중에게 다가가기가 쉽습니다.

HTML5 배너를 만드는 두 가지 방법이 있습니다.

기본적으로 오늘날 온라인 배너 광고를 구축할 수 있는 두 가지 방법이 있습니다.

첫째, 배너 광고를 수동으로 코딩하여 반응형으로 만들 수 있습니다. 그리고 예, 온라인에서 이 작업을 수행하는 방법을 보여주는 많은 자습서와 템플릿이 있습니다. 그러나 프로세스가 느리고 HTML5 및 CSS에 대한 적절한 지식이 필요합니다. 또한, 물론 디자이너의 플레어도 필요합니다! 보기 드문 조합입니다.

또는 크리에이티브 제작 자동화에 적합한 광고 작성자를 제공하는 Bannerflow와 같은 크리에이티브 관리 플랫폼을 사용할 수 있습니다. 이러한 기능은 코딩을 처리하는 데 도움이 됩니다. 즉, 버튼 클릭으로 모든 배너가 반응하도록 만들 수 있습니다. 또한 HTML5를 활용할 수 있는 내장된 방법을 많이 제공합니다. 여기에는 멋진 비디오 배너 개발에서 데이터 피드를 포함하는 동적 배너에 이르기까지 다양합니다.

현실은 크리에이티브 관리 플랫폼이 캠페인을 구축하고 확장하는 데 걸리는 시간을 줄이는 동시에 HTML5 배너 제작의 초점을 디자인에 확고히 두는 것입니다.

HTML5 반응형 디스플레이 광고 만들기

HTML5 반응형 배너 광고를 만드는 것은 비교적 간단합니다. 그러나 모든 디지털 배너와 마찬가지로 따라야 할 규칙과 모범 사례가 있습니다. HTML5 디스플레이 광고를 구축할 때 다음 사항을 고려할 가치가 있습니다.

HTML5 배너 크기 확인

HTML5 반응형 레이아웃을 만들 때 요소의 너비는 배너 광고가 따라야 하는 규칙과 유사해야 합니다. 원하는 높이를 사용할 수도 있지만 광고가 해당 높이에 유지된다는 의미는 아닙니다. 반응형 배너를 만들 때 모범 사례는 기존 배너 크기와 동일한 높이를 사용하는 것입니다. 이는 게시자 및 광고 네트워크와의 호환성을 유지하기 위한 것입니다.

항상 광고 네트워크 및 게시자가 제공하는 특정 크기에 맞게 HTML5 배너를 디자인(또는 수정)하십시오. 예를 들어 다음은 Google Ad Manager에서 제공하는 크기 목록입니다. 이러한 크기를 기반으로 배너 광고를 만들면 게시될 때 대부분의 장치에서 광고 소재를 올바르게 표시할 수 있습니다.

이미지, 배너 디자인 및 HTML5

HTML5 반응형 배너를 만들 때 디자인과 이미지에 대한 제어는 비할 데 없습니다. 메시지 프레임 및 애니메이션을 쉽게 제어할 수 있습니다. 그러나 욕심을 부리지 마십시오! 배너는 시청자에게 5~15초 동안만 표시될 가능성이 높으므로 이 시간을 최대한 활용하고 디자인 선택에 집중하세요.

그리고 여기에서 상황이 흥미로워집니다! Bannerflow와 같은 일부 크리에이티브 관리 플랫폼을 사용하는 경우 HTML5 배너에 사용된 이미지가 자동으로 조정되고 압축됩니다. 즉, 배너의 이미지 크기와 무게가 광고 네트워크에 맞게 미세 조정됩니다.

그러나 이 모든 놀라운 기술에도 불구하고 이미지를 픽셀 단위로 최대 4000×4000(너비 및 높이) 크기로 유지하는 것은 가치가 있습니다. 또한 더 나은 결과를 얻으려면 4000×4000을 초과하는 초대형 원시 파일을 편집하는 것이 항상 가장 좋습니다. 사실, 항상 가능한 가장 작은 이미지를 사용하는 것이 가장 좋습니다. 이것은 배너의 무게를 더 줄이는 데 도움이 됩니다. 이미지는 작을수록 좋습니다(물론 품질은 떨어지지 않습니다!).

배너에 사용 중인 이미지 유형에 가장 적합한 이미지 형식을 선택하는 것도 좋습니다. 예를 들어 JPEG는 항상 배경으로 사용해야 합니다. 투명하거나 개체인 경우 PNG를 사용합니다. 로고 유형 및 그려진 개체(사진 제외) SVG – 파일 크기는 작지만 확장 시 선명도를 유지하는 데 좋습니다. 이미지 파일 유형의 조합은 종종 더 나은 결과를 제공합니다.

그러나 말할 필요도 없이 지나치지 않은 특정 사항이 있음을 기억하십시오! 예를 들어 기본 이미지가 전체 초점에 있는지 확인합니다. 그러나 깨끗하고 단순한 디자인이 항상 가장 잘 작동합니다.

크기 조정, 버전 관리 및 번역

자동으로 최적화되는 HTML5 반응형 배너를 만들 때도 가능한 한 많은 사람에게 도달하려면 가능한 한 많은 버전을 만들어야 합니다. 배너 크기가 클수록 좋습니다. 미디어 유형에 따라 배너가 많을수록 프로그래밍 방식 입찰에서 낙찰될 가능성이 높아집니다.

가장 확실한 모범 사례는 여러 버전의 HTML5 배너를 확장하고 생성할 때 효율적이고 빠른 크리에이티브 관리 플랫폼과 광고 작성자를 사용하는 것입니다. 더군다나 디스플레이 광고를 복제, 번역 및 변형할 수 있다면 여러 시장에서 작업하는 것이 훨씬 쉽습니다.

HTML5 배너의 콘텐츠를 쉽게 전환할 수도 있습니다. 또한 몇 초 만에 캠페인을 복제하고 확장할 수 있다는 것은 다른 요일에 대해 다양한 변형을 예약하는 것이 훨씬 더 쉽다는 것을 의미합니다. 간단히 말해서 HTML5 반응형 배너는 프로그래밍 방식과 같은 자동화 서비스에서 사용하기에 좋습니다.

리치 미디어 배너

HTML5가 없었다면 리치 미디어 배너도 없었을 것입니다. 반응이 좋고 여러 장치에서 작동하는 뷰어와 상호 작용하는 배너를 만드는 것은 불가능합니다. 리치 미디어 광고는 더 높은 수준의 참여를 유도하고 브랜드에 좋습니다. 가입 양식, 검색 창에서 배너 내 게임에 이르기까지 HTML5를 사용하면 디지털 마케터가 다양한 방식으로 시청자를 참여시킬 수 있습니다.

그러나 리치 미디어 배너를 사용하는 방법에 주의하십시오. 효과는 사용하려는 배너 형식에 따라 크게 달라집니다. 너무 많은 정보를 추가하거나 너무 복잡하게 만들지 마십시오. 상호 작용은 한두 단계를 넘지 않아야 합니다. 한 가지에 집중하고 시청자가 쉽고 빠르게 볼 수 있도록 하세요.

예를 들어, 온라인 양식은 필요한 최소한의 상호작용을 포함해야 합니다. 더 이상 배너에서 시작하여 방문 페이지에서 끝납니다. 좋은 HTML5 리치 미디어 배너 캠페인의 핵심은 실행이 진지하고 디자인이 직관적이어야 한다는 것입니다.

요즘은 배너에 나온 상품을 직접 결제할 수 있는 기능을 사용할 수 있습니다. 또는 챗봇 위의 디스플레이 광고에서 볼 수 있듯이 리치 미디어 배너와 함께 미래의 응용 프로그램은 끝이 없습니다!

동영상 및 HTML5 디스플레이 광고

디스플레이 광고 내에서 비디오의 사용은 지속적으로 증가하고 있습니다. 유럽에서만 온라인 비디오 디스플레이가 비비디오 디스플레이보다 3.5배 빠르게 증가하고 있습니다. HTML5 디스플레이 광고에 동영상을 사용하면 보다 진정성 있게 보이고 시청자와 소통할 수 있어 전환에 도움이 됩니다. 또한 HTML5를 사용하면 동영상을 사용하는 배너를 쉽게 대량 생산할 수 있습니다.

HTML5 배너를 사용하면 비디오를 사용하는 방법과 관련하여 많은 옵션이 있습니다. 기본 수준에서 비디오는 배너의 배경으로 사용될 수 있습니다. 또는 더 창의적으로 배너 애니메이션의 일부가 될 수 있습니다. 예를 들어 CTA(클릭 유도문안) 프레임으로 끝나는 예고편이 있습니다.

비디오 디스플레이 광고를 제작하는 것은 쉽습니다.

비디오를 사용할 때의 몇 가지 주요 팁은 항상 HTML5 비디오 배너에 로고가 표시되는지 확인하는 것입니다. 주요 메시지로 시작하고 비디오가 반복되는지 확인하십시오. 또한 동영상에 최대 1-3개의 단계가 포함되도록 하세요. 시청자의 관심을 끌고 참여를 심화하고 항상 CTA로 끝냅니다. 비디오를 항상 "무음"으로 설정하고 캡션을 활성화하십시오(필요한 경우).

우수한 크리에이티브 관리 플랫폼과 결합된 HTML5는 코딩도 필요하지 않음을 의미합니다. 이것은 배너의 백엔드에서 아무것도 할 필요 없이 많은 아이디어가 현실이 될 수 있음을 의미합니다.

또한 사람들은 휴대전화에서 점점 더 많은 수의 비디오 배너를 보고 있습니다. 따라서 모바일에 적합한 반응형 HTML5 동영상 디스플레이 광고를 만드는 것은 쉬운 일입니다.

또한 HTML5 비디오 배너를 mp4 형식으로 내보낼 수 있는 옵션이 있는 경우 소셜 네트워크에 이러한 비디오 광고를 업로드할 수 있습니다. 사내 팀이 동영상 광고를 만들고 HTML5 자산을 재사용하며 디지털 캠페인의 범위를 확장할 수 있는 쉬운 방법입니다. 다음은 Bannerflow의 광고 제작자인 Creative Studio에서 모든 것을 쉽게 만드는 방법입니다.

모바일 HTML5 반응형 배너 광고 만들기

모바일 HTML5 반응형 디스플레이 광고를 만들 때는 처음부터 올바른 형식을 사용하는 것이 중요합니다. 데스크톱 배너를 모바일 크기로 축소하는 대신 모바일 전용으로 광고를 디자인하세요. 일부 서클에서는 모바일의 인기와 참여를 고려할 때 모든 캠페인을 모바일 우선으로 디자인하는 것이 앞으로 나아갈 방향으로 간주됩니다.

HTML5 배너의 비율은 모든 화면에 맞게 조정됩니다. 그러나 선택한 모바일 형식을 염두에 두고 배너를 디자인하는 것이 가장 좋습니다.

고려해야 할 모바일 배너 디자인의 한 측면은 모든 사본을 읽을 수 있도록 하는 것입니다. 예, 여기에는 글꼴 크기가 포함되지만 메시지도 고려했습니까? 데스크톱 배너와 동일한 메시지를 표현하려면 모바일 HTML5 배너에 더 많은 프레임을 추가해야 할 수 있습니다. 다시 말하지만, 사용하는 형식에 따라 다르지만 단일 프레임에 필요한 것보다 더 많이 압축하지 않도록 하십시오.

또한 많은 양의 사본을 삭제하고 이미지의 영향에 초점을 맞추십시오. 또한 주어진 화면 크기에 따라 광고는 방해가 되지 않고 매력적이어야 합니다. 디지털 광고는 모바일 시대 이전에 이동했습니다. 소비자가 있는 곳으로 이동하여 소비자를 위한 멋진 HTML5 반응형 배너를 제작하십시오.

동적 소재

HTML5 없이는 강력한 동적 데이터 기반 배너 광고를 만들고 유지할 수 없습니다. 가장 기본적인 배너만 제작하도록 자신을 제한하면 하나의 메시지로 제한되는 자신을 발견하게 될 것입니다. 반면 경쟁업체는 잠재적으로 2000개를 제공할 수 있습니다. 예, 실제로: 일관된 데이터 피드 업데이트 및 자동화를 통해. 하나의 HTML5 반응형 배너는 정적으로 하나를 생성하는 데 걸리는 시간에 2000개의 메시지를 전달할 수 있습니다.

언급했듯이 HTML5의 장점은 완전한 제어를 제공한다는 것입니다. 데이터 피드에 연결된 배너의 경우에도 마찬가지입니다. 하지만 더욱 그렇습니다. 배너를 실시간으로 업데이트할 수 있는 옵션이 있습니다.

반응형 디스플레이 광고 맞춤설정

예를 들어 전자 상거래 상점에서 가장 인기 있는 항목을 보여주는 HTML5 배너 캠페인을 가정해 보겠습니다. 품목이 매진되면 동적 배너에 표시된 제품 목록에 자동으로 반영됩니다. 이것은 시청자와 전자 상거래 비즈니스 모두에게 좋습니다!

iGaming 회사에서도 동일한 아이디어를 사용할 수 있습니다. 예를 들어, 승률은 경기 중에 배너 내에서 동적으로 변경될 수 있습니다. HTML5 기반 동적 소재와 함께 사용할 수 있는 다양한 유형의 개인화된 캠페인이 있습니다.

또한 제품 피드를 실시간으로 업데이트하는 것이 가장 좋습니다. 결국 데이터가 표시되는 형식에 대해 비판적으로 생각해야 합니다. 배너에 사용하는 데이터가 무엇이든 시청자가 이해할 수 있는지 확인하는 것이 중요합니다. 이것은 날짜와 가격에서 배당률에 이르기까지 다양할 수 있습니다. 이는 시장과 언어에 따라 다를 수 있습니다. 예를 들어 미국인이 날짜를 쓰는 방식은 스웨덴인이 날짜를 쓰는 방식과 다릅니다. 또는 영국인과 스웨덴인이 베팅 확률을 이해하는 방식이 다릅니다.

마지막 조언: Creative Studio 또는 크리에이티브 관리 플랫폼과 같은 우수한 광고 제작자는 데이터 피드를 조작할 때 필터 및 정렬 옵션을 쉽게 설정할 수 있도록 합니다.

다음 단계: 최고의 반응형 배너 광고 제작!

지금쯤이면 HTML5 반응형 배너 광고를 만드는 것이 디지털 디스플레이 광고 요구 사항에 가장 적합한 옵션이라는 것을 깨달았기를 바랍니다. 다양한 화면과 플랫폼에서 유연성과 가시성을 제공하므로 이보다 더 나은 배너 기술은 없습니다. 더 나은 광고, 더 나은 디자인, 더 나은 지표 – 모두 가능합니다.

마지막으로, 소셜 네트워크는 물론 모든 주요 광고 네트워크에 대한 캠페인을 생성할 수 있는 기능을 제공하는 크리에이티브 관리 플랫폼을 사용하면 사내 팀의 생산성을 향상시키는 간단한 방법입니다. 캠페인을 수동으로 복제하고 확장하는 데 며칠(또는 몇 주)이 걸리는 것은 더 이상 선택 사항이 아닙니다.

여러 시장, 실시간 최적화 및 투명성의 시대에 HTML5를 채택하면 마케터가 원하는 광고 실적을 달성하는 데 도움이 됩니다.

Bannerflow와 같은 플랫폼이 멋진 광고를 만드는 데 어떻게 도움이 되는지 알고 싶다면 연락하십시오.