[Chit Chat] Functional CSS 강의 시청 & 팀 프로젝트 일부 회고록

삼성청년SW아카데미(SSAFY)의 2학기 첫 프로젝트인 공통 프로젝트가 지난 주에 끝났다.

 

사실 해당 프로젝트에 대한 회고록도 작성해야 하는데 기분이 안내켜서 아직 쓰지는 못했다..

 

 

 

그렇게 프로젝트가 끝나고 어영부영 충전이라는 핑계로 놀다가 슬슬 다시 공부도 해아한다는 사명감에 책상에 앉았다.

 

그리고 다음 팀 프로젝트에 대한 컨벤션을 정하기 위해 (라는 핑계로 공부하기 싫어서) CSS in JS를 써야 하나 순수 CSS로 가야 하나를 고민하던 도중 우연히 강의를 하나 보게 되었다.

 

 

 

https://tv.kakao.com/channel/3693125/cliplink/423595065

사실 특강을 보고 'Wa...'라는 감탄을 하거나 '내가 모르는 새로운게 있네'라고 하고 끝내는 경우가 많은데 해당 영상은 팀 프로젝트가 끝나고 난 본인의 입장에서는 다시금 개발, 특히 Front와 Desigin 컨벤션에 대해서 생각해봄직한 내용이 많아서 정리해보고자 한다.

 

 

 

특강 내용은 카카오 엔터프라이즈의 유용태님께서 디자이너와 협업, 그리고 Tailwind를 사용하다가 불편함을 느껴 adorable-css를 만드신 여정(?)에 대한 내용이다.

 

 

 

사실 Front 개발자라면 꼭 공감할 것 같은 내용이 있다.

 

바로 "class명을 어떻게 짓지..?"

 

HTML5에 들어와서 가장 크게 바뀐 점 중에 하나는 시멘틱 태그이다.

시멘틱 태그, 말 그대로 의미를 가지는 태그를 작성해야 한다는 말이다.

 

이렇게 시멘틱함을 강조하는 트렌드에 맞춰서 className, id 역시도 어떤 역할을 하는지 의미를 지닌 명명법을 정해주는 것이 중요하다는 생각을 하게 되었다.

 

 

하지만...

 

 

 

역시 그런건 없었다.

 

위가 강의 내용을 캡처한 것이고, 아래가 지난 프로젝트에서 사용한 className 중 하나이다.

(너무 공감되서 이 부분에서 강의 시청 회고록을 작성하려고 마음먹었다)

 

 

이번 개발에서는 Front 개발 컨벤션을 도맡아 정하면서,  

처음 개발 시작 시에는 명명법을 이러쿵 저러쿵해서 잘 맞춰보자! 라고 했으나,

어느 순간 디자인을 입히기 시작하면서 flex를 위한 inner와 outer로 덕지덕지 쌓인 div 태그들을 볼 수 있었다..

 

 

 

정말 이거 보고 현웃했다.. (ㅠㅠㅠㅠㅠ큐큐큨큐ㅠㅠㅠㅠㅠㅠ)

 

 

팀 프로젝트가 개발 특성 상(?) Front에 비해서 Back이 훨씬 일찍 끝나서, Front의 개발을 도와주게 되었다.

 

그런데 기능적인 부분이야 그렇다치지만 UI/UX적인 측면에서 일일히 className 명명하고, 디자인 입히기 어려워 보이길래 저렇게 가져다쓰라고 만들어두었다..

 

하지만 저렇게 사용하면서.. 이게 맞나라는 생각도 많이 들었다.

 

 

 

사실 Tailwind나 styled-components와 같은 CSS in JS를 사용하려는 것을 고민하지 않은 건 아니다.

 

하지만(추가적으로 문법을 배워야하기 때문에) 이걸 의미를 부여하지 않고 그냥 사용하는 것이 괜찮나? 재사용성이 떨어지는게 아닌가? 라는 생각에 손이 가지 않았다.

 

 

하지만 생각해보면 내가 만든 태그들은 btn과 같이 정말 전역으로 사용하는 것이 아니라면 거의 재사용을 하지 않는다고 봐도 무방했다.

 

특히나 다른 프로젝트로 넘어가면 더더욱이 사용하지 않는다고 한다.

(나는 수년전에 반응형으로 만들어둔 전역 코드 복붙해서 매우매우매우 일부 쓰긴 하지만..)

 

 

 

그래서 결론적으로 전통적인 CSS 방식이 아닌 함수형 CSS 방식을 사용하는 것이 오히려 개발에 용이할 수도 있다 라는 것을 알 수 있었다.

 

물론 이런 라이브러를 쓰는 것에 대한 갑론을박은 여전히 인터넷 상에서 많이 일어나고 있으며, 개발자의 취향에 맞는 방식으로 개발하는 것이 결국 옳은 길이라고 생각한다.

 

 

사견으로는 저런 수많은 장점을 가지고 있더라도,

결국 모든 팀원이 해당 라이브러리의 사용법을 알아야하고,

추후 프로젝트에 참여하는 인원이나 유지보수 인원이 해당 라이브러리를 사용할 줄 모를 때 난향을 겪을 수 있어서,

vanilla css 혹은 scss로 개발하는 것이 가장 좋은게 아닐까 싶다.

 

 

 

함수형 CSS는 마음에 드는데 내 입맛에 맞는게 없어! 라고 하시면서 아예 별도 라이브러리를 개발하신 teo님이 정말 대단하신 것 같다..

 

다음 프로젝트에서는 꼭 AdorableCSS를 적용한 서비스를 개발해보고 싶다.

(그리고 나만의 라이브러리도 만들어보고..)

 

 

 

오랜만에 Front 개발의 방향성에 대해서 진지하게 생각해볼 수 있는 시간도 되었고,

이번 프로젝트에서 개발하면서 느낀 불편함을 어떻게 개선해 나갈지 고민해볼 수 있는 유익한 시간이 되었다.