[UI/CSS] 여태 써온 툴, 라이브러리, 프레임워크들을 정리해보자

개요

나름.. 1년 차 국비치고는 수많은 라이브러리들을 거쳐왔다

지금 와서.. 이제 내가 써 본 것들을 좀 정리해보려 한다

안 하면 또 까먹을 것 같으니..

 

+) 이 글은 2024 5. 3에 갱신되었다 

 

Bootstrap

https://getbootstrap.com/

Bootstrap

일단 제일 처음 써 본 것이.. Bootstrap5 버전이다 

 

다들 부트스트랩정도는 처음 보고 시작한다

 

처음에 vue3가 정식으로 나온지 1년, 부트스트랩조차 어디 붙이는지 몰라서

 

냅다 index.html에 붙이던 그 시절.. npm i bootstrap하나 할 줄 모르는 국비 선생 손에서 벗어나서 

 

우리 프로젝트는 나름 그래도 레거시를 없앤 상태로 시작했다 

 

뭐.. 처음 들어가기에는 최고가 아닐까 싶다

 

Tailwind

https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

이제는 주력이 되었다

 

사실 부트스트랩 구리다 이제 tailwind만 쓴다..

 

지금 현업에서도 tailwind가 붙어서 나름 잘 쓰고 있다 

 

물론 세세한건 어쩔 수 없이 css를 거쳐야겠지만.. 웬만한 건 얘로 다 처리한다 

 

아, 위의 두 가지를 쓰면서 항상 바뀌지 않은 것이 하나 있다면 전처리기는 항상 sass를 썼다

 

전처리기

Sass

https://sass-lang.com/

Sass: Syntactically Awesome Style Sheets

생 CSS 쓰면 되는 것을.. 왜 sass를 쓰냐!라고 생각할 수도 있는데 

 

한번 쓰면 영원히 탈출 못 하는 것이 이 sass 아닐까..

 

다들 .scss형태로 많이쓰시던데 나는 그냥 .sass쓴다

 

그리고 현업프로젝트파일에 같이 박힌 게 하나 있는데 less가 있다 

 

Less

https://lesscss.org/

Getting started | Less.js

뭐.. 딱히 다른 점은 거의 못 느끼겠고 사실 잘 안 쓴다(sass 있는데 굳이 안 쓴다)

 

여하튼, 전처리기를 이렇게 쓰고.. 여러 툴..? 프레임워크..? 여하튼 쓰던 것들을 써 내려가보자

 

Chakra UI

https://chakra-ui.com/

Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a

개인적으로는 얘가 짱이다

리액트 쓰면서 항상 얘만 쓰고 UI를 탁탁 짜는데 진짜 최고다.. tailwind랑 잘 맞아서 또 쓰기도 쉽다 

 

다만 아쉬운 건 그리 많은 컴포넌트가 없다 

 

없는 건 내 손으로 만들거나 tailwind 라이브러리에서 대충 떼오거나 dialog 이런 식으로 따로 창을 만드는 등 

 

내 손을 거칠 때가 좀 많다 

 

MUI

https://mui.com/

MUI: The React component library you always wanted

얘는 최근에 쓰고 있는데..

 

일단 tailwind랑 상성이 좀 안 좋은 것인가 스타일이 잘 안 먹는데 

 

styled component로 쓰는 분들이 많은데 그냥 귀찮아서 sx={{}}로 모든 걸 해결한다 

 

물론 tailwind도 먹는 건 먹기에 그것도 좀 섞고.. 중구난방이다 

 

이게 좋냐? 하면 그렇게 좋다 생각이 안 든다.. 뭔가 매우 불편하다 

 

 

Skeleton

https://www.skeleton.dev/

Skeleton — UI Toolkit for Svelte + Tailwind

Skeleton이다

 

얘는 Svelte 할 때 메인 UI로 잡아서 써보았는데.. 뭔가 많이 없는 기분이 든다 

 

아니 정확히 말하면 있긴 한데 Svelte로 맞춘 버전에서는 몇 개 없는 기분이다 

 

뭐.. 잘 쓰긴 했고 컬러 프리셋도 몇 개 있어서 나름 괜찮은 인상이었던 걸로 기억한다 

 

 

antdesign

https://ant.design/

Ant Design - The world's second most popular React UI framework

현업에서 메인으로 쓰고 있는 antd다 현 시점에서는 이 쓰레기는 쓰지 않는다

 

아 물론 내가 메인으로 쓰는 게 아니다 난 죽어도 이거 내 프로젝트에 쓸 생각이 없다

 

