얼떨결에 만들어본 CSS 사이드 프로젝트

세상에 뭐든 잘하는 괴물 같은 사람이 많다.
왜 난 아니지...
근데 처음부터 괴물이었을까. 늦게 시작했으면 부러워 말고 더 열심히 하자.

어느 순간 사이드바가 꽉 찼다..

넋두리...

 사실 이 프로젝트의 첫 시작은 프론트 개발자로서 CSS가 부족하다고 느낄 때가 많았지만, 얼렁뚱땅(?) 화면만 만들고 끝내는 경우가 많았다. 뭐 지금까지는 큰 문제는 없었다. UI가 깨지면 밤을 새우면서 고쳤고 주변 개발자들한테 도움도 많이 요청했다. 그러던 중 지금 회사에서 사내에서 여러 프로젝트에 사용할 목적으로 디자인 라이브러리를 만들게 되었다. 

 

 처음에는 어려운건 "material-ui" 랩핑 해서 쓰고 쉬운 것만 직접 만들어서 사용하면 되겠지!"라는 생각으로 시작했다. 정말 오만하면서도 만만하게 생각했던 것이었다. 그리고 만들려고 해 보니 정말 일이 안 풀렸다. 이 프로젝트를 내가 리딩 하며 만들었는데 막히는 부분이 나올 때마다 구글을 보라고 하면서 만들 수도 없었고, UX 측면에서도 자연스러우면서도 사용자 친화적인 인터렉션을 주는 것은 정말 어려웠다. 그 와중에 스타일도 깨지니 정말 한심하고 속상했다. 

 

 그래서 이때 많은 회사들(구글, 애플, 스포티파이, 아틀란시아 등)의 디자인 가이드나 라이브러리를 많이 둘러보았고, 주변 개발자분께도 도움을 정말 많이 구했다.

최근에도 많이 도움을 받았다. 질문은 나를 성장 시킨다.

 그리고 공부를 많이하고 노력한 끝에 우리 프로젝트에서 사용되고 있는 디자인 라이브러리를 만들었다. (이제는 디자인 시스템으로 디자이너 분과 많은 이야기를 나누며, 개발적으로나 디자인적으로나 고도화 중이다.)

 

그래서 갑자기 뭘했다는 건데?

 구구절절 이야기가 조금 길었다. 그냥 회상해 보니 내가 성장했던 상황을 나중에 읽고 나태해지지 않았으면 해서 더 적어봤다. 하여튼 그래서 디자인 라이브러리를 만든 이후 많은 ui와 ux를 구현해 보고 싶다는 생각이 들었고, 처음에는 혼자 볼 목적으로 storybook에 control과 기타 에드온을 모두 제외한 후 컴포넌트를 여러 개 만들어 보았다. 

 

 그리고 내가 만드는 대부분의 프로젝트에서 사용하는 타입 스크립트와 리액트를 통해 코드를 작성하며, 바닐라 JS가 아닌 나름의 예제 코드를 만들었다.

깃허브엔 public이기 때문에 컨텍 방법도 넣었다 ㅋㅋ

 위 화면은 내가 초창기에 캡쳐해둔 프로젝트이다. 근데 프로젝트를 채울수록 내가 고민했던 부분을 공유하면 어떻까 하는 생각에 페이스북의 프런트엔드 개발 그룹에 글도 쓰기도 했다.

 지금도 구현해 보고 싶은 것들이 있을때 추가해 놓기도 한다.

 

css-collection-git-main-jungkyuhyun.vercel.app/

Storybook

---

 외국 프론트엔드 관련 커뮤니티를 보면 사람들이 기술적으로 어렵고, 놀랍고, 대단한 것만 올리지 않는다. 내가 저 글을 올린 것도 이 프로젝트가 정말 특별한 거라 올린 건 아니다. 하지만 그렇게 생각하더라도 누군가에게는 도움을 줄 수 있고 좋은 피드백도 받을 수 있어 용기 내서 올렸었다.

2021-03-12 GA기준 총 조회수

 그리고 이 작은 사이드 프로젝트는 내가 계속 퇴근 후에도 공부할 수 있는 원동력이 되어주었고, 맨날 해야지 해야지 하던 사이드 프로젝트를 또 시작하게 해주었다. 지금도 웹 기술 관련 사이드 프로젝트를 하고 있으며 그 내용은 다음 글에서 올려보겠다.

 

파이팅.