들어가며

Next.js를 사용하여 성공적으로 블로그를 만들었다.(짝짝) 필요한 기능은 추후에 만들어야할 때 하나씩 추가하는걸로 생각했고, 배포도 성공적으로 하고나서 보니 블로그가 약간 심심해 보였다. 간단하게 라이브러리를 사용하여 동적인 요소를 추가해보고자 한다. 내가 어떻게 사용했는지 그리고 블로그에 적용했을 때 어떻게 나오는지 한번 알아보자.

타이핑 하는 효과

처음에 블로그에 들어오면 보이는 인사말이다. 지금도 좋지만 들어온 사람에게 실시간으로 인사하는 느낌을 주고싶어 타이핑 효과를 적용해보기로 했다.

npm trends로 비슷한 라이브러리들을 비교해봤다. 나는 react-type-animation 을 선택했는데 다운로드 수는 적지만 업데이트도 2달전으로 가장 빠르고 무엇보다 용량이 넷 중에는 가장 가벼웠다.

react-type-animation을 사용해보자

설치

npm install react-type-animation

사용

//components/IndexProfile.tsx

import { TypeAnimation } from 'react-type-animation';

const IndexProfile = () => {
  return (
    <TypeAnimation
      sequence={['안녕하세요! 김영진입니다.', 1000, '', 500]}
      speed={10}
      repeat={Infinity}
      wrapper="h1"
      className="text-xl sm:text-3xl font-bold" //tailwind css
    />
  );
};

sequence: string과 number를 사용한 배열의 형태이다. string이 타이핑 되고 number동안 유지된다.

[
  '안녕하세요! 김영진입니다.', //처음 타이핑 되는 텍스트
  1000, //1초 동안 텍스트가 유지됨
  '', //처음 타이핑 되는 텍스트가 지워지고 타이핑 되는 텍스트
  500, //0.5초 동안 텍스트가 유지됨
];

speed: 타이핑 애니메이션의 속도. 낮을수록 느리다. 기본값은 40
repeat: 반복 횟수이다. Infinity 값을 주면 계속 loop한다. 기본값은 0
wrapper: html 태그로 감쌀 수 있다. 나는 h1으로 감싸는걸 선택했다. 기본값은 div 태그.

결과

참고사이트

react-type-animation

꽃가루 효과

미모티콘을 넣었는데 귀엽긴 하지만 하나가 아쉬웠다. 블로그 메인 페이지에 들어왔을때 혹은 클릭했을때 꽃가루가 터지는 효과를 넣고싶었다.

react-rewards를 사용해보자

처음에 애니메이션 효과의 이름을 정확하게 몰라서 검색하는게 약간 애를 먹었다. fireworks 같은 키워드로 검색하다가 운좋게 confetti라는 키워드를 얻어냈다. 그러다가 react-rewards를 발견했는데 다른 라이브러리가 화면 전체에 꽃가루가 흩날리는 느낌이라면 이 라이브러리는 내가 생각하던 폭죽이 발사되는 느낌으로 제작되어있었다.

설치

npm install react-rewards

사용

//components/IndexProfile.tsx

import { useReward } from 'react-rewards';

const IndexProfile = () => {
  const { reward, isAnimating } = useReward('rewardId', 'confetti', {
    angle: 200, //꽃가루가 터질때 각도
    position: 'absolute', //css position 설정 ('fixed'|'absolute')
    startVelocity: 20, //꽃가루가 터지기 시작하는 속도
    spread: 90, //꽃가루가 뿌려지는 각도
    elementCount: 80, //꽃가루 갯수
    lifetime: 150, //꽃가루 애니메이션되는 시간
  });

  //메인 페이지 첫 로딩시에도 꽃가루 효과를 내기 위해 useEffect를 사용하였다.
  useEffect(() => {
    reward();
  }, []);

  return (
    <div
      className="relative h-[120px] sm:h-[180px] cursor-pointer"
      onClick={isAnimating ? undefined : reward} //연속 클릭 방지를 위해 애니메이션 중일땐 클릭을 막아놨다.
    >
      <Image src="/images/mimoji.png" fill alt="mimoji" />
      <div className="absolute top-[100px] left-[-20px]">
        {/* 위에서 설정한 id를 span태그의 id로 넣어준다. */}
        <span id="rewardId" />
      </div>
    </div>
  );
};

useReward를 import하고 인자에 차례대로 id, 넣을 효과, 옵션을 넣어주면 된다.
실행함수인 reward()와 애니메이션 진행 상태를 boolean값으로 전달해주는 isAnimating을 비구조화 할당하여 사용하면 된다.

결과

참고 사이트

react-rewards

블로그에 동적인 요소로 활기 불어넣기