팀 프로젝트를 시작하면서 Family Controls API를 신청하는 과정에서 우리 팀이 제작하려는 앱의 웹사이트 링크를 요구받았다. 그런데 이제 막 시작한 프로젝트에서 웹 사이트는 당연히 없지 않은가. 어떻게 할 지 고민하다가, 4시간 정도면 충분히 배포까지 진행이 가능할 것 같아서 직접 진행하려고 했다. 하지만 튜터님이 노션으로 간단히 처리하라고 조언해주셔서 그렇게 했지만, 뭔가 아쉬움이 남았다. 그래서 직접 만들어보기로 결정했다.

프로젝트 진행 과정

🌟 기술 스택 선택

CRA는 사장됐으므로 Vite를 사용해 React와 TypeScript로 프로젝트를 빌드해 진행했다. 패키지 매니저로는 pnpm을 사용했다. 초기에는 Swiper 라이브러리를 사용해 화면을 슬라이더로 구현하려고 했으나, 최종적으로는 페이지 라우터로 구현하게 됐다.

🌟 구조 설계

React, React-Dom, React-Router-Dom, Styled-Components를 사용하여 간단하게 구조를 잡았다. iOS를 하면서 MVC와 MVVM 패턴을 사용했던 터라, 오랜만에 FE 구조를 나누다보니 매우 어색했다. 작은 규모의 프로젝트라 컴포넌트를 많이 세분화하지는 않았고, 페이지별로 나누고 개발 진행을 했다. 메인 페이지는 하단에 앱 목업을 추가할 가능성이 있어 별도로 섹션 컴포넌트를 나누었다.

🌟 디자인 요소

프로젝트 컨셉이 STAR인 만큼 밤하늘의 별과 유성 효과를 넣고 싶어서 이를 구현했다.

MeteorEffect.tsx 컴포넌트

유성 혹은 별똥별 효과를 생성하는 컴포넌트다. 주요 기능은 별똥별처럼 화면을 가로지르는 요소들을 랜덤한 속도, 크기, 색상으로 생성해 애니메이션 효과를 주는 것이다.

import { useEffect, useState } from "react";
import styled, { createGlobalStyle, keyframes } from "styled-components";

// MeteorEffect 컴포넌트의 Props 타입 정의
interface MeteorEffectProps {
  count?: number; // 유성 개수
  maxDelay?: number; // 애니메이션 시작 전 최대 지연 시간
  minSpeed?: number; // 유성의 최소 속도
  maxSpeed?: number; // 유성의 최대 속도
  angle?: number; // 유성이 떨어지는 각도
  direction?: "left" | "right"; // 유성의 떨어지는 방향
}

const MAX_STAR_COUNT = 50; // 유성 개수의 최대값
const colors = ["#c77eff", "#f6ff7e", "#ff8d7e", "#ffffff"]; // 유성의 색상 배열

