CHIRO.
← Blog
웹사이트 제작2026년 5월 19일

타이포·컬러 — 브랜드는 무드, 전문성은 위계로 쓴다

같은 폰트와 색이 사이트 유형에 따라 다른 일을 합니다. 브랜드는 분위기, 전문성은 정보 위계.

by 최정원

폰트 1개 vs 폰트 2~3개

브랜드 사이트는 폰트 1~2개를 일관되게 씁니다. 무드를 만드는 게 목적이라 변주가 적습니다. 본문도 헤드라인도 같은 패밀리에서 굵기만 바꿉니다.

전문성 사이트는 정보 위계를 만들기 위해 폰트 2~3개를 조합합니다. 헤드라인은 산세리프(가독), 본문은 다른 산세리프(다른 굵기·자간), 숫자·실적은 모노스페이스로 분리합니다. 같은 폰트로 다 처리하면 "어디가 중요한지" 시선을 안내할 수 없습니다.

헤드라인 사이즈가 다르다

브랜드 사이트 메인 헤드라인: 80~140px. 한 단어가 화면을 채웁니다.

전문성 사이트 메인 헤드라인: 40~64px. 화면 1/3을 넘기지 않습니다. 큰 글씨가 멋있어 보이지만, 실적 숫자나 핵심 서비스가 같이 보여야 하므로 헤드라인이 자리를 다 차지하면 안 됩니다.

색의 역할이 다르다

브랜드 컬러는 "기억"을 위해 씁니다. 채도가 높고 대비가 강한 시그니처 컬러 하나로 사이트를 덮습니다. 코카콜라 빨강, 티파니 블루처럼.

전문성 컬러는 "신호"를 위해 씁니다. 베이스(95%)는 무채색·다크그레이·딥블루, 강조(5%)는 액션 컬러로 분리합니다. 강조색이 너무 많이 쓰이면 "어디를 눌러야 하지?"의 결정이 어려워집니다.

신뢰 산업(법무·세무·의료·금융)에서 채도 높은 컬러를 메인으로 쓰면 "장난스럽다"로 읽힙니다. 딥블루·네이비·차콜이 기본인 이유입니다.

이미지 톤도 분리된다

브랜드 사이트 이미지: 후보정 강함, 필름톤, 채도 조정. 일관된 무드 보드.

전문성 사이트 이미지: 보정 최소, 실사 톤. 대표 사진은 정장이 아니어도 단정한 차림, 정면 응시, 사무실 자연광. 작가가 찍은 듯한 "콘셉트 사진"보다 "진짜 그 사람 같은 사진"이 신뢰를 만듭니다.

흔한 실수

전문성 사이트를 만들면서 채도 높은 시그니처 컬러를 메인으로 깔고, 헤드라인을 100px 이상으로 키우는 경우입니다. 결과는 "정체불명의 트렌디한 사이트"입니다. 패션 브랜드처럼 보이지만 실제 업종(법무·B2B)과 안 맞아서 문의가 떨어집니다.

반대도 있습니다. 라이프스타일 브랜드가 네이비·차콜 베이스로 가면 "보험사 사이트" 느낌이 나서 감정이 닫힙니다. 컬러는 톤보다 업종 신호로 먼저 읽힙니다.

자주 묻는 질문

브랜드 사이트와 전문성 사이트가 둘 다 다크모드여도 되나요? 둘 다 가능합니다. 다만 전문성 사이트의 다크는 차콜(#1a1a1a) 같은 무채 다크, 브랜드의 다크는 채색 다크(짙은 네이비·버건디)로 분위기를 입힙니다.

컬러 가이드는 몇 개나 잡아야 하나요? 브랜드는 시그니처 1색 + 보조 1색. 전문성은 베이스 2색(라이트/다크) + 강조 1색 + 경고 1색 정도면 충분합니다. 다음은 CTA·전환 차이로 이어집니다.

타이포그래피홈페이지 색상브랜드 디자인전문성 디자인정보 위계