글꼴 고르기
글꼴은 화면의 간판 글씨예요. 손님은 내용을 읽기 전에 인상부터 받아요. 제목용 하나와 본문용 하나면 충분하고, 예쁜 것보다 읽히는 것이 먼저예요.
쉽게 말하면
간판을 새로 다는 날, 사장님이 가장 오래 고민하는 건 글자 내용이 아니라 글씨체예요. 같은 "국밥" 두 글자라도 붓글씨로 쓰면 30년 된 노포 같고, 각진 고딕으로 쓰면 프랜차이즈 같아요. 손님은 가게 이름을 읽기 전에 그 인상을 먼저 받아요. 화면의 글꼴도 정확히 같은 일을 해요. 사장님이 아무 말도 하기 전에 글꼴이 먼저 말을 걸어요.
그래서 글꼴 고르기는 취향 문제가 아니라 첫인상을 정하는 일이에요. 색이나 사진보다 먼저 눈에 들어오고, 화면에서 사장님이 채우는 것은 결국 대부분 글자거든요.
글꼴이 넷이면 인상도 넷이에요. 손님은 "정신없다"고 느끼고, 그 느낌이 그대로 가게 인상이 돼요.
두 벌이면 인상이 하나로 모여요. 변화는 글꼴을 바꾸지 말고 크기와 굵기로 줘요.
두 벌이면 충분해요
글꼴은 두 벌이면 충분해요. 하나는 제목용, 하나는 본문용이에요. 아껴 쓰자는 얘기가 아니라, 인상을 하나로 모으는 방법이에요.
| 역할 | 맡는 자리 | 고를 때 기준 |
|---|---|---|
| 제목용 | 가게 이름, 첫 화면의 큰 문장, 섹션 제목 | 개성이 있어도 돼요. 크게 한두 줄만 쓰니까 조금 특이해도 버텨요 |
| 본문용 | 설명, 가격, 주소, 안내처럼 오래 읽는 글 | 개성보다 읽힘이에요. 작게 여러 줄 쌓여도 눈이 안 아픈 것으로 |
| 숫자와 가격 | 가격표, 재고 수량, 영업시간 | 본문용 안에서 해결해요. 숫자 폭이 일정한 글꼴이면 표가 안 흔들려요 |
세 번째 글꼴이 필요한 순간은 거의 안 와요. 변화가 필요하면 글꼴을 늘리지 말고 같은 글꼴의 굵기를 바꿔요. 요즘 글꼴은 한 벌 안에 얇은 것부터 아주 굵은 것까지 여러 굵기가 들어 있는 경우가 많아요.
한 벌만 써도 괜찮아요
제목용과 본문용을 같은 글꼴로 쓰고 굵기 차이만 확실하게 줘도 충분히 정돈돼 보여요. 잘 만든 화면 중에 글꼴이 하나뿐인 경우가 정말 많아요. 두 벌은 상한이지 목표가 아니에요.
크기가 순서를 정해요
글꼴을 잘 골라도 크기가 다 비슷하면 화면이 밋밋해요. 손님 눈은 큰 것부터 보거든요. 무엇을 먼저 볼지 정해 주는 게 크기예요. 메뉴판에서 대표 메뉴만 크게 쓰는 것과 같아요.
기준은 간단해요. 가장 큰 제목은 본문의 두세 배로 잡아요. 1.2배쯤 차이는 눈이 "차이"로 읽지 못하고 그냥 들쭉날쭉하다고 느껴요. 키울 거면 확실히 키워야 의도로 보여요.
| 자리 | 본문 대비 | 이유 |
|---|---|---|
| 첫 화면의 큰 문장 | 2~3배 | 멀리서도 읽혀야 해요. 이 한 줄이 화면의 간판이에요 |
| 섹션 제목 | 1.5~2배 | 손님이 화면을 훑어 내릴 때 여기서 눈이 멈춰요 |
| 본문 | 1배(기준) | 가장 오래 읽는 크기예요. 여기부터 정하고 나머지를 맞춰요 |
| 보조 설명, 주의 문구 | 0.85~0.9배 | 작게 두는 자리예요. 다만 더 작아지면 아예 안 읽혀요 |
- 1본문부터 정해요. 가장 많이 읽는 글자라 여기가 기준이에요. 웹 브라우저의 기본 글자 크기가 16이니, 본문을 그보다 작게 잡으면 손님이 손가락으로 확대해서 봐야 해요.
- 2제목을 본문의 두세 배로 올려요. 애매하게 키우면 실수처럼 보이고, 확실히 키우면 디자인으로 보여요.
- 3중간 단계는 두세 개만 둬요. 크기 종류가 예닐곱 개로 늘면 위계가 아니라 혼잡이 돼요.
- 4휴대폰으로 열어서 팔 뻗은 거리에서 봐요. 그 거리에서 안 읽히면 크기가 문제가 아니라 손님을 놓치고 있는 거예요.
확인해 보세요
본문이 16이에요. 첫 화면의 큰 문장을 얼마로 잡을까요?
한글 글꼴은 라이선스를 꼭 확인해요
한글 글꼴에는 함정이 하나 있어요. 무료라고 적혀 있어도 내 가게에 써도 되는지는 따로 확인해야 해요.
무료는 보통 "돈 내지 않고 내려받을 수 있다"는 뜻이에요. 그게 "장사에 써도 된다"는 뜻은 아니에요. 개인 용도만 허용하는 글꼴, 인쇄물은 되는데 웹사이트에는 못 쓰는 글꼴, 로고와 간판에만 금지인 글꼴이 따로 있어요.
- 1만든 곳의 라이선스 안내를 직접 읽어요. 정리해 둔 블로그 말고 배포처 페이지요. 보통 허용 범위가 표로 정리돼 있어요.
- 2웹사이트 사용(웹폰트)이 허용인지 봐요. 인쇄물만 허용하는 글꼴이 꽤 있어요. 화면에 쓰려면 이 칸이 허용이어야 해요.
- 3로고와 상표에 쓸 수 있는지 봐요. 다른 건 다 되는데 여기만 금지인 경우가 흔해요. 간판이나 로고에 넣을 거면 반드시 확인해요.
- 4글꼴 파일 자체를 팔거나 다시 배포하지 않아요. 거의 모든 무료 글꼴이 공통으로 금지하는 항목이에요.
- 5확인한 날짜와 문구를 캡처해서 보관해요. 라이선스 조건은 바뀌기도 해요. 그때 내가 확인한 조건이 나중에 근거가 돼요.
마음 편한 선택지
공개 라이선스로 풀린 글꼴, 그리고 구글 폰트에 올라간 한글 글꼴은 조건이 문서로 딱 정해져 있어서 나중에 말이 바뀌지 않아요. 사장님이 판단할 자신이 없을 때는 여기서 고르는 게 가장 안전해요.
장면 1 · 외주 디자이너가 보내온 시안
“시안에 쓴 글꼴은 유료라서요, 사장님이 라이선스를 하나 구매하셔야 그대로 갈 수 있어요.”
시안이 예뻐서 통과시켰는데, 그 인상의 절반이 유료 글꼴이었던 거예요. 선택지는 셋이에요. 라이선스를 사거나, 비슷한 무료 글꼴로 바꾸거나, 제목만 유료로 쓰고 본문은 무료로 가거나요. 시안을 받는 자리에서 "이 글꼴 상업용으로 쓸 수 있나요"를 먼저 묻는 게 제일 싸게 먹혀요.
읽히는 것이 예쁜 것보다 먼저예요
글꼴 고르기에서 가장 흔한 실패는 못생긴 글꼴을 고르는 게 아니에요. 예쁜데 안 읽히는 글꼴을 고르는 거예요.
특히 손글씨체와 아주 얇은 글꼴이 그래요. 큰 제목 한 줄에서는 멋있는데 본문에 깔면 손님이 눈을 찡그려요. 찡그린 손님은 설명을 끝까지 안 읽고 그냥 나가요.
읽힘은 취향이 아니라 조건이에요. 아래 다섯 가지 중 하나라도 어긋나면 글꼴이 아무리 예뻐도 안 읽혀요.
| 조건 | 지킬 것 | 어기면 |
|---|---|---|
| 대비 | 글자색과 배경색이 충분히 차이 나게 | 밝은 배경에 옅은 회색 글자는 야외에서 아예 사라져요 |
| 굵기 | 본문은 너무 얇지 않게 | 얇은 글꼴은 휴대폰 화면과 밝은 곳에서 가장 먼저 무너져요 |
| 줄 간격 | 글자 크기의 1.5배 안팎 | 줄이 붙으면 눈이 다음 줄 첫 글자를 못 찾아요 |
| 한 줄 길이 | 한 줄을 너무 길게 늘이지 않기 | 줄이 길면 왼쪽으로 돌아올 때 읽던 줄을 놓쳐요 |
| 정렬 | 본문은 왼쪽 맞춤으로 | 양쪽 맞춤은 단어 사이가 들쭉날쭉해져서 읽는 속도가 떨어져요 |
장면 2 · 손님에게 걸려 온 전화
“홈페이지에 가격이 안 보여서 전화드렸어요.”
가격은 화면에 분명히 있었어요. 옅은 회색에 아주 얇은 글꼴로요. 안 읽히는 정보는 없는 정보예요. 이런 문의가 오면 문구가 아니라 글꼴을 의심해 보세요. 전화를 걸어 준 손님은 운이 좋은 경우고, 나머지는 말없이 나가요.
판단이 애매할 때 쓰는 기준
화면을 열고 3초 안에 무엇을 파는 곳인지 읽히면 통과예요. 사장님은 이미 내용을 아니까 잘 읽혀 보여요. 가족이나 직원에게 휴대폰을 건네고 3초 뒤에 뭐라고 적혀 있었냐고 물어보세요.
자주 묻는 것
- Q. 제 컴퓨터에서는 잘 보이는데 손님 화면에서는 다른 글꼴로 보여요
- 그 글꼴이 손님 기기에 없어서예요. 글꼴은 기기 안에 설치돼 있어야 그려지고, 없으면 비슷한 다른 글꼴로 대신 그려져요. 모두가 같은 글씨를 보게 하려면 글꼴 파일을 화면과 함께 보내야 해요. 그걸 웹폰트라고 불러요.
- Q. 글꼴을 여러 개 쓰면 화면이 느려지나요
- 네, 글꼴도 내려받아야 하는 파일이라 벌수가 늘면 그만큼 무거워져요. 두 벌 원칙은 보기에도 좋고 속도에도 좋아요. 굵기도 실제로 쓰는 것만 불러오면 더 가벼워져요. 속도에서 더 볼 수 있어요.
- Q. 손글씨 글꼴은 아예 쓰면 안 되나요
- 제목이나 로고처럼 크게 한두 줄 쓰는 자리라면 좋은 선택이에요. 본문에만 안 쓰면 돼요. 개성은 제목이 맡고 읽힘은 본문이 맡는 식으로 역할을 나눠요.
- Q. AI에게 글꼴을 정해 달라고 해도 되나요
- 네, 다만 글꼴 이름을 콕 집기보다 역할로 말하는 게 좋아요. "제목은 굵고 또렷한 고딕, 본문은 오래 읽어도 편한 고딕 한 벌로"처럼요. 이름을 지정하면 그게 유료 글꼴일 수도 있어서, 결과물은 안전·권리 점검으로 한 번 확인하는 걸 권해요.
- Q. 나중에 글꼴을 바꾸면 화면이 깨지나요
- 깨지진 않아요. 다만 글자 폭이 달라져서 줄바꿈 위치가 바뀌어요. 제목 한 줄이 두 줄로 넘어가거나 버튼 글씨가 삐져나올 수 있어요. 바꾼 뒤에는 휴대폰으로 한 번 훑어보세요.
- Q. 글꼴만 잘 고르면 디자인이 좋아 보이나요
- 절반은 맞아요. 글꼴과 크기 위계만 정리해도 화면이 확 정돈돼 보여요. 나머지 절반은 여백과 색이에요. 브랜드 기본과 같이 보시면 좋아요.
하나 더
"상업용 무료"라고 적힌 한글 글꼴을 찾았어요. 간판 로고에 바로 써도 될까요?
직접 해보기
스튜디오에서 글꼴을 직접 바꿔 보세요
화면을 하나 만들고 편집 모드를 켜면, 글자를 고른 뒤 글꼴을 바꾸고 크기를 키우거나 줄일 수 있어요. 제목만 두세 배로 키워 보면 크기 위계가 무슨 뜻인지 눈으로 바로 보여요.
스튜디오 열기더 깊이 (안 읽어도 괜찮아요)
고딕과 명조는 뭐가 다른가요 · 획 끝에 작은 삐침 장식이 있으면 명조, 없으면 고딕이에요. 명조는 긴 글을 읽을 때 편하고 전통과 신뢰의 인상을 줘요. 고딕은 화면에서 또렷하고 작게 써도 잘 버텨요. 화면 본문은 고딕이 기본이고, 읽을거리가 긴 소개글이나 이야기라면 명조도 좋은 선택이에요.
한글 글꼴은 만들기가 훨씬 어려워요 · 영문은 대문자와 소문자, 숫자, 기호를 합쳐 백여 자만 그리면 한 벌이 완성돼요. 한글은 자음과 모음이 조합되는 글자가 11,172자예요. 그래서 한글 글꼴은 종류가 적고, 파일 용량도 커서 속도에 영향을 줘요. 무료로 푼 곳들이 조건을 꼼꼼히 붙이는 이유이기도 해요.
바이브캠퍼스의 안전·권리 점검은 글꼴도 봐요 · 결과물 코드에서 유료 폰트 서비스에서 글꼴을 불러오는지, 상업용 글꼴 이름이 적혀 있는지 찾아내요. 걸리면 어떤 무료 글꼴로 바꾸면 되는지 대체안까지 같이 알려줘요. 참고용 도움이고 법률 자문은 아니지만, 모르고 지나칠 뻔한 것을 잡아 줘요.
이것만 기억하세요
- ·글꼴은 첫인상이에요. 손님은 읽기 전에 인상부터 받아요
- ·제목용 하나, 본문용 하나. 두 벌이 상한이지 목표가 아니에요
- ·변화는 글꼴을 늘리지 말고 크기와 굵기로 줘요. 제목은 본문의 두세 배
- ·한글 무료 글꼴은 상업용·웹·로고 허용 여부를 따로 확인해요
- ·예쁜데 안 읽히면 실패예요. 안 읽히는 정보는 없는 정보예요