자바스크립트 트랜드를 조사해서 공유하는 자바스크립트 트랜드(State of JavaScript) 사이트에서 CSS에 대한 조사도 한다는 것을 발견해서 설문에 참여했었는데 2020년 CSS 트랜드(State Of CSS 2020) 결과가 나와서 살펴봤다.

먼저 나의 의도가 다분히 들어간 해석을 할 것이기 떄문에 나에 대해서 간단히 언급하는 것이 좋은 사전 정보가 될 것 같다. 나는 "복잡한 셀렉터를 잘 다뤄야 CSS를 잘 쓸 수 있다"고 생각하고 "id 셀렉터를 사용하지 말아야 한다고 주장하는 사람은 CSS를 잘 모르는 사람"이라고 생각할 정도로 최신 CSS 작성 방식 보다는 오리지날 CSS 작성 방식을 선호한다. 리엑트(React)나 뷰(Vue)가 싫어서 스벨트(Svelte)를 사용하고 있고 바닐라 자바스크립트를 더 선호한다. JS 안의 CSS(CSS in JS)는 관심가는 방법이지만 해결 하지 못하는 문제가 분명히 있기 때문에 가려서 써야 한다고 주장하는 사람이다. 그나마도 스벨트를 쓰기 때문에 더이상 깊은 고민을 하지 않는다.

2020년 CSS 트랜드에 참여한 사람을 보면 미국과 영국, 프랑스가 많고 이상하게도 일본과 중국의 참여도가 매우 낮아서 어느정도 감안을 하고 볼 필요는 있다. 스스로 CSS와 JS를 잘한다고 생각하는 영어권의 백인 남자 의견이 주고 전체 트랜드를 대변한다고 보기는 힘들다.

CSS 기능이나 단위에 대한 트랜드는 도움이 많이 되는 정보다. 어떤 기능들이 새로 추가됐는지 볼 수 있고 처음 들어보는 내용도 많아서 도움이 많이 됐다. 브라우저 지원이 낮은 내용도 같이 포함되어 있어서 걸러서 봐야 한다. 유용한 것도 많지만 별로 관심가지 않는 CSS도 많다. 플렉스 박스는 대세고 그리드가 엄청 인기를 끌고 있으며 새로운 CSS도 많이 나오고 있다.

흥미로운 부분은 CSS 도구에 대한 내용인데 테일윈드 CSS(Tailwind CSS)가 많은 관심을 받고 있다. 이 테일윈드 CSS는 부트스트랩보다 더 치우친 유틸리티 CSS인데 트위터 같은데서 사람들 평을 보면 답답한 CSS에 한줄기 광명이 내려온거 같은 느낌이다. 개인적으로는 유틸리티 CSS를 아주 싫어하지만 결국 사람들은 CSS를 어려워하고 쉽게 쓸 수 있는 방법을 선호한다는 점은 기억해 둬야 할 것 같다. 부트스트랩이 줄어들고 있다는 것도 눈여겨 볼 만 하다.

사람들의 의견 부분도 좋은 시사점이 있다. CSS는 빨리 변하고 더이상 쉽지 않다논 의견이 늘었다. 재미 있는 부분은 유틸리티 CSS에 대한 긍정 의견도 늘었지만 반대로 셀렉터 중첩에 대한 긍정 의견도 늘었다는 부분이다. 그래도 아직 셀렉터 중첩에 대한 부정적인 사용자층은 상당하다. 컨테이너 쿼리나 구현하기 힘들다는 부모 셀렉터 같은 기능에 대해 사람들이 많이 원하는 것도 볼 수 있다.

전반적으로 트랜드라기 보다는 요즘 뜨는 기술에 대한 인기투표 정도로 이해할 수 있을 것 같다. BEM이 여전히 인기인걸 보면 시장이 크게 바뀌지도 않았고 기존 시장이 급격히 변화되기도 쉽지는 않을 것 같다. 조사 결론에서 말하고 있듯이 상황에 맞는 적절한 도구를 선택하자는 결론없는 결론이 현실인 것 같다. 한편으로는 이렇게 빠르게 변하는 시장일 수록 탄탄한 기본을 갖추는게 결국 개인의 실력을 인정 받는 길이 아닌가 하는 아재 생각도 해본다.

한줄 결론, 그리드와 테일윈드는 한번씩 살펴보자.