프로모션 마케터라면 알아도 좋을법한 '웹 기획' 방법
프로모션을 기획하면서 생긴 노하우를 공유하고자 한다.
출처 : 위즈위드나는 퍼포먼스 마케터로서 활동했던 전 직장에서 약 80건이 넘는 프로모션을 직접 기획하고 운영했던 경험이 있다. 프로모션 마케터는 참 '많은' 것들을 컨트롤 해야하고 마케터 업무 이외에도 코딩이나 디자인 등 또한 알아야 하고 타 부서와의 끊임없는 커뮤니케이션을 해야 한다.
특히 나는 계속되는 상시 / 전사 프로모션을 기획하고 운영하면서 어느 순간 페이지 내에서 UX/UI 적인 시각을 가지게 되었다. 그 계기는 한 전사 프로모션에서 UX/UI 팀장님이 내가 한 프로모션 페이지를 '이거 누가 이렇게 디자인한 거죠?'라는 말에서부터 시작됐던 것 같다. 나는 열심히 성심성의껏 기획했던 프로모션 페이지가 '고객'의 입장에서 좋지 않다면 UX/UI 적인 관점에서는 '꽝'일 수밖에 없는 웹 기획이라는 사실을 깨닫고 나선 보다 효율적인 프로모션 페이지 레이아웃을 기획하고 수행하고자 노력했던 게 지금은 참 많은 도움이 되곤 한다.
물론, 그 당시 때 그 모든 것들을 가르쳐주진 않았다. 오롯이 까이고 까였던 수많은 프로모션 기획에서 이것저것 시도해보고 물어보고 적용해본 사례에서 배웠던 경험에서 비롯됐다. 오늘은, 프로모션 마케터로서 시행착오를 겪는 마케터 또는 웹 기획자들을 위해 효율적인 웹 기획을 공유하고자 한다.
NO.1 각 파트별로 수행하는 업무를 이해하라
전 직장에서 가장 아쉬웠던 부분은 아무도 나에게 페이지가 만들어지기 까지의 과정을 설명해주지 않았다는 것이다. 처음 웹 기획을 할 때, 나는 퍼블리싱이 뭔지, 개발이 뭔지 조차 몰랐다. 프로모션을 하며 온전히 그 내용을 알 수 있었고 그것들을 알면서부터 참 많은 기획들이 발전된 것 같다.
'프로모션 마케터가 이런 걸 알아야 돼?' 할지 모르겠지만 디지털 마케팅이 대두되고, 웹 프로모션의 효율성이 이미 입증된 현시대에 디자인과 HTML / CSS와 같은 기초지식이 없다면 많은 시행착오를 겪을 수 있다는 가능성은 열어두어야 할 것이다.
자 일단, 온라인 프로모션을 기획하는 퍼포먼스 마케터의 입장이 된다고 생각해보자. 마케터는 랜딩 페이지를 통해 자사몰의 UV/PV를 지속시키고 이와 더불어 매출을 증진시키기 위한 KPI를 가졌다고 치자. 그러면 마케터는 프로모션을 기획하고 그 프로모션이 들어갈 웹 페이지를 기획한다. 이때 마케터는 웹디자이너 / 퍼블리셔 / 프런트가 하는 모든 업무들을 작업 지시서 또는 기획안에 녹여야 한다. 가령 클릭 영역이 잡힌다면 웹디자이너에게는 '클릭 버튼을 삽입해주세요.'라는 요청을 해야 하며 웹 퍼블리셔에는 '클릭 영역을 잡아주세요.'라는 요청을 '동시에' 해야 한다. 그래야 웹 디자이너 또한 이 곳에 '코딩'이 들어갈 것이라는 것을 알기 때문이다. 또한 모바일 페이지가 필요한 상황이라면 모바일에 맞는 디자인 레이아웃을 요청해야 한다.
당연한 말이지만, PC에서 보는 버전을 모바일에서 본다면 디바이스의 크기가 줄어든 만큼 화면 또한 작아 보일 수밖에 없다. 단순히 PC 이미지를 사이즈 베리에이션을 한다고 될 문제가 아니다. 보이지 않는 화면에 집착할 만큼 유저는 성격이 좋지 않다. PC와 모바일 환경에 맞는 페이지 또한 마케터가 구상하고 생각해야 할 부분이다.
기획이 컨펌되고 웹 디자이너가 디자인을 완성하면 그다음은 퍼블리셔가 페이지를 '코딩'한다. 퍼블리싱, 말 그대로 '출판' 한다는 뜻이다. 쉽게 말해 '페이지'를 고객에게 '출판'한다고 생각하면 의미가 좀 와 닿을 것 같다. 한 권의 책 내에도 레이아웃이 들어가고 폰트, 행간, 자간 등이 결정되듯이 퍼블리셔는 기획전 페이지를 웹이라는 한 권의 책에 HTML, CSS, 때로는 자바 스크립트 등을 활용해 구성한다. 이때 마케터는 퍼블리셔가 필요한 것이 무엇인지 명확하게 알아야 한다. 가령, 클릭 영역을 소스로 잡는 것과 이미지를 div로 묶어 css로 그 위치 값을 고정시킨 뒤 이미지에 클릭 소스를 넣어 클릭 영역을 잡느냐에 따라 소스가 달라지고 필요한 이미지 등이 달라지기 때문이다. 그렇기에 기획이 통과된 뒤, 작업 요청 전에 퍼블리셔와 디자이너와의 선 소통은 필수다. 그래야 페이지가 매끄럽고 빠르게 나올 수 있기 때문이다.
여기서, 만약 데이터를 축적하거나 데이터를 활용해 기능을 추가해야 한다면 '개발'이 들어가야 한다. 바로 '프런트'단에 있는 개발자들의 역할이 들어가는 것이다. 가령, 응모 수를 체크해야 한다면 고객 데이터를 숫자화 시켜 축적시키는 기능이 들어가야 하며, 각 상황별 어떤 알럿과 경고문을 보여주는지 등은 개발자와 상의해 결정해야 한다. 새로운 기능을 개발하는 것은 생각 이상으로 어려운 일이기 때문에 개발자가 미리 소스를 기억한다면 개발자의 소스를 활용한 '새로운 무언가'를 소스로 구현할 수 있기 때문에 프런트가 하는 업무를 이해하는 것은 프로모션 마케터에게 참 중요한 자세라고 말할 수 있다.
NO.2 레이아웃? 3가지 영역으로 생각하면 쉬워!
페이지 기획을 처음 하는 마케터라면 레이아웃과 내용을 어떻게 나누는 것이 좋을지, 어떤 페이지 기획이 퍼블리싱을 하는데 좋을지 고민한다. 일단 내 사례로 말한다면 나는 크게 3가지의 영역으로 페이지를 구성한다.
TOP
TOP 영역은 흔히들 '신문'의 헤드라인이라고 일컫는 부분이다. 그만큼 중요한 부분이 녹여져야 하는 부분이다. 이 부분에서 고객님의 반응을 이끌지 못한다면 기획전 하단으로 스크롤을 내리지 않는다.
이때 메인 이미지와 주요 내용을 간결하고 임팩트 있게 넣어야 한다. 가령 그것이 할인율인지 , 이벤트 내용인지, 적립금 지급인지를 효과적으로 써야 한다. 그리고 메인이벤트에 대한 키워드를 뽑아내고 그 키워드를 바탕으로 콘셉트를 녹여야 한다. 이후에 디자이너와의 상의가 필요하다. 핀터레스트 등에서 찾은 레퍼런스 이미지를 첨부하는 것 또한 방법이다.
Body
헤드에 모든 게 들어간다면 이제 바디로 넘어간다. 바디에는 주요한 내용이 들어가야 한다. 그리고 당연히 주요한 내용을 구현하기 위해선 퍼블리셔와 개발자와의 끊임없는 소통이 지속되어야 한다.
사실 코딩과 프런트에 대해 모른다면 '그거 이렇게 하면 금방이지 않아?'라는 너무나도 무책임한 말을 지껄일지도 모르겠다. 그만큼 마케터가 바디에 들어가는 내용을 현실적으로 기획하지 않는다면 그만큼 구현해내야만 하는 퍼블리셔와 개발자, 웹 디자이너는 힘들 수밖에 없다. 본인이 쉽다고 말하는 영역이 페이지를 기획한 마케터의 입에서 나왔다면 난 그 책임을 오롯이 마케터가 지어야 한다고 단언한다.
단순한 클릭 영역뿐만 아니라, 반응형 페이지에서 보이는 슬라이드 또한 css로 구현하느냐, js로 구현하느냐에 따라 소스의 길이와 구성이 천지차이로 변경된다. 그렇기 때문에 기획을 한 뒤 코딩에 대한 자체 회의를 가지길 추천한다. 이 건 이렇게 되는지, 어떤 소스를 쓰면 되는지, 테스트는 무엇이 필요한지를 상의하는 것이 이 바디를 구성하는 데 있어 가장 핵심적인 요소이다.
Bottom
모든 내용이 들어갔다면 이제 하단 내용을 채워야 한다. 보통 노련한 마케터라면 하단에 각종 혜택을 집어넣거나 또는 이 이벤트의 유의사항을 적어놓는다. 사실 하단은 마케터가 무엇을 중점적으로 보느냐에 따라 달라지는 것 같다. 정보가 중요하다면 하단에 공지사항을 오타 없이 넣기도 하고, 퍼포먼스적인 수치에 집중한다면 앱 설치나 카카오 플친을 삽입할지도 모르겠다.
탑과 바디에서 내용을 녹였다면 바텀엔 본인이 중점적이고 놓치기 싫은 부분을 녹이는 것이 바텀 영역을 효율적으로 관리할 수 있지 않을까 싶다.
No3. 이런저런 시도는 약이다!
전 직장에서 참 감사했던 점은 어떻게든 빠른 반영을 위해 페이지를 이것저것 기획해봤던 나를 귀찮아하지 않고 가르쳐주신 퍼블리셔와 개발팀이지 않을까 싶다. 그만큼 웹 기획에서 시도는 중요하다.
가령 전 직장에서 무이자 혜택 공지가 무조건 이미지로 올라가던 시절이 있었다. PG사의 정책이 변경되면 무이자 혜택 또한 매월마다 변경이 되기 때문에 이와 관련된 배너와 페이지 전부 교체되어야 했다.
당장 이미지로만 모든 것들이 들어가야 했다고 생각했던 나에게 그 업무가 왔고 그 업무를 빠르게 수행하기 위해 머리를 굴리던 중 나는 소스를 이용해 페이지 기획을 하게 이르렀다. 그리고 즉각적으로 보고 후 퍼블리셔와의 상의가 들어갔다.
이 업무에 모두가 치를 떨었기 때문에 퍼블리셔 대리님이 가이드를 잡아주셨고 거기에 맞춰 워딩만 변경하면 바로 적용이 되도록 세팅을 했다. 그러니 PG사에서 매월 31일 오후에나 줘서 전 팀을 힘들게 했던 무이자 혜택 업무가 4분의 3 가량이 줄어들게 된 것이다. 이 페이지는 결론적으로 지금까지도 쓰이고 있고 나 또한 좋은 웹 기획이 얼마나 많은 업무를 줄여주는지 알았던 단적인 사례로 기억에 남는다.
마케터가 왜 이것까지 알아야 해?라고 생각할 수 있다. 하지만 현실적으로 웹 기획을 해야 할 일이 분명 마케터에겐 생길 수 있다. 특히 당신이 퍼포먼스 마케터라면 더더욱 그럴 수 있기에 이것저것 시도해보고 공부해본다면 분명 퍼포먼스 마케터로서 또 다른 성장 동력이 될 것이라 확신한다.
웹 기획에 맞춰 그것을 구현하는 건 절대 쉽지 않다. 제 아무리 21세기라도, 당신이 스크립트 하나를 짤 수 없다면 입 다물고 물어보고, 시도하고, 기획하길 바란다. 그것이 곧 모두를 위한 길이며 효율적인 웹 프로모션을 기획하는 지름길이다.
