디자인 시스템 구축기

최근에 지인의 창업 프로젝트에 개발 팀원으로써 함께 하게 되었다.

 

12월까지 MVP 제작을 완료하겠다는 목표를 잡았기에, 디자인은 외주를 맡겨 진행했다. 

받은 디자인은 색상과 컴포넌트들이 여기저기 흩어져 있는 상태였다.

 

사실 MVP 제작 단계에서 디자인 시스템은 사치일 수도 있겠다는 생각이 들었지만, 

이번 기회를 통해서 디자인 시스템에 대한 이해도 높일 겸 직접 구축해보아도 좋은 경험이 될 것 같았다.

 

---

 

디자인 시스템이란?

 

서비스의 목적에 맞게끔 일관되게 구성된 일련의 패턴과 공유된 규칙 언어로서, components, ux writing, docs, branding 등이 포함된 최상위 레벨을 뜻한다.

 

디자인 시스템의 필요성은 다음과 같다. 

• 디자인 및 개발 작업을 대규모로 신속하게 만들고 복제 가능
• 더 크고 복잡한 문제에 집중할 수 있도록 설계 리소스에 대한 부담을 덜어줌
• 팀 내, 팀 간에 언어 통일 가능
• 제품 간 시각적 일관성 유지

 

개발자 입장에서는 뭐가 좋을까?

나는 아직 제대로 된 디자인 시스템을 경험해보지 못했지만, 올해 함께 한 팀에서 간단하게나마 접해보았다.

예를 들면, 색상 표기를 hex 코드를 그대로 사용하는 것이 아니라 Primary 등의 명칭으로 지정해두는 것이다.

 

이러한 경험으로 미루어봤을 때 디자인 시스템이 개발자에게 주는 편의성은 다음과 같은 것 같다.

• 직관적인 스타일링 
• 개발 생산성 향상 : 추후 색상을 변경해야 하는 일이 발생하더라도, 단 한 줄만 수정하면 된다.
• 팀원과의 소통

그리고 지난 번 해커톤 때 들었던 강의에서는, 기업에서는 디자인 시스템을 통해 리소스 관리 자동화 또한 하고 있다고 한다.

 

 

어떻게 구성해야 할까?

사실 디자인 시스템을 구성하는 과정에서 나는 개발자이기 때문에 디자인 지식이 부족하여 잘못 구성한 부분이 분명 있을 것이다.

하지만 이번 디자인 시스템 구성은 나에게 있어서 디자인 시스템의 필요성을 느끼고 좀 더 이해해보는 것이었기에 최선을 다했다.

 

사용 가능한 진짜 디자인 시스템을 만드는 여정

 

• atomic : Color, Typography, Grid, Radius, Spacing 등 컴포넌트 구성 요소들의 기반
• component : atomic을 토대로 일정한 규칙을 가진 컴포넌트 생성
• template : 컴포넌트들을 조합하여 UI를 설계

'화해'의 기술 블로그에 소개된 내용을 바탕으로 atomic, component, template으로 나누어 페이지 내에 있는 UI 들을 분해해보았다.

핀터레스트에도 'Design System'이라는 키워드로 검색해보며 어떤 식으로 카테고라이징하고 있는 지를 참고하였다.

 

 

 

코드에는 어떻게 적용해야 할까?

색상과 같은 경우, App.css 파일에 지정해주었다.

 

icon은 desing system 내에 표기된 명칭을 그대로 사용하되, 파일 명 앞에 ic 를 붙여 icon임을 확실히 알 수 있게 해주었다.

 

 

앞으로는 어떤 점을 더 고려하면 좋을까?

• 디자이너와 개발자의 개념 맞추기
• 의미있는 이름 짓기
• 계층 구조 확실히 하기
• 변할 수 있는 것과 변하지 않는 것을 확실히 하기

 

앞으로 서비스를 완성해나가면서 디자인 시스템을 더 편리하게 만들어봐야겠다.

 

---

 

사용 가능한 진짜 디자인 시스템을 만드는 여정 – 화해 블로그 | 기술 블로그