[UI/UX] Reactbits로 멋진 컴포넌트 만들어보기

프론트엔드 개발자로 일하다보면 기능적인 부분보다 외적인 부분에 공을 들여야 하는 경우가 종종 생기곤 한다.

아무것도 모르던 초창기에는 모든 애니메이션이나 효과 등은 CSS를 한땀한땀 깎아가며 직접 제작했었지만,,,,어느정도 경험이 쌓이다 보니 라이브러리로 대체 할 수 있는 파트는 라이브러리를 사용하는 것이 훨씬 효율적이라는 것을 아주 뼈저리게 느끼고 있다 ㅎㅎ,,,

 

최근에는 React Bits라는 라이브러리를 발견해 아주 쏠쏠히 써먹는 중이다.

이녀석은 최근 프론트엔드 트렌드인 "Copy & Paste" 방식의 애니메이션 컴포넌트 컬렉션으로, 라이브러리 전체를 무겁게 설치하는 것이 아니라, 필요한 화려한 애니메이션 코드 조각만 복사해서 내 프로젝트에 붙여넣는 방식의 오픈소스 라이브러리이다.

shadcn처럼 명령어를 입력하면 자동으로 컴포넌트를 생성하는 방식으로, 의존성 없이 코드만 자동으로 생성된다!

shadcn 같은 경우에는 다음에 다시 다뤄보기로 하고, 오늘은 우선 이 React Bits의 몇몇 효과들을 가볍게 살펴보도록 하자!

---

1. 시작하기

상술했듯 의존성에 추가되지 않는다 뿐이지 사용 자체는 명령어를 입력해야 한다.
간단하게 원형으로 회전하는 텍스트를 한번 만들어 보자

 

npx shadcn@latest add @react-bits/CircularText-JS-CSS

 

나는 npm을 사용하므로 npm 명령어를 쳐준다.
일정 버전 이하의 node.js에서는 동작하지 않으므로, 웬만하면 최신 버전으로 업그레이드 하는 것을 추천!

추가로 설치하거나, 설정해야 하는 것들이 있으면 친절하게 물어봐준다.

 

여튼 설치를 마친다면

이렇게 루트에 components 폴더가 생기고, 컴포넌트 파일과 CSS 파일이 생긴다.

 

참고로 기본 생성 폴더를 변경하고 싶다면, 루트에 생성된 components.json 파일 내의 aliases 부분을 수정하면 된다.

components 폴더 내의 animated 폴더에 기본 생성하고 싶다면, aliases의 components 부분을 @components/animated로 바꾸면 되는 형식

 

여튼, 설정을 마치고 컴포넌트를 불러와 직접 만들어보자

"use client";

import CircularText from "../components/CircularText.jsx";

export default function Home() {
  return (
    <div className="relative flex flex-col w-full h-[100vh] bg-blue-900 p-20">
      <CircularText text="어떻게하나우리사랑은빙글빙글돌고" spinDuration={5} />
      <p className="text-center text-white">잘 돌아가죠?</p>
    </div>
  );
}

 

네 잘 돌아갑니다~

 

 

 

속성이나 스타일링 등은 React Bits의 각 컴포넌트 페이지 내에서 확인해볼 수 있다. 

심지어 홈페이지 내에서 직접 설정을 만져가며 테스트해보고, 최적화된 값을 그대로 복붙도 가능하다! 

이 얼마나 편리한,,,,참 쉽죠?

---

2. React Bits를 이용해 랜딩 페이지 만들어보기

이번에는 다양한 컴포넌트들을 활용해 조잡한 랜딩 페이지 예시를 만들어 보자

라고 하면서 내가 써보고 싶었던 라이브러리를 한번 시원하게 사용해 보도록 하겠다!

 

우선, 배경은 Lightning 효과를 사용할 것이다. 멋들어진 번개를 내리치며 강렬한 인상을 줘보도록 하자.

텍스트는 Fuzzy를 이용해 번개에 쫄아 부들부들대는 텍스트를 만들 것이고, 

버튼은 Electric Border로 번개 효과에 맞는 테두리를 줘볼 것이다.

 

"use client";

import Lightning from "../components/Lightning";
import FuzzyText from "../components/FuzzyText";
import ElectricBorder from "../components/ElectricBorder";

export default function Home() {
  return (
    <div className="relative flex flex-col w-full h-[100vh] bg-white">
      <div className="flex flex-col items-center justify-center gap-8 absolute top-0 left-0 w-full h-full z-10 text-white">
        <FuzzyText fontSize={180} baseIntensity={0.2}>
          WELCOME
        </FuzzyText>
        <div className="flex items-center justify-center"></div>
        <ElectricBorder
          color="#fff"
          speed={1}
          chaos={0.06}
          borderRadius={0}
          className="flex gap-8"
        >
          <button className="w-40 h-10 bg-white text-black">Get Start</button>
          <button className="w-40 h-10">Docs</button>
        </ElectricBorder>
      </div>
      <Lightning hue={80} speed={1.2} intensity={1.9} size={1.7} />
    </div>
  );
}

 

전체 코드는 다음과 같다. 

과연 어떻게 만들어졌을지....!!

 

음,,,

 

오,,,,

아무리 맛있는 식재료라도, 셰프가 꽝이면 음식이 맛이 없듯 어쩌구,,,,

사용해본 것에 의의를 두겠다!

디자인은 기획자 분이 열심히 해주실테니 ㅎㅎ,,,,

---

여하튼 오늘은 React Bits라는 좋은 라이브러리를 살펴보았다.

이번주에 기획자 분에게도 소개 시켜주었고, 매우 맘에 들어하신 것을 보아 웹 디자인 할때 아주 유용하게 쓰실 듯 하다,,,!!

다음번에 또 재밌는 라이브러리를 발견한다면 또 소개 해보도록 하겠다!