디자인 시스템과 UI 라이브러리 목적
디자인 시스템
브랜드와 제품의 일관성을 유지하고, 팀 간의 협업을 향상시켜, 더 빠르고 효과적으로 UI를 디자인하고 구축하는데 도움이 됨 (인터페이스)
사용자 인터페이스를 구축하는데 필요한 모든 요소를 정의하는데 포괄적인 문서와 가이드라인 집합
ex: 컴포넌트 패턴, 디자인 원칙, 사용 가이드라인, 툴, 스타일 가이드 등
UI 라이브러리
구체적인 코드를 포함하는, 재사용 가능한 UI 컴포넌트들의 모음 (구현체)
코드의 재사용성을 향상
팀 간의 협업을 간소화
제품의 UI를 빠르게 구축하는데 도움됨
디자인 시스템을 이루는 요소
형태 (Style)
팀의 상황이나 개발 편의성에 따라 컴포넌트를 제약된 스타일 또는 자유로운 스타일로 구현하게 된다.
제약과 자유로움 중 적절함을 찾아야 함
제약 (Constrain)
규칙이 명확하여 원하는 값만 전달하여 원하는 UI 완성 (생산성 증가)
디자인이 제약적이고 규칙이 명확할때 사용하면 좋음
사용하기 간단해진다.
예외상황이 추가가 된다면 새로운 것을 추가하는것이 힘들고 재사용이 힘들어짐
자유 (Custom)
컴포지션 패턴을 활용
아직 제품의 대한 규칙이 명확하지 않거나 빠르게 발전하는 다양한 예외적인 상황이 발생하는 상황에서 대응하기 쉬움
자유도가 높음
디자인 시스템의 구조
원칙 (Principles)
디자인과 개발에 대한 핵심 가치 및 지침
Lint, CSS 규칙, Naming 등도 해당됨
테마 (Theming & Foundation)
색상, 타이포그래피, 그리드, 스페이싱 등과 같은 기본 디자인 요소에 대한 지침
컴포넌트 (Component)
버튼, 인풋, 탭, 모달 등과 같은 재사용 가능한 UI 요소 라이브러리
패턴 (Pattern)
여러 컴포넌트를 결합하여 만들어진 복잡한 사용자 인터페이스 요소
도구 및 유틸리티
디자인 시스템을 실제 제품에 통합하기 위한 도구와 플러그인
문서화 (Documentation)
디자인 시스템의 모든 요소를 사용하는 방법 등
스토리북
가이드라인 (Guidelines)
좋은 사용성, 접근성 등의 가이드와 권장사항들
프로세스 및 워크플로우
디자인 시스템 업데이트
확장하는 것에 대한 프로세스
Last updated
