사용자 정의 애니메이션으로 별이 반짝✨배경 만들기 (tailwindCSS)

 

box-shadow로 주변을 밝혔다 어둡게 했다 반복하는 것으로 반짝이는 것처럼 연출한 방식을 보고 참고해서 작성했다.

 

클래스명으로 사용할 배열로 각각 별의 사이즈, 투명도, **애니메이션** (아래에서 내가 정의해서 사용할 것, 이 클래스명에서 이슈가 있었다.... 하단에서 설명할 것)을 선언하고

getRandomValue 함수로 별이 뿌려질 랜덤한 갯수를 리턴했다. 

 

페이지의 기본 배경으로 사용할 예정이었기에 사용자가 쓰는 브라우저 창의 크기를 기준으로 별을 뿌려주려고 했는데, window를 참조하려고 하니 window is not defined 에러가 떴다. 찾아보니 nextjs가 ssr로 서버에서 먼저  HTML을 그려놓는데 클라이언트가 window에 접근하기 전에 그려지기 때문에 참조 에러가 나오는 것 !!

 

 

해결 방법을 찾아보니

1) 타입 분기처리를 해주거나,  2) useEffect를 사용하거나, 아니면 다음처럼 3) ssr을 비활성화시키는 옵션이 있었다. 

// ssr 비활성화
'use client'
 
import dynamic from 'next/dynamic'
 
const DynamicHeader = dynamic(() => import('../components/header'), {
  ssr: false,
})

 

 

그 중에 나는 useEffect로 작성하면서 내부에 타입 분기 처리해주는 방식으로 2중 처리했다.

useEffect를 사용해서 내부에 작성하면 브라우저가 렌더링되는 시점에 코드를 실행시키기 때문에 ssr 환경이어도 작동이 된다.

 

 

최종으로 작성한 배경 컴포넌트

"use client";
import { useState, useEffect } from "react";

export default function StarrySky() {
  const [stars, setStars] = useState([]);
  const style = ["w-[1px] h-[1px]", "w-[1.5px] h-[1.5px]", "w-[2px] h-[2px]"];
  const opacity = ["opacity-50", "opacity-100", "opacity-10", "opacity-50", "opacity-10"];
  const twinkle = ["animate-twinkle1", "animate-twinkle2", "animate-twinkle3", "animate-twinkle4"];

  const getRandomValue = (maxNum) => {
    return Math.floor(Math.random() * maxNum);
  };

  const maxNum = 300; // maxNum 임의로 넣었는데 변경 가능
  
// ** useEffect => nextjs의 window 객체 참조 오류!! 관련해서 window 사용하기 위해 useEffect로 묶고 그 안에서 사용
  useEffect(() => {
      if (typeof window !== "undefined") {
        const browserWidth = window.screen.width;
        const browserHeight = window.screen.height;
        let starArr = [];
        for (let i = 0; i < maxNum; i++) {
          const x = getRandomValue(browserWidth);
          const y = getRandomValue(browserHeight);
          const starSize = style[getRandomValue(style.length)];
          const starOpacity = opacity[getRandomValue(opacity.length)];
          const starTwinkle = twinkle[getRandomValue(twinkle.length)];

          starArr.push({
            id: i,
            x,
            y,
            starSize,
            starOpacity,
            starTwinkle,
          });
        }
        setStars(starArr);
      }
    },
    []);
  return (
    <div className="absolute inset-0 overflow-hidden">
      {stars.map((star) => (
        <div
          key={star.id}
          className={`absolute rounded-full bg-white ${star.starSize} ${star.starOpacity} ${star.starTwinkle}`}
          style={{ left: star.x, top: star.y }}
        ></div>
      ))}
    </div>
  );
}

 

 

그리고 사용자 정의 애니메이션을 작성하기 위해서 tailwind.config.js 파일에 다음과 같은 옵션을 추가했다. 

 

