웹 애니메이션을 위한 주니어 개발자를 위한 기초 가이드 🌐

웹 애니메이션은 사용자 경험을 향상시키고, 웹사이트를 더욱 돋보이게 만들어주는 강력한 도구입니다. 이 가이드에서는 웹 애니메이션의 기본과 간단한 기술을 소개하겠습니다. 복잡한 용어는 피하고, 실제 코드 예제를 통해 쉽게 따라 할 수 있도록 할게요!

CSS 애니메이션

CSS 애니메이션은 가장 기본적인 웹 애니메이션 기술 중 하나입니다. HTML 요소에 애니메이션 효과를 주기 위해 CSS 속성을 사용합니다.

예제: 버튼에 호버 애니메이션 추가하기

.button {
  background-color: #4CAF50;
  transition: background-color 0.5s ease;
}

.button:hover {
  background-color: #45a049;
}

위 코드는 버튼에 마우스를 올렸을 때 배경색이 부드럽게 변경되는 애니메이션을 만듭니다. transition 속성을 사용하여 애니메이션의 지속 시간과 타이밍 함수를 정의할 수 있습니다.

JavaScript를 사용한 애니메이션

JavaScript를 사용하면 더 복잡하고 상호작용적인 애니메이션을 만들 수 있습니다.

예제: 요소를 서서히 나타나게 하기

function fadeIn(element) {
  let op = 0.1;  // 시작 투명도
  let timer = setInterval(function () {
    if (op >= 1){
      clearInterval(timer);
    }
    element.style.opacity = op;
    op += op * 0.1;
  }, 10);
}

// 사용 예:
fadeIn(document.getElementById('myElement'));

이 코드는 특정 요소를 점점 더 불투명하게 만들어, 서서히 나타나게 하는 함수입니다. setInterval을 사용하여 일정 시간 간격으로 요소의 투명도를 조절합니다.

SVG 애니메이션

SVG(Scalable Vector Graphics)는 웹에서 벡터 이미지를 다루는 데 사용됩니다. SVG 요소에 애니메이션을 추가하는 것도 가능합니다.

예제: SVG 원을 애니메이션으로 움직이게 하기

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red">
    <animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

이 예제에서는 <animate> 태그를 사용하여 SVG 내의 원이 좌우로 움직이는 애니메이션을 만들었습니다. attributeName 속성으로 애니메이션을 적용할 속성을 지정하고, from과 to로 시작과 끝 위치를, dur로 지속 시간을 정의합니다.

웹 애니메이션은 사용자의 관심을 끌고, 정보를 효과적으로 전달하는 데 도움을 줄 수 있습니다. 이 가이드를 통해 기본적인 웹 애니메이션 기술을 배우고, 여러분의 웹사이트에 적용해보세요!