디자인 시스템

강좌 개요

디자인 시스템(Design System)은 제품 화면을 구성하는 색상·글꼴·간격 같은 디자인 요소와 버튼·카드 같은 컴포넌트, 그리고 이를 사용하는 규칙을 한데 묶은 체계입니다. 이 강좌는 디자인 시스템이 왜 필요한지에서 시작해, 기존 화면을 분석해 요소를 찾아내고, 디자인 토큰(Design Token)으로 값 체계를 정의하고, 토큰을 사용하는 핵심 컴포넌트를 만들고, 문서화와 거버넌스(Governance)로 운영하는 전 과정을 다룹니다. 실습은 HTML과 CSS만으로 진행하며, 브라우저에서 실제로 동작하는 토큰과 컴포넌트를 직접

선수 지식

• css

레슨 구성

• 01. 강좌 개요 (1장. 강좌 소개)
• 02. 디자인 시스템 이해와 용어 (2장. 디자인 시스템 이해와 용어)
• 03. 기존 디자인 분석과 시각적 감사 (2장. 디자인 시스템 이해와 용어)
• 04. 디자인 토큰 정의와 CSS 구현 (3장. 디자인 토큰 정의와 CSS 구현)
• 05. 핵심 컴포넌트 설계와 구현 (3장. 디자인 토큰 정의와 CSS 구현)
• 06. 문서화, 툴링과 거버넌스 (4장. 문서화, 툴링과 거버넌스)

실습 안내

• 본 강좌의 실습 코드는 브라우저 및 로컬 런타임에서 직접 수정하고 실행할 수 있습니다.