[Unit 4] Design System

Design System

디자인 시스템
디자인 원칙부터 재사용할 수 있는 UI패턴과 컴포넌트, 코드로 구성된 시스템
디자인 원칙, 스타일 가이드, 컴포넌트, 패턴, 디자인 및 개발 프로세스에 대한 지침까지 포함하는 포괄적인 개념
디자인 시스템은 실무에서 서비스 확장이나 다양한 디바이스 환경에 대응할 때 시간과 노력을 절약해주는 도구로 작용한다.

Case Study
회사에서 출시한 모바일앱이 성공해, 데스크톱 버전을 만들 계획이라고 가정할때 디자인 시스템이 없으면, 개발자들이 디자인요소를 직접 찾아야하고, 디자이너도 각 환경에 맞게 디자인을 수정해야 한다.
하지만 디자인 시스템이 구축되어 있으면

• 디자이너
  • 데스크톱 버전의 화면을 디자인할 때 이미 정의된 컴포넌트와 스타일 가이드를 참고해 디자인을 구성
  • 반응형 디자인 원칙에 따라 각 환경에 맞는 레이아웃 설정, 가이드를 따라 플랫폼별 특성을 고려한 인터랙션 설계
  • 개발자와 협업해 구현 가능성을 확인하고 가이드를 활용해 개발자에게 필요한 디자인 요소와 상세 사항을 전달
• 개발자
  • 디자인 시스템에 포함된 디자인 토큰을 통해 색상, 폰트, 간격 등의 스타일을 일관되게 적용
  • CSS전처리기나 CSS-in-JS라이브러리를 사용해 컴포넌트를 만들고 이를 디자인 시스템의 컴포넌트 라이브러리에 적용
  • 디자인 시스템에서 제공하는 컴포넌트 라이브러리를 활용해 데스크톱 버전의 UI를 구현, CSS미디어 쿼리를 사용해 반응형 레이아웃 적용
  • 디자인 시스템의 크로스플랫폼 원칙을 참고해 플랫폼별 특성을 고려한 코드 작성
  • 디자이너와 긴밀하게 협업해 디자인 시스템에서 정의된 가이드에 따라 일관성 있는 사용자 경험을 제공하는 애플리케이션 구현
    
    ➡️ 이런 협업의 결과로, 데스크톱 버전의 서비스가 모바일 버전과 높은 일관성을 유지하면서 플랫폼 특성을 고려한 사용자 경험을 제공할 수 있게 된다.
    
    
    디자인 시스템의 이점
• 팀 간의 원활한 협업 촉진
• 일관성 있는 사용자 경험 제공
• 효율적인 디자인 및 개발 과정
• 브랜드 인지도 강화
  
  
  디자인 시스템을 위한 도구들
• Figma
• Tokens Studio for Figma(Figma Tokens)
• Sketch
• Storybook
• InVision Design System Manager(DSM)
• Zeplin

내용 참조, 출처 : 코드스테이츠