0. 개요
본격적으로 TIL를 다시 쓰기 시작하면서 일단은 TIL를 멈추기 전 진행하고 있었던 디자인시스템 구축에 대한 내용을 한번 정리하고 넘어가려한다.
1. 디자인시스템을 만들게된 계기
입사 후 여러 프로덕트들이 생겨났지만 하나의 서비스처럼 제공되어야 했다. 따라서 사용자 대시보드에서 서로 다른 프로덕트라 하더라도 같은 서비스를 제공받는 듯한 느낌을 주기위해 사용하는 여러 반복적인 디자인들을 통일화시킬 필요가 있었고 디자이너와의 작업 효율성을 높이기 위해서도 디자인시스템을 만들 이유가 있다고 생각했다.
2. 디자인시스템을 만들면서 느낀점
1) 관리
딱 이 지점, 디자인시스템을 실재로 만드는 과정 중에 TIL을 중단했던 것 같다. 처음에는 storybook과 같은 컴포넌트를 독립적으로 관리할 수 있는 툴이나 방법론을 찾아보고 이것저것 많이 이용하려고 했었다. 하지만 결론적으로는 현재 우리 상황(angular 버전이나 작업방식 등)을 고려했을 때 적절한 도구를 찾지 못했고 슈퍼관리자 페이지에 간단한 디자인가이드 페이지를 직접 만드는 것으로 만족해야했다.
여기서 느낀점이 아무리 좋은 도구라고해도 지금 나의 상황과 맞지않으면 쓸모가 없다는 것이다. 어떤 좋은 도구가 있는지 찾아보기보다 선행되어하는 것이 현재 나의 상황이 어떤 상황이고 그렇기 때문에 어떤 도구가 필요한 것이지 잘 파악하는 것이 중요하는 것을 깨달았다.
2) 구현 방식
구현하는데 있어서는 최대한 외부 라이브러리의 의존성을 낮추려고 노력했다. 물론 아예 순수 typescript와 angular로만 만들지는 못했다. 이모지를 입력하는 부분이나 날짜를 입력하는 부분은 개발 리소스가 많이 들어 갈 것 같아 외부 라이브러리를 사용했다. 하지만 input, textarea, select 박스 등등 대부분의 요소들을 직접 구현함으로써 앞으로 우리가 원하는 동작이나 디자인을 최대한 적용할 수 있도록 했다.
물론 그 과정 속에서 어려움도 많았지만 일단은 재밌었다. 내가 평소에 그냥 브라우저나 html이 제공해주던 기능을 직접 구현해본다는 것이 새로운 경험이었다.
3) 일반성과 타협점 찾기
초기 디자인시스템을 만들 때는 매우 순조롭고 재밌었다. 디자이너가 만들어둔 디자인들을 보고 그대로 코드로 구현해서 만들기만하면 됐으니까. 하지만 문제는 만들고 난 후 였다. 처음에는 단순했던 디자인들에게서 점점 확장된 기능들을 요구되기 시작한 것이다.
가령 예를 들어 원하는 text를 보여줄 수 있는 간단한 메시지박스를 디자인시스템으로 만든다고 가정해보자. 처음에는 단순히 박스의 디자인을 넣고 표시하고싶은 text를 입력하도록 컴포넌트를 만들었다. 그런데 나중에는 이 메시지박스에 이모티콘을 넣고싶어한다. 그럼 text만 넣을 수 있던 컴포넌트에 이모티콘을 넣을 수 있도록 수정한다. 그런데 또 나중에는 아예 이미지를 넣고 싶어한다. 그리고 이미지와 text, 이모티콘은 쓰이는 곳 별로 다 다른 모습을 띈다. 그럼 이걸 이모티콘처럼 이미지를 하나 넣을 수 있도록 만드는 게 맞을까? 그냥 메시지박스라는 디자인에 넣고싶은 html 코드를 넣게해서 커스텀할 수 있게 하는게 맞을까?
이러한 일종의 타협점, 일반성을 고민하기 시작하면서부터는 간단한 디자인 컴포넌트 하나를 만드는데도 매우 머리가 아프고 시간도 많이 들게 되었다. 일종의 확장성을 어디까지 고려할 것인가라는 질문인데 이건 디자이너한테 물어봐도 답을 찾을 수가 없었다. 단순하게 만들었는데 나중에보니 이런 기능도 필요하다고 하면 만들어줘야지 어떡하겠는가.
이때부터는 거의 매일 야근을 했던 것 같다. 아무리 디자인이 나와있는대로 잘 만들어도 다음에 어떤 요구를 할지 모르니, 만족스럽지 않았고 계속 수정수정 했었던 것 같다. 내 스스로도 타협점을 찾아 여기서 끝내야한다고 생각은 하면서도 그렇지 못해서 '여기까지만 하자'는 말만 머릿속으로 몇번을 되풀이했는지 모르겠다.
3. 디자인시스템을 만들고나서 느낀점
이 영원히 사라지지않을 것 같은 고통을 끝내준 것은 다름 아닌 대표님이었다. 내가 매일 똑같은 짓거리를 하고나니 디자인시스템에 대한 작업은 여기까지만하라고 딱 선을 그어주신 것이다. 그 말을 들었을 때는 '아 그래도 이건 해야되는데'라고 생각했는데 지금와서 생각해보면 정말 다행이었다고 생각한다.
결론만 먼저 말하면 지금 다시 그때로 돌아가서 디자인시스템을 만들라고하면 "절대 만들지 않을 것이다."
1) 디자인시스템을 만든다는 의미
처음에는 디자인시스템을 만든다는 것이 그냥 재사용성을 높이기위해 독립적인 컴포넌트로 디자인들을 구현해놓는 것이라고만 생각했다. 때문에 그냥 "하면 좋은거 아닌가?" 라는 생각에 시작하게되었다. 물론 딱 그 정도의 작업은 생각대로 수월하고 재밌게할 수 있었다. 하지만 디자인시스템을 만든다 는 것, 그리고 좀 더 넓은 의미에서는 현재 작업 환경에 새로운 작업 프로세스를 도입하는 것 은 절대 만만하게 볼 것이 아니었다.
첫번째로 디자인시스템이라는 것 자체가 단순하게 코드 구현으로 끝나는 것이 아니라 앞으로의 작업 기준이 된다는 의미를 가지고 있었다. 디자인시스템을 만들어놨기 때문에 앞으로의 대시보드 개발, 코드 구현은 모두 디자인시스템을 이용해서 만들어야한다. 때문에 그냥 단순히 시작할 게 아니라 좀 더 고민을 하고 만들었어야한다. 개인적으로는 프론트개발이나 angular에 깊은 이해가 있는 사람이 했어야 하지않았나 싶다. 나같이 회사에 들어와서 기능구현만 깨작하던사람이 감당할게 아니었나 싶다.
두번째로 넓은 의미에서의 현재 작업 환경에 새로운 작업 프로세스를 도입하는 것 이다. 앞서 말했지만 기존에 작업하던 방식에서 아예 새로운 방식으로의 전환이 필요하게된 것이다. 나 혼자 만들고 나 혼자 사용하는 것이 아니라 동료들과의 협의와 앞으로 어떻게 관리할 것인지 등에 대한 프로세스가 잡혀야하는 것이다.
예를 들어 아까 디자인시스템을 만들때 디자인가이드를 만들었다고 했는데 만약 새로운 동료가 들어온다면 해당 디자인가이드를 어떻게 이용하고, 앞으로 어떻게 디자인시스템을 이용할 것인지에 대한 안내가 필요했고, 디자인시스템에 수정이나 업데이트가 필요하다면 어떻게 진행할 것이지에 대한 약속도 필요했다.
쉽게말해 해야하는 일이 늘어난다는 것이다.
2) 절대 좋은게 좋은게 아니다
사실 나는 삶을 사는데 있어서 큰 고민을 안하는 편이다. 좋은게 좋은거라고 나중에 문제가 생기더라도 내 선택이었고 내가 감당하면된다는 마인드로 그냥 물흐르듯, 두루원만하게 사는 편이다.
그런데 이번 계기로 일을 하는데 있어서는 절대 그러면 안된다는 것을 다시금 깨달았다. 일은 나 혼자하는 것이 아니다. 다른 많은 동료들과 같이 수행해나가는 것이고 이 환경에서 어떤 선택을 하고 진행한다는 것에 있어서는 충분한 고민과 모두가 동의할만한 근거가 반드시 동반되어야한다. 지금 나의 선택이 나중에 어떤 큰 부메랑이 되어서 우리 팀 전체에게 돌아올지 모른다. 적어도 일할때 만큼은 좀 더 나의 행동에 책임감을 가지고 미래를 생각하며 임해야겠다는 반성을 깊이 새겨본다.
참고
- 그렇게 만들게된 디자인시스템 라이브러리
https://www.npmjs.com/package/salad-design-library
