프로젝트에는 어떤 CSS 방식을 사용 해야 할까? (styled-components, tailwind, chakraUI)

이번에 next.js를 이용하여 개인 프로젝트를 시작하였습니다.

처음 사용기술들을 선택할 때 많은 고민을 하여 대부분 결정되었지만 orm과 css가 고민이였습니다.

orm에 대한 고민은 다른 글에서 작성해보고, 이번 글에서는 css 선택시에 제가 고려한 점에 대해서 작성해보겠습니다.

 

1. 내 프로젝트의 CSS 방식을 결정하기 위한 고민

CSS방식을 결정하기 위해 제가 고민한 것들입니다.

1. 프로젝트 규모
   • 프로젝트가 작고 간단하다면 CSS Modules 같은 내장된 CSS 방식을 사용하는 것이 편리하다고 생각하였습니다. 
   • 반면 프로젝트가 크고 복잡하다면 Styled-Components 같은 라이브러리 방식을 사용하는 것 더 효율적이라고 생각하였습니다
2. 프로젝트 팀 구성
   • 이는 개인 프로젝트이기 떄문에 고려하지 않았습니다, 하지만 보통 팀프로젝트에서는 팀원들과의 회의를 통해 결정합니다
3. 프로젝트 요구사항
   • 프로젝트의 요구사항과 목표에 따라 적합한 CSS 방식을 고려해봐야했습니다.
   • 예를 들어, 컴포넌트 단위의 스타일링이 필요한 경우 CSS Modules가 적합할 수 있고, 재사용 가능한 디자인 시스템을 구축해야 하는 경우 라이브러리 및 CSS 프레임워크가 유용할 것이라고 생각하였습니다.

 

2. CSS 라이브러리 vs CSS 프레임워크

이번 프로젝트는 나름 규모가 있고 여러 기능들이 복잡하게 얽혀있다고 판단하여, CSS Modules를 배제하였습니다.

그래서 남은 라이브러리 (styled-components, ChakraUI...)와 프레임워크 (tailwind,animate...)중에 고민하게 되었습니다.

 

CSS 라이브러리

1. 재사용 가능한 컴포넌트
   • CSS 라이브러리는 다양한 재사용 가능한 UI 컴포넌트를 제공하여 일관성 있는 UI 요소를 빠르게 구축할 수 있습니다.
2. 테마 지원
   • 대부분의 CSS 라이브러리와 CSS프레임워크는 테마 기능을 지원합니다 (ex, 다크모드)
3. 문서화와 커뮤니티
   • 대부분의 CSS 라이브러리는 잘 문서화되어 있으며, 이를 통해 쉽게 사용할 수 있었습니다.

CSS 프레임워크

1. 속도와 생산성 향상
   • CSS 프레임워크는 미리 디자인된 클래스와 구성 요소를 제공하여 개발 시간을 단축시키고 생산성을 향상시킵니다.
2. 일관된 디자인
   • CSS 프레임워크는 일관된 디자인 시스템을 제공하여 UI 요소의 일관성을 유지합니다.
3. 반응형 디자인
   • 대부분의 CSS 프레임워크는 반응형 디자인을 지원합니다. 
4. 문서화와 커뮤니티
   • 위와 동일

 

3. 결국 내 프로젝트엔 무엇을 사용 해야 할까?

위에서 범위를 css 라이브러리와 css 프레임워크로 좁혔지만, 이 두개만으로도 너무 많은 선택지가 있었습니다.

그래서 이미 다뤄본 것들을 위주로 비교해보기로 했습니다.

 

styled-components vs tailwindCSS 

또는

chakra UI

 

여기서 가장 먼저 배제한 것은 styled-components 였습니다.

왜냐하면 이전 프로젝트에서 이미 많이 사용해보아 익숙하지만 연습에는 도움이 되지 않을거 같아서였습니다.

 

다음으로는 tailwind를 배제하였습니다.

왜냐하면 이정도 규모의 프로젝트에 적용하기에 스스로의 숙련도가 낮다고 판단했기 때문입니다.

 

이렇게 소거법으로 ChakraUI를 활용해보기로 했습니다