브랜드 가이드와 디자인 시스템 차이

브랜드 가이드는 「어떻게 보여야 하는가」를 적은 문서이고, 디자인 시스템은 「무엇으로 만드는가」를 모아 둔 부품 상자입니다. 하나는 사람이 읽고 판단하는 규칙이고, 하나는 만드는 사람이 열어서 가져다 쓰는 파일입니다. 결과물이 인쇄물 · 패키지처럼 낱개로 나가면 가이드까지로 충분하고, 화면이 계속 늘어나면 시스템까지 갑니다.

둘은 무엇이 다른가요

이름이 비슷해 회의에서 섞여 쓰이지만, 만드는 목적도 읽는 사람도 다릅니다.

보는 것	브랜드 가이드	디자인 시스템
결과물	읽는 문서 한 벌	바로 가져다 쓰는 부품 파일
답하는 질문	이렇게 써도 되나	이걸 쓰면 된다
읽는 사람	인쇄소 · 협력사 · 새로 온 담당자	화면을 만드는 사람
담는 단위	로고 · 색 · 글꼴 · 사진 톤	버튼 · 입력칸 · 카드 · 표 · 여백 값
바뀌는 주기	몇 년에 한 번	화면이 늘 때마다
어겼을 때	보고 판단합니다	다른 부품을 쓴 것이 바로 보입니다

핵심 차이는 마지막 줄입니다. 가이드는 「이렇게 써 주세요」라고 적어 두는 방식이고, 시스템은 정해진 부품을 쓰는 편이 더 빠르게 만들어 두는 방식입니다. 그래서 사람이 자주 바뀌는 일에는 가이드가, 사람이 여럿 붙는 일에는 시스템이 잘 맞습니다. 둘 중 하나가 더 나은 것이 아니라 결과물이 나가는 방식이 다른 것입니다. 한 번 인쇄되면 고칠 수 없는 것과 매주 고쳐 올리는 것은 지키는 방법이 다를 수밖에 없습니다.

브랜드 가이드에는 무엇이 들어가나요

여덟 칸이면 실무에서 돌아갑니다. 처음부터 두꺼운 책을 만들 필요는 없습니다.

칸	적는 내용
로고	기본형 · 가로형 · 아이콘형과 최소 크기
여백	로고 둘레에 비워 두는 폭. 로고 높이의 절반처럼 비율로 적습니다
색	주색 · 보조색을 RGB 와 CMYK 로 함께. 화면과 인쇄는 같은 색이 다르게 나옵니다
글꼴	제목용 · 본문용과 굵기. 없을 때 대신 쓸 글꼴도 한 줄
사진 톤	밝기 · 배경 · 사람 등장 여부
말투	제품을 부르는 이름과 문장 끝맺음
금지 예	늘이기 · 색 바꾸기 · 그림자 넣기처럼 하지 않는 것
파일 위치	원본이 어느 폴더에 있는지

여덟 칸 중 가장 자주 열리는 칸은 색과 파일 위치입니다. 색은 화면과 인쇄에서 다르게 나오기 때문에 두 값을 같이 적어 두지 않으면 매번 다시 묻게 되고, 파일 위치를 적어 두지 않으면 로고를 화면에서 캡처해 쓰는 일이 생깁니다.

디자인 시스템은 어디서부터 필요한가요

부품을 만들어 두는 일에도 시간이 듭니다. 아래 중 두 개 이상이면 그 시간이 회수됩니다.

• 같은 종류의 화면을 계속 새로 만듭니다 — 상세페이지 · 이벤트 화면이 매달 늘어납니다
• 만드는 사람이 두 명 이상이고 서로 다른 파일에서 작업합니다
• 화면을 만드는 사람과 개발하는 사람이 나뉘어 있습니다
• 같은 버튼이 화면마다 조금씩 다르게 생겼습니다

부품은 화면을 보기 좋게 만들려고 두는 것이 아니라, 같은 결정을 두 번 하지 않으려고 둡니다. 버튼 색과 모서리를 매번 고르지 않으면 그만큼 시간이 남습니다. 반대로 만드는 것이 명함 · 패키지 · 인쇄물 위주이고 담당자가 한 명이면, 부품보다 가이드 한 벌이 더 오래 쓰입니다.

부품은 화면 부품만 뜻하지 않습니다. 상세페이지에 반복해 쓰는 제목 띠 · 표 · 주의 문구도 같은 방식으로 묶어 두면, 만들 때마다 여백을 새로 재지 않아도 됩니다.

회의에서 섞여 나오는 말은 어떻게 갈라 듣나요

한자리에서 여러 이름이 함께 나옵니다. 뜻을 한 줄로 갈라 두면 무엇을 만들자는 이야기인지 바로 잡힙니다.

말	한 줄 뜻
브랜드 가이드	로고 · 색 · 글꼴을 어떻게 쓰는지 적은 문서입니다
스타일 가이드	그중 화면에 쓰는 부분만 따로 모은 것입니다
디자인 시스템	부품과 규칙을 묶어 실제로 가져다 쓰게 만든 것입니다
컴포넌트	버튼 · 입력칸처럼 반복해 쓰는 화면 부품 하나입니다
토큰	색값 · 여백값에 붙인 이름입니다. 값 대신 이름을 부릅니다

둘을 함께 두면 어떻게 잇나요

따로 만들면 값이 어긋납니다. 이을 때는 가이드에 적은 값을 시스템의 이름으로 옮겨 적고, 그다음부터는 이름만 부릅니다.

가이드에 적힌 것	시스템에서 부르는 이름
주색 색값 하나	기본 강조색 — 버튼 · 링크 · 강조 문구가 이 이름을 씁니다
본문 글꼴과 크기	본문 단계 — 크기를 바꿀 땐 이름값만 바꿉니다
여백 규칙	4px 또는 8px 의 배수로 단계를 만들어 둡니다

이렇게 해 두면 색을 한 번 바꿀 때 화면을 하나씩 찾아다니지 않아도 됩니다. 바꾼 뒤에는 가이드 문서의 색값도 같이 고칩니다. 두 곳의 값이 달라지는 순간부터 둘 다 믿을 수 없게 됩니다.

둘 다 없이 시작해야 하면 무엇부터 적나요

처음부터 다 만들 필요는 없습니다. 한 장짜리 문서로 시작해도 절반은 해결됩니다. 아래 다섯 줄만 적어 둡니다.

• 로고 원본 파일이 어디 있는지 — 폴더 경로 한 줄
• 주색 색값 하나. 화면용 RGB 와 인쇄용 CMYK 를 같이 적습니다
• 제목과 본문에 쓰는 글꼴 이름과 굵기
• 하지 않는 것 세 줄 — 로고 늘이기 · 색 바꾸기 · 그림자 넣기
• 이 문서를 고치는 사람 이름

이 한 장이 있으면 밖으로 작업을 넘길 때 되묻는 횟수가 줄어듭니다. 여덟 칸은 그다음에 채워도 늦지 않습니다.

오늘 할 일

지난 3개월에 만든 결과물을 세어 봅니다. 인쇄물 · 패키지처럼 한 번 나가면 끝인 것이 많으면 브랜드 가이드 여덟 칸을 한 장으로 먼저 적습니다. 화면이 열 개를 넘고 매달 늘고 있으면, 가장 자주 쓰는 부품 다섯 개를 한 파일에 모으는 것부터 시작합니다 — 버튼 · 입력칸 · 카드 · 표 · 알림. 어느 쪽이든 한 시간이면 첫 장이 나옵니다.