Web Guide브랜드 가이드디자인 기준색상 서체 규정
브랜드 가이드라인이 없을 때 웹에서 기준 만들기
가이드라인이 없다고 디자인을 매번 새로 정할 수는 없습니다.
홈페이지 제작을 계기로 최소한의 기준을 만들어 두면, 이후 모든 인쇄물과 자료에 쓸 수 있습니다.

01없으면 무슨 일이 생기는가
명함의 파랑과 홈페이지의 파랑이 다르고, 제안서의 글꼴과 브로슈어의 글꼴이 다릅니다. 각각은 문제가 없어 보이지만 모아 놓으면 일관성이 없어 보입니다.
또 매번 담당자의 취향으로 결정되므로, 사람이 바뀌면 또 달라집니다.
01
색이 제각각
인쇄물, 웹, PPT의 브랜드 색이 미묘하게 다릅니다.
02
글꼴이 제각각
자료마다 다른 서체를 써서 통일감이 없습니다.
03
로고 사용이 제각각
늘리거나 색을 바꿔 쓰는 경우가 생깁니다.
04
매번 재논의
새 자료를 만들 때마다 처음부터 정합니다.
02최소한 이것만 정하면 된다
완전한 브랜드 가이드라인은 만드는 데 시간과 비용이 큽니다. 홈페이지 제작을 계기로 색, 서체, 로고 규정 세 가지만 정해도 충분히 쓸모가 있습니다.
제작사가 홈페이지를 만들면서 이미 이 세 가지를 정하게 되므로, 그 결과를 문서로 정리해 달라고 요청하면 됩니다.
색상
주색 1개, 보조색 1~2개, 강조색 1개. HEX와 CMYK를 함께 적습니다.
서체
제목용과 본문용. 웹폰트와 인쇄용 서체를 함께 정합니다.
로고 규정
최소 크기, 여백, 사용 가능한 배경색, 금지 사항.
(추가) 사진 톤
밝은 톤인지 차분한 톤인지. 예시 사진 몇 장으로 대신합니다.
03색은 용도별로 정한다
'우리 회사 색은 파랑'만으로는 부족합니다. 어떤 파랑인지 정확한 값이 필요하고, 그 색을 어디에 쓸지도 정해야 합니다.
특히 주색을 본문 배경으로 깔면 글자가 안 읽힙니다. 면적을 제한하는 규칙이 함께 있어야 합니다.
주색 버튼, 링크, 강조 요소. 면적을 제한합니다. HEX 값으로 정확히 지정.
보조색 배경, 구분선, 카드. 연한 톤으로.
강조색 경고, 할인, 신규 표시. 사용 빈도가 낮아야 효과가 있습니다.
텍스트 색 제목, 본문, 보조 텍스트 세 단계. 브랜드 색과 별개로 정합니다.
반전용 어두운 배경에 쓸 색. 미리 정해 두지 않으면 매번 고민합니다.
04문서로 남긴다
정한 내용을 한 장짜리 문서로 만들어 사내에 공유하세요. 거창한 브랜드북이 아니어도 됩니다. A4 한 장에 색상 값과 서체 이름, 로고 규정이 적혀 있으면 충분합니다.
이 한 장이 있으면 앞으로 만드는 모든 자료가 일관성을 갖습니다.
STEP 01
홈페이지 제작
색·서체 결정
STEP 02
문서화 요청
제작사에
STEP 03
사내 공유
A4 한 장
STEP 04
이후 자료
일관 적용
CHECK POINT
□ 주색·보조색·강조색을 HEX 값으로 정했는가
□ 인쇄용 CMYK 값도 함께 정했는가
□ 제목용과 본문용 서체를 정했는가
□ 서체 라이선스를 확인했는가
□ 로고의 최소 크기와 여백 규정이 있는가
□ 어두운 배경용 반전 버전을 준비했는가
□ 정한 내용을 한 장짜리 문서로 사내에 공유했는가
#브랜드 가이드#디자인 기준#색상 서체 규정#로고 사용#HEX CMYK#웹폰트 라이선스#브랜드 일관성#홈페이지 디자인#웹비스타#홈페이지 제작