[디자인부트캠프] Chapter 8. 디자인 시스템

1. 디자인 시스템(Design System)

 

일관된 사용자 경험(UX)와 효율적인 사용자 인터페이스(UI)를 제공하기 위해 만들어진 재사용 가능한 디자인 원칙, 컴포넌트, 가이드라인의 집합. 디자인과 개발팀이 같은 언어로 일할 수 있게 해주는 공통 기준.

 

구글의 머터리얼 디자인, 애플의 휴먼 인터페이스 가이드라인 등을 선두로 기업들마다 고유의 디자인 시스템을 구축

 

📝 디자인 시스템의 필요성

1. 일관성 있는 사용자 경험 : 브랜드나 서비스를 접할 때 버튼 모양, 폰트, 인터렉션 등이 매번 달라지면 혼란을 야기. 디자인 시스템을 통해 모든 터치포인트에서 일관성 있는 경험을 제공해 신뢰를 형성.
2. 디자인 개발 효율성 향상 : 매번 새로 디자인하거나 개발할 필요가 없이 이미 정의된 컴포넌트의 재사용을 통해 효율 증가, 시간 절약, 비용 절감, 빠른 배포 가능.
3. 디자이너-개발자 간 협업 원활화 : 디자이너와 개발자가 같은 기준(토큰, 컴포넌트, 스타일)을 참고하며 작업할 수 있어 커뮤니케이션 오류가 줄어들고, 문서화된 디자인 시스템은 명확한 기준서의 역할을 함.
4. 유지보수 용이 : 새로운 기능/페이지 추가 시 기존 컴포넌트를 활용하거나 확장. 유지보수가 쉬워지고 제품을 체계적으로 관리 가능.
5. 브랜드 정체성 강화 : 색상, 로고, 타이포그래피 등이 통일되면 사용자에게 강한 브랜드 인식을 각인. 디자인 시스템은 브랜드 아이덴티티의 일관된 표현을 돕는 핵심 도구.

2. 배리언트(Variants)

하나의 컴포넌트가 색상이나 크기 등 상태가 다른 여러 버전으로 존재할 수 있도록 만든 기능 

 

예) 색상이 다른 Light - Dark 모드 / 같은 용도지만 크기가 Small-Medium-Large로 다른 버튼

 

스타일과 속성(Properties)가 다른 경우 일일이 컴포넌트화하기보다 유사한 컴포넌트를 세트로 묶고 배리언트를 통해 활용하는 것이 좋다!

• Variant : 타입 추가
• Text: 텍스트 수정(텍스트를 일일이 선택하지 않고 디자인패널에서 한꺼번에)
• Booleen: On/Off
• Instance Swap: 인스턴스 교체(아이콘 교체 등에 사용)