[UX/UI 기초] 디자인 시스템

디자인 시스템 🎨

디자인 시스템은
UI를 일관성 있게 설계하기 위한 기준과 규칙입니다.

즉

색상
폰트
버튼
컴포넌트
레이아웃

이러한 요소들을 체계적으로 정리한 가이드입니다.

디자인 시스템을 사용하면
일관된 UI를 만들 수 있습니다.

주요 포인트 Top3

01. 디자인 시스템이란 무엇인가 🎯

디자인 시스템은
UI를 설계할 때 사용하는 기준과 규칙입니다.

예를 들어

버튼 색상
폰트 스타일
여백 기준
레이아웃 구조

이러한 요소를 미리 정의합니다.

예시

Primary Color → 파란색
버튼 Radius → 8px
폰트 → Pretendard

이처럼 UI 설계 기준을 정리합니다.

02. 디자인 시스템이 중요한 이유 📌

디자인 시스템이 없으면

버튼 색상이 다름
폰트 크기가 다름
레이아웃이 다름

이러한 문제가 발생합니다.

디자인 시스템이 있으면

일관된 UI
빠른 작업
쉬운 유지보수

이러한 장점이 있습니다.

👉 디자인 시스템은 UI 품질을 높입니다.

03. 디자인 시스템 구성 요소 🧩

디자인 시스템은
보통 다음 요소로 구성됩니다.

색상
폰트
아이콘
버튼
컴포넌트
레이아웃

이 요소들을 기준으로
UI를 설계합니다.

04. 색상 시스템 🎨

색상은 디자인 시스템의 핵심 요소입니다.

예

Primary Color
Secondary Color
Background Color
Text Color

예시

Primary → 파란색
Secondary → 회색
Background → 흰색
Text → 검정

👉 색상 기준을 정의합니다.

05. 타이포그래피 📚

폰트 기준도 정의합니다.

예

Heading
Body
Caption

예시

Heading → 24px
Body → 16px
Caption → 12px

👉 텍스트 스타일을 정의합니다.

06. 컴포넌트 시스템 🧱

컴포넌트도 디자인 시스템에 포함됩니다.

예

버튼
카드
모달
입력창

이러한 요소를
컴포넌트로 정리합니다.

👉 재사용 가능한 UI 구성

07. 디자인 시스템 예시 📐

예시

Primary Color → #3B82F6
Button Radius → 8px
Font → Pretendard
Spacing → 8px 기준

이러한 기준으로
UI를 설계합니다.

08. 디자인 시스템 장점 🚀

디자인 시스템을 사용하면

UI 일관성 유지
작업 속도 향상
협업 효율 증가
유지보수 용이

이러한 장점이 있습니다.

👉 실무에서 매우 중요합니다.

GOYO.’s Tip 💡

디자인 시스템은
작은 프로젝트에서도 사용하는 것이 좋습니다.

예를 들어

색상 기준
폰트 기준
여백 기준

이 정도만 정의해도
UI 품질이 크게 향상됩니다.

디자인 시스템은
UI 설계의 기준이 됩니다.

마무리 🎯

이번 글에서는
UI 설계 기준을 정리하는
디자인 시스템에 대해 알아봤습니다.

✔ 색상 시스템
✔ 타이포그래피
✔ 컴포넌트 시스템
✔ UI 기준

다음 단계에서는
UI 컴포넌트 설계에 대해 알아보겠습니다.