<aside> 💭 디자인 시스템 구축 후기 ( 상단에 Overview와 Output을 보고 읽어주세요 🤓)
Design System 작업을 처음 시작할 때 디자인한 것을 어떻게 개발자들과 소통해야할지 막막했다. 컴포넌트화 할 수 있는 부분이 어느 정도까지인지, 어디까지 쪼개고 확장성을 얼마만큼 생각하고 디자인을 해야 만들어둔 UI 컴포넌트들을 다양하게 활용할 수 있을지 확신을 할 수 없어서 더 막막하고 혼란스러웠던 것 같다. 그래도 처음부터 완벽하게 할 수는 없으니, 수정이 꽤 되더라도 (그 과정에서 개발자들에게 여러 요청을 할 지 언정 😅 ) 일단은 시작을 하면 점점 자리가 잡히겠지 싶은 마음으로 가장 기본인 Color와 Typograhpy 정립을 시작했다. 그리고 본격적으로 UI 디자인을 시작했는데, 우리가 하는 프로젝트는 앱도 아니고 모바일을 대응하고 반응형으로 만들 사이트도 아니라서 인터넷에 올라와 있는 다양한 디자인 시스템 관련 자료들과, 많은 분들의 생각들을 잘 걸러내어 우리 프로젝트에 적용을 시켜야하는 것에 고심을 많이 했다.
예를 들어 버튼 디자인을 할 때의 이슈이다. 크기 고정값 없이 컨텐츠 길이대로 디자인하는 것은 앱 UI에서 많이 쓰인다. 그래서 다른 디자인 시스템들에는 버튼을 크기로 나누어도 padding값이나 세로값의 차이를 주고 width는 딱히 고정값을 주지 않는 곳들이 많았다. 그래서 나도 lg,md,sm 크기로 나누고 디자인을 하다보니 각 크기의 차이점을 두드러지게 나타내기가 어려웠다. 또한 반응형대로 하면 길이가 중구난방인 버튼을 나열을 해야할 때도 있었고 우리 프로젝트는 뭔가를 등록해야하는 버튼을 많이 쓸 예정이라 버튼이 작으면 유저들이 찾기 어렵고 디자인적으로도 통일성이 느껴지지 않을 것 같았다. 고민에 고민을 한 결과 lg 사이즈는 고정값으로 1280px grid4 넓이인 384px을 width값으로 쓰고, md 사이즈에는 min-width 160px을 주었다. md 버튼을 쓰게 되면 컨텐츠 내용이 단 두글자여도 width는 160px로 컨텐츠 길이대로 늘어나고 줄어드는 sm 버튼과 달라지는 것이다. 그렇게 버튼 component를 처음으로 완성했다!
아직 프로젝트가 기획부터도 전부 나오지 않은 상태에서 UI 컴포넌트화를 하면서 디자인 시안을 만들어내려다보니 페이지 시안을 만들면서 UI 수정도 잦고, 앞으로의 확장성을 생각하면서 UI 디자인을 하니 평소에 작업하던 속도보다 훨씬 더디게 작업을 진행하고 있다. 사실 아직도 이 프로젝트는 진행중이고(2022년 기준 그대로 스탑되어 사라졌다…), 디자인 시안도 나와야 할 페이지가 한참 남았지만 기획자와 개발자, 그리고 디자이너인 나 이렇게 여럿이서 우선 순위에 대한 생각을 공유하고 자유롭게 의견을 말하면서 프로젝트 일정을 조율하다보니 공통적으로 쓰일 UI 컴포넌트를 가장 먼저, 여러번의 수정에 거쳐 이제 조금 안정화되고 있는 것 같아서 이렇게 디자인 시스템에 대한 글도 올릴 수 있었다. 앞으로 남은 프로젝트의 완성일까지 열심히 달려서 이 디자인시스템 아웃풋 페이지에 더 많은 컴포넌트를 정리해서 올릴 수 있기를 기대해본다. (크흡)
</aside>