답답해 죽느니 직접 만드는 온라인 배너

패스트 미디어 시대 비디자이너의 디자인 방법

스낵컬쳐 세대가 소비하는 콘텐츠를 제공하기 위해서는 콘텐츠 제작의 시간과 비용을 줄여야 한다. 기획자도 일반인도 누구나 디자인 콘텐츠를 완성하도록 지원하는 망고보드 디자인을 소개한다.

*필자 요청으로 기존 목차에서 02, 04회 연재 순서가 변경되었음을 알려드립니다.

  1. 답답해 죽느니 직접 만들어야 하는 디자인 콘텐츠
  2. 답답해 죽느니 직접 만드는 온라인 배너
  3. 답답해 죽느니 직접 만드는 유튜브 썸네일 이미지
  4. 답답해 죽느니 직접 만드는 이벤트 홍보물
  5. 답답해 죽느니 직접 만드는 카드뉴스
  6. 답답해 죽느니 직접 만드는 이벤트 당첨자 안내문
  7. 답답해 죽느니 직접 만드는 인포그래픽
  8. 답답해 죽느니 직접 만드는 동영상 홍보물

작은 거인, 배너

인터넷에 접속하면 사방에서 ‘나 좀 눌러 주세요’하며 각양각색의 이미지가 우리를 현혹한다. 대부분은 광고라 그냥 무시하기도 하지만 색이 눈에 띄거나, 카피가 호기심을 자극하거나, 관심 있는 주제가 있으면 나도 모르게 클릭을 하게 된다.
배너는 인터넷 웹사이트에 띠 모양으로 부착하는 광고로 상품 홍보, 이벤트 등 홍보 내용을 작은 창에 한눈에 보이도록 만든 콘텐츠로, 자사 웹사이트의 트래픽을 높이기에 효과적이고 모든 작용에 측정 가능하기에 상품의 홍보와 브랜드 인지도를 향상을 위한 가장 기본적이고, 효과적이다.
배너의 성공 여부는 밀도 있고, 가시성 높은 디자인에 따라 결정된다. 복잡한 스크린에서 소비자의 눈에 띄어야 하고, 작은 사이즈에 원하는 바를 확실히 표현해야 하기 때문이다. 그럼, 배너를 만들기 위해 준비해야 할 것을 알아보자.

배너 디자인

소셜미디어 전략가 Aida Gadzo에 의하면, 배너는 2초 안에 고객이 배너의 내용을 읽을 수 있어야 한다고 한다. 그러기 위해선 심플하고, 밀도 있게 디자인되어야 한다.

① 배너 사이즈

배너는 웹사이트와 광고 포맷에 맞춰 각각 사이즈가 다르게 정해져 있다. 네이버, 다음, 구글 등 웹사이트 마다 크기가 다르게 설정되어 있고, 앱과 웹에 따라서도 다르다. 목적에 따라, 비용에 따라 배너의 크기를 정확하게 맞춰 제작해야 한다.

② 텍스트

텍스트는 최소화하여 배너 당 10개 미만의 깔끔한 단어를 사용하는 것이 좋다. 주로 3가지 이하의 고딕 계열 폰트를 사용한다. 캘리그래피 폰트로 포인트를 주기도 한다.

고딕 계열의 두 가지 폰트로 깔끔하게 표현한 배너(출처. 네이버 메인화면)

③ 컬러

대비가 강한 컬러를 사용하여 눈에 잘 띄도록 하나, 내용과 분위기, 또는 계절, 브랜드 컬러를 적용하기도 한다.

④ 이미지

배너에 사용되는 이미지는 내용에 맞는 이미지로 전체보다는 부분으로 활용하는 좋다. 그래야 텍스트를 가리지 않고, 내용을 더 부각시킬 수 있다.

망고보드의 디자인 방법

망고보드의 디자인 방법은 디자인 요소의 조합이라 할 수 있다. 원하는 텍스트(홍보문구)를 정하고, 그에 필요한 디자인 요소를 검색한다. 여기에 필요한 폰트와 디자인 요소는 망고보드 회원이 망고보드에서 디자인을 완성할 경우 저작권에 상관없이 자유롭게 사용할 수 있다. 단, 무료 회원인 경우 디자인요소에 따라 워터마크가 나타날 수 있다. 디자인 요소는 색을 변경할 수 있는 벡터 이미지와 필터를 적용할 수 있는 비트맵 이미지로 구성되어 있어, 선택 여부에 따라 색을 자유롭게 조절할 수 있다.

망고보드에서 배너 디자인하기

① 콘텐츠 기획하기

콘텐츠 기획에는 목적과 타깃을 정확하게 파악하여 구체화시키도록 한다.

② 망고보드 시작하기

망고보드 사이트에 접속하여, 회원가입 후 로그인한다.
회원 가입은 이메일 계정, 또는 다양한 SNS 계정으로 가입할 수 있으니 우선 무료회원으로 가입한다. 결제는 차후에 필요에 따라 진행할 수 있다.

인터넷 접속 시, 웹브라우저는 크롬 사용 권장(www.mangoboard.net)

로그인하여 왼쪽 하단의 ‘START’ 버튼을 클릭해 망고보드 편집기로 접속한다.

③ 망고보드 편집기

망고보드의 UI는 매우 단순하다. 크게 상단의 파일 메뉴와 숨겨진 메뉴를 보여주는 기능 탭, 작업을 하는 슬라이드로 구성되어 있다.

④ 제목 저장하기