// tailwind.config.js 
module.exports = {
  theme: {
    extend: {
      animation: {
        twinkle1: "twinkling 0.5s infinite",
        twinkle2: "twinkling 1.1s infinite",
        twinkle3: "twinkling 1.3s infinite",
        twinkle4: "twinklingWithoutBoxShadow 3s infinite",
      },
      keyframes: {
        twinkling: {
          "0%, 100%": {
            boxShadow: "0 0 10px 0px rgba(255, 255, 255, 0.1)",
          },
          "50%": {
            boxShadow: "0 0 10px 2px rgba(255, 255, 255, 0.6)",
          },
        },
        twinklingWithoutBoxShadow: {
          "0%": {
            backgroundColor: "#ffffff",
            boxShadow: "0 0 10px 0px rgba(255, 255, 255, 1)",
          },
          "20%": {
            backgroundColor: "#ffc4c4",
            boxShadow: "0 0 10px 0px rgba(255, 196, 196, 1)",
          },
          "80%": {
            backgroundColor: "#c4cfff",
            boxShadow: "0 0 10px 0px rgba(196, 207, 255, 1)",
          },
          "100%": {
            backgroundColor: "#ffffff",
            boxShadow: "0 0 10px 0px rgba(255, 255, 255, 0.2)",
          },
        },
      },
    },
  },
  plugins: [],
};

 

 

animation에는 keyframes에 작성할 애니메이션 이름을 적어주고, css에서 속성을 사용하는 것처럼 작성하면 된다. 그리고 keyframes에는 애니메이션의 이름과 효과를 넣어준다. 위처럼 0%, 50%, 100%로 퍼센티지로 나눠서 작성할 수도 있는데 그라데이션 구현했을 때처럼 from, to로 써도 되는 것 같다.

 

rgb와 rgba의 차이도 이번에 배웠다. 투명도를 줄거면 a를 붙여야함~!!! rgb + alpha(투명도)인 것이다

alpha 값은 0~1까지의 값을 가지고, 0에 가까울 수록 투명하다. 

 

 

여기까지 작성했으면 잘 될 것이라고 예상하고 dev 서버를 실행시켰는데 boxShadow 효과가 예상처럼 실행이 되지 않았다.

// 처음에 동작 안 되던 코드
  const twinkle = ["twinkle1", "twinkle2", "twinkle3", "twinkle4"];

// 고치고 동작되는 코드
  const twinkle = ["animate-twinkle1", "animate-twinkle2", "animate-twinkle3", "animate-twinkle4"];

 

animation에서 작성한 그대로 컴포넌트에 클래스명으로 사용하면 동작이 안된다 !!!

반드시 'animation-' 을 접두사로 붙여서 컴포넌트에 클래스명으로 사용해야 사용자가 정의한 애니메이션이 동작된다. (ㅠ.,ㅠ)

 

이렇게 하고 root의 layout 파일에 넣어주면 모든 페이지에 적용이 된다.

참고로 배경의 그라데이션 컬러는 globals.css > body > background에 컬러를 지정해줬다.

 

 

---

 

트러블 슈팅 !!

위처럼 백그라운드를 만들어주고 다른 기능 개발을 하려고 임시로 버튼을 만들었는데, 버튼 클릭 이벤트조차 되지 않았다.

뭐가 문제인지 몰랐었는데 여기서 해결했다.

export default async function RootLayout({ children }) {
  const session = await getServerSession();

  return (
    <html lang="en">
      <body className={inter.className}>
        <Providers session={session}>
           <StarrySky /> // 여기가 맞는 위치
          {children}
         // <StarrySky /> 문제가 생긴 이유. 
        </Providers>
      </body>
    </html>
  );
}

 

우선순위에 밀려서 다른 녀석들이 깔린 거 였다 !!! (ㅜ.,ㅜ) 전역으로 설정해주려면 {children}의 상단에 있어야 한다..