관련 블로그 링크

프론트엔드 개발자 김호준 디자인 시스템 만들기

디자인 시스템이란??

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

다양한 요구사항이 생긴다면 문제가 생긴다. 제약과 자유로움 중 적절함을 찾아서 잘 만드는게 목표다.

디자인 시스템의 구조

1. 원칙 : 디자인과 개발에 대한 핵심 가치 및 지침 (린트, 허스키)
2. 테마 : 색상, 타이포그래피, 그리드, 스페이싱 등과 같은 기본 디자인 요소에 대한 지침
3. 컴포넌트 : 버튼, 입력란, 탭, 모달 등과 같은 재사용 가능한 UI 요소의 라이브러리
4. 패턴 : 여러 컴포넌트를 결합하여 만들어진 복잡한 사용자 인터페이스 요소
5. 도구 및 유틸리티 : 디자인 시스템을 실제 제품에 통합하기 위한 도구와 플러그인 (ui 라이브러리 , 차크라, 머터릴얼 ,shadcn)
6. 문서화 : 디자인 시스템의 모든 요소를 사용하는 방법 (스토리북)
7. 가이드라인 : 좋은 사용성, 접근성 등의 가이드와 권장사항들 (docs)
8. 프로세스 및 워크플로우 : 디자인 시스템 업데이트, 확장하는 것에 대한 프로세스 (검토 시스템 예시를 들만한 것은 팀 내에서 코드리뷰 규칙??)

디자인 토큰

1. 컬러

• 다크모드에 대응 가능한 컬러 테마 토큰
• 타이포그라피 (텍스트)
• radius, spacing, shadow

프레임워크에 제약이 없는 디자인 라이브러리, 버그 픽스가 가능한 모노레포 도입.

• 버튼 컴포넌트 패키지
• 인풋 컴포넌트 패키지
• 레이아웃 컴포넌트 패키지
• 토스트 컴포넌트 패키지

모노레포를 사용한다면 ?

• 코드 변경, 동일한 이슈를 한 번만 수정해도 일괄 적용 가능
• 설정을 한 곳에서 관리할 수 있음(디펜던시, 타입스크립트, 배포 전략, 린트, 번들러 등)
• 코드, 컨텍스트 공유가 용이
• 이슈에 대응하기 용이하다

만든 라이브러리는 스토리북으로 확인 가능하다. (디자인 시스템의 구조 문서화의 원칙)

UI Components

• Box
• Flex
• Grid
• Divider
• GridItem

Headless Components

스타일과 기능을 분리하여 설계하는 방식

장점

• 관심사 분리
  • UI와 기능이 분리되어 각각 나누어 고민하고 개발을 하게되어 코드 품질이 좋아진다.
• 유지보수 용이성
  • interface 또는 기능이 변경 될 경우 일괄로 반영할 수 있다.
• 재사용성
  • 기능만 제공하기 때문에 다양한 곳에서 사용할 수 있게 된다.

구현 방식

• Hooks
• Compound
• Function as Child