웹용 팝업 디자인 어떻게 해야 할까?

안녕하세요 정말 오랫만에 블로그에 글을 쓰게 되네요.

오늘은 초심자를 위한 팝업 디자인 강좌 하나를 써볼까 합니다.

 

웹디자이너로 일을 하게 되면 어떤 회사를 다니던 웹용 배너 혹은 팝업을 디자인 할 일이 정말 많아요.

사실 이것들은 업무량도 많지 않으면서 기술적인 요소가 적은 단순 디자인 작업이기 때문에 업무적 부담감이 크지는 않은 작업이기도 합니다.

하지만 이 간단할 것 같은 디자인 작업이 본의아니게 적게는 반나절 길게는 하루 이상 시간의 시간을 잡아먹은 경험 많이들 있으실 것으로 보입니다.

 

그리고 마케팅(영업)을 위한 메시지를 작은 공간에 함축적으로 담아야 하는 작업이기에 퀄리티와 함께 광고효과를 최대로 내기 위해 디자인적인 고심을 많이 하게 만들기도 합니다.

특히나 초심자의 경우에는 더욱 어려울 것이구요.

 

그럼 어떻게 만들어야 조금 더 수월하게 작업할 수 있을까요?

 

일단 팝업을 만들기 위한 기획서가 있을 것입니다.

보통 이렇게 생겼죠.. 기획자나 마케터 분들의 기획서 내용은 그다지 친절하지 않습니다 ^^;

 

 

(팝업만들어_최대한빨리지금당장.pptx)

 

 

대략 이런 팝업 요청이 오면 가장 먼저 해야할 일이 뭘까요?

디자인 소스사이트를 열어 이것과 어울리는 팝업 소스를 찾는게 먼저 일까요?

쓸만한 소스가 있는지 한 번 찾아보겠습니다.

 

 

 

 

국내 모 디자인 유료 디자인소스 사이트입니다.

음.. 생각보다 눈에 들어오는 자료가 없네요.

이런류의 사이트를 이용해 보신 분들은 이미 잘 아실테지만 정말 보기보다 쓸만한게 없어요.. 그리고 적당한 소스가 있다 한들 그걸 제대로 응용하는 것도 쉬운 일은 아닙니다.(그렇다고 쓰면 안된다는 뜻은 아닙니다. 적어도 배너나 이벤트만큼은 응용할만한 자료 찾기가 쉽지 않다는 말입니다.)

 

그나마 이것도 이러한 디자인사이트를 제휴하고 있는 회사의 이야기고 유료사이트를 제휴해 주지 않는 회사에서 근무하는 분들도 계십니다.

 

... 그럼 어떻게 디자인 하라고?

 

자 여기서 우리가 크게 잘못하고 있는 것이 한개 있습니다.

이벤트 팝업과 배너는 분명 마케팅(영업)용 디자인 작업물입니다. 그런데 우린 '어떻게 만들까'보다 '어떻게 이쁘게 할 수 있을까?' 의 관점에서 접근했던 것이죠.

두개의 차이가 뭔데? 라고 생각하실 분도 있겠지만 이 두개의 차이를 정확히 이해하는 디자이너가 만든 결과물과 그렇지 않은 디자이너의 결과물은 하늘과 땅 차이입니다.(진짭니다..)

 

자 아래 팝업들을 한 번 볼까요

  

 

 

 

위 팝업의 느낌이 어떠신가요?

마라톤과 녹색 꿈이라는 키워드 때문에 풀밭 스타일로 디자인 하였으나 이것이 좀 과하다 보니 정작 내용에는 눈이 하나도 가지 않는 느낌입니다.

특히 상단에 지나치게 많은 컬러와 스타일이 적용되어 산만하기까지 합니다.

 

이걸 만드신 분께는 죄송하지만 팝업 내용보다는 꾸미는 것만을 생각한 결과물이 되었습니다.

그런데 이런 결과물이 생각보다 정말 많습니다. 특히 초중급 디자이너들에게 많이 보이곤 합니다.

 

 

 

 

위 팝업은 어떤가요?

마찬가지로 적지 않은 디자인적인 요소가 들어갔음에도 전달하고자 하는 내용이 한 눈에 들어오는 느낌이 듭니다.

특히 좌상단으로부터 시작하여 우측하단 버튼으로 끝내는 시선처리가 좋아 보입니다.

 

 

그럼 다시 돌아와서 위 기획서에 대한 팝업을 한 번 디자인 해볼까요?

 

작업하시는 분이 풍부한 디자인 소스를 갖고 있거나 소스 사이트를 알고 계시다면 더욱 좋겠지만 전혀 그런것이 없다는 가정 하에 한 번 그려보도록 하겠습니다.

 

보통 배너와 팝업은 좁은 공간안에 많은 내용이 들어가는 경우가 많습니다.

때문에 반드시 정해진 캔버스 사이즈 안에 텍스트 배치부터 하는 작업으로 시작해야 합니다. 디자인 요소부터 배치하고 글을 넣으려 했다가는 글을 넣을 공간도 확보하지 못하고 다 들어엎는 사태가 발생할 수 있습니다.

 

 

 

 

 

일단 텍스트만 대충 배치해 봤습니다.

텍스트 크기는 내용의 중요도에 따라 대충 다르게 했습니다.

 

여기서 좀 더 다듬어 볼까요?

먼저 팝업 내용들을 다시 한 번 읽어 보고 텍스트들의 크기와 배치를 어떻게 하면 좋을지 다시 한 번 고민해 봅니다.

 

 

 

 

 

제 나름대로 텍스트 배치를 손 본 모습입니다.

헤드라인은 두 줄로 끊어 팝업의 목적을 부각시킴과 동시에 설명 텍스트의 크기도 조절했습니다.

아래 일정들은 텍스트가 짧고 추가적인 정보이기 때문에 크기를 조금 줄이고 공간 확보를 위해 버튼을 우측으로 이동시켰습니다.

 

자 이만큼 했으면 반이상은 한 것입니다.

 

만약 여기 디자인 요소가 들어가야 한다면 배치를 조금 수정하면 됩니다.

여기에 김연아양사진을 한 번 넣어볼까요?

 

 

 

 

별로 어려울 건 없습니다. (이미지의 저작권 문제가 있을시 자삭하겠습니다.)

 

일단 우리는 아무 소스도 제휴사이트도 없다는 전제로 작업한다는 가정하에 첫번째 시안으로 작업하겠습니다.

여기까지 됐으면 뭔가 좀 꾸며 줘야겠죠. 이제부터는 디자이너의 감각과 디자인역량 문제이지만 어렵게 생각할 것은 없습니다.

이미 내용에서 어떻게 디자인하면 될 지 다 말해주고 있기 때문이죠.

 

일단 예시로 쓰인 경희대의 홈페이지를 들어가 봅니다.

 

 

 

 

대충 어떻게 디자인하면 될 지 느낌이 옵니다.

컬러 또한 위 시안에서 찍어서 사용해 보도록 하겠습니다.

  

 

 

 

제가 꾸며본 팝업의 이미지입니다. 어떠신가요?

아무런 디자인 요소도 아이콘도 들어가지 않았지만 그다지 부족해 보이지는 않는 느낌입니다.

만약 사진소스등이 있다면 적당히 합성도 해서 만들어 보시기 바랍니다.

 

오늘은 이걸로 마치고 다음에는 배너를 어떻게 만들지에 대해 써보도록 할게요