오늘은 디자인을 할 때 빠질 수 없는 레이아웃과 타이포그래피에 대해서 알아보고자 한다.
균형 잡힌 디자인 표현을 위해서는 어떤 틀을 가지고 그 틀 안에 어떤 서체, 폰트로 구성되는지를 잘 고려하여야 한다. 전문적인 지식을 한 번도 정리해 본 적 없는데 이 기회에 정리하면서 배우는 시간을 가져야겠다!
1. 레이아웃 구성 원리
1-1) 그리드 시스템(Grid System)
- 정의 및 필요성
- 레이아웃의 균형과 정렬, 간격을 체계적으로 관리하기 위한 기본 틀
- 즉, 텍스트, 이미지, 버튼 등의 요소들을 일관된 패턴으로 정리하는 방식
- 디자인의 일관성, 정돈된 느낌, 사용성을 높이기 위해 필수적
- 반응형 디자인(모바일, 태블릿, 데스크톱)에서 유연한 조정 가능
- 디자인 작업 속도 향상
- 기본 구성 요소
- 컬럼(Column, 열) : 세로줄(디자인을 나누는 주요 단위)
- 행(Row) : 가로줄 (컬럼을 묶어서 구성하는 단위)
- 간격(Gutter) : 컬럼 사이의 간격(적절한 여백으로 가독성 향상)
- 마진(Margin) : 바깥 여백(콘텐츠와 화면 끝 사이의 거리)
- 그리드 시스템의 종류
- 기본(단순) 그리드 : 한 줄로 정렬된 단순한 구조
* 12컬럼 그리드 시스템 : 전체 레이아웃을 12개의 컬럼으로 나누어 배치하는 디자인 원리로 유연한 반응형(모바일~PC)으로 쉽게 적용 가능, 웹 & 앱에서 가장 널리 사용되는 구조라 표준화되어 있음
- 모듈형 그리드 : 컬럼과 행이 조합된 형태
* 예: 카드 UI, 대시보드 디자인
- 다중 컬럼 그리드 : 여러 개의 컬럼으로 구성된 유연한 레이아웃
* 예: 웹사이트, 뉴스 기사
- 비정형 그리드 : 콘텐츠에 따라 자유로운 배치
* 예: 아트 포스터, 창의적인 웹사이트
1-2) 정렬 및 간격(Alignment & Spacing)
- 정렬
- 요소들을 일정한 기준에 맞춰 배치하여 시각적 안정성을 확보하는 방식
- 종류 : 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬, 정렬 없음(자유 배치)
- 간격
- 콘텐츠 간의 여백을 설정하는 방식
- 마진(Margin) : 요소 바깥쪽 여백
- 패딩(Padding) : 요소 안쪽 여백
- 라인 높이(Line Height) : 텍스트 줄 간격
- 적절한 정렬과 간격 조정이 가독성과 안정감을 높여줌!
1-3) 반응형 디자인(Responsive Design)
- 정의 및 필요성
- 다양한 디바이스(데스크톱, 태블릿, 모바일)에서 최적의 레이아웃을 유지하기 위한 디자인 방식
- 반응형 디자인 원칙
- 유동적 레이아웃(Fluid Layout) : 화면 크기에 따라 자동 조절
- 미디어 쿼리(Media Query) : 특정 화면 크기에 맞춰 스타일 변경
- 가변 그리드(Flexible Grid) : 컬럼, 간격이 자동 조정됨
- 반응형 디자인 예시
- PC 3단 레이아웃 -> 모바일 1단 레이아웃으로 자동 조정
- 버튼 크기, 폰트 크기, 이미지 비율이 디바이스에 따라 적절히 변경
2. 타이포그래피(Typography)
2-1) 타이포그래피 기본 개념
- '타이포그래피' 란?
- 활자의 시각적인 측면으로 텍스트를 읽기 쉽고 미적으로 배열하는 방법을 일컫음
- 폰트(Font)과 서체(Typeface)의 차이
- 서체 : 폰트군의 집합을 일컫는 이름(예: Arial, Roboto 등)
- 폰트 : 서체의 구체적인 스타일(예: Arial Bold, Roboto Light 등)
- 타이포그래피의 3대 요소
- 색상(Color) : 대비와 가독성을 위해 고려
- 크기(Size) : 정보 계층을 구분하는 핵심 요소
- 자간(Letter Spacing) & 행간(Line Height) : 가독성에 중요한 역할
2-2) 계층 구조(Hierarchy)
- 왜 중요?
- 중요한 정보와 덜 중요한 정보를 구분하여 가독성과 정보 전달력 높임
- 시각적 대비 방법
- 폰트 크기 : 큰제목, 작은 본문
- 굵기 : Bold, Regular, Light 사용
- 색상 대비 : 배경색과 텍스트 색상의 적절한 조합
3. 색상 이론(Color Theory)
지난 게시글에서 색상 이론의 일부인 색상 원리 즉, 색의 기본요소(RGB, CMYK, 색상환, 색 조합 등)에 초점을 맞춰서 알아봤었다면, 이번에 정리하는 색상 이론은 색의 요소와 심리적 효과를 정리해보고자 한다.
3-1) 색상의 3요소
- 색상(Hue) : 빨강, 파랑, 노랑 등 기본적인 색의 종류
- 명도(Value) : 색의 밝고 어두운 정도
- 채도(Saturation) : 색의 선명한 정도(탁한 색 vs. 선명한 색)
- 3가지 요소를 조합하면 다양한 색감 조절 가능
3-2) 색상의 심리적 효과
- 색상은 단순한 디자인 요소가 아니라, 감정과 행동에 영향을 미치는 강력한 도구로 각 색상이 사람들에게 주는 심리적 효과는 다양하다.
- 목적, 대상, 문화적 배경, 트렌드 등을 고려하여 색상을 선택하는 것이 중요하다.
- 색상 심리학은 절대적인 법칙이 아닌 하나의 가이드라인일 뿐, 사람들의 문화와 개인 경험, 맥락에 따라 다르게 나타날 수 있음을 잊지말자!
- 빨강(Red) : 강렬함, 긴급함, 위험, 사랑, 식욕을 자극 (예: 유튜브, 세일 배너, KFC 등)
- 주황(Orange) : 활기, 따듯한, 창의성, 모험, 사교적이고 친근함(예: 커뮤니티, 환타 등)
- 노랑(Yellow) : 행복, 에너지, 주목, 창의적이고 긍정적(예: 포스트잇, 배달앱, 경고표지)
- 초록(Green) : 자연, 건강, 눈이 편안한, 돈(예: 친환경 브랜드, 스타벅스 등)
- 파랑(Blue) : 신뢰, 안정감, 기술적(예: 금융, IT 기업)
- 보라(Purple) : 고급스러움, 신비로움, 창의성, 우아함(예: 예술 및 뷰티 럭셔리 브랜드)
- 검정(Black) : 세련됨, 강렬함, 권위, 신비로움(예: 샤넬, 애플 등)
- 흰색(White) : 순수함, 깔끔함, 단순함, 미니멀리즘(예: 의료 브랜드, 애플 등)
- 색상 심리학을 활용하는 방법
- 브랜드 이미지에 맞는 색상을 선택하자
- CTA(Call To Action) 버튼 색상을 신중히 선택하자
*예: 빨강 → 긴급성, 행동 유도 (예: "지금 구매!")
*예: 초록 → 승인, 긍정적 느낌 (예: "가입하기")
*예: 파랑 → 신뢰성, 차분함 (예: "더 알아보기")
- 색상의 대비를 활용해 가독성을 높이자
*예: 밝은 배경 & 어두운 텍스트
*예: 강조할 부분 보색 사용
오늘은 레이아웃 및 타이포그래피, 색상 심리학 등의 디자인의 원리를 알아보았다.
아직은 크게 와닿지 않는 부분들도 있으나, 앞으로 실제도 제작하고 배워가면서 구체화시키면서 이해할 수 있을 것이라 생각한다.
부담갖지 말고 차근차근 배워가자! 아자아자
'프로덕트 디자인' 카테고리의 다른 글
| UI 컴포넌트와 프로토타이핑 (0) | 2025.02.21 |
|---|---|
| 레이아웃 및 타이포그래피 등 디자인 원리(2) (0) | 2025.02.20 |
| 피그마(Figma) 기본 개념 (0) | 2025.02.18 |
| 디자인의 기초 - 색상이론 (2) | 2025.02.17 |
| 디자인의 기초 - 디자인 기본 원리 (2) | 2025.02.16 |