프로젝트를 위한 디자인시스템 구축 과정과 활용 방안

디자인 시스템 왜 할까?

스타트업 정말 바쁘다. 달리는 기차의 바퀴를 바꾸는 일. 항상 아슬아슬하고 긴장을 놓칠 수 없다.

디자인 시스템은 UI 라이브러리가 아니다. 프로젝트 정체성을 나타내는 개념 UI 뿐만 아니라 인터랙티브 디자인, 프로덕트 디자인, UX 디자인 등 모두 아우르는 것

서비스의 다지인은 계속해서 변한다. 디자인 시스템은 변화에 빠르게 반응하기 위한 방법. 즉, 디자인에 대한 업무 프로세스 및 방법론

디자이너

서로가 서로를 깊게 이해해야 한다? X 조금씩 단계별로 알아가자! O

개발 도메인

앞으로 변하지 않을 가능성이 높은 기본 요소들을 규칙화한다.

소통 비용을 최대한 줄이는 것이 주요 전략이다.

디자인 -> 유비쿼터스 랭기지(공통 언어) <- 개발 도메인

Color, Spacing, Typography, Motion, Grid

components/_designsystem 이라는 폴더 구성

개발자와 디자이너의 소통을 위한 툴 -> Storybook

Tokens(Spacing, Color, FontSize, Heading) -> Theme(Theme1, 2, 3) -> Generator(createStyles) -> Component(Function Component)

lerna + yarn workspace

질문

아토믹 디자인
css 라이브러리
- emotion이 제일 안정적(오래된 라이브러리, 버그가 별로 없음. 자료가 많음) -> 스티치스도 고려했었음(무한 재귀를 돈다.), 더 빠르다.
- 기술 스택은 트레이드오프 -> scss(상대적으로 최적화에 좋다.) but Emotion은 다 js이기 때문에 개발자가 왔다갔다 스위치를 해야 하는 비용이 적다. 빌드할 때, 동적으로 생성

atom -> 시각적으로 봤을 때, 하나의 역할

molecule과 organism -> 규칙을 확실하게 정함

ex) 사이트의 개인정보 운영정책

template