타이포그래피는 단순히 정보를 읽게 만드는 도구가 아니다.
같은 단어라도 어떤 서체를 사용하고, 얼마나 크게 쓰고, 어떻게 배치하느냐에 따라 브랜드의 성격과 가격대까지 다르게 느껴질 수 있다.
이번 수업의 핵심은 크게 세 가지다.
서체로 인상을 만들고 → 위계로 읽는 순서를 만들고 → 정렬로 신뢰를 만든다.
01. 글자는 읽기 전에 보인다
우리는 글자를 읽기 전에 먼저 글자의 생김새를 본다.
예를 들어 같은 HERMÈS라는 이름이라도 얇고 섬세한 글씨와 굵고 뭉툭한 글씨는 전혀 다른 브랜드처럼 느껴진다.
로고의 색이나 이름이 그대로여도 서체 하나만으로 고급스럽거나, 대중적이거나, 저렴하거나, 친근한 인상을 만들 수 있다는 뜻이다.
따라서 폰트를 고를 때는
“잘 읽히는가?”뿐만 아니라 “어떤 브랜드처럼 보이는가?”까지 봐야 한다.
02. 세리프와 산세리프의 기본 인상
서체를 크게 나누면 Serif와 Sans Serif로 볼 수 있다.
Serif — 전통·신뢰·고급
글자의 획 끝에 장식이 붙어 있는 형태.
오랜 역사를 가진 출판물이나 전통적인 브랜드에서 많이 사용되어 클래식함, 신뢰감, 고급스러움 같은 인상을 만들기 좋다.
긴 글에서도 글자의 흐름을 따라 읽기 편한 특성이 있어 책이나 출판물에서도 많이 사용된다.
Sans Serif — 현대·깔끔·기능
획 끝에 별도의 장식이 없는 형태.
구조가 단순하고 작은 크기에서도 비교적 또렷하기 때문에 현대적이고 깔끔하며 기능적인 인상을 만들기 좋다.
웹·앱·IT·금융·커머스처럼 디지털 환경에서 널리 사용된다.
다만 중요한 것은,
세리프 = 무조건 고급 / 산세리프 = 무조건 현대적이라는 공식은 아니다.
서체의 굵기, 비례, 자간, 사용 방식 등에 따라 인상은 얼마든지 달라질 수 있다.
📌 한 문장으로 정리
서체는 브랜드의 ‘목소리 톤’이다. 무엇을 말하느냐뿐 아니라 어떻게 말하느냐를 결정한다.
03. 위계는 읽는 순서를 만드는 일이다
Day02에서 사람은 화면의 모든 것을 보지 않는다는 이야기가 나왔다.
그렇다면 이번에는 그 원리를 실제 디자인으로 옮긴다.
화면에 있는 모든 텍스트와 요소가 동일한 강도로 보이면 사용자는 어디부터 읽어야 하는지 알 수 없다.
그래서 중요한 정보와 덜 중요한 정보를 시각적으로 구분해야 한다.
이것이 Visual Hierarchy, 시각적 위계다.
04. 위계를 만드는 4가지 도구
이번 수업에서는 위계를 만드는 요소를 네 가지로 정리한다.
① 크기
가장 직관적인 방법이다.
중요한 것은 크게, 덜 중요한 것은 작게 만든다.
하지만 단계가 지나치게 많아지면 오히려 순서가 흐려진다.
제목 → 본문 → 보조정보 정도로 명확한 체계를 만드는 것이 좋다.
② 굵기
한 화면에서 가장 중요한 글자에 더 높은 굵기를 사용할 수 있다.
다만 이것 역시
“중요하니까 Bold, 이것도 중요하니까 Bold, 저것도 중요하니까 Bold…”
가 되면 결국 전부 평범해진다.
한 화면에서 굵은 것은 하나만 남긴다고 생각해도 좋다.
③ 색
강조색을 이용해 중요한 정보를 눈에 띄게 할 수 있다.
하지만 색을 강조 수단으로 지나치게 많이 사용하면 화면이 오히려 복잡해진다.
그래서 색은 위계를 만드는 도구 중에서도 마지막에 사용하는 수단에 가깝다.
④ 여백
생각보다 가장 강력한 도구다.
붙어 있는 것은 같은 그룹으로 느껴지고, 멀리 떨어진 것은 다른 그룹으로 느껴진다.
즉, 여백 자체가 정보를 구분한다.
예를 들어
제목 ↔ 본문은 좁게
한 덩어리 ↔ 다음 덩어리는 넓게
배치하면 별도의 선이나 박스를 사용하지 않아도 정보 구조를 이해할 수 있다.
📌 여백은 빈 공간이 아니라 정보다.
05. 위계를 잡는 순서
크기, 굵기, 색, 여백을 모두 동시에 건드리면 무엇 때문에 좋아졌는지 알기 어렵다.
그래서 순서를 정해두는 것이 좋다.
여백 → 크기 → 굵기 → 색
먼저 여백만으로 정보를 묶고 나눈다.
그다음 중요한 것의 크기를 키운다.
그래도 구분이 부족하면 굵기를 조절한다.
마지막으로 정말 필요한 부분에만 색을 사용한다.
이 방식은 특히 “뭔가 심심해서 색을 좀 더 넣어야 하나?” 싶은 순간에 기억하면 좋다.
색을 추가하기 전에 먼저 여백과 크기로 해결할 수 없는지 확인한다.
06. 모든 것이 강조된 화면 고치기
실무에서는 이런 문제가 자주 생긴다.
제목도 크고, 가격도 크고, 할인율도 빨갛고, 버튼도 강하고, 배지도 붙어 있다.
각 요소를 따로 보면 전부 강조해야 할 이유가 있다.
하지만 화면 전체에서는
모든 것이 중요하면 아무것도 중요하지 않다.
이럴 때는 다음 순서로 정리한다.
① 여백으로 정보 덩어리를 나눈다.
② 가장 중요한 정보 하나만 크게 만든다.
③ 굵은 글자는 최소화한다.
④ 색은 마지막 강조 요소에만 사용한다.
📌 한 문장으로 정리
위계는 무엇을 크게 만들지 정하는 것이 아니라, 무엇을 작게 둘지 정하는 일이다.
이 문장은 이번 Day03에서 특히 기억해둘 만하다.
07. 정렬은 ‘예쁘게 맞추기’ 이상의 문제다
정렬이 조금 틀어진 화면은 왜 묘하게 불편할까?
사람은 반복되는 규칙을 빠르게 학습한다.
제목의 시작 위치, 카드의 너비, 이미지의 끝선 등이 계속 맞아 있다가 하나만 어긋나면 바로 눈에 들어온다.
그래서 그리드는 단순히 화면을 깔끔하게 만드는 장치가 아니다.
매번 위치를 다시 고민하지 않도록 만드는 규칙이다.
기준선이 있으면 새로운 페이지를 만들 때도 같은 브랜드처럼 보이게 할 수 있다.
그리고 1px 정도의 작은 어긋남도 계속 반복되면 전체 화면의 완성도가 떨어져 보일 수 있다.
- 가까운 것은 같은 그룹으로 읽힌다
정렬과 함께 중요한 것이 간격이다.
사람은 가까이 있는 요소를 하나의 그룹으로 인식하는 경향이 있다.
그래서 굳이 모든 정보를
──────────
같은 선으로 나누거나 박스로 감쌀 필요가 없다.
간격만으로도 충분히 관계를 표현할 수 있다.
예를 들어 제목과 설명은 가깝게 붙이고, 다음 섹션과는 더 큰 간격을 두면 사용자는 자연스럽게
제목 + 설명 / 다음 내용
으로 구분한다.
📌 그래서 UI를 만들 때 선이나 박스가 너무 많다면 먼저 여백으로 해결할 수 있는지 확인해본다.
09. 한글 화면의 시선 흐름
한글 기반의 화면에서는 일반적으로 왼쪽 위에서 시작하는 읽기 구조가 중요하다.
중요한 정보를 왼쪽 위에 배치하고, 이후 정보가 아래 방향으로 자연스럽게 이어지도록 만들면 사용자가 화면을 탐색하기 쉽다.
상품 상세페이지를 예로 들면,
대표 이미지 → 상품명/핵심 정보 → 가격 → 옵션 → CTA
처럼 사용자가 필요한 정보를 순차적으로 발견하게 만들 수 있다.
따라서 가격이나 버튼의 위치 역시 단순히 관습적으로 정해진 것이 아니라 사용자의 시선 흐름과 정보 구조에 맞춰 결정해야 한다.
10. 정렬이 만드는 것은 ‘신뢰’
정렬을 단순히 개인 취향의 문제로 생각하기 쉽다.
하지만 실제로는 화면 전체의 신뢰감과 안정감에 영향을 준다.
제목마다 시작점이 다르고, 카드의 간격이 제각각이고, 이미지 크기가 조금씩 달라지면 사용자는 이유를 정확히 설명하지 못하더라도 화면을 불안정하게 느낄 수 있다.
반대로 일정한 그리드와 간격이 반복되면
“이 화면에는 규칙이 있다.”
라는 인상을 준다.
📌 한 문장으로 정리
정렬은 취향이 아니라 신뢰의 문제다. 어긋난 것이 없을 때 사람은 화면을 편하게 읽는다.
11. 실무에서 폰트 고르는 방법
이론을 알았더라도 실제 프로젝트에서 “그래서 무슨 폰트 쓰지?”가 가장 어렵다.
이번 수업에서는 먼저 폰트 후보부터 뒤지는 대신 브랜드 성격을 먼저 정하는 방식을 제안한다.
STEP 1. 브랜드 성격을 한 단어로 정한다
예를 들어
조용한 / 단단한 / 발랄한 / 친근한 / 전문적인
처럼 브랜드가 어떤 목소리로 말해야 하는지를 먼저 정한다.
STEP 2. 고딕인가 명조인가 결정한다
브랜드 성격을 기준으로 큰 방향을 좁힌다.
현대적이고 기능적인 방향이라면 고딕 계열을, 문학적이거나 전통적인 인상이 필요하다면 명조 계열을 먼저 검토할 수 있다.
STEP 3. 굵기로 위계를 만든다
본문, 제목, 캡션마다 다른 서체를 사용할 필요는 없다.
가능하면 하나의 서체 패밀리 안에서
Regular → Medium → SemiBold → Bold
등의 굵기를 활용해 위계를 만드는 것이 안정적이다.
서체는 하나로 가는 것이 기본이고, 둘을 섞는 것은 이유를 설명할 수 있을 때만.
12. 실무에서 자주 사용하는 한글 폰트
수업에서는 대표적인 실무용 한글 폰트도 다뤘다.
Pretendard
깔끔한 고딕 계열이며 굵기 단계가 다양하다. 웹·앱 기본 폰트로 사용하기 편하다.
본고딕 / Noto Sans KR
표준적이고 중립적인 인상. 다양한 환경에서 활용하기 좋다.
본명조 / Noto Serif KR
차분한 명조 계열. 뷰티·문화·긴 글이 있는 페이지 등에서 활용하기 좋다.
익숙하고 접근성이 좋지만 강한 브랜드 개성을 만드는 용도로는 상대적으로 약할 수 있다.
그리고 실제 상업 작업에서는 반드시 폰트 라이선스를 확인해야 한다.
무료 폰트라도 웹폰트, 임베딩, 로고 사용, 상업적 이용 등의 허용 범위가 서로 다를 수 있기 때문이다.
13. Day02와 연결하면 더 이해하기 쉽다
여기서 Day02와 Day03가 꽤 자연스럽게 이어진다.
Day02에서는
사람은 화면을 다 보지 않는다 → 그러므로 무엇을 먼저 보게 할지 정한다.
라고 배웠다.
Day03에서는 한 단계 더 들어가
그러면 그 순서를 어떻게 만들 것인가? → 여백·크기·굵기·색·정렬을 사용한다.
가 된다.
즉,
Day02 = 시선을 설계하는 원리
Day03 = 그 원리를 화면에 구현하는 도구
라고 생각하면 기억하기 쉽다.
14. 실무 체크리스트
웹·앱뿐 아니라 포트폴리오, 카드뉴스, 배너 등을 완성했을 때 이렇게 점검하면 좋다.
- 서체 — 이 폰트가 브랜드 성격과 맞는가?
- 첫인상 — 글을 읽지 않아도 원하는 분위기가 느껴지는가?
- 위계 — 1초만 봐도 어디부터 읽어야 하는지 알 수 있는가?
- 크기 — 글자 크기 단계가 지나치게 많지 않은가?
- 굵기 — 모든 것이 Bold가 되어 있지는 않은가?
- 색 — 강조색을 너무 많은 곳에 쓰고 있지는 않은가?
- 여백 — 같은 정보는 가깝고 다른 정보는 멀리 떨어져 있는가?
- 그리드 — 제목·본문·이미지의 시작점이 일정한가?
- 정렬 — 이유 없이 1~2px씩 어긋난 곳은 없는가?
- 폰트 수 — 여러 폰트를 섞어야 할 명확한 이유가 있는가?
- 라이선스 — 실제 공개·상업 작업에 사용할 수 있는 폰트인가?
특히 결과물이 뭔가 “디자인은 했는데 정리가 안 된 것 같다”고 느껴질 때는 새로운 장식을 추가하기보다 먼저 여백 → 크기 → 굵기 → 색 → 정렬을 확인하는 게 좋다.
💡 오늘 기억해둘 것
Day03 전체를 관통하는 개념은 ‘말투와 질서’라고 볼 수 있어.
서체가 브랜드의 말투를 결정한다면, 위계와 정렬은 그 말을 사용자가 이해할 수 있도록 만드는 질서다.
그래서 좋은 타이포그래피는 단순히 예쁜 폰트를 고르는 일이 아니다.
브랜드가 어떤 목소리로 말할지 정하고,
사용자가 어떤 순서로 들을지 설계하는 일이다.
그리고 위계를 만들 때는 무언가를 계속 강조하려고 하기보다 덜 중요한 것을 덜 보이게 만드는 것이 중요하다.
마지막 정리
1. 서체는 브랜드의 목소리 톤이다.
무슨 말을 하느냐보다 어떻게 말하느냐를 결정한다.
2. 위계는 무엇을 크게 할지가 아니라, 무엇을 작게 둘지 정하는 일이다.
여백 → 크기 → 굵기 → 색 순으로 해결한다.
3. 정렬은 취향이 아니라 신뢰의 문제다.
일관된 기준선과 간격이 화면을 안정적으로 만든다.
🔖 참고자료
https://matinkim.com/matinkim.html
https://www.apgroup.com/int/ko/index.html
https://www.nudake.com/kr/
https://cactus.tistory.com/306
https://fonts.google.com/noto/specimen/Noto+Sans+KR?preview.script=Kore&preview.lang=ko_Kore
https://hangeul.naver.com/font
