CSS 애니메이션(ANIMATION) 활용하여 간단하지만 포인트있는 인터렉티브 웹사이트 구현
이번 포스팅에서는 CSS 애니메이션(ANIMATION) 활용하여 SVG 아이콘에 인터렉션 효과를 부여하는 방법을 예제 소스와 함께 알아봅시다.
간단한 아이콘이라도 사용자와 상호작용을 하여 모션 반응이 일어나면 사용자의 웹사이트에 체류시간을 늘리고 흥미를 유발하는 효과를 기대할 수 있습니다.
이번 튜토리얼에서는 몇 가지 간단한 단계만으로 멋진 인터랙티브한 SVG 아이콘을 만들어보겠습니다.
먼저 사용할 SVG 코드를 HTML 페이지에 불러옵니다.
SVG 코드를 불러오는 방법은 이전 포스팅을 참고해주세요(바로가기)
<div id="gift-box">
<svg viewBox="0 0 24 24">
<path id="gift-top" class="st1" d="M12.1,7c-0.4-1.5-1-2.8-1.8-3.7S8.6,2,7.6,2C7,2,6.3,2.3,5.9,2.7C5.4,3.2,5.1,3.8,5.1,4.5 c0,0.7,0.3,1.3,0.7,1.8C6.3,6.7,7,7,7.6,7H12.1z M12.1,7c0.4-1.5,1-2.8,1.8-3.7S15.7,2,16.6,2c0.7,0,1.3,0.3,1.8,0.7 c0.5,0.5,0.7,1.1,0.7,1.8c0,0.7-0.3,1.3-0.7,1.8C17.9,6.7,17.3,7,16.6,7H12.1z"></path>
<path id="gift-middle" class="st1" d="M21,11v8.6c0,0.6-0.3,1.3-0.8,1.7c-0.5,0.5-1.1,0.7-1.8,0.7H5.6c-0.7,0-1.3-0.3-1.8-0.7C3.3,20.8,3,20.2,3,19.6 V11 M12,11v11 M21,11H3"></path>
<path id="gift-bottom" class="st1" d="M21.9,7H2.4C1.7,7,1.1,7.4,1.1,8v2c0,0.6,0.5,1,1.2,1h19.6c0.7,0,1.2-0.4,1.2-1V8C23.1,7.4,22.6,7,21.9,7z M12.1,7v4"></path>
</svg>
</div>기본적인 위치와 예제소스를 편하게 보기위해 “#gift-box” 속성을 부여합니다.
각 “path” 태그에 각각의 id 속성값을 주어 애니메이션을 적용할수있게 세팅합니다.
“.st1” 클래스는 패스태그에 대한 공통스타일을 정의하기 위해 동일하게 부여한 클래스입니다.
CSS 속성 부여하기
* {
margin: 0;
padding: 0;
font-size: 0;
}
body {
position: relative;
width: 100%;
height: 100vh;
background: #e8ebf3;
}
#gift-box {
width: 250px;
height: 250px;
display: flex;
background: #fff;
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
align-items: center;
justify-content: center;
box-shadow: 2px 2px 2px #91919173;
}
svg {
width: 50px;
overflow: initial;
}
.st1 {
fill: #fff;
stroke: #2c2e42;
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
transition: 0.2s all cubic-bezier(0.19, 0.65, 0.22, 0.79);
transform-origin: center;
}
#gift-box:hover #gift-top {
animation: Gift-t 1.2s ease-out forwards;
}
#gift-box:hover #gift-bottom {
animation: Gift-t 1s ease-out forwards;
}
@keyframes Gift-t {
0% {
transform: translate(0, 0) rotate(0deg);
}
20% {
transform: translate(0, -10%) rotate(10deg);
}
40% {
transform: translate(0, 0) rotate(-7deg);
}
60% {
transform: translate(0, 0) rotate(5deg);
}
80% {
transform: translate(0, 0) rotate(-2deg);
}
100% {
transform: translate(0, 0) rotate(0deg);
}
}
“*”, *body”, “gift-box”는 예제를 보기 편하기 위해 부여한 속성이므로 원하는 대로 변경하시면 됩니다.
먼저 “SVG” 요소에 아이콘 사이즈를 지정 후 CSS 애니메이션(ANIMATION)이 작동할 때 해당 구역을 벗어날 수 있기에 “overflow: initial;” 속성을 부여해 줍니다.
“.st1″에 패스 태그에 공통적인 속성(배경, 선 굵기, 신색상 등)을 부여하고 키 프레임(keyframes) 을 사용하여 구현할 모션을 정의해 줍니다.
이제 각각의 태그에 애니메이션 속성을 부여한 후 “gift-box” 태그에 마우스 오버(:HOVER)를 할 경우 애니메이션이 시작되게 설정합니다.
결과보기(풀페이지)
이번 튜토리얼에서는 CSS 애니메이션으로 인터렉티브한 SVG 아이콘을 만드는 방법을 알아보았습니다. 작은 아이콘 하나라도 사용자와의 상호작용을 도입함으로써 웹사이트에 흥미를 불러일으킬 수 있고, 사용자들이 웹사이트에 더 오래 머무르게 할 수 있습니다.
애니메이션과 상호작용은 사용자 경험을 개선하고 웹사이트의 시각적 매력을 높이는 강력한 도구입니다. 이러한 기술은 웹 개발자들이 사용자들과 더 가까이 소통하고 사용자들이 웹사이트와 상호작용하는 데 흥미롭고 재미있는 경험을 제공할 수 있도록 도와줍니다.
더 나아가서, 본 예제에서 사용한 간단한 애니메이션을 응용하여 더 복잡하고 창의적인 인터랙션 효과를 구현하는 것도 가능합니다. 여러분들의 상상력과 창의성을 발휘하여 독특하고 매력적인 인터랙티브한 SVG 아이콘을 만들어보시기 바랍니다.
이러한 인터렉티브한 디자인은 웹사이트의 사용자 경험을 향상시키는 데 큰 영향을 미칩니다. 따라서 웹 개발에는 사용자의 관심을 끌고 흥미를 유발할 수 있는 디자인과 기능을 적용하는 것이 중요합니다. 다양한 애니메이션과 상호작용 기술을 익히고, 적재적소에 활용하는 능력을 키우시길 바랍니다.