CSS로 물결이 차오르는 애니메이션 구현하기(react, tailwindCSS)

서비스 UI 구현을 이제 막 시작했습니다. 이전에 프로젝트에선 기한에 맞춰 프로젝트를 정신없이 진행 하느라 디테일한 부분들을 많이 놓쳤던 것 같습니다. 그 중 하나가 서비스가 더 역동적이고 자연스러워지는 애니메이션 기능이었습니다.

첫 로딩 페이지의 로고가 뜨기 전에 물결이 차오르면서 로고가 서서히 뜨도록 CSS만 사용하여 구현해보았습니다.

완성된 화면

원리

핵심 원리는 로고를 바탕으로 하얀색 도형을 여러개 돌리는 것입니다.

이런 식으로 원, 각이 둥근 사각형, 좀 더 둥근 사각형 세개를 적당한 곳에 배치하여 돌리면서 위로 올라가는 식으로 구현하였습니다.

그리고 주황색 원 안에 로고가 천천히 나타나도록 하여 완성도를 높였습니다.

부드러운 물결처럼 보이려고 도형을 하나부터 둘, 셋, 넷 계속해서 추가해보고 크기도 조절해보니 괜찮은 느낌이 나왔습니다.

구현 방법

react와 tailwindCSS를 사용하여 구현하였습니다.

tailwindCSS은 아래와 같습니다.

// tailwind.config.js

theme: {
	extend: {
		animation: {
			'spin-slow': 'spin-custom 2s linear infinite',
			'appear-slow': 'appear-slow 2.5s ease-in-out',
		}
		
		keyframes: {
			'spin-custom': {
				from: { transform: 'rotate(0deg)' },
				to: { transform: 'rotate(270deg)' },
			},
			'appear-slow': {
				from: { opacity: 0 },
				to: { opacity: 1 },
			},
		},
	},
}

tailwindCSS에서 기본으로 제공해주는 애니메이션이 있지만 상세하기 컨트롤하기 위해 커스텀으로 만들어 주었습니다.

구현된 코드는 아래와 같습니다.

// Loading.tsx

const Loading = () => {
  const [disappear, setDisappearLogo] = useState(false);
  // 물결을 담당하는 도형들이 일정 높이에서 사라지게 하기 위한 상태 입니다.

  useEffect(() => {
    setTimeout(() => {
      setDisappearLogo(true);
    }, 2200);
    // setTimeout으로 2.2초 뒤에 도형들이 사라지게 하였습니다.

    setTimeout(() => {
      navigate('/login');
    }, 2500);
  }, []);

  return (
    <div className="flex items-center justify-center w-full h-full">
      <LodingAnimationLogo disappear={disappear} />
    </div>
  );
};


// LodingAnimationLogo.tsx

const LodingAnimationLogo = ({ disappear }) => {
  return (
    <div className="flex items-center justify-center bg-orange-100 rounded-full w-44 h-44">
    // 바탕이 되는 주황색 원 입니다.
    
      {disappear ? null : (
        <div className="relative -left-[4rem] top-28 animate-move-top">
          <div className="absolute bg-white -left-8 rounded-[35%] rotate-[45deg] w-60 h-60 bottom-12 animate-spin-slow" />
          <div className="absolute bg-white left-[5rem] rounded-[35%] rotate-[45deg] w-40 h-40 bottom-12 animate-spin-slow" />
          <div className="absolute bg-white left-28 rounded-[45%] rotate-[45deg] w-36 h-36 bottom-11 animate-spin-slow" />
        </div>
      )}
		// 물결을 담당하는 도형입니다.
		// 도형들을 하나로 묶어 위로 올라가는 애니메이션을 구현하고,
		// 각각의 도형들은 계속해서 돌아갈 수 있도록 구현하였습니다.
		// 그리고 2.2초가 지나면 사라지게 하였습니다.

      <img src={innerLogo} className="mb-2 w-28 h-28 animate-appear-slow" />
      // 주황색 원 가운데 로고가 서서히 나타날 수 있도록 하였습니다.
    </div>
  );
};

이렇게 설정하면 구현이 되고, 주황색 원에 overflow-hidden 값을 주게 되면 원을 벗어나는 도형이 보이지 않아 좀 더 안정적으로 구현이 가능합니다.

서버와 통신하고, 클라이언트 성능을 개선하는 것도 중요하지만 사소하면서도 서비스의 완성도를 높이고 유저들에게 즐거움을 줄 수 있는 애니메이션을 구현하는 것도 프론트엔드 개발에 있어서 중요한 한 부분이 아닐까 생각해봅니다...