홈페이지 색과 글꼴 고르는 법 — 색 두세 가지 원칙과 읽기 편한 글자 크기

홈페이지 색은 세 가지 역할로 나눠 정하고, 글꼴은 한두 종류로 맞추는 것이 기본입니다. 넓게 까는 바탕색, 회사를 보여 주는 대표색, 눈길을 모으는 강조색을 나눠 쓰면 화면이 정돈되고 상담 버튼이 눈에 잘 띕니다. 글자는 휴대폰 기준 본문 16~18px, 줄 간격은 글자 크기의 1.6~1.8배로 잡으면 오래 읽어도 눈이 편합니다.

가게 인테리어에 비유하면

홈페이지를 가게라고 하면 색은 인테리어입니다. 벽과 바닥은 밝고 차분한 색으로 넓게 깔고, 간판과 가구는 가게를 대표하는 색으로 맞추고, 계산대 위 '주문은 여기서' 표지판 하나만 눈에 띄는 색으로 칠합니다. 벽마다 다른 색을 칠하면 손님은 어디를 봐야 할지 모릅니다. 홈페이지도 같습니다. 색마다 맡을 역할을 정해 두면 방문자가 어디를 읽고 어디를 누를지 바로 압니다.

색은 세 가지 역할로 나눕니다

비중은 화면 전체를 10으로 볼 때 6:3:1 정도로 나눈 예시입니다. 정확히 맞출 필요는 없고, 강조색이 가장 적어야 한다는 점만 지키면 됩니다. 본문 글자색은 이 셋과 따로 두고, 새까만 검정보다 아주 진한 회색을 쓰면 또렷함은 그대로 두고 흰 바탕에서 한결 부드럽게 보입니다.

꼭 세 가지가 아니어도 됩니다. 바탕색과 대표색 두 가지만으로도 정돈된 화면을 만들 수 있고, 이때는 상담 버튼에 대표색을 가장 진하게 써서 강조 역할을 맡깁니다. 반대로 네 가지, 다섯 가지로 늘어나면 색마다 역할이 겹쳐 무엇이 중요한지 흐려집니다. 그래서 바탕색을 뺀 나머지 색은 두세 가지 안에서 정하는 것이 원칙입니다.

대표색은 이미 가진 것에서 고릅니다

로고, 간판, 명함, 유니폼에 쓰는 색이 있다면 그 색이 대표색입니다. 매장에서 본 색을 홈페이지에서 다시 보면 손님이 같은 곳이라는 걸 바로 알아봅니다. 정해 둔 색이 없다면 업종의 느낌에서 출발합니다. 병원·학원은 차분한 파랑이나 초록, 인테리어·시공은 짙은 회색이나 나무색, 음식점·카페는 따뜻한 갈색이나 주황 계열이 자주 쓰입니다.

헷갈리는 말 정리

강조색은 어디에 쓰나요

강조색은 '방문자가 해 주었으면 하는 행동'에만 씁니다.

• 상담 신청·전화·카카오톡 버튼 — 가장 먼저 강조색을 줘야 할 곳입니다.
• 예약·견적 요청 버튼 — 업종에 따라 상담 버튼 대신 들어갑니다.
• 꼭 알아야 할 한 줄 — 휴무 안내, 접수 마감처럼 놓치면 곤란한 정보입니다.

자주 생기는 상황이 있습니다. 강조색이 예뻐서 제목, 아이콘, 배경 띠에까지 쓰다 보면 정작 상담 버튼이 묻힙니다. 강조색은 적게 쓸 때 눈에 띕니다. 한 화면에 강조색 버튼을 하나만 두면 방문자가 무엇을 눌러야 할지 고민하는 시간이 줄어듭니다. 버튼 위치와 연락 동선은 광고 시작 전 홈페이지 점검 — 광고비 쓰기 전에 확인할 5가지 글에서 함께 볼 수 있습니다.

읽기 편한 글자 크기와 줄 간격

예를 들어 본문을 16px, 줄 간격을 1.7배로 잡으면 한 줄의 높이는 약 27px입니다. 글자 위아래로 5px 남짓씩 여백이 생겨 줄이 섞이지 않고, 눈이 다음 줄을 쉽게 찾습니다. 문단과 문단 사이는 한 줄 정도 더 띄우면 휴대폰에서 덩어리가 나뉘어 보입니다.

