디자인 시스템이란? 뜻, 구성요소와 기업 홈페이지 구축 방법

디자인 시스템은 대기업이나 앱 서비스만의 이야기로 들리지만, 페이지가 수십 개인 기업 홈페이지에도 작은 규모의 디자인 시스템이 있어야 화면마다 색과 간격이 어긋나지 않습니다. 이 가이드는 디자인 시스템의 뜻과 스타일 가이드·컴포넌트 라이브러리·디자인 토큰의 차이, 공개된 대표 사례, 기업 홈페이지에 필요한 수준, 피그마에서 만드는 순서와 개발 코드로 연결하는 방법을 정리합니다. 디자이너와 협업하는 마케팅·기획 담당자도 읽을 수 있도록 개념부터 차례로 설명합니다.

디자인 시스템이란?

디자인 시스템은 제품이나 웹사이트의 화면을 일관되게 만들기 위해 색상·글꼴·간격 같은 기본값과 버튼·카드·폼 같은 부품, 그리고 그것을 쓰는 규칙을 한곳에 모아 관리하는 체계입니다. 디자이너와 개발자가 같은 이름의 같은 값을 쓰게 만드는 것이 핵심입니다.

디자인 시스템이 없으면 「파란색 버튼」이 페이지마다 조금씩 다른 파란색으로 만들어지고, 같은 카드가 페이지마다 여백이 다르게 구현됩니다. 처음에는 눈에 띄지 않지만 페이지가 늘고 담당자가 바뀌면 사이트 전체가 정돈되지 않은 인상을 줍니다. 수정할 때도 같은 값을 여러 곳에서 하나씩 고쳐야 합니다.

스타일 가이드, 컴포넌트 라이브러리, 디자인 토큰의 차이

세 용어는 자주 섞여 쓰이지만 범위가 다릅니다. 디자인 토큰은 가장 작은 값, 컴포넌트 라이브러리는 그 값으로 만든 부품 모음, 스타일 가이드는 사용 규칙을 적은 문서이며, 디자인 시스템은 이 셋을 모두 포함하는 상위 개념입니다.

디자인 토큰 파일 형식은 W3C 산하 디자인 토큰 커뮤니티 그룹(DTCG)이 표준화를 진행해 왔고, 2025년 10월 28일 JSON 기반 포맷의 첫 안정판(2025.10)을 발표했습니다. 디자인 도구와 개발 도구가 같은 토큰 파일을 주고받는 방향으로 생태계가 정리되고 있다는 뜻입니다.

공개된 대표 디자인 시스템 사례

많은 기업과 기관이 자신들의 디자인 시스템을 웹사이트로 공개하고 있습니다. 직접 쓰지 않더라도 구성 방식과 문서 작성법을 참고하기 좋습니다. 아래 주소는 2026년 10월 1일 접속을 확인한 것입니다.

기업 홈페이지에는 어느 수준까지 필요한가

기업 홈페이지는 앱 서비스처럼 수백 개의 컴포넌트가 필요하지 않습니다. 실무에서는 토큰 4종(컬러·타이포그래피·간격·모서리와 그림자)과 컴포넌트 10~20개 안팎이면 사이트 전체를 일관되게 만들 수 있습니다. 중요한 것은 개수가 아니라, 모든 페이지가 이 범위 안의 값과 부품만으로 만들어지는가입니다.

꼭 정해야 하는 디자인 토큰

레이아웃의 컬럼 수와 거터(컬럼 사이 간격)도 토큰과 함께 정해 두면 좋습니다. 그리드 설정 방법은 웹디자인 그리드 시스템 이해하기에서 자세히 다룹니다.

먼저 만들 컴포넌트

• 공통: 헤더(GNB), 푸터, 서브 비주얼(페이지 상단 제목 영역), 브레드크럼, 페이지 탭
• 행동: 버튼(주·보조·텍스트), 링크, 문의 CTA 배너
• 콘텐츠: 섹션 제목 블록, 카드(제품·사례·소식), 아이콘 목록, 숫자 강조 블록, 표
• 입력: 입력창, 선택 상자, 체크박스, 파일 첨부, 개인정보 동의
• 목록: 게시판 목록, 페이지네이션, 검색창, 필터

피그마에서 디자인 시스템 만드는 순서

피그마에서는 변수(Variables)로 토큰을 만들고, 그 변수를 적용해 컴포넌트를 만든 뒤, 컴포넌트로 페이지를 조립하는 순서가 기본입니다. 피그마 변수는 컬러·숫자·문자열·불리언 네 가지 유형을 지원하고, 컬렉션으로 묶어 모드(예: 라이트·다크, PC·모바일)별 값을 전환할 수 있습니다.

1. 원시 값 정의: 브랜드 컬러 단계(예: blue-50~blue-900), 간격 단계, 글꼴 크기 단계를 변수 컬렉션 하나에 만듭니다.
2. 역할 이름 붙이기: 원시 값을 참조하는 시멘틱 변수(text-strong, bg-subtle, primary 등)를 만듭니다. 디자이너는 화면에서 이 역할 변수만 씁니다.
3. 텍스트 스타일 정리: 제목·본문·캡션 단계를 텍스트 스타일로 등록합니다. PC와 모바일 크기가 다르면 숫자 변수의 모드로 나눕니다.
4. 컴포넌트 제작: 버튼부터 시작해 입력창·카드 순으로 만들고, 크기·상태(기본·호버·비활성)는 베리언트로 정리합니다. 오토 레이아웃으로 간격 변수를 적용합니다.
5. 페이지 조립과 검증: 메인과 서브 페이지 2~3개를 컴포넌트만으로 조립해 빠진 부품이나 규칙을 찾습니다.
6. 라이브러리 공개와 문서화: 팀 라이브러리로 공개하고, 각 컴포넌트에 사용 규칙을 한두 줄씩 적어 둡니다.

