당근의 디자인 시스템 어케했지?!(+ storybook)
아토믹 디자인 패턴에 관심을 갖던 중 아토믹 디자인 패턴을 십분 잘 활용하기 위해서는 디자인 시스템이 선행되어야 된다는 생각을 하게되었다.
여러 디자인 시스템을 찾아보다가 당근 마켓에서 FEconf에 발표한 디자인 시스템 개발 기록을 보게되었다.
내가 이해한 대로 내가 만들 디자인 시스템에 적용하기 위해 정리해보자!
디자인 시스템을 만드는 마음가짐
유연성(chakra) vs 일관성(spectrum) 모든 제품을 커버하는 범용 디자인은 불가능하다! 반복되는 방법론이 더 중요하다
디자인 토큰
디자인 토큰은 디자인 의사결정을 하는 것이다 ⇒ 의사결정은 바뀐다 ⇒ 의사결정을 가장 빠르게 모든 제품에 반영하는 방법 ⇒ 기계가 읽을 수 있게 인코딩한다
미리 정하지 말자
컴포넌트
FEconf 2022 디자인 시스템, 형태를 넘어서 - 이소영 참고할 것
컴포넌트의 기능
- 구조 : 어떤 부품들로 구성되어있고 어떤 상호작용을 하는지
- 상태 : 유저입력에 의해 변할 수 있는 컴포넌트 상태(ex- hober, focused, selected, checked, active, …)
- 상호작용 : 상태의 변경을 유발하는 단위 (hover, focuse, click, press, … )
- 맥락 : 코드에서 주입하는 옵션(유저에 의해서가 아닌 코드에 의해서만 변경된다), 동작에 관여 (Readonly, Disabled, … )
컴포넌트의 형태 (15:00 ~)
- 구조 : 어떤 부품들로 구성되어있고 어떤 레이아웃을 가지는지
- 시각 옵션 : 설정된 옵션에 따라 형태가 달라지는 것(size, variant)
- 상태 옵션 : 상태와 맥락에 의해 형태가 달라지는 것 (hover, focused, diabled)
- 디자인 결정 : 상태옵션 X 시각 옵션 X 구조 X 속성 X 디자인 값(토큰)
이렇게 기능과 형태를 나누고 결합해서 쓴다
이렇게하면 경우의 수가 엄청 많아짐
⇒ 이를 해결하기 위해 우선순위가 되는 것들을 나눠볼 수 있음(disabled이면 hover고려할 필요없음)
덕분에 관심사를 나눌 수 있음
주의할 점!
당근마켓FE-하태영님
이제 storybook으로 나만의 디자인 시스템을 만들어 보자!
- Figma로 만들기 UI 인벤토리 만들기!
근데 난 디자이너가 아닌데..? 할 줄 모르는데..?
기성품을 가져다 쓰자!! ⇒ (Naver_Etech도 이렇게 했음 → chakra-ui, chakra figma UI kit을 사용했음)
- Story북으로 Atoms하나씩 만들기
- npm에 배포하기
- 내 프로젝트에서 install해서 사용하기
참고
Figma Variables
댓글남기기