Jayden-Design-System(1)

🔨 프로젝트 일지

정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지

Project: Jayden-Design-System(feat. Challengers)

프론트엔드 취준생의 뭣도 모르고 시작해보는 디자인 시스템 프로젝트.

시작하게 된 이유?

본론부터 말하자면 챌린져스 앱을 웹으로 리브랜딩해보는 프로젝트를 진행 중 멘토님께서 디자인 시스템에 대한 이야기를 해주신 것에서 시작되었다. 백엔드 없이 api를 어떻게라도 짜는 게 쉽지 않았고, 이에 좀더 프론트엔드 개발에 포커싱을 둘 수 있는 디자인 시스템을 시작으로 챌린져스 모킹 웹까지 진행하는 프로젝트를 시작하게 되었다.
이 프로젝트의 1차적인 최종 목표는 나만의 디자인 시스템을 구현하고 npm 라이버르러로 배포까지 하는 것!!!

목표 설정

primary : 나만의 디자인 시스템 구축 및 배포
secondary : 디자인 시스템 및 mock data를 사용하여 challengers 웹 서비스 구현

디자인 시스템이란?

재사용 가능한 UI 구성 요소의 모음이며 버튼과 같은 UI 컴포넌트를 재사용할 수 있게 정의해두는 것이다.
디자인 시스템은 결과물이 아닌, 결과물들의 집합으로 잘 만들어 놓은 디자인 시스템은 디자이너와 개발자간의 협업을 원활하게 하며, 일관된 규칙을 정의하며 회사의 브랜딩을 유지할 수 있다.

왜 사용하는가?

• 일관성 : 서비스의 UI 일관성이 지속적으로 유지될 수 있다.
• 디자인, 개발의 워크플로우 : 디자인 시스템이 구축된다면, 디자이너와 개발자의 협업이 매우 용이해진다. 즉, 개발자의 컴포넌트 개발 시 굉장히 큰 이점이 된다.

Atomic 디자인 시스템이란?

Atoms(원자), Molecules(분자), Organisms(조직), Templates(템플릿), Pages(페이지) 순서로 구성되는 디자인 시스템 워크플로우(컴포넌트 개발의 구조)

디자인 시스템의 사용자

일반적인 B2C 혹은 B2B 서비스와는 다르게 디자인 시스템을 구축하는 것은 개발자, 디자이너를 위한 것이라는 점을 인지해야한다.

Reference

모두싸인(디자이너의 디자인 시스템) 모두싸인(개발자의 디자인 시스템)