CSS Animation으로 만드는 반짝이는 로딩 아이콘 💫

웹 개발에 관심이 많은 주니어 개발자 여러분, 화면을 더욱 생동감 있게 만들어 줄 반짝이는 로딩 아이콘을 CSS Animation으로 만들어 보는 시간을 가져보겠습니다. 복잡한 코드 없이도 멋진 효과를 만들 수 있으니, 함께 따라해 보세요!

시작하기 전에

CSS Animation은 웹 페이지에 생동감을 더해주는 강력한 도구입니다. 단순히 요소를 움직이게 하는 것에서부터 복잡한 애니메이션 효과까지, CSS만으로도 많은 것을 할 수 있습니다. 오늘은 그 중에서도 사용자의 주목을 끌 수 있는 반짝이는 로딩 아이콘을 만들어 볼 거예요.

HTML 구조

먼저, 우리의 아이콘에 해당하는 HTML 요소를 만들어야 합니다. 아래의 코드를 사용하여 시작하세요.

<div class="loading-icon"></div>

이 간단한 div 요소가 우리의 로딩 아이콘의 기반이 됩니다.

CSS 스타일링

이제 loading-icon 클래스에 스타일을 적용하여 아이콘을 꾸며보겠습니다. 먼저 기본적인 모양부터 시작해요.

.loading-icon {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  border-radius: 50%;
  animation: spin 2s linear infinite, sparkle 1.5s linear infinite;
}

위 코드에서는 아이콘의 크기, 배경색, 그리고 원형 모양을 정의했습니다. 또한, animation 속성을 사용하여 두 가지 애니메이션 효과를 적용했어요: 하나는 spin이고 다른 하나는 sparkle입니다.

CSS 애니메이션 정의

이제 실제로 아이콘을 회전시키고 반짝이게 만들 애니메이션을 정의해야 합니다.

회전 애니메이션

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

spin 애니메이션은 아이콘을 무한히 회전시킵니다. 0도에서 시작하여 360도로 끝나게 함으로써, 완벽한 원을 그리며 회전하게 됩니다.

반짝임 애니메이션

@keyframes sparkle {
  0%, 100% {
    box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #3498db;
  }
  50% {
    box-shadow: 0 0 20px #fff, 0 0 30px #3498db, 0 0 40px #3498db;
  }
}

sparkle 애니메이션은 아이콘 주변에 반짝이는 효과를 만듭니다. box-shadow를 변화시키며, 아이콘이 빛나는 것처럼 보이게 합니다.

마무리

이제 반짝이는 로딩 아이콘을 만드는 데 필요한 모든 코드를 갖추었습니다. 이 코드를 사용하여 사용자의 주목을 끌 수 있는 멋진 로딩 화면을 만들어 보세요. CSS Animation은 웹 개발에서 정말 매력적인 요소를 추가할 수 있는 강력한 도구입니다. 실험을 두려워하지 말고, 여러분만의 독특한 애니메이션을 만들어 보세요!

이렇게 CSS Animation을 활용하여 간단하지만 효과적인 반짝이는 로딩 아이콘을 만드는 방법을 알아보았습니다. 웹 개발에 관심이 많은 주니어 개발자 여러분, 이 기술을 활용하여 여러분의 프로젝트를 더욱 돋보이게 만들어 보세요!