const MeteorEffect = ({
  count = 12, // 기본 유성 개수
  maxDelay = 15, // 기본 최대 지연 시간
  minSpeed = 2, // 기본 최소 속도
  maxSpeed = 4, // 기본 최대 속도
  angle = 30, // 기본 각도
  direction = "right", // 기본 방향
}: MeteorEffectProps) => {
  // 유성 개수 제한
  const starCount = count < MAX_STAR_COUNT ? count : MAX_STAR_COUNT;

  // 유성 간 간격 저장
  const [starInterval, setStarInterval] = useState<number>(0);

  // 창 크기 변화에 따라 유성 간 간격(starInterval)을 동적으로 계산
  useEffect(() => {
    const calcStarInterval = () => {
      const innerWidth = window.innerWidth;
      setStarInterval(Math.floor((innerWidth * 1.5) / (count * 5)));
    };

    calcStarInterval(); // 초기 계산
    window.addEventListener("resize", calcStarInterval); // 창 크기 변경 이벤트 등록
    return () => {
      window.removeEventListener("resize", calcStarInterval); // 이벤트 해제
    };
  }, [count]);

  return (
    <Wrapper> {/* 유성 효과 전체를 감싸는 래퍼 */}
      <GlobalMeteorStyle $direction={direction} $angle={angle} /> {/* 전역 스타일 적용 */}
      {new Array(starCount).fill(0).map((_, idx) => {
        // 유성의 위치, 애니메이션 속성, 색상 등을 랜덤으로 설정
        const left =
          direction === "left"
            ? `${Math.random() * count * 5 * starInterval}px`
            : `${window.innerHeight - Math.random() * count * 5 * starInterval}px`;
        const animationDelay = `${Math.random() * maxDelay}s`; // 지연 시간
        const animationDuration =
          maxSpeed > minSpeed
            ? `${minSpeed + Math.random() * (maxSpeed - minSpeed)}s`
            : `${2 + Math.random() * 4}s`; // 애니메이션 지속 시간
        const colorIndex = Math.floor(Math.random() * colors.length); // 색상 선택
        const size = `${2 + Math.floor(Math.random() * 5)}px`; // 유성 크기
        const boxShadow = `0px 0px 10px 3px ${colors[colorIndex]}`; // 유성 발광 효과
        return (
          <div
            key={idx}
            style={{ left, animationDelay, animationDuration, boxShadow, width: size, height: size }}
            className="star" // 유성 스타일 지정
          ></div>
        );
      })}
    </Wrapper>
  );
};

// 유성이 떨어지는 애니메이션 정의
const MeteorKeyframe = (direction: "left" | "right", angle: number) => keyframes`
  0% {
    top: -10vh; /* 화면 상단 밖에서 시작 */
    transform: translateX(0px); /* 초기 위치 */
    opacity: 1; /* 초기 불투명도 */
  }
  100% {
    top: 110vh; /* 화면 하단 밖으로 이동 */
    transform: translateX(${direction === "left" ? "-" : "+"}${120 / Math.tan((angle * Math.PI) / 180)}vh);
    opacity: 1; /* 불투명도 유지 */
  }
`;

// 전역 스타일 정의를 위한 Props 타입
interface GlobalMeteorProps {
  $direction: "left" | "right";
  $angle: number;
}

// 유성의 전역 스타일 정의
const GlobalMeteorStyle = createGlobalStyle<GlobalMeteorProps>`
  .star {
    position: absolute;
    top: -10%; /* 화면 위쪽에서 시작 */
    left: 50%; /* 화면 중앙 기준 */
    width: 4px; /* 기본 크기 */
    height: 4px; /* 기본 크기 */
    border-radius: 50%; /* 원형 */
    background-color: white; /* 흰색 기본 색상 */
    animation: ${(props) => MeteorKeyframe(props.$direction, props.$angle)} 4s ease-in infinite; /* 애니메이션 적용 */
    opacity: 0; /* 초기 불투명도 */
  }
  .star::after {
    position: absolute;
    top: calc(50% - 1px); /* 중심축 설정 */
    left: -950%; /* 꼬리 길이 */
    width: 2000%; /* 꼬리 너비 */
    height: 2px; /* 꼬리 두께 */
    background: linear-gradient(to left, #fff0, #ffffff); /* 꼬리의 그라데이션 */
    content: ""; /* 가상 요소 */
    transform: ${(props) =>
      props.$direction === "left"
        ? `rotateZ(-${props.$angle}deg)`
        : `rotateZ(-${180 - props.$angle}deg)`} translateX(50%); /* 회전과 위치 조정 */
  }
`;

// 유성 효과를 감싸는 Wrapper
const Wrapper = styled.div`
  position: fixed; /* 화면 고정 */
  top: 0;
  left: 0;
  width: 100%; /* 전체 화면 너비 */
  height: 100%; /* 전체 화면 높이 */
  z-index: -10; /* 배경에 위치 */
  pointer-events: none; /* 상호작용 비활성화 */
`;

export default MeteorEffect;

주요 매개변수

1. count: 유성의 개수를 결정
2. maxDelay: 애니메이션이 시작되기 전 지연 시간을 랜덤하게 지정
3. minSpeed, maxSpeed: 유성의 최소/최대 속도를 설정
4. angle: 유성이 떨어지는 각도 (기본값: 30).
5. direction: 유성이 떨어지는 방향을 설정 ("left" 또는 "right")

