* 이 시리즈는 SOPT makers 라는 동아리에서 주니어 디자이너들이 힘을 합쳐 애정하는 프로덕트의 디자인 시스템을 구축했던 사이드 프로젝트 이야기입니다. 디자인 시스템 구축이라는 거대한 프로젝트의 리딩을 맡으며 좌충우돌 성장했던 1년간의 기록을 아주 자세히 적어봅니다.
0. 일단, 회사원이 왜 동아리를? 그리고 무슨 동아리인데요?
대학생 시절, 휴학을 하고 모든 열정을 바쳐 활동했던 동아리가 있었다. 대학생 연합 IT 벤처 창업동아리 SOPT. 2번의 기수를 수료한 것도 모자라 임원진인 디자인 파트장까지 맡아 운영했으니 말 다했다. 학부에서 배운 것보다 훨씬 더 많은 것들을 알려주고, 멋진 인적 네트워크 속에서 많이도 성장했다. 개발과 디자인, 융합 전공자로서 "나는 디자이너가 맞는가?"라는 정체성 혼란 시기에 UX/UI 디자이너로의 나를 찾아간 곳이라 해도 과언이 아니다.
시간이 흘러 취직을 하고, 반복되는 회사원의 일상에 익숙해지자 퇴근하고 집에 오면 눕기부터 하는 내 스스로가 슬슬 한심해지기 시작했다. 치열하게 살던 대학생~취준생 시절의 내가 그리워질 무렵 나는 또다시 새로운 배움을 찾아... 일을 벌이고자 ㅎ 직장인 사이드 프로젝트를 찾다가.. 아는 사람(이라 쓰고 이곳을 만든 사람이 꼬신)이 들어오라고 손짓하던 곳으로 향했다!
그곳은 바로 SOPT makers (이하 메이커스) (링크 클릭 시 나오는 랜딩페이지는 내가 만들었다 ㅋㅋ) SOPT에 필요한 프로덕트를 만들어 SOPT를 수료한 3천여 명의 구성원들을 연결하고 새로운 가치를 제공하기 위한 SOPT 내 정식 기구이다. 수년간 방치되어 SOPT를 잘 들어내지 못하는 공식 홈페이지를 보고, 홈페이지에 오너십을 가진 조직의 부재라는 문제의식으로부터 이를 지속 가능한 방법으로 해결하고자 22년 7월 30일 특수 기구로 시작했다… 는 부연 설명을 덧붙여본다.
어쨌든 나는 열정 넘치는 사람들과 내가 좋아하는 동아리에 기여하는 프로덕트를 만들고 싶었다! 실제 유저가 명확한 프로덕트였기 때문에, B2B SaaS 제품을 중점으로 하는 회사 업무에서 빠르게 관찰하기 어려운.. 유저 반응을 실시간으로 보고 공부할 수 있다는 점도 내겐 매력적이었다. 그렇게 나는 메이커스 3기수를 수료하게 된다...
1. 그럼 동아리에 왜 디자인 시스템이 필요한데요?
대부분의 동아리가 그러하듯, 메이커스는 6개월(1기수)마다 동아리 구성원이 바뀌는 기수제로 운영된다. 그러다 보니 동아리 프로덕트들 만들어가는 회원, 즉 메이커들이 반년 주기로 바뀌었다.
Q) 그럼 여기서 발생하는 문제는?
작업자마다 조금씩 다른 컴포넌트 형태와 코드! 작업자들의 잦은 교체와 미흡한 인수인계로 인해 제대로 팔로업 되지 않은 히스토리! 많은 조직에서 디자인 시스템을 도입하는 이유이기도 하다. 그러나 여기서 더 큰 문제는 메이커스라는 조직 특성에 있었다.
메이커스는 목적 조직으로, SOPT 라는 동아리 구성원들을 연결한다는 하나의 목적 아래 공식 홈페이지, 공식 APP, Playground(커뮤니티), Crew(커뮤니티 중에서도 모임/스터디에 집중) 총 4개의 제품 팀으로 구성되어 있었다. (플랫폼 팀은 내가 디자인 시스템 TF를 꾸린 다음 기수에 신설되었다. 고로 이것은 바야흐로 약 1년반 전을 거슬러 간 과거의 이야기이다..)
4개의 제품 팀에는 적어도 2명의 Product Designer, 3명 이상의 FE Developer가 속해 있다. 메이커스 조직이 고도화 되는 과정에서, MVP 버전의 프로덕트를 만들고 이를 확장하며 각 팀별로 컴포넌트를 공유하지 않고 각자 만들어 배포했던 것이다!
즉, 같은 기능을 하는 컴포넌트가 조금씩 다르게 디자인 및 구현되어 있었다. 따라서 전반적인 UI의 일관성이 심히 떨어질 뿐 아니라 브레이크 포인트도 달랐고, UX Writing도 모두 제각각 ... 통일된 것은 폰트와 컬러 뿐이었다! (심지어 컬러는 임시로 정했던 보라색이었다고 함. 추후에 설명하겠다.)
이러한 문제는 우리가 만든 프로덕트를 이용하는 유저에게 일관되지 않은 경험을 주고 있었다. 1,2기를 거쳐 3기부터 프로덕트가 점점 커져가는 상황. 더는 ... 디자인 시스템 구축을 미룰 수 없다고 생각했다.
2. 디자인 시스템 TF를 꾸리기로 결심하다... 그런데 누가 해요?
당시 회사에서 프로덕트 디자이너로 1년 조금 넘게 일했던 시점이었다. 이제야 디자이너로 1인분을 겨우 해내던 나 ... 당연히 디자인시스템? 만들어본 적 없었다. 수많은 Figma Kit들만 봤을 뿐 ... 이전부터 디자인 시스템과 플랫폼 디자이너 직무에도 관심이 많아 아티클과 강의를 듣곤 했지만, 재직 중이던 회사에 도입하기엔 엄두가 나지 않았다. 그러니 당연히! 실제로 개발자와의 협업까지 이어진, 진짜 돌아가는 디자인 시스템을 만들어 봤을리 없었다.
일단 하겠다고 발제했고(바텀업을 지향하는 메이커스에는 발제 문화가 있다. 왜 내가 했냐면 ... 디자인 챕터짱을 맡고 있어서였을까? 괜한 오너쉽 발동), TF 짱이 됐고, 팀원도 모집했으니 진짜 시작해야 했다. 그런데 뭘 어떻게 해야하지? 아무리 구글링을 해도 0부터 시작한 구축기를 기록해둔 글은 없었다!!! (내가 디자인시스템 구축기를 기록하는 이유이기도 하다...) 나는 n년차 시니어 디자이너도 아니었고, 나를 도와줄 경험 많은 사람도 없었고, 그저 열정 넘치는 TF원들이 다였다. 물론 이들만 있으면 되긴 했다. 최고의 복지는 동료니까.. 해보자! 당시 부담감이 상당하여... 취한 채로 디스코드에서 술주정을 하기도 했다 (흑역사)
일단 시스템을 같이 만들고 싶다고 자원한 프로덕트 디자이너가 꽤나 많았으므로, 배가 산으로 가는 것을 방지하기 위해 파트를 나눴다. 처음 계획은 UX와 UI로 나눠볼까 했는데, 영 아닌 것 같아서 이렇게 하진 않았다.
어떻게 진행하는게 좋을까 고민하던 중, TF 회의에서 메이커스의 아버지인 C가 이런 의견을 주었다. 그것은 바로 ...
3. 일단, 레거시 보라색을 걷어내자!
디자인 시스템 구축 이전, 메이커스 프로덕트에서 Primary Color로 사용하고 있는 색깔은 보라색이었고, 초기에는 공식 홈페이지와 플레이그라운드 라는 두 가지 프로덕트를 만들고 있었다. SOPT는 매 기수마다 다른 브랜딩 컬러를 사용하고 있는데, 당시 시점이 SOPT 30기였기 때문에 임시로 보라색을 사용하기 시작한 것이 지금까지 이어졌다... 는 히스토리가 있었던 것이다.
C의 의견을 요약하자면, 브랜드 디자인팀의 노고 덕분에 메이커스의 브랜드 컬러가 나왔고, 메이커스 디자인 시스템의 Color Scale이 제대로 나오기 전까지 시간이 소요되니 이때까지 기다리지 말고 레거시인 보라색부터 걷어내자! 였다.
그리고 이어진 TF 회의에서 제안된 "SOPT 회원들이 쓰는 프로덕트인 만큼, 새로운 SOPT 기수가 시작되기 전에 브랜드 컬러에 대한 인식을 바꾸는 것이 좋겠다." 라는 의견에 다들 동의했고, 얼렁뚱땅이지만 일단 하자!!의 마인드를 장착했다.
이렇게 메이커스 디자인 시스템, 즉 mds (makers design system) 구축이라는 거대한 프로젝트가 시작되었다.
'ux > 디자인 시스템' 카테고리의 다른 글
| 우리같이 작은 조직도 디자인 시스템이 필요할까요? (0) | 2024.11.30 |
|---|---|
| 동아리 프로덕트 디자인 시스템 구축기 2 - 레거시 컬러 청산 (1) | 2024.11.26 |