웹디자인, 초심자를 위한 광고 배너 훑어보기

안녕하세요. 맥가입니다.
오늘은 웹디자인 실무 중 살짝 사이드 업무에 해당하는 배너에 대해에 적어보려 합니다. 많은 작업자들이 배너 작업은 단순하고 반복적이며 고도의 스킬을 요하지 않는 소일거리 수준 생각하고 있습니다. 실제로도 그런 연유로 주니어 디자이너가 해당 업무를 처리하는 경우가 많습니다. 허나 자세히 들여다보면 생각했던 것보다 훨씬 방대하고 복잡하며, 매우 까다로운 작업입니다. 사실 배너는 돈이 되는, 또 돈이 되어야 하는 웹디자인엔 필수 불가결한 요소이며 이점을 이해하고 계시는 분들께서 '디자인은 마케팅 중심이 되어야 한다'라고 정의합니다. 초심자를 위한 글이니 배너*의 사전적 정의부터 알아봅니다. 우리는 웹디자이너이니 웹 안에서의 배너 정의를 아래에 인용합니다. 요이땅!

대한민국 대표 포털인 네이버의 배너 광고

*배너(Banner) : 월드 와이드 웹 상의 온라인 광고의 일종이다. 간단히 배너 애드(영어: banner ad)로 줄여서 말하기도 한다. 이러한 형태의 온라인 광고는 웹 페이지에 광고를 추가하는 것이다. 광고주의 웹사이트에 링크하여 웹사이트로의 트래픽을 이끌어내는 것이 목적이다. - 위키백과

혹 배너라는 단어가 생소했다면 현수막이라고 이해하는게 빠를듯합니다. 길에서 만나던 현수막이 온라인으로 넘어와 디지털 광고(DA)와 결합되면서 웹 배너가 된 것이지요. 형태와 규격도 다양합니다. 그럼 추가로 형태와 규격, 그에 따른 명칭도 알아볼까요?

미국 온라인 광고 협회(Interactive Advertising Bureau)에 따른 표준화된 광고 크기

종류도 많고 이름도 어렵습니다. 때문에 실무에서는 주로 명칭을 언급하기 보단 규격의 수치로 이야기합니다. "300 바이 250 하나 작업해주세요." 이런 식으로 말이죠. 위 이미지는 어디까지나 표준으로 권장하는 규격이고 막상 작업을 하다 보면 중구난방의 배너 작업이 진행됩니다. 화면을 설계하는 자, 그리고 배너를 만다는 자가 이러한 표준 규격을 파악하지 않고 작업하기 때문입니다. 그런데 말입니다. 이미 실무에서 배너 작업을 몇 차례 진행해보신 분들이라면 위 규격 중 몇 개의 것들이 눈에 들어옵니다. 3:1 랙탱글, 리더보드, 스카이 스크레퍼 등의 규격 말이죠.

네. 바로 구글의 광고배너 규격과 같습니다. 배너에 대한 별다른 고민 없이 또는 연구를 따로 하지 않더라도 우리가 광고를 집행할 광고매체들 덕에 작업하다 언젠가는 꼭 한번 표준 규격을 접할 수 있습니다. 그럼 우리가 만든 배너들이 주로 어떤 매체에 보일지 알아보겠습니다.

국내에서 자주 볼 수 있는 광고 매체

익숙한 브랜드가 많이 보입니다. 웹이 익숙치 않다면 이런 궁금증이 생길 겁니다.

'네이버는 검색엔진 아닌가? 페이스북? 광고매체는 또 뭐지?'

배너 제작을 위한 광고매체 알아보기

그럼 먼저 광고매체부터 알아봅니다. 광고매체는 '광고를 소비자에게 전달하는 매개체'를 일컫습니다. 과거로 치면 TV, 라디오, 신문, 잡지(4대 광고 매체)를 말하며, 오늘날에 이르러 주요 광고 매체에 인터넷이 추가되었습니다. 때문에 광고대행사에서 ATL*을 진행할 때 인터넷 광고도 함께 진행합니다.

