[애니메이션] 스프라이트 이미지 사용하기🎬

메인페이지 - 스프라이트 이미지 애니메이션

포트폴리오를 만들던 도중 GIF로 적용하는 것 대신, 예전에 일했을 때 스프라이트 애니메이션으로 작업했던 기억이 나서 시도해봤다.

✏️스프라이트 이미지란?
여러 개의 프레임(이미지)을 하나의 큰 이미지 파일로 병합해서 사용하는 방법이다. 이렇게 하면 이미지 로딩 성능이 개선되고, 부드러운 애니메이션을 구현할 수 있다.

---

1. 이미지 준비 과정💡

1-1. 이미지 배경 제거

1. 먼저 캐릭터나 움직이는 대상의 이미지 여러 장을 준비한다.
2. 이미지에서 배경을 지워서 투명한 배경으로 만든다.
   배경 제거는 Photoshop, Figma 같은 도구로 작업한다. 혹은 무료로 배경 제거 해주는 사이트를 이용한다.

배경 제거 사이트

1-2. 이미지 병합하기

준비된 여러 이미지를 가로로 나열해서 한 이미지 파일로 병합한다.

이미지 병합 사이트

---

2. 스프라이트 애니메이션 구현하기🎨

const SpriteContainer = styled.div`
    width: 14.8125rem; /* 개별 프레임의 너비 */
    height: 15rem; /* 프레임의 높이 */
    background-image: url('/sprite.webp'); /* 스프라이트 이미지 경로 */
    background-repeat: no-repeat;
    background-position: 0 0; /* 이미지 시작점 */
    background-size: calc(14.8125rem * 7) 100%; /* 전체 스프라이트 이미지 크기 설정 */
    animation: sprite-frames 1.4s steps(7) infinite; /* 애니메이션 설정 */

    @keyframes sprite-frames {
        0% {
            background-position: 0 0; /* 시작 프레임 */
        }
        100% {
            background-position: -103.6875rem 0; /* 끝 프레임 (전체 넓이 설정) */
        }
    }

    @media only screen and (max-width: 734px) {
        width: 14.8125rem;
        height: 15rem;
        margin-bottom: 2rem;
    }
`;

• background-size : calc(14.8125rem * 7): 개별 프레임 너비 x 프레임 개수 전체 스프라이트 이미지가 정확하게 나눠지도록 크기를 설정한다.

• @keyframes sprite-frames: 이미지의 background-position 값을 점진적으로 변경하면서 프레임을 움직이게 한다.
  ( 0% → 100%)

• steps(7): 7개의 각각의 사진을 병합 했기때문에 애니메이션이 7개의 프레임으로 나뉘도록 설정했다.

• animation 속도 설정: 1.4초 동안 스프라이트 애니메이션이 실행되며, 반복 되도록infinite 하였다.

---

📝 마무리 하며..

스프라이트 이미지는 여러 프레임을 하나의 이미지로 관리해 로딩 성능을 최적화할 수 있는 효율적인 방법이고 css만으로 구현 가능한것도 장점이였다.
정확한 프레임 크기 조절만 이루어진다면 작업 자체는 복잡하지 않았다.
background-position과 @keyframes의 활용을 조금 더 배우는 시간이 되었다.