답답해 죽느니 망고보드로 직접 만드는 이벤트 홍보물

상세페이지

  • HOME > 리뷰 & 하우투

답답해 죽느니 망고보드로 직접 만드는 이벤트 홍보물


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

글. 엄혜경 애드앤미디어 대표  addandm@naver.com
기사입력. 2019-10-08 16:32



▲ 엄혜경 애드앤미디어 대표

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

01. 답답해 죽느니 직접 만들어야 하는 디자인 콘텐츠
02. 답답해 죽느니 직접 만드는 온라인 배너
03. 답답해 죽느니 직접 만드는 유튜브 썸네일 이미지
04. 답답해 죽느니 직접 만드는 이벤트 홍보물
05. 답답해 죽느니 직접 만드는 카드뉴스
06. 답답해 죽느니 직접 만드는 이벤트 당첨자 안내문
07. 답답해 죽느니 직접 만드는 인포그래픽
08. 답답해 죽느니 직접 만드는 동영상 홍보물

<한 명이라도 더 볼 수 있도록>

홍보의 궁극적인 목표는 고객의 눈에 띄어 구매로 이끄는 것이다. 시시각각 넘쳐나는 타임라인에서 고객의 눈에 띄기 위해, 한명의 고객이라도 더 보도록 홍보물 하나하나에 다양한 강조 방법들을 적용하게 된다. 이번 차시에서는 눈에 띄는 컬러를 홍보 디자인에 적용하는 방법을 알아보도록 한다.


▲ 출처. 망고보드 SNS 템플릿

<컬러로 강조하기>

대비는 디자인의 기본 원칙 중 하나이다. 웹 페이지 나 인쇄 디자인에서도 중요한 요소에 눈을 끌고, 주의를 집중시키기 위해서 가시성이 높은 고대비 조합을 많이 사용한다. 색상환에서 서로 반대편(보색) 또는 반대편의 좌우 (유사 보색)에 위치한 색을 사용하는 것이다. 고대비의 색은 서로 충돌하기 때문에 자칫 잘못 쓰면 촌스러운 색이지만, 잘 사용하면 서로를 잘 강조할 수 있는 좋은 배합이다.

▲ 출처. MIDORI Graphic Design Tips for Non-Designers

화가들도 색채의 대비 효과를 잘 표현하는데, 그중 대표적인 화가는 반 고흐이다. 그가 그린 그림 <까마귀가 나는 밀밥>을 보면 밀밭의 수평선을 기준으로 위쪽 그림 색과 아래쪽 그림 색이 강한 대비를 이루고 있다. 어둑어둑한 하늘과 황금색 밀밭 두 가지의 강한 색이 부딪치지만 전체는 하나의 완전체처럼 잘 어우러진다.


▲ 반고흐의 ‘까마귀가 나는 밀밭’

<디지털에서 컬러 표기법>

디지털에서 색을 표현하는 방식 중 가장 많이 사용하는 것은 RGB이다. RGB는 색의 삼원색인 R(Red), G(Green), B(Blue)를 나열하여 만든 색상 값이다. 하나의 색은 256가지로 나눠지고, 세 가지 색을 모두 조합하면, 16,777,216가지 색상을 표현할 수 있다. 하지만, 웹에서는 256을 16진수로 표현하여 3자리가 아닌 두 자리씩 도합 6자리로 간략하게 표현하는 HEX 표기 값을 더 많이 사용한다. HEX 값은 #으로 시작하여 R=두 자리, G=두 자리, B=두 자리. 총 6자리의 문자로 표현한다. 이 HEX 컬러 표기 방법을 알게 되면 우리가 원하는 색을 더 빠르게 얻을 수 있을 것이다. 


▲ 색의 두 가지 표현RGB와 HEX

<매력적인 컬러 배합 찾기>

유능한 디자이너도 가장 어려운 것이 배색이라 할 정도로 좋은 컬러 배합을 만들기란 결코 쉽지 않다. 하물며, 비디자이너(일반인)들이 수많은 컬러에서 서로 어울리는 배합을 찾는 것은 참 어려운 일이다.
이럴 때 우리는 좋은 대비의 색 배합을 찾을 수 있는 사이트의 도움을 받을 수 있다. 필자가 가장 애정하는 세 곳을 추천하려고 한다.

① 컬러드롭(colordrop.io)