*ATL(Above The Line) : 4대 광고 매체에 광고를 노출하는 행위. 반대의 의미로 BTL(Below The Line)이 있으며, 이는 4대 매체를 제외한 마케팅 형태를 말한다. BTL 마케팅의 대표적인 예로 입소문 마케팅인 '바이럴'이 있다.

그럼 왜 그러한 광고매체가 구글, 네이버 같은 거대 기업일까요? 일반적으로 많은 사용자 트래픽을 확보하고 있는, 그러니까 쉽게 말해 유동인구가 많은 번화가를 떠올리시면 될 듯합니다. 사람이 많이 오고 가는 곳에 현수막을 설치하는 거죠. 일종의 자릿세를 내고 말이죠. 이처럼 사용자 트래픽을 기반으로 광고를 노출시켜주고 대가를 받는 매체도 있지만, 기술을 기반으로 광고 매체로 분류되는 곳도 있습니다. 그 대표적인 매체가 바로 위 그림 우측 상단에 위치한 기업 '크리테오'입니다.

크리테오 솔루션의 알고리즘

웹서핑을 하다 보면 내가 쇼핑몰에서 봤던 상품들이 다른 사이트에서 배너 형태로 보이던 경험을 해보셨을 겁니다. 신기하게도 여기저기 사이트를 돌아다니며 해당 광고를 자주 만나게 되죠. 처음엔 그냥 '해당 상품이 유명해서 그런가 보다'하다가 이게 반복이 되면 신기하기도 하고 되려 무섭기도 하고 그럽니다. 이 원천 기술의 특허를 가진 기업이 바로 '크리테오'입니다. 사용자의 웹페이지 접속 기록을 기반으로 광고를 보여줍니다. 리타케팅 마케팅. 구매를 망설이던 제품이 며칠간 눈앞에 보이면 결국 사게 됩니다. 이처럼 크리테오는 꽤 강력한 매체입니다. 다른 매체 또한 각각의 독창적인 기술과 장점들을 지니고 있습니다.

배너 작업에 대한 이야기에 앞서 광고를 먼저 언급한 까닭은 위처럼 매체가 다양하고 단순 제작 형태를 떠나 기술적 원리 등을 이유로 작업의 방식과 룰이 달라지기 때문입니다. 배너 제작을 시작하기 전, 각각의 매체를 어느 정도 알아두어야 우리의 광고가 어떻게 노출되는지 또는 그 반대로 나의 배너가 어느 매체를 통해 노출되어야 좋은 효율을 발휘할지 가늠할 수 있습니다. 여기까지 이해하셨다면 배너 작업이 단순한 사이드 업무가 아닌, '웹디자인 중심에 있는 건가?' 하는 고민을 하게 됩니다.

각각의 광고 매체 가이드는 해당 사이트들을 참고해보시고, 아래부터는 배너 제작 시 공통적으로 적용할 수 있는 팁 혹은 특정 매체만의 특이한 부분을 언급해 봅니다. 미리 알아두면 당장. 또는 언젠가 도움이 될 거라 생각합니다.

배너 제작 가이드 미리 파악하기

네이버 디스플레이 광고(배너)에 대한 상품 설명

각 광고 매체들은 위와 같이 상품소개서&제작 가이드 문서를 제공합니다. 좌측 표를 살펴보면 단가나 노출 위치 특이사항 등이 적혀있고 출력 형태 또한 확인할 수 있습니다. 실무를 겪다 보면 제작 요청서에 다음과 같이 표기되어 날아옵니다. '메인_타임보드 (기본형) 1EA'. 사수 없이 혹은 광고대행사 없이 진행하려면 미리 꼭 파악해두어야 합니다. 그렇지 않으면 제작 요청서를 해독하는 기분으로 읽게 됩니다.

DA 배너 제작을 위한 가이드 PSD