---

스타일과 동작

1. useEffect
   • 창 크기를 기반으로 유성 간 간격(starInterval)을 동적으로 계산하여 반응형 효과 만든다.
   • 창 크기 변경 시 간격을 재조정한다.
2. MeteorKeyframe
   • 유성이 화면을 가로지르는 애니메이션을 정의하는 keyframes
   • angle과 direction을 사용하여 유성의 이동 경로를 계산
3. GlobalMeteorStyle
   • 유성의 스타일과 애니메이션을 적용
   • 각 유성은 box-shadow로 빛나는 효과를 표현, ::after로 긴 꼬리 효과를 추가
4. Wrapper
   • 유성 효과의 전체 영역을 감싸는 div, 포인터 이벤트를 비활성화(pointer-events: none;)하여 인터페이스에 영향을 주지 않는다.

---

랜덤한 유성 생성

• 유성은 count 값에 따라 개수가 결정되며, Math.random()을 사용해 다음을 랜덤하게 설정한다.
  • 위치 (left): 방향에 따라 시작 위치가 다름.
  • 지연 시간 (animationDelay): 유성이 나타나는 간격.
  • 애니메이션 시간 (animationDuration): 속도.
  • 크기와 색상 (size, boxShadow): 유성의 크기와 빛깔.

---

결과

• 화면에 반응형 유성 효과를 추가하여 동적인 시각적 경험을 제공
• 유성의 방향과 속도, 개수 등을 매개변수로 쉽게 조정 가능하므로 다양한 디자인 요구에 유연하게 대응할 수 있다.

StarryNight.tsx 컴포넌트

별 효과를 위한 StarryNight 컴포넌트도 구현했다. 이 컴포넌트는 반응형으로 창 크기에 따라 별 개수를 조정한다.

import { useEffect, useState } from "react";
import styled, { keyframes } from "styled-components";