개발과 연결하기: CSS 변수로 토큰 옮기기

웹사이트에서는 디자인 토큰을 CSS 사용자 지정 속성(CSS 변수)으로 옮기는 방식이 가장 간단합니다. 루트(:root)에 변수를 한 번 선언하고 모든 컴포넌트가 이 변수만 참조하게 하면, 브랜드 색을 바꿀 때 한 줄만 고치면 사이트 전체에 반영됩니다.

:root {
  /* 원시 토큰 */
  --blue-600: #1F5EFF;
  --gray-900: #111827;
  --gray-50: #F9FAFB;
  --space-16: 16px;
  --space-24: 24px;
  --radius-md: 8px;

  /* 시멘틱 토큰 */
  --color-primary: var(--blue-600);
  --color-text-strong: var(--gray-900);
  --color-bg-subtle: var(--gray-50);
}

.btn-primary {
  background: var(--color-primary);
  padding: var(--space-16) var(--space-24);
  border-radius: var(--radius-md);
}

위 예시에서 버튼은 색상 값(#1F5EFF)을 직접 갖지 않고 --color-primary만 참조합니다. 리브랜딩으로 주색이 바뀌면 --color-primary가 가리키는 값 하나만 바꾸면 됩니다. CSS 변수의 문법은 MDN: CSS 사용자 지정 속성 사용하기에서 확인할 수 있습니다.

연결할 때 정해 둘 규칙

• 컴포넌트 CSS에 색상 코드나 px 값을 직접 쓰지 않고 변수만 참조합니다.
• 새로운 값이 필요하면 페이지에서 임시로 만들지 말고 토큰을 추가한 뒤 씁니다.
• 반응형에서 바뀌는 값(제목 크기, 섹션 여백)은 미디어 쿼리 안에서 변수 값만 바꿉니다. 브레이크포인트 기준은 반응형 웹디자인 가이드를 참고하세요.
• 피그마 변수를 내보내는 플러그인이나 DTCG 형식의 토큰 파일을 쓰면 디자인과 코드의 값을 자동으로 맞출 수 있습니다.

디자인 시스템 구축이 효과를 내는 경우

디자인 시스템은 페이지가 많거나, 여러 사람이 오래 운영하거나, 같은 브랜드로 여러 사이트를 만들 때 효과가 큽니다. 반대로 한 페이지짜리 이벤트 사이트에는 토큰 몇 개만 정해도 충분합니다.

• 페이지가 30개 이상인 기업 사이트: 제품·사례·소식 페이지가 계속 늘어나는 경우
• 관리자에서 콘텐츠를 직접 올리는 사이트: 담당자가 입력한 콘텐츠도 같은 카드·표 스타일로 보여야 하는 경우
• 리뉴얼을 앞둔 사이트: 페이지마다 다른 버튼·색을 정리하고 다음 리뉴얼 비용을 줄이고 싶은 경우(홈페이지 리뉴얼 기획안 작성 7단계 가이드 참고)
• 계열사·브랜드 사이트가 여러 개인 그룹사: 같은 토큰을 공유하고 브랜드 색만 바꿔 쓰는 경우

자주 묻는 질문

디자인 시스템과 스타일 가이드는 같은 말인가요?

아닙니다. 스타일 가이드는 색·글꼴·사용 규칙을 정리한 문서이고, 디자인 시스템은 그 문서와 함께 디자인 토큰, 컴포넌트 라이브러리, 코드 구현과 갱신 방식까지 포함하는 체계입니다. 스타일 가이드는 디자인 시스템의 일부입니다.

작은 회사 홈페이지에도 디자인 시스템이 필요한가요?

대규모 시스템은 필요 없지만, 컬러·타이포그래피·간격 토큰과 버튼·카드·폼 같은 기본 컴포넌트는 정해 두는 것이 좋습니다. 이 정도만 있어도 페이지를 추가하거나 담당자가 바뀔 때 디자인이 흐트러지지 않습니다.

머티리얼이나 KRDS를 그대로 가져다 써도 되나요?

구조와 원칙은 참고하되 브랜드 색·글꼴·화면 톤은 회사에 맞게 다시 정해야 합니다. 그대로 쓰면 다른 서비스와 비슷해 보여 회사의 개성이 드러나지 않습니다. 각 시스템의 리소스를 재사용할 때는 해당 사이트의 이용 조건을 확인하세요.

디자인 시스템은 누가 관리하나요?

제작 단계에서는 디자이너와 개발자가 함께 만들고, 오픈 후에는 사이트를 운영하는 쪽이 토큰과 컴포넌트 목록을 갱신합니다. 외주로 제작했다면 피그마 원본과 토큰 목록, 컴포넌트 사용 규칙을 인계 범위에 포함해 두세요.

웹닷은 홈페이지를 만들 때 컬러·타이포그래피·간격을 디자인 토큰으로 정하고, 같은 이름의 CSS 변수와 컴포넌트로 옮기는 작업을 빌드 단계에서 함께 처리합니다. 디자인 시스템의 바탕이 되는 사용자 경험 개념은 UI/UX 디자인이란?에서, 색과 글꼴을 고를 때 참고할 사이트는 웹사이트 폰트, 컬러, 애니메이션 사이트 모음에서 확인할 수 있습니다.

정리

디자인 시스템은 디자인 값과 부품, 사용 규칙을 디자인 파일과 코드에 같은 이름으로 두는 체계입니다. 기업 홈페이지라면 토큰 4종과 기본 컴포넌트부터 시작해 실제 페이지를 조립하며 다듬는 방식이 현실적입니다.