그거 우리도 한번 해보자!
디자인시스템 구축하기
본격적으로 프로젝트에 들어가기 전에, 디자인시스템을 구축해봅시다! - 기획자 왈
현재 내가 다니는 회사는 IT업계를 해본 적이 없는, 이제 막 온라인에 발을 담근 HR관련 기업의 자회사이다.
급격하게 변화한 현대사회의 사정에 맞춰 비대면 온라인 인적성검사를 만든지 1년 후, 우리에겐 기획과 체계가 절실하게 필요하다는 것을 깨닫게 되었다.
(사실 깨달은지는 작년 한달짜리 프로젝트를 매일같이 야근과 함께 하면서부터였지만, 나 그리고 그때 당시 같이 하던 프론트엔드 개발자 외에는 우리 회사의 IT업계로서 돌아가야 하는 방향성을 신경쓰고 있지 못했음)
그리고 모회사에게 받은 큰 규모의 프로젝트를 시작하기 앞서, 원래는 HR검사쪽에 종사하고 계시던 수석 한분이 기획자로서 이 프로젝트에 참여하겠다! 선언하시고 본격적으로 우리 회사의 체계를 생각하기 시작했다.
우선적으로는 눈 앞에 닥친 데드라인에 맞추기 위해 그때그때 만들어대던 디자인과 개발을 일관성 있게 구축해보고자 '디자인시스템'을 만들기로 하였다.
막상 디자인시스템을 만들려고 보니 뭐부터 시작해야할지 참 막막하더라. 어떤 기준으로 나누고 확장성을 어디까지 생각해야할지도 모르겠고.
그래서 무작정 서치를 시작했다. 다양한 회사들의 디자인시스템도 보고, matarial design system도 보고...
찾아보니 큰 덩어리로 Grid, Color, Typography .. 이렇게 나누는구나.
됐다 이제 시작해보자!
https://giphy.com/embed/US0y4X7FONHaM
(…?)
난 사실 계획을 좋아하는 MBTI J형이다. 하지만 작업할 때는 뭔가를 하기 전에 간단하게 찾아보고 (검색은 필수인게, 아무것도 없이 시작하는 일은 J에게 있을 수가 없다.)
큰 틀이 어느정도 이해가 된다면 일단 행동한 다음 더 깊게 찾아보면서 작업하는 편이다.
그렇게 피그마에 그려지기 시작한 협업을 위한 Design System. 두둥.
<aside> 💭 피그마도 협업을 위해 배우기 시작한지 얼마 안됐지만, 웬만한 프로그램은 다 내 손아귀 에 있다는 근자감과 손이 빠르다 는 자신감 하나로 무한 수정을 하더라도 늦을 일은 없다 생각하며 일단은 무작정 작업에 돌입했다. 의욕 뿜뿜일 때 시작해야해!
</aside>
우리는 아토믹 디자인 방법론을 적용해 작업하기로 했다.
당시 프론트엔드 개발자가 공유했던 아토믹 디자인 관련 아티클
아토믹디자인(Atomic Design) 방법론, 간단하게 이해하고 응용하기
UI 디자이너라면 한번쯤은 들어봤을 8point grid system.
통일성을 높히기 위해 모든 디자인 작업은 8배수로 하기로 결정했다.
피그마에 핸드오프 시스템으로, 혹은 슬랙으로 전달했던 디자인 관련 내용을 문서로 정리할 필요성을 느끼고 차근차근 문서로 만들기 시작했다.