일단 "그" 나라 기원의 라이브러리기도하고.. 무엇보다 그냥 UI가 마음에 들지가 않는다 

 

또 일에서 쓰는 것들을 내 프로젝트에 까지 쓰고 싶지는 않기에..

 

그냥 사용법과 몇몇 컴포넌트, 내부 props가 어떻게 돌아가는지만 파악 중이다 

 

DaisyUI

https://daisyui.com/

daisyUI — Tailwind CSS Components ( version 4 update is here )

 

약간 거쳐가는 느낌으로 Vue에서 사용해봤는데 생각보다 괜찮다.

테마 설정도 따로 프리셋을 홈페이지에서 작성해서 설정 값 그대로 들고갈 수도 있고 

뭣하면 그냥 preset싹 다 긁어서 테마모드를 설정 해 줄 수도 있다

그래도 뭔가 정감이 가지는 않으나 위에 언급된 친구들보단 이제 이친구가 추천된다

 

 

shadcn (강력추천)

https://ui.shadcn.com/

shadcn/ui

현시점 원탑 라이브러리다.

거의 모든 프로젝트를 얘로 작성하고있고 원하는 기능들이 거의 다 들어가있다 

작년 말쯤이었나 .. 슬슬 shadcn의 향기가 솔솔 나더만 올해 들어서 다들 많이 쓰는 것 같다

필자가 환장하는 tw + radix UI의 조합인데, 왠만한 커스터마이징도 정말 쉽다

매우 강력 추천한다

 

 

모바일

Expo

https://expo.dev/

Expo

처음에 RN을 다룰 때, 뭐가 뭔지도 모르고 뭔가 좋은 라이브러리 없나.. 했는데 

 

요놈이 딱 나왔다

 

얘 자체만으로도 App을 구성할 수도 있고

 

아니면 RN 쌩 프로젝트에 SDK를 넣어서 구성을 할 수도 있다

 

개인적으로 엄청 좋아했는데.. 지금은 또 모르겠다 

 

React nativeelement

https://reactnativeelements.com/

React Native Elements

아마 다들 이제 쓰는 게 이게 아닐까 한다 

 

나도 실제로 깔아서 써봤지만.. 이놈 문제가 아닌 RN의 문제로 뭔가 머리 썩이면서 들어갔던 걸로 기억하는데.. 여하튼

 

나쁜 기억 좋은 기억 하나 없는 녀석으로 기억한다 

 

RNUILIB

https://wix.github.io/react-native-ui-lib/

RNUILib

RN 하면서 얘를 가장 많이 쓴 기억이 든다

실제로 얘는 좋은 기억만 있고.. 만약 쓴다면 다음에도 이걸 쓰지 않을까??

 

 

 

 

결론

천재지변이 일어나지 않는 한.. 아마 React를 쓰게 된다면 무조건 Chakra UI를 넣고 시작할 것 같고..

 

Vue는.. 그냥 조용히 Tailwind + 손코딩을 하게 될 것 같다

 

모바일은 뭐.. 내가 모바일 시작하게 될 즈음에는 뭔가 새로운 좋은 게 나오지 않을까 생각하기에.. 중립기어 박고 

 

Svelte는 한 2년 있다 다시 봐야겠다 ㅋㅋ 아직은 쓸 때가 아닌듯하니 그때쯤이면 뭔가 또 새로운 녀석이 Svelte에 찰싹 붙어있지 않을까 

 

천재 지변이 일어났다.

chakraUI는 아바데요가 돈독이 올랐는지 거의 방치상태인 느낌이다 이제는 나도 버린상태이다

 

처음한다면 그냥 shadcn으로 시작하는 것을 추천한다 특히 nextjs를 사용한다면 이만한 라이브러리가 없다

nextjs에 rsc기능을 주구장창써대면서 오류를 뿜어댄적은 한 번도 없다 .. 

 

또한..vue도 이제 좀 놓아주자 이 양방향 바인딩에서 오는 복잡함은 그냥 유지보수를 미치게 만든다

현업에서 vue를쓴다면 최대한 props drilling을 위주로.... 하다못해 전역변수를 적극 활용하던가

아니면 defineModel, defineExpose,  emit등을 최대한 배제하고 사용하고 react를 쓰는 습관을 가지자

(vue로는 뭐든지 다 만들 수 있는 자신감은 있지만 반대로 개인적으로 진짜 vue를 정말 혐오한다)