👉 포켓몬 카드 게임 하러가기
팀 프로젝트로 이미지 스프라이트 기법을 이용해서 포켓몬 카드 뒤집기 게임을 구현 해보았다! (피카츄 배구게임 컨셉😎) 이번 포스팅은 이미지 스프라이트를 사용하면서 느꼈던 장점과 단점에 대해서 포스팅할 예정이고, 간단한 실습 예제는 다음 포스팅에서!!
이미지 스프라이트란?
단일 이미지 파일에 여러가지 이미지들을 넣어 좌표와 범위를 통해 특정 이미지를 불러오는 기법이다. 한번의 이미지 로딩만으로 여러가지 이미지를 불러올 수 있어 메모리와 네트워크 사용량 측면에서 효과적이다.
네이버에서 개발자 도구를 통해 확인할 수 있는 이미지 모음이다. 로고와 각 버튼들이 단일 이미지에 옹기종기 모여있는 것을 확인할 수 있다. 이것이 바로 이미지 스프라이트 기법!!!
어떻게 사용했는가!
먼저, 하나의 이미지 파일에 깜찍한 포켓몬들을 100px 100px 간격으로 합쳤다! 이미지 합치기는 아래의 사이트를 이용해보자!
CSS Sprites Generator Tool
(👆이 사이트 외에도 다양한 이미지 스프라이트 변환 사이트가 많다!)
CSS
.front-card {
position: absolute;
top: 50%;
left: 50%;
margin: 0 auto;
background-image: url("../img/pokemon.png");
background-color: #ffeea2;
width: 100px;
height: 100px;
display: block;
transform: translate(-50%, -50%) rotateY(180deg);
backface-visibility: hidden;
transition: all 1s;
}그 다음에 background-image CSS 속성에 합쳐진 이미지를 넣어준다. (카드를 뒤집기 위해 필요한 속성들은 예제 포스팅에서 다룰 예정)
JSON
[
{
"id": "0",
"position": { "x": "0", "y": "0" }
},
{
"id": "1",
"position": { "x": "100", "y": "0" }
},
{
"id": "2",
"position": { "x": "200", "y": "0" }
},
{
"id": "3",
"position": { "x": "300", "y": "0" }
},
{
"id": "4",
"position": { "x": "0", "y": "100" }
},
{
"id": "5",
"position": { "x": "100", "y": "100" }
},
{
"id": "6",
"position": { "x": "200", "y": "100" }
},
{
"id": "7",
"position": { "x": "300", "y": "100" }
},
]
그리고, json파일을 생성해서 background-position에 들어갈 값을 설정해주었다.
JS
<li class="card">
<div class="back-card"></div>
<div class="front-card" style="background-position: ${card.position.x}px ${card.position.y}px;"></div>
</li>마지막으로 json 파일을 불러오고, forEach() 메서드를 실행해서 포켓몬 이미지가 들어가는 태그에 background-position 속성으로 json에서 설정했던 position 값을 넣어주었다.
이 친구 엄청나다..!
그것은 바로 성능 최적화!!!!
하나의 이미지 파일만 사용했기 때문에 32장이나 필요했을 포켓몬 친구들이 단 한 장의 이미지로 모두 출력이 되었다!!!!! 이 얼마나 어마무시한 장점인가..?! 성능 최적화뿐만 아니라 여러 장의 무수한 이미지를 사용하기 위해 드는 리소스를 줄일 수 있었다.
그렇다면 단점은?
서버측에서 제어할 방법이 없기 때문에 일부 포켓몬이 변경될 경우 전체 스프라이트를 교체해야 한다. 수정이 어렵다는 것이 가장 큰 단점. 우리의 프로젝트는 다양한 크기와 종류의 이미지가 필요하지 않았기 때문에 이러한 단점은 크게 못 느꼈지만, 큰 프로젝트에 적용 하게 된다면... 단점을 크게 체감할 거 같다..!
그러나 장점이 막강하기 때문에 자주 사용하지 않을까 생각한다.
느낀 점
이미지 스프라이트 기법을 사용해볼 수 있는 아주 좋은 프로젝트를 하게 되어서 굉장히 유익한 경험이었다. 이 외에도 몰랐던 것들을 많이 배울 수 있어서 정말 최고의 토이 프로젝트 였다. 함께 프로젝트를 한 호수님과 수현님에게 무한 감사를..🥹💖
다음 포스팅은 동료들에게 발표했던 '카드 뒤집기 초간단 실습 예제'를 포스팅할 예정이다. 가장 인상 깊고 재밌는 기능들도 추가로 포스팅할 계획이니 많관부🌸
참고 :
image_sprites_w3schools
image_sprites_mozila
