Problem

최근 들어, 새로 들어온 주니어 프론트 개발자 분이랑 일을 하고 있는데
(물론 나도 쌉 주니어 개발자이지만...)
레이아웃 관련해서 너무 중복되는 코드들이 많이 보여서, 어떻게 이를 정리하면 좋을까하다가
디자인 시스템이라는 개념에 대해서 알게 되었다. (조현님 감사합니다 _ _ )

사실 이에 대해 아예 모르고 있던 건 아니었다.
material ui나 chakra ui, styled component 같은 곳에
글로벌 설정 같은 개념들이 존재했는데, 사실 내가 이때까지 받은 디자인에는 적용하기 쉽지 않았고
워낙 시간이 촉박하게 개발되고 디자인을 새로 받다보니, 이 곳 저 곳에서 중복되고 난잡한 스타일링을 볼 수 있었다.

그러던 참에 디자인 시스템을 알게 되었고, 회사 내 Design VP에게 물어보니
안 그래도 도입할 생각을 하고 있었다는 대답을 들었다.

그리하여.. 그 때를 대비한 미리 예습을 준비하는 것이 맞다고 생각했고,
앞으로 여기에 그 내용들을 정리해볼 예정

Things to learn

일단 css 라이브러리로 어떤 것을 사용할 지 생각해보면 좋을 것 같은데
css-in-js는 가장 유명한 styled-component와 emotion
css 프레임워크로는 최근에 tailwind가 떠오르는 추세라는 걸 본 적이 있다.

따라서 이 둘을 합쳐서 쓰면 가장 베스트한 초이스이지 않을까라는 생각이 들었다.

사실 현재는 Chakra-UI 라는 css 프레임워크를 사용하고 있는데,
이게 모듈 사이즈가 좀 크기도 하고, css 프레임워크 치고는 무겁기에
저 둘을 섞어서 썼을 때의 차이도 좀 궁금하긴 하다.

Links

https://www.surfit.io/tag/%EB%94%94%EC%9E%90%EC%9D%B8%20%EC%8B%9C%EC%8A%A4%ED%85%9C