위 이미지처럼 PSD가이드 파일 또한 제공합니다. 다양한 경우의 수를 고려해 제작된 가이드라 최대한 지켜야 하며, 그것이 지켜지지 않았을 경우. 광고 집행이 보류됩니다. 여백, 간격, 폰트 사이트와 색상 제한. 경우에 따라 글자 수 제한까지 적용됩니다. 게다가 이뿐만이 아닙니다. 하면 안 되는 법령 같은 것이 적혀있는 문서가 10페이지 이상 존재해 쓰지 말아야 할 단어, 문장 등을 제한합니다. 이때부터 '전문 카피라이터'가 절실해집니다. 광고대행사라면 이런 이유로 카피라이터가 최소 한 명은 존재합니다. 용량도 마음대로 할 수 없으며, 동영상이 아닌 프레임 바이 프레임 형태로 영상을 한 장씩 쪼개야 하는 상황까지 겪게 됩니다. 사실 사수가 없이 위와 같은 형태의 배너 제작을 하고 광고를 집행한다는 건 거의 불가능에 가깝습니다. 너무 어렵거든요. 제작하고 심사 넣고, 반려당하면 다시 수정해서 심사 넣고를 반복하게 됩니다.

짜증을 유발하는 페이스북의 20% 광고 가이드

크리테오처럼 타케팅이 용이하다는 점, 그리고 많은 사용자가 있다는 장점을 이유로 SNS인 페이스북에도 많은 광고를 집행합니다. 연령, 위치, 관심사, 좋아요 등을 기준으로 보다 정확하게 목표를 삼아 광고를 노출시킬 수 있습니다. 배너 작업 시 가장 짜증 나는 게 바로 이 페이스북에 있습니다. 바로 배너로 활용하는 소재 이미지 상의 '텍스트가 전체 이미지 대비 20%를 넘으면 안 된다'는 제약 사항인데요. 이게 막상 겪어보면 엄청 짜증이 납니다. 내가 작업한 텍스트가 몇%를 차지하고 있는가를 육안으로 파악하기 쉽지 않고 설령 파악했다 치더라도 상당히 협소하기 때문입니다. 하여 요즘은 꽤 많은 페이스북 광고가 동영상 또는 캐로셀 형태로 집행됩니다. 물론 캐로셀 형태도 20% 가이드가 적용됩니다.

이 외에도 각 매체마다 다양한 가이드가 존재합니다. 반드시 지켜야 하고, 많이 알아야 보다 빠른 작업. 보다 좋은 디자인의 배너를 제작할 수 있습니다.

배너 디자인을 위해 알면 좋은 것들

위에 언급한 가이드적인 부분을 떠나 단순 배너 디자인을 위한 팁을 몇 자 적어봅니다. 물론 사람마다 작업 방식과 성향이 달라 차이는 있겠지만 한 번쯤 읽어보시고 고민해보시면 조금은 도움이 되지 않을까 싶습니다.

- 사용자 이탈을 고려한 배너 디자인과 배치

타사이트에 나의 광고 배너를 노출하는 방식이 아닌, 회사 사이트에 타사 배너를 노출하거나 또는 자사 배너를 노출하는 경우가 있습니다. 이러한 경우, 사용자가 배너를 눌러 현 페이지를 벗어난다는 점을 분명히 인지하고 제작해야 합니다.

좌측 아프리카TV, 우측 다음의 로그인 페이지

국내 대표적인 방송 플랫폼 아프리카TV와 다음의 로그인 페이지입니다. 아프리카TV는 군더더기없이 딱 로그인에 필요한 요소만 구성된 반면, 다음은 로그인 영역 우측에 광고가 노출되고 있습니다. 이유는 명확합니다. 아프리카TV는 사용자가 방송자인 BJ에게 별풍선(캐쉬템)을 쏴야 수익이 발생하는 구조의 플랫폼입니다. 다음과는 수익구조가 다릅니다. 때문에 로그인 페이지에서 또는 그들의 내부 페이지에서 사용자가 다른 사이트로 이탈하면 안 됩니다. 광고수익 몇 원 벌자고 몇천 혹은 몇억을 쏠 회원에게 외부 광고를 보여주는 미련한 행동은 하지 않는 거죠.