const StarryNight = () => {
  const [stars, setStars] = useState<JSX.Element[]>([]);

  // 별을 생성하여 화면에 렌더링
  const makeStars = () => {
    const maxSize = Math.max(window.innerWidth, window.innerHeight); // 화면 크기 계산
    const starCount = Math.floor(maxSize / 2); // 별 개수 결정

    const getRandomX = () => Math.random() * maxSize; // 랜덤 x좌표 생성
    const getRandomY = () => Math.random() * maxSize; // 랜덤 y좌표 생성
    const randomRadius = () => Math.random() * 0.7 + 0.6; // 별 반지름 랜덤 설정

    const newStars = Array.from({ length: starCount }, (_, index) => (
      <Star key={index} cx={getRandomX()} cy={getRandomY()} r={randomRadius()} />
    ));

    setStars(newStars);
  };

  useEffect(() => {
    makeStars();

    const handleResize = () => {
      makeStars();
    };

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  return (
    <BackSky>
      <Sky>{stars}</Sky>
    </BackSky>
  );
};

// 별 하늘 회전 애니메이션 정의
const moveStar = keyframes`
  from {
    transform: translate(-50%, -50%) rotate(0);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
`;

const BackSky = styled.div`
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
`;

const Sky = styled.svg`
  width: 100vw;
  height: 100vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ${moveStar} 480s linear infinite;
`;

const Star = styled.circle`
  fill: #fff;
`;

export default StarryNight;

핵심 기능

1. 별 생성 (makeStars)
   • 화면의 크기를 기준으로 별의 개수를 계산하며, 랜덤한 좌표와 크기를 가진 별을 생성
   • 각각의 별은 SVG의 <circle> 요소로 구현
2. 반응형 지원
   • window의 resize 이벤트를 감지하여 화면 크기가 변할 때 별들을 다시 생성
   • 이를 통해 다양한 화면 크기에서도 별이 올바르게 표시
3. 별 회전 애니메이션
   • 별 하늘 전체를 천천히 회전시키는 애니메이션을 정의. (moveStar)

---

makeStars

별들을 생성하고 useState를 통해 상태로 관리한다. 랜덤한 좌표와 크기를 가지는 별들로 이루어진 배열을 생성한다.

const makeStars = () => {
  const maxSize = Math.max(window.innerWidth, window.innerHeight); // 가장 큰 화면 크기 계산
  const starCount = Math.floor(maxSize / 2); // 별의 개수는 화면 크기 기반으로 결정

  const getRandomX = () => Math.random() * maxSize; // 랜덤 X 좌표
  const getRandomY = () => Math.random() * maxSize; // 랜덤 Y 좌표
  const randomRadius = () => Math.random() * 0.7 + 0.6; // 랜덤 반지름

  const newStars = Array.from({ length: starCount }, (_, index) => (
    <Star key={index} cx={getRandomX()} cy={getRandomY()} r={randomRadius()} />
  ));

  setStars(newStars); // 상태 업데이트
};

---

useEffect

useEffect는 컴포넌트가 처음 렌더링될 때 별을 생성하며, resize 이벤트를 등록하여 화면 크기가 변경될 때도 별을 다시 생성하도록 함.

useEffect(() => {
  makeStars();

  const handleResize = () => {
    makeStars(); // 화면 크기가 변경될 때 별 다시 생성
  };

  window.addEventListener("resize", handleResize); // 이벤트 등록

  return () => {
    window.removeEventListener("resize", handleResize); // 이벤트 해제
  };
}, []);

---

스타일과 애니메이션

• BackSky: 별 효과가 배경으로 동작하도록 하는 div. 전체 화면을 덮고 다른 콘텐츠에 영향을 주지 않도록 설정
• Sky: 별들이 회전 애니메이션과 함께 렌더링되는 SVG 요소. transform 속성을 사용하여 중앙 기준 회전 효과를 적용
• Star: 개별 별을 나타내는 <circle>로, 흰색으로 렌더링됨

---

애니메이션 정의

moveStar는 하늘 전체가 회전하는 효과를 만든다. 애니메이션 속도는 480초로 설정하여 매우 천천히 움직이도록 한다.

const moveStar = keyframes`
  from {
    transform: translate(-50%, -50%) rotate(0); // 초기 상태
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg); // 한 바퀴 회전
  }
`;

---

🌟 전체 구조

App.tsx에서 MeteorEffect와 StarryNight를 조합하여 메인 페이지를 구성했다.

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Header from "./components/layout/Header";
import Home from "./pages/Home";
import Vision from "./pages/Vision";
import Feature from "./pages/Feature";
import Team from "./pages/Team";
import Footer from "./components/layout/Footer";
import { ThemeProvider } from "styled-components";
import GlobalStyle from "./styles/GlobalStyle";
import StarryNight from "./components/common/StarryNight";
import MeteorEffect from "./components/common/MeteorEffect";
import theme from "./styles/Theme";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <Router>
        <StarryNight />
        <MeteorEffect count={20} angle={45} direction="right" />
        <Header />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/vision" element={<Vision />} />
          <Route path="/feature" element={<Feature />} />
          <Route path="/team" element={<Team />} />
        </Routes>
        <Footer />
      </Router>
    </ThemeProvider>
  );
}

export default App;

전체 구조에 스타일드 컴포넌트를 사용할 수 있도록 ThemeProvider와 GlobalStyle을 적용해주고 디자인 요소를 import한 뒤 Header와 Footer가 항상 보일 수 있도록 그 사이에 페이지 Routes로 구성한 것을 알 수 있다.

🌟 완성

STAR 웹사이트

랜덤으로 떨어지는 예쁜 유성들과, 천천히 돌아가는 밤하늘이 아름다운 S T A R의 웹 사이트가 완성됐다.

이 프로젝트는 간단히 만들었지만, 실제 배포에 필요한 수준으로 제작했다. 특히, 제로베이스에서 시작해 디자인 요소와 효과에 집중해 프로젝트의 컨셉을 시각적으로 잘 전달할 수 있도록 노력했다. API 승인 받고 얼른 앱까지 구현 해내고 싶다.

유성 배경효과를 만들어 보기
[JS] 밤하늘의 별 배경 만들기