스프라이트

스프라이트(Sprite)는 배경 화면과 따로 관리되면서 화면 위의 원하는 위치에 겹쳐 그려지고 움직이는 작은 2차원 비트맵 그래픽 객체로, 게임·애니메이션의 캐릭터와 아이콘, 웹 페이지의 여러 이미지를 한 장으로 묶는 CSS 스프라이트 기법 등에 쓰인다.

개요

초기 비디오 게임과 가정용 컴퓨터는 메모리와 처리 속도가 모자라 움직이는 물체가 있을 때마다 화면 전체를 다시 그릴 수 없었다. 그래서 배경은 한 번 그려 두고, 캐릭터·총알·커서처럼 움직이는 작은 그림만 따로 두어 배경 위에 겹쳐 보이게 하는 방식을 썼고, 이 작은 그림을 스프라이트라 불렀다. 1970년대 말~1980년대의 비디오 칩(예: 텍사스 인스트루먼츠 TMS9918, 코모도어 64 의 VIC-II)은 스프라이트를 하드웨어로 합성해 CPU 가 배경 메모리를 건드리지 않고도 물체를 움직일 수 있게 했다.

지금은 GPU가 사각형(쿼드)에 이미지를 입혀 그리는 방식으로 스프라이트를 처리하며, 2D 게임 엔진과 UI, 3D 장면 속 파티클·빌보드에도 같은 개념이 쓰인다. 웹에서는 아이콘 여러 개를 한 장의 이미지로 합치고 CSS 로 필요한 부분만 잘라 보여 주는 CSS 스프라이트가 같은 이름으로 불린다.

특징

배경과 분리 - 배경(타일맵·배경 레이어)과 별도의 객체로 위치·크기·회전·투명도를 바꿀 수 있다
투명 처리 - 사각형 그림의 바깥 부분을 투명색이나 PNG 의 알파 값으로 비워 캐릭터 모양만 보이게 한다
겹침 순서 - 여러 스프라이트가 겹칠 때 앞뒤 순서(z-order, 우선순위)를 정한다
충돌 판정 - 스프라이트의 경계 상자나 픽셀이 겹치는지로 물체끼리 부딪혔는지 판단한다
프레임 애니메이션 - 동작을 여러 장의 그림(프레임)으로 그려 두고 차례로 바꿔 보여 걷기·달리기를 표현한다 → 컴퓨터 애니메이션

구성 요소

요소	설명
스프라이트 이미지	캐릭터·물체의 래스터(비트맵) 그림. 픽셀 아트로 그리는 경우가 많다
스프라이트 시트(sprite sheet)	한 객체의 여러 동작 프레임 또는 여러 객체의 그림을 한 장의 큰 이미지에 격자나 빽빽한 배치로 모은 것. 3D 그래픽에서는 텍스처 아틀라스(texture atlas)라 부른다
좌표 정보	시트 안에서 각 프레임이 차지하는 사각 영역(x, y, 너비, 높이)과 기준점
속성	화면 위치, 크기 배율, 회전, 반전, 투명도, 겹침 순서

하드웨어 스프라이트와 소프트웨어 스프라이트

구분	하드웨어 스프라이트	소프트웨어 스프라이트
처리	비디오 칩이 화면을 내보내는 순간 배경과 합성한다	CPU·GPU 가 프레임 버퍼에 직접 그린다(블리팅)
장점	CPU 부담이 거의 없고 빠르다	개수·크기 제한이 없고 회전·확대가 자유롭다
단점	칩이 정한 개수·크기·색 수 제한이 있다(한 줄에 몇 개까지 등)	그릴 때마다 배경을 되살려야 해 계산이 많다
쓰인 곳	1980~90년대 게임기·가정용 컴퓨터, 마우스 커서	현대 2D 게임 엔진, GPU 의 쿼드 렌더링

CSS 스프라이트

웹 페이지의 아이콘·버튼 그림을 파일 하나씩 따로 두면 그림마다 HTTP 요청이 생긴다. CSS 스프라이트는 이 그림들을 한 장의 이미지로 합치고, 요소마다 같은 배경 이미지를 쓰되 background-position 으로 보여 줄 부분만 옮겨 잘라 보인다.

.icon      { width: 32px; height: 32px; background-image: url(sprite.png); }
.icon-home { background-position: 0 0; }
.icon-mail { background-position: -32px 0; }   /* 왼쪽으로 32px 옮겨 두 번째 칸을 보인다 */

장점 - 요청 수가 줄어 페이지가 빨리 뜨고, 마우스를 올릴 때 바꿔 보일 그림도 이미 받아 두어 깜박임이 없다. 이미지 하나만 캐시하면 된다
단점 - 그림 하나를 바꿔도 전체 이미지와 좌표를 다시 만들어야 하고, 안 쓰는 그림까지 내려받는다
HTTP/2 의 다중화로 요청 수 부담이 줄고, 아이콘은 SVG 나 아이콘 글꼴로 바꾸는 경우가 늘어 쓰임이 예전보다 줄었다

다른 그래픽 요소와 비교

구분	스프라이트	타일(타일맵)	3D 모델
형태	2D 비트맵 객체	같은 크기의 작은 그림을 격자로 깔아 만든 배경	다각형 메시와 텍스처
움직임	위치를 자유롭게 바꾸며 움직인다	고정 배경, 화면 전체를 스크롤	3차원 변환·조명 계산
표현	미리 그린 프레임을 바꿔 애니메이션	반복 패턴으로 넓은 맵을 적은 메모리로	시점에 따라 모양이 달라진다

3D 장면에서 항상 카메라를 향하도록 돌린 스프라이트를 빌보드라 하며 연기·불꽃·나무 같은 파티클에 쓴다 → 3차원 컴퓨터 그래픽스

같이 보기