TailwindCSS 얼마나 많이 쓸까?

개인 프로젝트의 경우 무조건 TailwindCSS를 사용해서(심지어 앱 개발을 경험하면서도 NativeWind라는 라이브러리를 사용했다) 디자인 토큰 및 레이아웃 설정, 퍼블리싱을 진행하는데 디자이너 입장에서 원활한 수정은 크나큰 무기가 된다. 더욱이 퍼블리싱도 직접 하다 보니 피그마와 실제 브라우저에서 느껴지는 이질감 개선이나 반응형 디자인 적용도 빠르게 가능하다. 다크 모드는 비교적 순식간에 적용이 가능하다.

 

그런데 국내 대부분의 서비스에서는 TailwindCSS를 보기가 힘든게 사실이다. 모든 서비스를 체크해보지는 못했지만 최근 구직하면서 JD를 체크하는 회사의 서비스는 대부분 TailwindCSS를 사용하지 않는다. 그래서 일단 Product Hunt의 최근 월간 랭킹을 기준으로 상위 50개 웹 기반 서비스의 랜딩 페이지 CSS 라이브러리 및 디자인 관련 프레임워크를 정리해 보았다.

정리 과정 및 결과

일단 2024년 10월, 11월 각각 상위 랭킹 50개의 서비스를 조사했고 서비스가 아닌 랜딩 페이지로 한 이유는 각각 서비스에 모두 로그인해서 확인하는 게 현실적으로 어렵기 때문에 일단 Product Hunt에서는 랜딩 페이지만 정리하고, 개인적으로 사용하는 서비스의 CSS 라이브러리도 정리해 보았다.

노가다의 흔적

• TailwindCSS : 26개
• Framer : 21개
• 기타 : 53개

생각보다 TailwindCSS의 비중이 적어서 놀라웠다. 기타 항목에는 Webflow, Bootstrap 등이 많이 보였고 나머지는 바닐라 CSS가 많았던 거 같다. Framer가 많이 보여서 따로 정리했는데 각각 방식에 따라서 느껴진 랜딩 페이지의 디자인 느낌에 대해서 정리해 보았다.

• Framer : 20여 개 대부분의 레이아웃 구성이 동일했는데 알고 보니 템플릿을 활용한 랜딩 페이지였다. 적은 비용으로 간단하게 랜딩 페이지를 구성할 때는 좋은 선택인 거 같지만 너무 양산형 같은 느낌이 많이 들었다. 개인적으로 국내에서 사용해 볼 만한 게 어중간한 외주 디자인보다는 훨씬 퀄리티가 좋아 보였다.
• TailwindCSS : 템플릿의 느낌은 많이 없었고, 서비스의 특징을 디자인에 녹이는 부분이 많았다.
• 기타 : 대부분 고전적인 레이아웃 구성이 많이 보였다.

TailwindCSS 팬보이의 발악

아무래도 랜딩 페이지는 최근에 많이 사용하는 Framer나 전통의 강자의 비중이 많았던 거 같다. 그래서 이번에는 실질적이고 개인적으로도 많이 사용했거나 인지도가 높은 웹 서비스 위주로 정리를 해보았다.

• Supabase : TailwindCSS
• Cursor : TailwindCSS
• Claude : TailwindCSS
• ChatGPT : TailwindCSS
• Perplexity : TailwindCSS
• Midjourney : TailwindCSS
• Expo : TailwindCSS
• NextJS Docs: TailwindCSS
• TailwindCSS(?) : TailwindCSS

마무리

그럼 제목대로 TailwindCSS를 많이 쓸까?라는 질문에는 최근 급부상하는 서비스에 한해서는 YES라고 답할 수 있겠다. 최근 빠르게 성장하는 서비스 및 제품에서 말이라도 맞춘 듯이 사용하는 걸 보면 그렇다. 아무래도 예전부터 있던 기존 서비스는 TailwindCSS로 갈아엎을 이유는 없을 것이다. 하지만 최근에 개발을 시작하는 제품의 경우 TailwindCSS를 적용해 보는걸 디자이너의 입장에서는 강력하게 추천한다. 특히 피그마의 오토 레이아웃(CSS의 Flex와 개념적으로 거의 유사) 및 8pt-grid 기반의 디자인을 주로 하는 디자이너가 팀에 있다면 더욱더 추천한다.

 

개인적으로 생각하는 TailwindCSS의 가장 큰 장점은 프리셋 자체에서 디자인 토큰 정리가 잘 되어있고, 커스터마이즈도 용이하다. 반응형 디자인을 위한 break-point 정리도 간단하고, 다크 모드 지원도 아주 쉽다. 바닐라 CSS만 익혀둔 상태라면 TailwindCSS Playground에서 몇 번 뚝딱거리면 금방 익히게 된다. 클래스 명세에 대한 스트레스도 없다. 단점으로는 HTML 부분에 클래스가 인라인으로 들어가다 보니 가독성이 떨어지는 부분이 있지만, 유연성 및 생산성을 얻는 거에 비해서는 아주 사소한 문제라고 생각한다.