크래프톤 정글 1DAY 부트스트랩 대체제 공부

부트스트랩 대체제 찾아 떠나기

현재 부트스트랩의 대체제로 많이 언급되는 라이브러리로는 Tailwind와 mui(Meterial UI)정도가 있다.
현재 0주차 프로젝트가 기획만 끝난 상태라, 변경이 생길 수는 있으나 우리조가 채택한 기술스택은 mui이다.

Mui의 장단점

우리조가 Mui를 채택하기로한 배경과도 맞닿아있는 장단점들이다.
mui의 경우 모바일에 대한 이식성이 높은 편인데, 우리조는 스마트폰까지 자연스러운 커버하는 반응형웹을 만드는 것이 목표였기 때문에 이 라이브러리를 채택하게 된 것이 크다.

리액트와 전적으로 호환이 좋음

코틀린의 장점으로 많이 언급되는 것 중 하나가 기존의 자바 프로젝트와 놀라울 정도의 호환성을 자랑한다는 것이다.
Mui역시 그런 맥락에서 봤을 때 리액트로 이식하기 좋다는 것이 정말 큰 장점 중에 하나이다.

왜 이식하기 좋을까

우선 Mui가 가지고 있는 장점들이 리액트가 지향하는 철학과 굉장히 밀접한 관계를 맺고있다.
리액트는 원칙적으로 기능별로 컴포넌트를 나누는 것을 권장한다.
그런데 Mui의 경우 자체적으로 컴포넌트가 기능별로 나누어져있어 커스텀이 쉬울뿐 아니라 리액트의 요구사항에도 맞추기 편하다.
또한 반응형 웹을 쉽게 제작할 수 있다는 것 역시 리액트의 장점과 유사하다.

사용자가 많음

사용자가 많다는 것은 곧 내가 찾는 오류에 대한 해답이 찾기 쉬움을 의미한다.
또한 레퍼런스도 찾기 쉽기 때문에 디자인을 개발자가 함께 병행해야하는 상황이라면, 어떤 기능을 사용해야 내가 원하는 화면을 만들 수 있을지 알기 쉽다.

Tailwind

Tailwind를 채택할지 말지에 대해 고민하다, Mui쪽으로 마음이 기운 이유중에 하나가 의존성에 대한 코드를 추가해야한다는 점과 혹시나 호환이 안되는 css를 사용할 경우 내가 어차피 따로 파일을 만들어주어야한다는 부분이었다.

장점

js파일에 바로 스타일을 집어넣을 수 있어서 파일 관리가 용이하다.
그러나 개인적으로 블로그에서 Tailwind를 사용해본 결과 직관적인 코드를 짜기 어렵다고 느껴졌다.

장점2

설정이 용이하다.
hover이나 active와 같은 상태에 대한 설정뿐 아니라, 다크모드와 같은 테마 설정도 다른 선택자를 만들지 않고 구현이 가능하다는 것이 큰 장점이다.