디자인 시스템
웹 이나 모바일 등 각종 서비스 UI에서 재사용 가능한 컴포넌트와 패턴을 정의, 일관성있는 디자인과 UX를 제공하기 위해 만든 가이드라인
장점 : 컴포넌트 재사용으로 인해 효율적인 디자인이 가능, 일관성 유지에 유리
해당 컴포넌트들에 대한 설명과 명명을 확실히 할 수 있음
단점 : 유지보수할 시스템이 하나 추가되는 것임 -> 여러번 재사용하기 전엔 비용적인 손해발생
다른 사람에게 디자인 시스템을 교육하여야한다. -> 적절한 사용지침을 포함하여야함
기업의 디자인 시스템
각 기업에서는 본인들의 OS 혹은 서비스의 기준을 안내하는 웹서비스를 운영 중이다.
웹서비스에는 개발자, 디자이너들에게 필요한 정보들과, 피그마파일 등을 배포한다.
기본적으로 사용되는 color, font, 도형의 곡률 등의 정보를 가지고 있다.
재사용 가능한 컴포넌트들을 제공한다.
브랜드 원칙, UX 원칙을 포함하는 경우도 있다.
구글의 머테리얼 디자인
https://m3.material.io/
MS의 플루언트 디자인
https://fluent2.microsoft.design/#/
애플의 애플디자인
https://developer.apple.com/design/resources/
필요한 사용자
소규모 팀에서 단일 앱으로 작업하는 경우에는 효용이 작다, 같은 UI 컴포넌트를 복수의 프로젝트에서 공유할수록 효용이 커짐
Storybook
스토리북은 UI 구성요소와 페이지를 독립적으로 구축하는 frontend workshop이다. 전체 앱을 실행할 필요없이 컴포넌트 요소들을 확인, 공유할 수 있도록 해준다.
UI 개발, 테스트 및 문서화에 사용하여, 오픈소스이다.
앞으로 언급될 stack
빌드(build) 컴포넌트
📚 스토리북: UI 컴포넌트 개발과 자동으로 문서를 생성할 때 사용합니다.
⚛️ React: 선언 중심 컴포넌트 UI(create-react-app)를 사용합니다.
💅 Styled-components: 컴포넌트 단위의 스타일링에 사용합니다.
✨ Prettier: 자동화된 코드 포맷팅에 사용합니다.
시스템 유지
🚥 GitHub Actions: 빌드와 테스트를 자동화하기 위해 사용합니다.
📐 ESLint: 자바스크립트 코드 포맷팅에 사용합니다.
✅ Chromatic: 컴포넌트에서 일어나는 오류를 시각적으로 발견할 수 있습니다(Storybook 메인테이너들이 제작).
🃏 Jest: 유닛 테스트에 사용합니다.
📦 npm: 배포 및 라이브러리 관리에 사용합니다.
🛠 Auto: 릴리즈 작업 흐름(workflow)를 관리할 때 사용합니다.
스토리북 애드온(addon)
♿ 접근성(Accessibility): 개발하면서 접근성 체크를 도와줍니다.
💥 액션(Actions): QA 클릭과 탭 인터렉션이 가능하도록 해줍니다.
🎛 컨트롤(Controls): 컴포넌트의 props를 동적으로 화면에 반영해줍니다.
📕 문서(Docs): story에서 자동으로 문서를 생성해줍니다.