에이전시라면 클라이언트를 상대하는 맨 처음에 묻습니다. "당신이 만들고자 하는 서비스의 수익 구조는 무엇입니까?"라고요. 이것이 정해지면 배너의 제작방식 그리고 노출 위치가 달라집니다. 수익구조에 따라 영향을 받습니다.

- 청개구리처럼 배너를 제작하세요

무색 가운데 유색이 있으면 돋보입니다. 정적인 것 안에 동적인 게 있으면 눈에 띕니다. 마찬가지입니다. 흔히 배너 작업을 요청하면 그것이 노출될 상황을 고려하지 않고 마냥 화려하게만 제작합니다. 물론 대부분의 배너는 이 같은 방법이 일반적입니다만, 보다 정교하게 작업해야 한다면 노출될 곳을 미리 파악해 그것의 분위기와 상반되는 형태로 배너를 제작하는 게 현명하다 말하고 싶습니다. TVCF를 예로 들어보죠. 방에서 혼자 TV를 켜놓고 있는데 15초간 아무 소리도 나지 않는다. 아마도 많은 사람들은 한 번쯤 TV를 다시 바라볼 겁니다. 소란한 그곳의 남다른 고요. 되려 이것이 공격적인 마케팅입니다.

- 레이아웃을 설계 시 배너를 고려하세요

광고수익 기반의 플랫폼임에도 불구하고 배너를 고려하지 않은 화면 설계

제작하려는 사이트나 앱이 광고 수익을 기반으로 한다면 외부 배너 즉 내가 제작한 배너가 아닌 남이 제작한 배너가 잘 어울릴 수 있도록 화면을 설계해야 합니다. 이때는 맨 처음 언급한 표준 규격에 따라 각 광고 구좌의 위치를 잡고 그에 맞게 화면을 구성하는 게 최선의 방법입니다. 그렇지 않으면 위처럼 레이아웃이 딱 떨어지지 않거나 경우에 따라 외부 광고를 화면에 맞게 재작업하는 수고를 겪어야 합니다. 또 한 페이지가 아닌, 전체 페이지에 걸쳐 규격화된 광고가 호환될 수 있도록 설계하는 것도 잊지 마세요.

- 아이덴티티와 톤 앤 매너 유지

배너는 결국 사용자가 중간에 거치는 매개체일 뿐입니다. 특정 사이트 건 랜딩페이지건 또는 앱스토어 건, 사용자가 도착할 목적지는 늘 따로 있습니다. 이때 목적지의 아이덴티티와 톤 앤 매너를 배너에도 유지해야 합니다. 단순 튀어 보이겠다는 목적으로 도달 페이지의 정체성이나 톤을 무시한다면, 배너를 누른 사용자는 '잘못 들어왔나?'라는 생각을 하게 됩니다. 올바른 인지를 할 수 있도록 연관성 있게 제작해주세요.

마치며

워낙 방대한 내용의 주제이지만 짧게나마, 또 걸 핥기 식으로라도 이해하고 실무에 임하길 바라며 나름 정리해봤습니다. 늘 그렇지만 실무는 이보다 복잡하며 우리가 직면하는 배너 제작은 촌각을 다투기도 하고 좋은 소스들이 제공되지 않을 때도 많습니다. 그만큼 힘든 작업 과정에 위와 같은 광고매체 또는 배너 제작에 대한 소소한 개념 정리마저도 없다면 더욱더 힘들어질 겁니다. 생각하시는 것처럼 하찮은 작업이 아닙니다. 웬만한 웹 에이전시 버금가는 온라인 광고대행사는 대한민국에 수없이 많으며 꽤 많은 직원들의 생계를 책임지며 승승장구하고 있습니다. 이러한 배너를 치밀하게 제작하고 노출시키면서 말이죠. 다양한 이론과 지식. 치밀한 설계 그리고 방대한 양의 데이터를 축적해야 가능한 일입니다.

그간 배너를 조금 가볍게, 또 '이따위 것 경력에 도움도 안 되는 거'라고 생각하셨다면 이 글을 계기로 뭔가 다르게 바라봐주셨으면 합니다. 오늘도 긴 글 읽어주셔서 감사합니다.