SVG는 Scalable Vector Graphics 로 2차원의 벡터 이미지를 표현하는 언어입니다.
마크업 언어를 기반으로 하고 있는데 그 중에서도 XML 의 문법을 이용하고 있습니다.
벡터 기반으로 이미지를 표현하기 때문에 이미지의 해상도나 크기가 바뀌어도 원본 그대로의 퀄리티를 보장해준다는 장점이 있습니다.
컴퓨터 그래픽은 크게 비트맵과 벡터로 구분되며 SVG는 벡터 그래픽에 속합니다.
badge animation
을 에디터에서 열어보면 코드를 확인할 수 있습니다.React에서 svg를 사용하기 위해서는 svg 언어를 jsx 스타일로 바꿔야합니다.
html에 svg를 바로 넣으면 가독성이 떨어지기 때문에 jsx로 변환된 badge animation
코드를 컴포넌트에 넣습니다.
Animation.js
컴포넌트를 만들고 return
에 svg 코드를 그대로 복사해서 넣습니다. function Animation() {
return (
<svg>
);
}
viewBox = [min-x] [min-y] [width] [height]
마지막 두 숫자는 zooming에 관한 것으로 실제 이미지의 얼마만큼을 보여줄지를 결정합니다.
가로 세로 100px의 원이 있습니다. 이 원을 모두 보여주려면 마지막 두 숫자를 최소 700으로 지정해줍니다.
<svg viewbox="0 0 100 100">
<svg viewBox="0 0 50 50">
<svg width="50" height="50" viewBox="0 0 100 100">
Animation.js
의 css 모듈 파일을 만들고 import 해줍니다. import styles from './Animation.module.css';
복사해온 코드에는 className이나 id가 사라져있는 상태라 어디부터 어디까지가 원하는 이미지들의 그룹인지 알 수 없습니다. 따라서 figma에서 export한 badge animation
파일을 다시 열어봅니다.
그룹명이 있는 badge animation
를 참고해 그룹명이 없는 Animation.js
에서 뱃지별로 className을 넣어줍니다.
예를 들어 aptitude badge
className을 넣어보겠습니다.
aptitude badge
는 figma 작업 당시 가장 위에 있던 그룹레이어라 badge animation
코드의 하단에서 찾아볼 수 있습니다. (순서가 반대로 출력)aptitude badge
그룹 내의 숫자를 아무거나 Animation.js
에서 검색해봤습니다 d="M113 144.5H190V187.5H113V144.5Z
codingtest badge
, interview badge
, tryout badge
className도 지정해줍니다.keyframes
를 이용해 애니메이션을 만들어줍니다.
애니메이션 이름은 aptitude
작동방식은 Y축으로 30px 움직이는 것입니다.
0%, 50%, 100%는 각각 애니메이션이 시작했을 때, 반 진행되었을 때, 끝났을 때입니다.
@keyframes aptitude {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(30px);
}
100% {
transform: translateY(0px);
}
}
aptitude_badge
에 애니메이션을 지정하고 옵션을 설정해줍니다. .aptitude_badge {
animation: aptitude 2.5s infinite;
}
aptitude badge
가 위아래로 움직이는 것을 확인할 수 있습니다. .[className] {
animation: [name] [duration] [timing function] [iteration] [direction];
}
너무 대단하세요...