컬러드롭은 매우 매력적인 4색 배합의 컬러 팔레트를 제공한다. 마음에 드는 컬러팔레트를 클릭하면 오른 편에 4가지 컬러의 정보가 나타난다. 컬러 중 HEX 컬러를 표현한 [#F75940]를 기억하자. 마우스로 드래그하여 복사하여도 된다.

② 컬러 클레임(www.vanschneider.com/colors)



컬러 클레임은 색 결정에 어려움을 느끼는 이들에게 120개의 배색 카드를 주며 “바로 컬러야”라며 정답을 제시 받는 느낌의 색 추천사이트이다. 아래와 같이 배색카드 하단에 배경의 컬러 값이 나타나 있다. 이 컬러 값을 기억하여 망고보드에서 적용한다.


*배경 외 텍스트에 관한 컬러 값은 [컬러피커 프로그램] 또는 [망고보드 실험실]에서 확인할 수 있다.

망고보드 실험실에 접속하여 저장한 컬러 카드의 이미지를 업로드하며, 바로 사용된 컬러가 나타난다.





③ 드리블(dribbble.com)
드리블은 디자이너 작품 중에서 좋은 색 배합을 찾을 수 있는 사이트이다. 오른쪽의 [Filters]를 클릭하여 원하는 컬러를 선택하면 그 컬러를 주로 사용한 디자인 콘텐츠를 검색한다. 그중 원하는 디자인을 클릭하면 사용한 컬러 팔레트가 나타난다. 컬러 팔레트 위에 마우스를 올려보면 해당 컬러 값이 나타난다.





<눈에 띄는 컬러를 적용하여 홍보 이미지 만들기>

앞서 컬러 클레임에서 추천하는 다음의 컬러 배합을 홍보 이미지에 적용하여 보자.



① 배경 색 바꾸기
망고보드를 실행한 후, 위의 배경 컬러를 동일하게 지정하기 위해서는 배경색의 직접지정에 컬러 값을 복사하여 붙여 넣거나 직접 입력하여 적용한다.

➊기능탭의 [배경] - ➋[배경색 버튼] - ➌[직접지정]을 클릭한다. ➍의 [색상값]에 컬러 클레임의 컬러값 [#864BFF]를 입력한다. 클립보드에 복사해 두었다면 붙여넣기를 해도 된다.



② 배경 패턴을 위한 아이콘 추가하기
단색으로만 되어 있는 배경이 밋밋할 수 있으니, 관련 아이콘을 추가하여 배경 패턴으로 넣어보자.

➊검색창에 [컴퓨터]를 검색하여, ➋[요소] - ➌[아이콘]을 클릭하여, ➍와 같은 라인 아이콘을 찾아 슬라이드에 추가한다.

*요소의 아이콘으로 검색된 이미지는 컬러를 변경할 수 있는 벡터 이미지이다.



③ 아이콘으로 패턴 만들기
추가된 아이콘은 크기와 컬러가 다양하다, 이러한 아이콘을 모두 선택하여 컬러와 크기를 바꿔 패턴으로 만들어 보자.
아이콘을 모두 선택하여 왼쪽의 색상 버튼을 보면 ➊[?]로 나타난다. 이 [?]는 우리가 선택한 디자인 요소들의 하나 이상의 색이라는 것을 나타내준다. 이 [?]를 클릭하여 기본 팔레트의 ➋[하얀색]을 클릭한다. 모든 아이콘이 흰색으로 바뀌게 된다.



그런 후, ➌의 불투명도를 [20]으로 맞춰보자. 배경색이 살짝 보이면서 잘 어울리게 된다.



색과 크기를 맞춘 아이콘은 다음과 같이 배치한다. 그런 후 모두 선택하여 ➍의 [잠금]을 클릭한다. 앞으로 작업할 때 배경 패턴이 선택되지 않도록 잠금 기능을 실행하는 것이다.



④ 텍스트 입력하기
망고보드 편집창을 열어 다음과 같이 텍스트를 입력한다. 각자 홍보문구를 적어보도록 한다. 폰트는 두꺼우면서도 부드러운 [강변북로]를 사용하였다.

*텍스트 한 줄씩 다른 컬러와 폰트를 적용하려면, 처음부터 한 줄씩 나눠 입력하는 것이 더 편리하다.



텍스트를 모두 선택한 후, ➊의 [색상버튼] - ➋의 [직접지정]을 클릭, ➌의 [색상값]에 [#00FFCB]를 입력한다. 텍스트의 컬러가 모두 바뀐다.



<완성된 홍보 이미지와 응용 버전>

① 같은 내용에 색을 다르게 적용한 디자인 예시



② 같은 색상을 서로 다른 템플릿에 적용한 디자인 예시



색은 가장 먼저 독자에게 전달된다. 색에는 정보를 담을 수도 있고, 콘셉트를 느끼게 할 수도 있다. 그러므로, 내용과 콘셉트에 맞는 컬러를 선정하는 것이 디자인의 첫 작업이라고 생각한다.



▲ 답답해 죽느니 내가 직접 만드는 SNS콘텐츠 with 망고보드

출판사: 애드앤미디어
저자: 엄혜경
출간일: 2019년 4월 8일

tags 엄혜경 , 망고보드 , 이벤트 , 홍보물 , 앤드앤미디어 , 디자인 , 디자이너

저작권자 © 웹스미디어 무단 전재-재배포 금지

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

URL 복사 출력하기 목록보기 스크랩하기

관련기사


정기구독신청