nextjs UI 컴포넌트 라이브러리 추천

Question

안녕하세요!nextjs로 작은 커뮤니티 기반 웹사이트 만들려고 합니다빠른 퍼포먼스를 낼수있는게 가장 중요하기 때문에 ui컴포넌트 라이브러리를 사용할려고합니다!!mui, antd, chakra, shadcn이 4개가 가장 많이 사용하는 프레임웍이라길래이중에 사용해볼려고 합니다.mui같은 경우는 다양한 컴포넌트가 있지만 커스텀하기가 너무 어렵다고 해서 고민이네요 스타일도 좀..디자인적으론 shadcn이 가장 제가원하는 스타일인인데 tailwind 기반이더라구요 (tailwind도 좋나요?)다들 mui, antd, chakra, shadcn 중에 어떤거 추천하시나요??

풍월상신(가니메디안) · Accepted Answer

ShadCN 이 가장 좋다고 생각합니다.그리고 제 생각에는 ShadCN 못지 않은 새로운 UILib 인데, 아직 잘 알려지지 않은 DotUI 라는 것도 있습니다.가능성만을 본다면 ShadCN 보다 더 앞 선 자리에 두고 추천하고 싶지만, 아직 사용자 경험이 충분히 쌓이지 않았다는 단점이 있습니다.기술 스택을 선택할 때, 해당 기술에 대해 커뮤니티가 얼마나 활성화 되었는지도 참고해야 할 중요한 항목이겠죠.제게는 ShadCN 이 참 좋긴 한데, Tailwind, RHF 등과 연동되는 초기 설정 부분에서 좀 고통스러웠던 기억이 있습니다. ShadCN, Tailwind 두 곳 모두에게 직접적인 책임은 없고, 이들이 연동되는 영역에서의 문제인데, 참조할만한 문서가 메우 부족해요. 이 때문에 진입장벽이 좀 있는 편이죠. 지금은 npm 패키지가 업그레이드 되면서 많이 수월해지고 있는 것 같습니다.어떤 UILib 을 사용하시던간에, unstyled-component 의 활용방식에 익숙해지시면 리액트 본연의 개발철학을 ui 에서도 활용할 안목이 두터워집니다.FramerMotion 을 활용한 unstyled-component 를 작성하면, 아래와 같은 UI 컴포넌트를 활용할 수 있습니다.FadeUP 과 SlideLeft 는 jQuery 의 그 이펙트를 제공하는 커스텀 UI 컴포넌트 입니다.

왕큰새 · Answer

스타일 커스텀이 중요하다면 Headless UI 종류 쓰는거 추천드려요 근데 전 mui 쓰고있네요

킁킁탐정 · Answer

MUI는 커스텀하기가 어렵습니다. 그래서 https://mui.com/base-ui/getting-started/ 라는 Headless UI를 개발하고 있습니다.antd도 MUI 처럼 커스텀이 엄청나게 불편했지만 v5.0에 들어서면서 편해졌습니다. 상당히 방대한 컴포넌트이기 때문에 커스텀을 굳이 안해도 됩니다.chakra(ark/zag) 자체는 스타일이 존재하며 뒤에서는 실제로 Headless UI 버전인 https://github.com/chakra-ui/ark 가 사용됩니다.shadcn도 radix-ui에 스타일을 넣어서 사용하기 편리하도록 만든것이기 때문에 커스텀이 이미 한번 이루어진 상태입니다. 소스코드 자체를 모두 프로젝트 내부에서 조작 가능하지만 그럴거라면 radix-ui를 사용하는게 더 좋습니다. radix-ui은 Headless UI버전인 https://www.radix-ui.com/primitives 와 스타일과 추가 컴포넌트로 바로 사용이 가능한 테마 버전이 있습니다. https://www.radix-ui.com/tailwindcss는 별도 학습이 필요하며 유지보수가 어려운편에 속합니다. 하지만 빠른 개발을 위해 많이들 사용하고 있고 수 많은 웹 프로젝트가 tailwindcss를 사용하고 있습니다. 단점이 명확하기 때문에 호불호가 갈립니다.커스텀을 원하고 A11y도 신경써야하면 사실상 Adobe의 react-aria-components가 가장 좋습니다.적절하게 바로 사용하길 원하면 shadcn이 좋고 양쪽을 모두 챙긴다면 antd도 도전해볼만 합니다.

아리까리 · Answer

shadcn/ui는 headless ui라 그어떤 스타일 도구를 써도 괜찮습니다.제 개인 적으로는사용경험이 좋았던건 MUI가 가장 좋았습니다.스타일링이 좀 어려운 경향이 있는데 이것만 익숙해 지면 진짜 다루는건 그렇게까지 어렵지는 않아요.어렵다라고 생각되는 부분이 Theme을 커스텀할 때타입스크립트를 쓰고 있다면 interface 오버라이드나 타입을 적재적소에 잘 확장하거나 추가해서 써야 한다는 겁니다.한번 이 시스템에 적응 되면 편하긴 해요.뭔가 구조적인 짜임새 속에서 UI만드는 느낌

Rhio Kim · Answer

저는 최근에 shadcn 을 즐겨 사용하고 있어요. 물론 다른 것도 대부분 사용해봤지만 일장 일단이 있겠으나 개인 취향을 공유드리면 mui, antd 의 경우 이미 정형화된 화면상의 표현과 코드 스타일이 다소 정해진 규칙대로 사용해야 하고 기능들의 완성도와 프레임워크에 가까운 정형화된 규칙을 준수해야 한다는 것이 조금은 불편하더라구요. 반면에 shadcn 의 경우 현존하는 컴포넌트 구조화(DX, 오픈소스 생태계 연계)가 가장 모던하다고 생각해요. 여러 UI 라이브러리, 프레임웤들과 유연하고 자유도가 굉장히 높습니다. 그리고 개취지만 컴포넌트들이 추구하는 UX 도 가장 최신화 되어있다고 생각들어요. 한가지 엣지 포인트라면 v0 를 이용해 기능 및 스타일 커스터마이징도 매우 강력하다고 생각들어요.최근 오픈소스 진영에서 shadcn &#43; v0 기반으로 매우 활발하게 커스텀 컴포넌트들이 쏟아져 나오고 있습니다.https://github.com/birobirobiro/awesome-shadcn-uishadcn 칭찬은 뒤로하고 사실 목적을 가지고 무언가 만들 때에는 런닝 커브를 최소화하고 가장 잘 다룰 수 도구로 결과물에 빠르게 도달할 수 있는 엔지니어링이 좋은것 같아요.프로젝트 완료되시면 OKKY 에도 다시 홍보해주세요. &#x1f44d;

nextjs UI 컴포넌트 라이브러리 추천

5개의 답변

기술 목록