한 줄의 길이도 읽기 편함을 좌우합니다. PC에서 본문이 화면 끝까지 길게 이어지면 줄을 바꿀 때마다 눈이 길을 잃습니다. 본문 폭을 한글 기준 한 줄 35~45자 정도(예시)로 맞춰 두면 내용은 그대로이면서 같은 글도 한결 편하게 읽힙니다.

글꼴은 한두 가지로 맞춥니다

• 고딕체 — 획 굵기가 고르고 화면에서 또렷합니다. 본문과 버튼의 기본으로 씁니다.
• 명조체 — 획 끝에 붓 느낌이 있어 차분하고 격식 있어 보입니다. 큰 제목에 쓰면 분위기가 살고, 작은 본문에 쓰면 휴대폰에서 가늘게 보일 수 있습니다.
• 손글씨·장식 글꼴 — 로고나 짧은 문구에만 씁니다. 긴 글에 쓰면 읽는 속도가 느려집니다.

본문은 고딕체 하나로 두고, 제목에만 다른 글꼴을 하나 더하는 정도가 알맞습니다. 굵기도 보통·중간·굵게 세 단계 안에서 고르면 화면이 정돈됩니다. 한글 글꼴은 글자 수가 많아 파일이 무거운 편이라, 실제로 쓰는 굵기만 불러오도록 해 두면 모양은 그대로 두고 홈페이지가 더 빨리 열립니다. 페이지 용량이 어떻게 쌓이는지는 트래픽이 뭔가요? — 호스팅 트래픽 용량과 초과 글에서 설명합니다.

순서대로 정하는 방법

1. 가진 색을 모읍니다. 로고, 간판, 명함, 매장 사진을 한곳에 놓고 공통으로 쓰인 색을 찾습니다.
2. 대표색 하나를 정합니다. 비슷한 색이 여럿이면 로고에 쓰인 색을 우선합니다.
3. 바탕색을 정합니다. 흰색이나 아주 옅은 색이면 사진과 글이 모두 잘 보입니다.
4. 강조색을 정합니다. 대표색 옆에 놓았을 때 확실히 구분되는 색을 고릅니다.
5. 글꼴과 크기를 정합니다. 본문 고딕체 16px 이상, 줄 간격 1.6배 이상에서 시작합니다.
6. 휴대폰으로 직접 봅니다. 햇빛 아래에서, 화면 밝기를 낮춘 상태에서도 글자가 잘 읽히는지 확인합니다.

자주 빠뜨리는 것

• 글자와 바탕의 명암 차이 — 흰 바탕에 옅은 회색 글씨는 PC에서는 세련돼 보여도 휴대폰 야외 화면에서는 잘 안 보입니다. 인터넷에서 '명도 대비 검사'로 찾을 수 있는 무료 도구에 두 색을 넣어 보면 충분히 구분되는지 숫자로 확인할 수 있습니다.
• 사진 위에 올린 글자 — 밝은 사진 위 흰 글씨는 묻힙니다. 사진을 살짝 어둡게 덮거나 글자 뒤에 바탕을 깔면 사진도 살고 글자도 읽힙니다.
• 색으로만 구분한 정보 — 빨강과 초록을 잘 구분하지 못하는 분도 있습니다. '마감'·'접수 중'처럼 글자를 함께 적으면 누구나 알아봅니다.
• 링크 표시 — 누를 수 있는 글자는 한 가지 색과 밑줄로 통일해야 방문자가 헤매지 않습니다.
• 대표 사진과 색의 어울림 — 첫 화면 사진의 색감과 대표색이 부딪히지 않는지 함께 봅니다.

팬텀디자인 구독에서는

팬텀디자인 구독에는 업종 맞춤 디자인과 PC·모바일 반응형이 포함돼 있습니다. 제작 중 수정이 가능해 실제 화면을 보면서 색과 글자 크기를 바꿔 볼 수 있고, 오픈 뒤에도 월 1회 무상 유지보수가 포함돼 있어, 운영하면서 바꾸고 싶은 색이나 문구가 생기면 요청할 수 있습니다. 실제 화면은 작업 사례에서 볼 수 있습니다.

색과 글꼴 다음에 볼 것

색과 글꼴이 가게의 인테리어라면, 그 안에 놓을 물건은 내용입니다. 무엇을 놓을지는 업종마다 다릅니다. 업종별로 꼭 들어가야 할 내용은 업종별 홈페이지 필수 기능 총정리에서, 요즘 홈페이지 화면의 흐름은 2026년 웹디자인 트렌드 — 홈페이지에 바로 적용할 6가지에서 이어서 볼 수 있습니다.