개발자의 디자인 시스템 구축기
디자인 시스템은 왜 필요할까?
1. 효율적이다.
디자인 시스템은 디자이너와 개발자 간의 약속이라고 할 수 있다.
디자인마다 설명을 해야 하는 소통의 비용을 줄여 효율적이다.
2. 통일성 있는 디자인을 할 수 있다.
정해진 가이드라인 안에서 디자인을 하면 통일된 요소들로 통일성 있는 디자인을 할 수 있다.
디자인시스템 작업기
무엇을 디자인 시스템화 해야 하나?
처음부터 모든 컴포넌트들을 설계하고 만들 수 없기에 필요한 것부터 추리기 시작했다. 필요한 컴포넌트들을 추린 기준은 아래와 같다.
1. 재사용할 가능성이 있을까?
2. 최소단위 인가?
1. 재사용할 가능성이 있을까?
토스 UX/UI 팀의 인터뷰를 보면 2번 이상 재사용하게 되면 꼭 컴포넌트로 만든다고 한다. 이 아이디 어 착안을 해 재사용할 가능성이 한 번이라도 더 있다면 무조건 컴포넌트로 만들고자 하였다. 컴포넌트 화 한다 하여 모두 디자인 시스템에 들어갈 수는 없다. 왜일까?
2. 최소단위인가?
재사용할 가능성이 있어 컴포넌트화 된다 하여도 컴포넌트의 구성이 원자처럼 더 이상 쪼갤 수 없는 최소단위여야 디자인시스템의 기본 컴포넌트에 포함된다.
그렇게 해서 고려된 컴포넌트들 아래와 같다.
1. Button
2. ComboBox
3. Input
4. Typography
5. Box
6. Chip
7. Divider
몇 개 없어 보여도 위 조합이면 웬만한 화면은 구성이 가능하다.
컴포넌트 설계하기.
각 컴포넌트마다 수행해야 하는 의무가 다르다. 버튼의 경우 클릭이벤트를 통해 다른 액션이 기대되는 요소이고, 콤보박스의 경우 여러 가지 리스트 중 선택할 수 있는 UI를 기대한다.
각 컴포넌트마다 필요하다고 생각하는 요소들을 표로 그려보았다.
Button 컴포넌트의 요소 설계도피그잼 링크로 들어가서 더 많은 설계도를 확인할 수 있다.
디자인 입히기.
디자인이 가장 생소하고 시작하는 데 있어서 두려웠다. 처음 해보는 영역이라 잘못할까 걱정이 많았다. 테마색은 이미 지정되어 있고 모던하고 깔끔하게 디자인하기 위해 고민을 많이 했다. 참고한 디자인 시스템들은 MUI, Spotify-design-system, Toss-design-system 등이 있다.
피그마로 작업을 하면서 고쳐나가면서 작업을 했다. 처음에는 픽셀 수 맞추는 것도 쉽지 않았다. 피그마에서 너무 크게 제작해 막상 코드로 옮겨 보면 너무 커 보여서 작게 수정하는 일은 수도 없이 많았다.
Button 컴포넌트의 디자인과 정의코드로 옮기기.
디자인시스템의 마침표를 찍으려면 코드로서 컴포넌트들이 존재해야 한다. 누가? 프론트앤드 개발자가!
react, typescript, styled-component 조합으로 개발했다.
모노레포가 아닌 프로젝트라 백오피스, 프로덕트 모두 사용하려면 오픈소스 라이브러리로 만들어 지속적인 사용이 가능하게 하였다.
디자인시스템 이대로 완성인가?
현재 mds(movester-design-system)은 내가 혼자 만들어서 개발자가 관리를 하지만, 추후에 팀에 디자이너가 합류하게 된다면 기꺼이 같이 만들고 수정해 나아가고 싶다. 미래의 뭅스터 디자이너분 환영해요.
디자인 시스템의 주 사용자는 디자이너와 개발자라고 생각한다. 현재 디자인과 개발을 모두 도맡아 하고 있는 내가 사용에 있어 불편함이 있다면 정리해서 지속적으로 수정을 해 나아가며 발전시키고자 한다.
