· 6 분 읽기 · WindWalker 팀
Guide 디자인

브랜드 색상과 폰트 한 번에 바꾸기 — 디자인 시스템 활용 가이드

"색상을 바꾸려는데 페이지가 10개... 하나씩 다 바꿔야 하나요?" 아닙니다. WindWalker의 디자인 시스템은 색상이나 폰트를 한 번 바꾸면 모든 페이지에 자동으로 반영합니다.

디자인 시스템이란?

디자인 시스템은 전체 사이트에 적용되는 색상·폰트·간격 규칙입니다. 한 번 설정하면 모든 페이지에 자동으로 반영됩니다.

비유하자면 이렇습니다. Wix나 WordPress에서 색상을 바꾸려면 각 페이지, 각 섹션에 들어가서 직접 수정해야 합니다. WindWalker의 디자인 시스템은 전체 사이트의 "테마 규칙"을 한 곳에서 관리하기 때문에, 한 번의 요청으로 모든 페이지가 동시에 바뀝니다.

관련 개념: 디자인 시스템은 웹사이트 용어 사전에서 자세히 설명하고 있습니다.

기존 웹빌더 (Wix·WordPress)

페이지 A 색상 수정 → 페이지 B 수정 → 페이지 C 수정 … 10개 페이지면 10번 반복

WindWalker 디자인 시스템

"브랜드 색상 딥 그린으로 바꿔줘" → 전체 페이지 버튼·배너·링크 한 번에 변경 완료

색상 변경하기

헥스 코드(#으로 시작하는 색상 코드)를 알고 있다면 정확하게 지정할 수 있습니다.

브랜드 색상을 딥 그린(#1a5f3f)으로 바꿔줘
디자인 시스템의 브랜드 색상을 #1a5f3f로 변경했습니다. Home, About, Services, Contact 페이지 전체에 반영되었습니다.

헥스 코드를 모르더라도 색상을 묘사하는 것으로 충분합니다.

배경색을 아이보리 계열로 부드럽게 해줘
배경색을 #faf8f3 (따뜻한 아이보리)으로 변경했습니다. 전 페이지에 적용되었습니다.
팁: 브랜드 컬러 헥스 코드를 알고 있다면 그걸 사용하는 것이 가장 정확합니다. 모르면 "따뜻한 붉은 계열", "차가운 파란색", "밝은 민트" 같은 묘사로도 잘 작동합니다.

폰트 변경하기

제목 폰트와 본문 폰트를 따로 지정할 수 있습니다.

제목 폰트를 Pretendard로, 본문을 Noto Sans로 바꿔줘
디자인 시스템 폰트를 업데이트했습니다. 제목: Pretendard, 본문: Noto Sans. 모든 페이지에 적용되었습니다.

폰트 이름을 모를 때는 느낌으로 요청할 수도 있습니다.

전체 폰트 느낌을 좀 더 세련되고 현대적으로 바꿔줘
제목에 Pretendard, 본문에 Spoqa Han Sans Neo를 적용했습니다. 현대적이고 세련된 느낌이 나도록 폰트 굵기와 크기도 조정했습니다.
디자인 시스템 변경 전 / 후 예시

변경 전 (기본)

지금 시작하기

제목은 기본 폰트로

#4f46e5

변경 후 (딥 그린)

지금 시작하기

제목은 Pretendard 폰트로

#1a5f3f

WindWalker vs 전통 웹빌더 비교

전통 웹빌더 (Wix·WordPress) WindWalker
색상 변경 페이지마다 직접 수정 채팅 한 줄, 전 페이지 자동
폰트 변경 섹션별 재설정 필요 전 페이지 동시 적용
브랜드 일관성 유지 수동으로 관리 디자인 시스템이 자동 보장
새 페이지 추가 시 디자인 다시 적용 필요 디자인 시스템 자동 상속

자유롭게 시도해보세요

색상과 폰트 변경은 즉시 미리보기에서 확인할 수 있습니다. 마음에 들지 않으면 다시 바꾸면 됩니다.

색상과 폰트를 바꾸는 데 10초면 충분합니다. 몇 가지 조합을 시도해보고 브랜드에 가장 잘 어울리는 것을 고르면 됩니다.

D-Core 가이드 완료: 콘텐츠 편집, 구조 편집, 디자인 시스템까지 배웠습니다. 다음은 여러 프로젝트 관리, 도메인 연결, SEO 설정 같은 심화 주제를 다루는 D-Advanced 가이드로 이어집니다.

다음 글 읽기