1. 오늘의 목표
- 타이포그래피에 대해 학습
- 레이아웃에 대해 학습
2. 오늘의 학습 내용
1. 타이포그래피란 무엇인가?
1. 타이포그래피란?
- 활판술 또는 활자 서체의 배열
- 글자의 형태, 배열, 크기, 간격 등을 조절하여 텍스트를 효과적으로 표현하고 전달하는 예술적 기술적 작업
Q. 여기서 활자란?
- 사각 기둥의 금속에 한 글자씩 양각으로 새겨 인쇄하기 위해 만든 글자 틀
- 조합하여 단어, 문장, 페이지 단위로 인쇄, 특정하게 '디자인'된 글자
2. 타이포그래피는 어떤걸 하는걸까?
3. 타이포그래피의 중요성
- 정보 전달 :좋은 타이포그래피는 가독성을 향상하여 독자가 정보를 흡수할 수 잇도록 도와준다.
- 브랜드 정체성 강화 : 서체의 일관된 사용은 브랜드의 정체성을 확립하고, 소비자의 기억에 남도록 합니다.
- 사용자 경험 향상 : 디지털 미디어 환경에서 좋은 타이포그래피는 직관적인 탐색과 컨텐츠 접근성을 제공한다.
→ 타이포그래피는 단순한 글자 배열을 넘어서, 글자가 어떻게 시각적으로 전달될지를 고민하는 과정
→ 정보를 전달하는 기능 외에도, 느낌을 전달하고, 특정 감정을 유발하는 시각적 언어로 기능
4. 타이포그래피의 역사
타이포그래피는 인쇄술의 발명과 함께 탄생되었다.
5. 다양한 서체들의 발전과정
A. 고딕 중세시대를 대변하는 블랙레터체
- 굵은 획을 보여주는 필사체의 재현을 나타내는 BlackLetter 체
- 맥주 브랜드처럼 상품 표지 등에 많이 사용한다.
B. 그리스 로마의 정신을 따른 로만체
- 고전적인 비례와 우아한 곡선이 특징인 Bembo 체와 Garamond 체
- 클래식하고 무난해서 책 본문용 글꼴에 적합하다.
C. 18세기 신고전주의 서체 트렌지셔널
- 뱀보와 가라몬드에 비해 좀 더 현대적으로 변한 글꼴, 기하학적이고 규칙적인 서체
- 대표적인 서체는 Baskerville 이 있다.
D. 정제된 미학의 모더니스트 서체
- 굵은 획과 얇은 획의 극단적인 대비가 특징, 본문보다는 제목에 더 적합한 서체
- 대표적인 서체는 Bodoni 가 있다.
E. 산업 혁명과 산세리프 서체
- 실용성과 명확성이 강조, 고른 굵기 균형 잡힌 구조가 특징
- 정보 전달용 서체로 적합
- 대표적인 서체로 Akzidenz Grotesk 가 있다.
F. 20세기 모더니즘 타이포그래피
- 논리, 질서, 명료성, 보편성을 강조하는 디자인의 시작
- 중립적이고 보편적인 산세리프 서체의 정석임
- 대표적인 서체로 Helvetica 가 있다.
G. 디지털 서체 혁명
- 더이상 활자 주조 없이 무한히 확장가능한 시대이기 때문에 서체의 변경에도 무한한 가능성이 열렸다.
- 가독성과 접근성이 핵심이 된 시대
2. 디자인에서의 타이포그래피
1. 폰트
A. 영문 서체의 구성요소
B. 국문 서체의 구성요소
C. 세리프 vs 산세리프 차이
- 세리프 = 전통, 고급, 신뢰
- 산세리프 = 현대, 깔끔, 직관
2. 자간과 어간
- 제목같은 경우에는 자간이 본문보다 좀 좁아야 임팩트 있음
- 작은 글자들을 조판할 때는 자간을 조금 넓혀야 가독성이 좋아짐
Q. [동ㅣ해]의 자간과 [해ㅣ물]의 자간 크기가 다른데 왜 그런걸까?
- 글자가 아닌 밝은 면들이 동일하지 않기 때문에 동일해보이도록 조정했기 때문 이 비주얼을 맞추는 행위를 커닝(Cunning)이라고 한다.
3. 글줄 사이 또는 행간
- 글 한줄을 행이라고 부르고 행과 행사이의 거리를 글줄 사이 또는 행간(Leading)이라고 한다.
- 국문은 영문과 달리 사각형 모듈안에 들어가기 때문에 행간의 적용도 다르다. 국문은 좀 더 깔끔하게 행간정리가 되는 편
4. Negative Space
- 글자 자체의 모양, 글자 자체를 Positive Space라고 하고 그 나머지를 Negative Space 라고 한다.
3. 레이아웃의 중요성
1. 레이아웃이란?
- 특정 공간 안에 문자, 이미지 등의 구성 요소를 보기 쉽게 효과적으로 배치하는 작업
- 시각적인 균형의 조화를 이루고, 사용자의 효과적인 정보 인식을 돕는 구성 방식
- 레이아웃에 따라서 전달력과 집중력이 달라진다.
2. 레이아웃의 중요성
- 레이아웃의 배치에 따라 정보 전달력의 차이가 크다.
- 시각적 위계가 형성되어 보기가 편하다.
- 레이아웃 만으로도 브랜드의 아이덴티티로 활용될 수 있다. (전문성, 신뢰감 형성)
Q. 애플과 쿠팡의 레이아웃 차이
1) 애플의 경우
- 소비자가 심사숙고해서 결정해야 하는 페이지이기 때문에 웅장하고 깔끔하고 명확한 레이아웃을 사용한다. (정확성, 전문성)
- 각종 소비재를 부담 없이 구매할 수 있는 페이지이기 때문에 많은 정보를 다양하게 구성한다. (편리성, 친근함)
- 따라서 글꼴이나 색상 뿐만 아니라 레이아웃을 통해서도 브랜드의 이미지에 영향을 준다.
4. 레이아웃의 핵심 원칙
- 레이아웃을 제작할 때 포인트가 되는 부분이 존재한다.
1. 여백 만들기
- 왼쪽은 꽉 차있어서 여유가 없는데 비해 오른쪽은 여유가 좀 있어서 여유로워보인다.(가독성 ↑)
2. 콘텐츠 그룹화
- 왼쪽은 내용을 흩뿌려놔서 읽기 조금 힘들지만 오른쪽은 내용이 그룹화되어 이해하기가 편하다.
3. 핵심 요소 반복 사용
- 좌측 이미지의 경우 중요한 키워드를 둥근 모양 안에 배치를 해서 중요한 부분이 눈에 잘 띄고 우측 이미지의 경우에는 사각형이 강조되어서 공간감이 좋다.
4. 대비와 강조
- 좌측 이미지의 경우 강한 색상 대비도 있지만 우측 상단의 레이아웃을 비워놔서 강감찬 장군에 시선을 집중시킬 수 있도록 배치되었다.
- 우측 이미지의 경우 중앙에 메인 이미지와 타이틀을 배치해서 주제를 확 집중시킬 수 있도록 레이아웃이 배치되었다.
5. 정렬, 그리드
- 기사, 신문, 광고처럼 정렬을 통해서 일정하게 맞춰놓으면 잘 정돈된 느낌을 줄 수 있다.
6. 초점 만들기
- 그림을 원형으로 감싸서 시선의 분산을 막고 중앙에 집중 시킬 수 있다.
- 이와 같이 핵심 내용에 시선을 끌 수 있도록 초점을 만드는 것이 중요하다.
7. 계층 구조 구성
- 어느 순서로 시선을 이동시킬지에 따라서 레이아웃이 구성된다.
- 따라서 디자인에 왠지 모르게 시선이 집중되지 않고 눈에 띄지 않는다면 레이아웃의 점검이 필요하다.
3. 오늘의 쓰잘데기
저번에 만든 팀 포스터를 이어서 수정해보았다.
변경사항으로는 팀 인원이 1명 더 늘어서 6명이 되었는데 새로 오신분도 A형이라고 한다.
따라서 팀 이름도 5A1O로 변경되어서 전체적인 포스터 수정이 필요했다.
처음엔 이런식으로 수정했으나 A가 하나 더 늘어나니까 어딜 배치해도 산만해져 버렸다.
어떻게 할까 고민하다가 A와 O를 잘 붙이니까 1이랑 5가 읽히기 시작하면서 탄력을 받게 되었다.
→ 따라서 나온 결과물
아래는 포스터에 대한 설명이다.
오늘 타이포그래피와 레이아웃에대해 공부해서 포스터의 레이아웃, 시선 어떻게 읽힐까에 대한 고민을 많이 했다.
내일 색채학까지 배우고 나서 이 흑백 포스터에 색채를 넣어 좀 더 살려보고자 한다.
'내일배움캠프 > 본 캠프 TIL' 카테고리의 다른 글
| 2026.06.15 AI 디자이너 6일차 - 포토샵 기본 3일차 (0) | 2026.06.15 |
|---|---|
| 2026.06.12 AI 디자이너 5일차 - 포토샵 기본 2일차 (0) | 2026.06.12 |
| 2026.06.11 AI 디자이너 4일차 - 포토샵 기본 1일차 (0) | 2026.06.11 |
| 2026.06.10 AI 디자이너 3일차 - 디자인에서의 색상, 디자인 프로세스 (0) | 2026.06.10 |
| [TIL] 2026.06.08 AI 디자이너 1일차 - 디자인의 원칙 (0) | 2026.06.08 |