디자인 기초가 왜 중요할까요?
디자인을 전공하지 않았더라도, 우리는 이미 수천 개의 광고와 배너를 보며 자랐어요.
그래서 "이유는 모르겠지만 불편하다"는 감각은 이미 갖고 있습니다.
오늘 배울 7가지 원칙은 바로 그 감각에 이름을 붙이는 작업이에요.
이 원칙들을 알면 "느낌이 좋다/나쁘다"가 아니라,
"왜 좋고 왜 나쁜지"
설명할 수 있게 됩니다.
아래 이미지를 보고, 어떤 부분이 불편한지 구체적으로 이야기해보세요.
그런 다음, 평소에 기억에 남았던 배너가 있다면 왜 기억에 남았는지도 함께 이야기 나눠보세요.
1. 컬러 (Color)
색은 배너의 첫인상이에요. 사람들은 배너를 보는 순간 0.3초 안에 색으로 브랜드를 인식합니다.
카카오 = 노란색, 스타벅스 = 초록색처럼, 잘 설계된 컬러는 말 없이도 브랜드를 전달해요.
•
컬러의 3가지 역할
종류 | 역할 | 예시 |
메인 컬러 | 브랜드 정체성 표현 | 배달의민족 = 민트색 |
포인트 컬러 | 버튼, 할인 문구 강조 | CTA 버튼, 가격 강조 |
보조 컬러 | 배경, 부가 요소 | 카드 배경, 구분선 |
실무 꿀팁•
한 배너에 색은 2~3가지만 사용하세요. 그 이상이면 시선이 분산됩니다.
•
글씨와 배경은 명확하게 구분되어야 해요. (검정 배경 + 흰 글씨, 파란 배경 + 노란 글씨)
•
CTA 버튼은 배경과 가장 대비되는 색으로 설정하세요.
디자인 툴에서 색상을 사용하는 법
: 컬러 사이트에서 #000000 형식의 HEX 코드를 복사해 피그마 색상 입력 창에 붙여 넣으면, 바로 사용할 수 있어요!
※ 컴퓨터에서 색을 숫자로 표현하는 이유는 컴퓨터가 "색"을 디지털 방식으로 다루기 때문이에요!<참고>
색상환과 보색
2. 폰트 (Font)
폰트는 디자인의 목소리예요. 같은 문장도 폰트에 따라 느낌이 완전히 달라집니다.
•
고딕체 vs 명조체
구분 | 느낌 | 어울리는 곳 |
고딕체 (산세리프) | 현대적, 깔끔, 친근 | 앱 배너, 이벤트, SNS |
명조체 (세리프) | 클래식, 고급, 신뢰 | 브랜드 배너, 출판, 럭셔리 |
고딕체와 명조체
거제시 배너를 보고, 어떤 폰트가 명조체/고딕체인지,
어떤 글씨가 먼저 눈에 들어오는지 이야기해 보세요.
•
굵기로 역할 나누기
◦
굵고 큰 글씨 → 제목, 핵심 메시지
◦
얇고 작은 글씨 → 설명 문구, 날짜, 조건
◦
특별한 글씨체 → 이벤트 포인트 (단, 1가지만!)
실무 꿀팁•
한 배너에 폰트는 2가지까지만 사용하세요.
•
제목은 크게, 본문은 작게 → 시선이 자연스럽게 중요한 것으로 먼저 갑니다.
•
줄 간격은 글씨 크기의 120~150% 정도로 설정하면 답답해 보이지 않아요.
3. 여백 (Spacing)
여백은 디자인의 숨 쉴 공간이에요.
요소들이 빽빽하게 붙어 있으면 답답하고, 여백이 있으면 고급스럽고 읽기 쉬워집니다.
<‘2024 서울 관광 글로벌 캠페인 – Feel Soul Good’>
서울시 포스터에서 이미지와 글씨가 어떤 여백으로 배치되어 있는지,
상단 글씨의 여백은 어떤지 함께 살펴보세요.
•
여백의 2가지 종류
◦
내부 여백 (Padding): 버튼 안쪽처럼 요소 내부의 공간
◦
외부 여백 (Margin): 요소와 요소 사이의 공간
실무 꿀팁•
배너 가장자리 여백(마진)은 최소 16px 이상 확보하세요.
•
제목, 이미지, 버튼 사이 간격은 일정하게 유지하세요.
•
CTA 버튼 주변엔 여백을 충분히 줘야 시선이 자연스럽게 집중됩니다.
핵심 포인트!
빈 공간 = 낭비? → 빈 공간 = 중요한 것을 돋보이게 하는 장치!4. 시각적 계층 구조 (Visual Hierarchy)
"사람들이 배너를 볼 때, 어떤 순서로 읽게 할 것인가?" — 이것이 시각적 계층 구조예요.
크기, 굵기, 색상, 위치를 조절해서 정보의 중요도를 눈에 보이게 만드는 원칙입니다.
•
3단계로 나누기
단계 | 역할 | 표현 방법 |
1순위 (헤드라인) | 가장 먼저 읽혀야 할 것 | 가장 크고 굵게, 중앙 배치 |
2순위 (서브 메시지) | 헤드라인을 보완하는 내용 | 중간 크기, 보조 색상 |
3순위 (CTA 버튼) | 행동 유도 | 포인트 컬러 버튼 |
•
나쁜 예시 vs 좋은 예시 모든 텍스트가 같은 크기 → 어디를 먼저 봐야 할지 모름
제목 48px → 설명 20px → 버튼 16px → 자연스럽게 시선이 흐름•
배너에 적용하기
"여름 세일 최대 70% OFF" 배너라면,
•
1순위: "최대 70% OFF" (가장 크게)
•
2순위: "여름 한정 세일" (중간 크기)
•
3순위: "지금 바로 보기" 버튼 (포인트 컬러)
5. 정렬 (Alignment)
정렬은 모든 요소를 보이지 않는 기준선에 맞춰 배치하는 원칙이에요.
같은 요소들이라도 정렬이 되어 있으면 깔끔하고, 제각각이면 어수선해 보입니다.
•
정렬의 3가지 종류
정렬 방식 | 느낌 | 추천 상황 |
가운데 정렬 | 안정적, 균형감 | 대부분의 배너, 공지 |
왼쪽 정렬 | 읽기 편함, 자연스러움 | 긴 텍스트, 설명형 배너 |
오른쪽 정렬 | 세련됨, 고급스러움 | 브랜딩 배너, 럭셔리 제품 |
실무 꿀팁•
피그마에서 그리드(Grid)와 가이드라인을 켜두면 정렬이 훨씬 쉬워요.
•
텍스트와 이미지가 각자 다른 기준선에 있으면 → 뭔가 어색한 느낌의 원인입니다.
•
배너 내 모든 텍스트의 정렬 방향은 한 가지로 통일하세요.
•
나쁜 예시 vs 좋은 예시 제목은 가운데, 설명은 왼쪽, 버튼은 오른쪽 → 시선이 갈피를 못 잡음
제목, 설명, 버튼 모두 가운데 정렬 → 안정적이고 깔끔한 배너6. 대비 (Contrast)
대비는 두 요소의 차이를 크게 만들어 강조하는 원칙이에요.
색상 대비, 크기 대비, 굵기 대비 모두 포함됩니다.
왜 중요한가? —
대비가 낮으면 글씨가 잘 안 보이고, 버튼이 눈에 안 띄고, 핵심 메시지가 묻힙니다.
특히 모바일 환경에서는 화면이 작기 때문에 대비가 더욱 중요해요.
•
대비 활용법
종류 | 나쁜 예 | 좋은 예 |
색상 대비 | 흰 배경 + 연한 노랑 글씨 | 흰 배경 + 검정 또는 진한 색 글씨 |
크기 대비 | 제목 20px + 본문 18px | 제목 48px + 본문 18px |
굵기 대비 | 모든 글씨 Regular | 제목 Bold + 본문 Regular |
실무 꿀팁•
텍스트와 배경의 명도 차이는 충분히 크게 유지하세요.
•
CTA 버튼은 배경과 가장 다른 색으로 → 클릭을 유도하는 핵심 장치입니다.
•
피그마에서 [플러그인 → Contrast Checker]로 접근성 기준 충족 여부를 확인할 수 있어요.
7. 반복 (Repetition)
반복은 같은 디자인 요소를 일관되게 사용해 통일감을 만드는 원칙이에요.
하나의 배너 시리즈나 캠페인에서 컬러, 폰트, 레이아웃을 반복 사용하면 브랜드 인지도가 높아집니다.
•
반복이 만들어내는 효과
◦
브랜드 인식: "이 배너 스타일 = 이 브랜드"라는 인식이 생깁니다.
◦
신뢰감: 일관된 디자인은 전문적으로 보여요.
◦
제작 효율: 템플릿으로 만들어두면 다음 배너를 빠르게 제작할 수 있어요.
•
배너에서 반복할 요소들
요소 | 예시 |
컬러 | 매달 다른 배너지만 포인트 컬러는 항상 코랄 |
폰트 | 제목은 항상 Pretendard Bold |
레이아웃 | 로고 위치, 텍스트 배치 구조 |
버튼 스타일 | 둥근 모서리 + 흰 글씨 + 포인트 컬러 |
실무 꿀팁•
레퍼런스 수집할 때, 브랜드가 어떤 요소를 반복하고 있는지 분석해보세요.
•
피그마에서 컴포넌트(Component)를 만들어 반복 요소를 템플릿화하면 실무처럼 작업할 수 있어요.
7가지 원칙 한눈에 정리
원칙 | 한 줄 정의 | 배너에서 핵심 역할 |
컬러 | 브랜드의 첫인상 | 메인/포인트/보조 3가지로 나눠 사용 |
폰트 | 디자인의 목소리 | 2가지 폰트, 크기로 위계 구분 |
여백 | 숨 쉬는 공간 | 16px 이상, 일정한 간격 유지 |
시각적 계층 구조 | 읽는 순서 설계 | 헤드라인 → 서브 → CTA 순 |
정렬 | 기준선 맞추기 | 모든 요소를 같은 기준으로 정렬 |
대비 | 차이로 강조하기 | 글씨-배경, 제목-본문 차이 크게 |
반복 | 일관성과 통일감 | 컬러·폰트·레이아웃 반복으로 브랜드화 |