1. Design System

반응형 웹 디자인(Responsive web design)

• 뷰포트 너비와 관련없이 최적화된 화면으로 컨텐츠를 제공하는 것

• 하나의 최적화된 화면에서 다른 화면으로 넘어갈 때 하나의 제품이라는 느낌을 주는 것

디자인 시스템(Design System)

• 여러 페이지와 채널에서 시각적 일관성을 유지하면서 중복을 줄여 디자인을 관리하기 위한 표준

• 코어 컴포넌트를 중심으로 만들어진 디자인 규칙들이 프로덕트 전체에 일관되게 사용되는 것

• 요소와 요소, 페이지와 페이지, 뷰포트 너비에서 뷰포트 너비 이동시에 일관된 느낌을 줌

• 타이포그래피, 레이아웃, 모양, 색상의 코어 컴포넌트로 구축

• 디자인 시스템의 개념과 리액트로 컴포넌트를 만드는 것이 잘 맞아떨어짐

• Theme과 Component를 활용해서 디자인 시스템을 구현

Atomic Design

디자인 시스템을 만들기 위한 방법론

• Atoms : 디자인의 최소 단위. input, label, button, ...

• Molecules: Atoms를 모아서 만든 한가지 기능을 수행하는 단위

• Organisms: Atoms와 Molecules로 구성된 사용자에게 의미와 역할이 존재하는 단위

• Template: 여러 Oragnism으로 구성된 최종 레이아웃 형태

• Page: 템플릿에 콘텐츠가 더해진 사용자에게 전달되는 최종 디자인의 형태