슬라이드 상단의 “제목을 입력하세요” 부분을 클릭하여 노란색으로 선택되면, 새로운 제목을 입력한다. 이 제목은 작업을 끝낸 후, 다운로드할 경우 파일의 이름이 된다.

⑤ 크기 정하기

만들어야 할 콘텐츠의 크기를 정한다. 오른쪽 상단의 픽셀 표시를 클릭하면, 원하는 작업 크기를 정할 수 있다. 정확한 크기를 알면 바로 숫자를 입력하고, [사용자 설정]을 클릭하면 일반적인 콘텐츠 사이즈를 쉽게 적용할 수 있다.

사용자 설정에서 망고보드 [배너]를 선택한 후 [확인]을 클릭하면 슬라이드의 크기가 바뀐다. 작업 준비가 된 것이다.

⑥ 텍스트 입력하기

기능 탭의 [T]를 클릭하여 텍스트 탭을 연다. 기본 텍스트를 입력하여 폰트와 칼라, 정렬을 맞출 수 있으나 좀 더 쉽게 구성하기 위해, 디자인 텍스트를 클릭하여 추가한다.
디자인 텍스트는 왼쪽 하단의 [여름맞이 HOT세일]이라는 디자인 텍스트를 클릭하여 슬라이드에 추가한다.

무료 계정으로 망고보드를 사용하면, 다음과 같이 폰트와 이미지에 워터마크가 추가될 수 있다.
이때는 무료 계정도 사용 가능한 폰트로 바꾸면 워터마크가 사라진다.

슬라이드의 텍스트 부분을 더블클릭한 후, 왼쪽의 [폰트]에서 다른 폰트로 바꿀 수 있다. 제목은 [시네마극장], 부제목은 [잘난] 폰트로 바꿔준다.

텍스트 부분을 더블 클릭하여, 앞서 준비한 텍스트를 입력한다.

텍스트의 크기 조절과 정렬을 위해 [그룹해제]를 클릭한다. 그룹해제는 왼쪽 상단의 [그룹해제]를 클릭하거나, 단축키 [Ctrl + Shift + G]를 이용하여 실행할 수 있다.

그룹 해제를 하면, 각각의 디자인 요소를 조절할 수 있다. 텍스트의 영역을 넓혀 줄을 맞추고, 이미지의 크기와 위치를 조절한다. 필요 없는 부분은 삭제한다.

⑦ 배경 바꾸기

기능 탭의 5번째 [배경] 탭을 눌러 배경을 선택한다. 슬라이드의 배경은 단색, 그라데이션, 패턴, 단색+패턴, 그라데이션+패턴 등 4가지 조합으로 다양하게 선택할 수 있다. 이번엔 하늘색 패턴을 선택하여 적용한다.

⑧ 컬러 바꾸기

텍스트의 일부분을 선택하고 [텍스트색상] 버튼을 이용하여 다른 컬러로 적용한다. 색상은 [기본색상]과 슬라이드에 한 번이라도 쓴 색상을 보여주는 [사용한 색상], 프로계정에 지원되는 [내 팔레트], 색상 스펙트럼에서 직접 지정할 수 있는 [직접지정]에서 선택하여 사용할 수 있다.

⑨ 디자인 요소 불러오기

망고보드 검색창에 “여름”을 입력하고, 하단의 [요소]를 클릭한다. 디자인 요소 중 [벡터이미지]를 선택하면 색을 바꿀 수 있는 디자인 요소만 검색된다.

무료회원일 경우, 다음과 같이 [W] 표시가 붙어있는 이미지는 워터마크가 나타난다. [W] 표시가 없는 이미지를 찾아보아야 한다.

좌측 하단에 파라솔 이미지를 추가해 컬러를 흰색으로 변경하고, 위치를 조절한다. 유료회원일 경우 아래의 두 번째 예시처럼 워터마크 없이 상업적으로 자유롭게 활용할 수 있는 이미지를 완성할 수 있다. 또한, [AutoFit] 콘텐츠 자동 변경 기능을 이용해 다양한 사이즈로 쉽게 변환할 수도 있다.

⑩ 다운로드하기

[다운로드]를 클릭하여 이미지의 형식과 크기를 선택한다. 작은 사이즈로 디자인을 했을 경우, 다운로드에서 해상도의 크기를 1.5배, 2배까지 확대할 수 있다. 또 여러 장의 슬라이드일 경우, 전체 또는 부분을 선택해 다운로드할 수 있다.

Author
엄혜경

엄혜경

애드앤미디어 대표. 대학에서는 컴퓨터 프로그래밍과 영상미디어, 대학원에서는 뉴미디어콘텐츠를 전공하고, 현재는 IT를 기반으로한 콘텐츠 제작 강의를 주로하고 있다. 뒤늦게 시작한 출판사를 통해 무형의 지식을 유형의 책으로 만드는 일에 재미를 붙인 20년째 진정한 디지털 노마드의 삶을 살아가고 있는 자유인이다. hkeum@bestinfo.kr

애드앤미디어 http://www.addand.kr

당신의 지식에 하나를 더해 드립니다. 애드앤미디어 (ADDAND MEDIA)는 책을 통해 정보기반의 지식전달을 하고있는 출판사 입니다. 현재는 IT분야와 실용심리학 책을 출간하고 있습니다.
Credit
Editor
저자엄혜경 ()
Reference
    © DIGITAL iNSIGHT 디지털 인사이트. 무단전재 및 재배포 금지

    뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다. 본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은 반드시 기사의 출처(로고)를 붙여주시기 바랍니다. 영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라 그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.

    Related Posts