디자인 시스템과 UI 라이브러리 목적

디자인 시스템

브랜드와 제품의 일관성을 유지하고, 팀 간의 협업을 향상시켜, 더 빠르고 효과적으로 UI를 디자인하고 구축하는데 도움이 됨 (인터페이스)

• Adobe Spectrum Design Pattern

• 사용자 인터페이스를 구축하는데 필요한 모든 요소를 정의하는데 포괄적인 문서와 가이드라인 집합

• ex: 컴포넌트 패턴, 디자인 원칙, 사용 가이드라인, 툴, 스타일 가이드 등

UI 라이브러리

구체적인 코드를 포함하는, 재사용 가능한 UI 컴포넌트들의 모음 (구현체)

• 코드의 재사용성을 향상

• 팀 간의 협업을 간소화

• 제품의 UI를 빠르게 구축하는데 도움됨

디자인 시스템을 이루는 요소

형태 (Style)

팀의 상황이나 개발 편의성에 따라 컴포넌트를 제약된 스타일 또는 자유로운 스타일로 구현하게 된다.

• 제약과 자유로움 중 적절함을 찾아야 함

제약 (Constrain)

• 규칙이 명확하여 원하는 값만 전달하여 원하는 UI 완성 (생산성 증가)

• 디자인이 제약적이고 규칙이 명확할때 사용하면 좋음

• 사용하기 간단해진다.

• 예외상황이 추가가 된다면 새로운 것을 추가하는것이 힘들고 재사용이 힘들어짐

자유 (Custom)

• 컴포지션 패턴을 활용

• 아직 제품의 대한 규칙이 명확하지 않거나 빠르게 발전하는 다양한 예외적인 상황이 발생하는 상황에서 대응하기 쉬움

• 자유도가 높음

디자인 시스템의 구조

원칙 (Principles)

• 디자인과 개발에 대한 핵심 가치 및 지침

• Lint, CSS 규칙, Naming 등도 해당됨

테마 (Theming & Foundation)

• 색상, 타이포그래피, 그리드, 스페이싱 등과 같은 기본 디자인 요소에 대한 지침

컴포넌트 (Component)

• 버튼, 인풋, 탭, 모달 등과 같은 재사용 가능한 UI 요소 라이브러리

패턴 (Pattern)

• 여러 컴포넌트를 결합하여 만들어진 복잡한 사용자 인터페이스 요소

도구 및 유틸리티

• 디자인 시스템을 실제 제품에 통합하기 위한 도구와 플러그인

문서화 (Documentation)

• 디자인 시스템의 모든 요소를 사용하는 방법 등

• 스토리북

가이드라인 (Guidelines)

• 좋은 사용성, 접근성 등의 가이드와 권장사항들

프로세스 및 워크플로우

• 디자인 시스템 업데이트

• 확장하는 것에 대한 프로세스