디자인 기초 이론 1

[0] 디자인 기초가 중요한 이유는 무엇일까요?

디자인을 잘 알지 못하는 사람들도 알아야할 기본적으로 적용해야할 디자인 원칙들이 있어요!
그렇지 않으면 나는 분명 디자인한다고 했는데 주변에서 보았을때 불편한 디자인 작업물을 만들어낼수있어요!
위 디자인을 보시고 어떤 느낌이 드시나요? 대부분 보셨을때 이유는 모르겠지만 불편함을 느끼셨을거에요.
잠시 멈춰서 조별로 구체적으로 어떤 부분이 불편했는지 나눠 봅시다.
이처럼 우리는 비전공자였어도 디자인을 보는 감각이 높아져 있답니다. 이유는 수많은 광고와 디자인을 우리도 모르게 보기 때문이에요.
나눠보기
조별로 평소에 봤던 디자인중에 생각나는 배너디자인이 있다면 이야기해보고 그 배너디자인이 생각난 이유에 대해서 가볍게 나눠보세요.

1. 컬러 (Color)

디자인에서 색은 첫인상과 같아요.
예를 들어, 카카오하면 노란색, 스타벅스하면 초록색이 떠오르죠?
이처럼 브랜드마다 대표 색이 있고, 이 색을 잘 활용하면 브랜드 느낌을 바로 전달할 수 있어요.
컬러는 정말 다양하게 활용할 수 있지만 대표적으로 3가지정도로 분류를 해보면 아래와 같아요!
•
메인 컬러: 브랜드를 대표하는 색
◦
브랜드 대표색을 모든 디자인에 반영할 필요는 없지만 회사의 아이덴티티(정체성)를 표현해야되는 디자인이라면 메인컬러를 인지해서 사용해주어야해요! (예: 배달의민족 = 민트색)
•
포인트 컬러: 눈길을 끌고 싶은 곳에 쓰는 색
◦
메인컬러를 넣는 경우 메인컬러와 잘 어울릴 수 있게 혹은 강조할 수 있게 컬러를 사용해야해요! (버튼, 할인 문구)
•
보조 컬러: 배경이나 부가적인 요소에 쓰는 색
<참고>
색상환과 보색
튜터님의 꿀팁
•
한 배너에서 색은 2~3개만 쓰는 게 깔끔해요.
•
글씨와 배경은 꼭 색이 확실히 구분돼야 잘 보입니다.(ex. 검정색 배경에 흰색 글씨, 파란색 배경에 노란색 글씨)
•
CTA 버튼(클릭하는 버튼)이나 강조하고싶은 문구는 특히 눈에 확 띄는 색으로 설정하세요!
•
컬러 추천 사이트  https://color.adobe.com/
•
컴퓨터에서 색을 숫자로 표현하는 이유는 컴퓨터가 "색"을 디지털 방식으로 다루기 때문이에요!
◦
컬러 추천 사이트에 들어가보시면 #000000 이렇게 6자리로 나오는 색상을 복사해서 피그마나 디자인 프로그램에서 사용할수 있어요!

2. 폰트 (Font)

고딕체와 명조체
폰트는 디자인의 목소리예요. 같은 글자라도 폰트에 따라 느낌이 완전 달라지죠.
예를 들어, 뉴스 기사 같은 글씨체와 광고 배너의 글씨체는 다르잖아요?
폰트는 사용자에게 어떤 느낌으로 보여질 것이고 어떤 목적으로 사용될 것이냐에 따라 정해지는 것이라고 볼 수 있어요!
•
굵고 큰 글씨: 제목이나 강조할 메시지
•
얇고 작은 글씨: 설명 문구
•
특별한 글씨체: 이벤트 배너나 포인트용
튜터님의 꿀팁
•
폰트는 한 배너에 2가지까지만!
•
제목은 크게, 본문은 작게 → 이러면 시선이 자연스럽게 제목으로 갑니다.
•
줄 간격은 글씨 크기보다 살짝 넓게 (120% 정도) 해야 답답해 보이지 않아요.
<출처 : 거제시 배너>
나눠보기
거제시에서 만든 배너디자인입니다. 명조체 계열과 유사한 폰트와 고딕체 계열 폰트를 보고
•
어떤게 명조체/ 고딕체 같은지
•
어떤 글씨부터 읽히거나 눈에 띄는지를 조별로 가볍게 나눠보세요!

3. 여백 (Spacing)

간격이좁으면

간 격 이 넓 으 면

여백은 디자인의 숨 쉴 공간이에요.
요소들이 다닥다닥 붙어 있으면 답답해 보이고, 여백이 있으면 깔끔하고 고급스럽게 보여요.
•
제목, 이미지, 버튼 사이에는 간격을 일정하게 두세요.
•
바깥쪽 여백(마진)은 최소한 16px 이상 주세요.
•
CTA 버튼 주변은 공간을 넓게 두면 시선이 더 잘 갑니다.
튜터님의 꿀팁
•
“빈 공간 = 낭비”가 아니고, 중요한 걸 돋보이게 만드는 장치예요.
<‘2024 서울 관광 글로벌 캠페인 – Feel Soul Good’>나눠보기
나눠보기
서울시에서 만든 포스터 디자인입니다. 이미지와 글씨가 어떤 여백으로 배치된거같은지 상단의 글씨 여백은 어떤지 조별로 가볍게 나눠보세요!