최근에 NEXT로 개인프로젝트를 하려고 하는데 첫 관문부터가 쉽지 않았다.
'스타일링으로 무엇을 쓸것인가!'
리액트를 사용했다면 쓰던걸 썼겠지만 새로 배우는 기술엔
뭐가 가장 적절한 기술인지 고려해야한다고 생각하기에 이것 저것 찾아보다가 흥미로운 블로그글이 있어 알아보았다.
번역)
제목-Tailwindcss vs Nextui - UI 프레임 워크를 선택하는 방법
당신이 개발자라면 적절한 UI 프레임 워크를 선택하는 것이 어려울 수 있다.
이것은 부분적으로 선택할 수있는 옵션이 너무 많아서 각각의 강점과 약점이 있기 때문이다.
이 가이드에서 필자는 두가지 있기 있는 프레임워크인 Tailwindcss 와 Nextui에 대해 다룰것이다.
Tailwindcss는 단순성, 유연성 그리고 사용하기 편리하다는 점때문에 인기가 많은 프레임워크이고,
반면에 Nextui는 확장성, 성능 및 유연성때문에 인기가 있다.
이 글은 두 프레임 워크의 중요한 기능, 장단점과 다양한 프로젝트 유형에 대한 적합성을 비교한다.
당신이 당신프로젝트에 가장 적합한 프레임워크를 찾는 사람이든, 그냥 이러한 툴들에 대해서 궁금한사람이든 이 글은 당신을 위한 글이다.
여기서 다룰 내용은 이러합니다.
- Tailwindcss 뭐고 무슨 장단점이 있?
- Nextui 뭐고 무슨 장단점이 있죠?
- 그래서 둘 중 어떤걸 고를까
그러면 Let’s dive in! 🚀
Tailwind CSS가 뭔가요?
Tailwind CSS는 유틸리티 우선 CSS프레임워크(utility-first CSS framework)입니다.즉, 외관이나 UI보다는 기능에 중점을 둔 프레임 워크입니다.
캐나다의 개발자이자 기업가인 Adam Wathan에 의해 개발됐습니다.
Tailwind를 사용하면 HTML을 떠나지 않고도 당신의 유틸리티 클래스들을 완전히 커스터마이징 할 수 있습니다. Tailwind CSS는 웹 사이트를 스타일링하는 빠르고 쉬운 방법을 제공합니다.
Tailwind CSS는 많은 부분에 있어 커스터마이징 할 수 있습니다. 이는 사용자로서,당신의 웹 디자인 선호도에 맞게 글꼴, 색상 및 기타 디자인 요소를 수정할 수 있음을 의미합니다.
이 프레임 워크는 또한 PurgeCSS (최종 빌드에서 사용하지 않거나 원치 않는 CSS 스타일을 제거하여 파일 크기를 줄여줌)로 인해 로 시간이 더 빠릅니다.
Tailwind CSS의 장점은 이러합니다:
- Tailwind CSS 초보 개발자들에게 배우기 쉽고 사용하기 쉽다.
- Tailwind CSS는 단 몇 줄의 코드로 유연한 디자인을 만든다.
- Tailwind는 유틸리티 우선 프레임 워크(utility-first CSS framework)이므로 디자인을 재사용 가능한 구성 요소로 쉽게 변환 할 수 있습니다.
- Tailwind는 가이드이며 CSS 클래스 및 ID들에 익숙하지 않은 이름을 사용하지 않습니다.
- Tailwind는 개발자의 요구에 맞게 쉽게 커스터마이징 할 수 있습니다
Tailwind CSS의 단점은 이러합니다:
- Tailwind는 낮은 수준의 CSS 클래스들을 제공하기 때문에 큰 CSS 파일을 포함하는데,그래서 스타일링 할때 파일이 너무 크고 복잡하여 시간이 지남에 따라 유지 관리할 수 없다. 이는 웹 사이트 또는 앱의 성능에도 영향을 미친다.
- Tailwind에는 많은 낮은 수준의 클래스들이 있을 수 있지만, 디자인을 변경하거나 특정 요소를 스타일링 할 때, 특정요소의 스타일을 무시하기는 어렵습니다.
- Tailwind는 일부 프로젝트에서 항상 가장 적합한 프레임워크는 아닙니다.의심할 여지 없이 강력한 도구이지만, 프로젝트 작업 시 사용 가능한 클래스를 사용하여 특정 설계 요구 사항을 달성할 수 없습니다.Tailwind 는 Prototyping, Dashboards, E-commerce등과 같이 많은 스타일링 UI와 디자인 요소를 사용자 커스터마이징하는 프로젝트에 가장 적합합니다.
NextUI 뭔가요?
Nextui는 component 기반 CSS 프레임 워크입니다. 즉, 언제든지 사용할 수있는 미리 디자인된 component들을 제공합니다. 예로는 버튼, 양식, 내비게이션 바, 내비게이션 메뉴 등이 있습니다.
Nextui는 Vercel 팀에 의해 구축되고 유지됩니다. Nextui의 아름다움은 커스터마이징 가능한 템플릿을 제공하므로 반응 형 웹 사이트를 만들기 위해 많은 CSS 코드를 작성할 필요가 없다는 것입니다.
이 프레임 워크를 사용하는 단점은 component들이 Nextui에 의해 제한되어 있기 때문에 개발자는 디자인을 100% 제어하지 않는다는 것입다.
NextUI는 핵심 UI component들 외에 추가로 자동 코드 분할, SSR 및 GraphQL 및 Apollo와 같은 라이브러리에 대한 내장 지원과 같은 개발자 도구를 제공합니다.
NextUI의 장점은 이러합니다:
- Nextui는 응용 프로그램이 커지면 크고 복잡한 앱을 처리 할 때 대단히 확장 가능합니다. 큰 파일을 처리 할 때 속도가 느려지지 않습니다.
- Nextui는 매우 유연하며 사용자의 요구나 취향에 맞게 built됩니다.
- Nextui는 크고 신뢰할 수있는 커뮤니티가 있으므로 도구를 사용할 때 도움을받는 데 스트레스가 없습니다.
- Nextui는 광범위한 pre-built된 component 및 특징들을 보유하고있어 구축 할 때 개발자의 시간을 절약 할 수 있습니다.
- Nextui는 React를 기반으로하여 JavaScript 응용 프로그램을 구축하는 것이 사용자 친화적입니다.
NextUI의 단점은 이러합니다:
- NextUI는 ReactJS를 기반으로 구축되었음에도 불구하고 다른 프레임워크에 비해 설치 공간이 큽니다. 개발자가 Next UI 탐색 방법을 완전히 이해하지 못하는 경우에도 성능에 영향을 미칠 수 있습니다.
- Nextui는 ReactJS를 포함하거나 사용하지 않는 응용 프로그램을 작성할 때 최선의 선택이 아닐 수 있습니다.
- Nextui는 비교적 사용하기 쉽지만 RECT를 사용하지 않는 사람들에게는 이해하기 어려운 학습 곡선이 있습니다.
- Nextui는 커스텀을 위한 다양한 개발자 도구를 제공하기 때문에 세팅 및 구성에 더 많은 주의가 필요합니다.
How to Decide Between NextUI and Tailwind
대규모 프로젝트를 위해 React 응용 프로그램을 작업하는 경우 CSS Framework로서 Nextui가 최선의 선택입니다.
그러나 특정 기능 또는 설계 요구 사항에 집중 해야하는 응용 프로그램을 작업하는 경우 Tailwind가 최선의 선택입니다.
결론
결론적으로 Tailwind CSS 및 Next UI는 웹 및 모바일 애플리케이션을 개발하기위한 다른 도구입니다.
Tailwind CSS는 개발자가 커스텀 UI를 빠르게 구축 할 수 있도록 설계된 utility-first CSS 프레임워크 입니다.
NextUI는 개발자가 어플리케이션의 퍼포먼스와 확장성을 향상 시키도록 디자인된 component-based 프레임워크 입니다.
Tailwind와 Nextui는 각각 강점과 약점을 가지고 있으며 프로젝트에 가장 적합한 선택은 전적으로 애플리케이션의 설계 요구 사항, 요구 및 목표에 달려 있습니다.
Tailwind CSS는 커스텀 UI를 구축하기 위한 간단한 솔루션을 찾는 개발자에게 가장 적합합니다. 반대로 NextUI는 CSS 템플릿을 찾는 개발자에게 가장 적합하므로 확장성과 같은 애플리케이션의 다른 부분에 집중할 수 있습니다.
마지막으로 개발자로서의 선호도와 기술을 바탕으로 자신에게 가장 적합한 프레임워크를 선택합니다. 선택하기 전에 각 도구의 장단점을 신중하게 평가하여 사용자에게 가장 적합한 애플리케이션을 구축할 때 충분한 정보를 바탕으로 한 결정을 내립시다.
원문:TailwindCSS vs NextUI – How to Choose a UI Framework
주소:https://www.freecodecamp.org/news/tailwindcss-vs-nextui-how-to-choose-a-ui-framework/
