스프라이터: 새로운 희망.

지난 10년 동안 비디오 게임은 신기술의 등장으로 폭발적으로 성장했습니다. 초기에는 모든 게임이 훌륭한 게임플레이와 픽셀만을 가지고 있었습니다. 하지만 지난 몇 년간 3D 게임이 더 지배적이 되었고, 이제 HTML5의 등장으로 스프라이트 아티스트들이 다시 한번 게임을 위해 픽셀을 밀어붙일(push pixels) 수 있게 되었습니다!

개발자에게 HTML5의 가장 매력적인 점은 인터넷 세상부터 휴대용 기기까지 여러 플랫폼에서 작동한다는 것입니다. 그에 따라 아트 측면에서는 몇 가지 제한이 따릅니다. 하지만 고전적인 접근 방식을 선호하는 아티스트라면 이 플랫폼이 성공할 수 있는 길을 열어준다는 것을 알게 될 것입니다. 바로 픽셀 아트를 통해서 말이죠.

아티스트에게 HTML5의 가장 멋진 점은 더 많은 픽셀 아트 게임이 나올 가능성입니다. 이런 종류의 게임에는 특유의 매력이 있습니다. 픽셀 게임의 이미지를 보면 빌딩 블록, 즉 아름다운 구성을 이루는 뼈대가 보입니다. 저는 적은 것으로 더 많은 것을 만들어낼 수 있는 아티스트들을 깊이 존경합니다. 크고 고해상도인 게임을 볼 때는 이미지를 구성하는 수천 개의 픽셀을 잊어버리기 쉽습니다. 하지만 픽셀 아티스트는 바닥부터 이미지를 구축합니다. 이를 성공시키려면 계획과 선견지명, 그리고 매우 강력한 색채 이론 감각이 필요합니다.

픽셀 푸싱(pixel pushing)의 재미 중 하나는 배경이나 캐릭터를 완성했을 때 느끼는 성취감입니다. 이는 레고 세트를 완성하는 것과 비슷합니다. 모든 작은 조각이 제자리에 딱 들어맞아 크고 멋진 무언가를 만들어내는 과정이죠. 픽셀 아트를 시도해보지 않은 아티스트라면 연습 삼아 해보시길 강력히 추천합니다. 인격 수양(builds character)이 됩니다.

이제 제가 정말 기대하는 부분은 바로 정식 제작된 픽셀 아트 게임의 가능성입니다. Pixel Joint와 같은 포럼에는 장편 게임으로 만들어지기를 간절히 기다리는 작품들이 가득합니다. 이 아티스트들이 단 하나의 이미지를 만드는 데 들이는 시간과 정성으로 제작된 풀 사이즈 게임을 상상할 수 있나요?! 그야말로 전설(LEGEN (잠시 대기) DARY)이 될 것입니다. 그리고 이것도 보세요: CanvasCycle. 정말 놀랍습니다. 색상 순환(color cycled) 배경이 사이드 스크롤 어드벤처 게임에 쓰인다면 정말 압권일 것입니다!

최근 픽셀 게임의 훌륭한 예는 Sword & Sworcery입니다. 이런 새로운 게임들이 더 많이 나왔으면 좋겠습니다. HTML5의 크로스 플랫폼 편의성은 게임 개발의 지속적인 성장과 픽셀 아티스트에 대한 더 높은 수요를 의미합니다. 사실 HTML5를 사용하면 정말 끝내주는 픽셀 게임을 만들 수 있습니다. 어떤 이들은 픽셀 아트가 저해상도 쓰레기라고 말할지도 모르지만, 저는 이를 디지털 점묘법이자 자칫 사라졌을지도 모를 아름다운 예술 형태로 봅니다.

관련 항목: Unity Asset Store — Unity 프로젝트에 바로 적용할 수 있는 기성 아트, 도구 및 템플릿.

핵심 요약

• HTML5의 크로스 플랫폼 도달 범위는 픽셀 아트가 다시 번성하는 가장 큰 이유입니다. 하나의 에셋 세트로 브라우저, 휴대폰, 태블릿에서 모두 실행할 수 있기 때문입니다.

• 픽셀 아트는 어쩔 수 없이 타협하는 제한 사항이 아니라, 강력한 구성력, 색채 이론, 계획성을 강제하는 하나의 훈련(discipline)입니다.

• 캔버스 요소와 CanvasCycle 같은 도구는 3D 파이프라인에서는 구현하기 정말 어려운 기술(팔레트 순환, 절차적 배경 등)을 가능하게 합니다.

  우리의 선택: Udemy Game Development Courses — Unity, Unreal, C++, C# 및 셰이더 프로그래밍을 다루는 주문형 과정.

• 정식 제작된 픽셀 아트 게임은 소규모 팀이 달성 가능한 목표이지 헛된 꿈이 아닙니다. 장벽은 기술이 아니라 숙련도와 시간입니다.

• 픽셀 푸싱을 시도해보지 않은 아티스트라면 연습으로 삼아보세요. 인격 수양이 됩니다.

HTML5가 픽셀 아티스트의 계산법을 바꾼 이유

HTML5의 핵심은 간단합니다. 한 번 작성하면 어디서든 실행된다는 것입니다. 내부적으로 핵심 역할을 하는 것은 <canvas> 요소이며, 이를 통해 JavaScript가 프레임별로 그림을 그릴 수 있는 비트맵에 직접 접근할 수 있습니다. 픽셀 아티스트에게 이것은 선물과 같습니다. 텍스처 파이프라인이나 셰이더 컴파일러와 씨름할 필요 없이, 그리드 위에 색상 사각형을 그리면 됩니다. 이것이 바로 픽셀 아트가 만들어지는 원래 방식입니다.

두 세계를 비교해 보겠습니다:

고려 사항	전통적인 3D 파이프라인	HTML5 캔버스 / 픽셀 파이프라인
에셋 생성	모델링, UV 매핑, 리깅, 텍스처링	고정된 픽셀 그리드에 그리기, 스프라이트 시트 내보내기
파일 크기	거대한 메쉬 및 텍스처	아주 작은 PNG 및 인덱스 팔레트
스케일링	해상도 의존적, LOD 필요	Nearest-neighbor 스케일링으로 선명한 가장자리 유지
포팅	플랫폼별 빌드 및 셰이더 필요	하나의 코드베이스, 다양한 브라우저 및 기기
아트 디렉션 리스크	흔해 보이기 쉬움	기본적으로 독특함

물론 트레이드오프는 존재합니다. 캔버스 렌더링은 많은 경우 CPU 바운드(CPU-bound)이므로, 프레임당 얼마나 많은 스프라이트를 밀어넣을지 신중하게 결정해야 합니다. 또한 기기 픽셀 비율(device pixel ratios)을 세심하게 처리해야 합니다. 그렇지 않으면 정성껏 배치한 픽셀들이 고DPI 화면에서 뭉개져 보일 것입니다. 해결책은 저해상도 백킹 캔버스(backing canvas)에 렌더링한 뒤 이미지 스무딩(image smoothing)을 비활성화하고 확대하는 것인데, 이는 모든 HTML5 픽셀 개발자가 결국 배우게 되는 기술입니다.

”적은 것으로 더 많은 것을 만드는” 기술

픽셀 게임의 이미지를 보면 빌딩 블록, 즉 아름다운 구성을 이루는 뼈대가 보입니다. 저는 적은 것으로 더 많은 것을 만들어낼 수 있는 아티스트들을 깊이 존경합니다. 크고 고해상도인 게임을 볼 때는 이미지를 구성하는 수천 개의 픽셀을 잊어버리기 쉽습니다. 픽셀 아티스트는 바닥부터 이미지를 구축합니다.

관련 항목: Amazon: Game Dev Books & Gear — 게임 프로그래밍 서적, 기계식 키보드, 모니터 및 개발 데스크 하드웨어.

이를 성공시키려면 계획과 사전 고려, 그리고 매우 강력한 색채 이론 감각이 필요합니다. 좋은 픽셀 아트와 노이즈를 구분 짓는 몇 가지 실용적인 원칙은 다음과 같습니다.

• 팔레트를 제한하세요. 클래식 하드웨어에는 엄격한 제한이 있었습니다. 예를 들어 NES는 제한된 수의 동시 색상 세트 내에서 작동했습니다. 이러한 제약은 실제로 효과가 있는 색상을 선택하도록 강제합니다.
• 선택적 윤곽선을 사용하세요. 완전히 검은색인 윤곽선은 스프라이트를 평면적으로 만듭니다. 색상이 들어가거나 끊어진 윤곽선은 빛과 형태를 암시합니다.
• 명도(Value)를 조절하세요. 스프라이트를 가늘게 뜨고 보세요. 실루엣이 명확히 읽히지 않는다면, 그 어떤 세부 묘사로도 살릴 수 없습니다.
• 그리드를 존중하세요. 한 픽셀씩 수작업으로 앤티앨리어싱을 하는 것은 기술이지만, 언제 하지 말아야 할지 아는 것 또한 기술입니다.
• 타일 단위로 생각하세요. 재사용 가능한 타일로 구축된 배경은 제작 비용이 저렴하고 애니메이션을 적용하기 더 쉽습니다.

이것이 픽셀 아트가 계획에 따른 보상을 주는 이유입니다. 높은 폴리곤 수 뒤에 빈약한 구성을 숨길 수는 없습니다. 모든 픽셀은 하나의 결정이며, 관찰자는 그 모든 결정을 보게 됩니다.

컬러 사이클링: 잊혀진 초능력

그리고 이것도 보세요: CanvasCycle. 정말 놀랍습니다. 컬러 사이클링이 적용된 배경을 횡스크롤 어드벤처 게임에 사용한다면 정말 멋질 것입니다!

쇼핑하는 경우: Construct 3 — 웹, 모바일 및 데스크탑으로 내보내는 브라우저 기반의 코드 없는 HTML5 엔진.

아직 보지 못한 분들을 위해 설명하자면, 컬러 사이클링은 픽셀을 전혀 움직이지 않는 기술입니다. 대신 인덱스 팔레트의 항목을 회전시키면 이미지가 애니메이션처럼 보이게 됩니다. 물이 흐르고, 횃불이 깜박이고, 하늘이 변하는 식이죠. 이는 8비트와 16비트 시대의 핵심 기술이었으며, 장면 전체를 다시 그리는 것이 아니라 작은 팔레트만 다시 쓰면 되기 때문에 구동 비용이 놀라울 정도로 저렴합니다.

CanvasCycle은 클래식 컬러 사이클링 아트워크를 HTML5 캔버스로 렌더링하여 웹에서 이를 부활시켰습니다. 횡스크롤 어드벤처 게임의 경우 그 매력은 분명합니다. 모든 프레임을 수작업으로 애니메이션화하는 것에 비해 CPU 비용이 거의 들지 않으면서도 살아 숨 쉬는 배경을 만들 수 있습니다. HTML5 게임을 제작 중이고 성능 저하 없이 분위기를 내고 싶다면, 팔레트 사이클링은 가장 과소평가된 도구 중 하나입니다.

하나의 이미지에서 전체 게임까지

이제 제가 정말 흥분되는 부분입니다. 바로 풀 프로덕션 픽셀 아트 게임의 가능성입니다. Pixel Joint와 같은 포럼에는 장편 게임으로 만들어지기를 기다리는 작품들이 가득합니다. 아티스트들이 이미지 ‘하나’를 만드는 데 들이는 시간과 정성으로 제작된 풀 렝스 게임을 상상해 보세요! 그야말로 LEGEN (잠시만요) DARY 할 것입니다.

멋진 정지 화면과 실제 출시된 게임 사이의 간극은 대부분의 프로젝트가 좌초되는 지점이며, 그 이유에 대해 솔직해질 필요가 있습니다.

• 단일 주인공 스프라이트 하나에 몇 시간이 걸릴 수 있습니다. 전체 애니메이션 세트에는 며칠이 걸립니다. 대기, 걷기, 공격, 피격, 사망 — 각각이 하나의 퍼즐입니다.
• 배경은 기하급수적으로 늘어납니다. 횡스크롤 게임에는 패럴랙스 레이어, 전환 효과, 그리고 이음새 없이 연결되는 타일들이 필요합니다.
• UI 또한 예술입니다. 메뉴, 폰트, 아이콘 모두 동일한 정성이 필요하며, 픽셀 폰트는 그 자체로 하나의 전문 영역입니다.
• 일관성을 유지하는 것이 가장 어렵습니다. 수백 개의 에셋에 걸쳐 일관된 스타일을 유지하는 것은 예술적인 문제인 동시에 관리의 문제입니다.

다행인 점은 HTML5가 출시를 위한 기술적 장벽을 낮추었다는 것입니다. 콘솔 개발 키트나 퍼블리셔가 필요 없습니다. 캔버스와 게임 루프, 그리고 끝까지 완수하려는 절제력만 있으면 됩니다. 이것이 픽셀 아트 커뮤니티와 HTML5 커뮤니티가 자연스럽게 어울리는 이유입니다. 두 커뮤니티 모두 무언가를 바닥부터 구축하는 것을 좋아하는 사람들에게 보상을 주기 때문입니다.

Sword & Sworcery로부터 배우기

최근 픽셀 게임의 훌륭한 예시는 Sword & Sworcery입니다. 이런 새로운 게임들이 더 많이 나왔으면 좋겠습니다. 이 게임이 유익한 이유는 단지 아트 때문만이 아니라 아트, 음악, 그리고 페이싱이 함께 어우러지는 방식 때문입니다. 픽셀 미학은 단순한 장식이 아니라 전체적인 분위기 그 자체입니다. 이는 강력한 시각적 정체성을 가진 소규모 팀이 예산 규모보다 더 크게 느껴지는 결과물을 만들 수 있음을 증명합니다.

이 게임을 연구하신다면 제한된 팔레트를 어떻게 사용하는지, 장면이 숨 쉴 공간을 어떻게 두는지, 그리고 화면을 3D 공간으로 향하는 창이 아니라 하나의 구성(composition)으로 어떻게 다루는지 살펴보세요. 이는 어떤 HTML5 프로젝트에서도 적용할 수 있는 교훈입니다.

지망생 스프리터들을 위한 실용적인 조언

픽셀 아트를 시도해보지 않은 아티스트분들께는 연습 삼아 해보시길 강력히 추천합니다. 인내심과 기본기를 기르는 데 도움이 됩니다. 실제로 도움이 되는 시작 방법 몇 가지를 소개합니다.

• 작은 것부터 재현해 보세요. 좋아하는 스프라이트를 하나 골라 픽셀 하나하나 다시 만들어 보세요. 읽는 것보다 모방하는 것에서 더 많은 것을 배울 수 있습니다.
• 고정된 크기로 작업하세요. 16×16 또는 32×32 캔버스로 시작하고, 크기를 키워 편법을 쓰지 마세요.
• 팔레트를 연구하세요. Lospec 같은 도구에는 Aseprite, GraphicsGale, Piskel로 직접 불러올 수 있는 커뮤니티 팔레트들이 있습니다.
• 빨리 애니메이션을 만들어 보세요. 단 두 프레임의 바운스 애니메이션만으로도 정적인 걸작보다 가독성에 대해 더 많은 것을 배울 수 있습니다.
• 작품을 올리고 비평을 받으세요. Pixel Joint나 픽셀 아트 서브레딧 같은 커뮤니티는 여러분에게 진실을 말해줄 것이며, 그것이 바로 여러분에게 필요한 것입니다.

픽셀을 하나하나 찍는 재미 중 하나는 배경이나 캐릭터를 완성했을 때 느끼는 성취감입니다. 마치 레고 세트를 완성하는 것과 비슷하죠. 모든 작은 조각들이 제자리에 딱 들어맞아 크고 멋진 무언가가 만들어지는 경험 말입니다.

앞으로 나아갈 길

HTML5의 크로스 플랫폼 편의성은 게임 개발의 지속적인 성장과 픽셀 아티스트에 대한 수요 증가를 의미합니다. 사실 HTML5를 사용하면 정말 멋진 픽셀 게임을 만들 수 있습니다. 어떤 이들은 픽셀 아트가 저해상도 쓰레기라고 말할지도 모르지만, 저는 이를 디지털 점묘법이자, 그렇지 않았다면 사라졌을지도 모를 아름다운 예술 형식으로 봅니다.

기술은 더 이상 병목 현상이 아닙니다. 브라우저는 빠르고, 캔버스는 성능이 충분하며, Aseprite부터 Tiled, 그리고 그 위에 구축된 게임 엔진에 이르기까지 도구들은 성숙해졌습니다. 이제 남은 것은 언제나 그랬듯 가장 중요한 것, 즉 장인 정신과 인내, 그리고 무언가 아름다운 것이 나타날 때까지 한 번에 한 픽셀씩 배치하려는 의지뿐입니다.

감사합니다!

Jacob Weberg는 Massively Fun의 디지털 아티스트입니다. 그는 게임 제작과 게임 플레이, 그리고 Easy Cheese를 즐깁니다.

자주 묻는 질문

”스프리터(spriter)“란 무엇인가요?

스프리터는 스프라이트, 즉 게임의 캐릭터, 오브젝트 및 효과에 사용되는 그리드 정렬된 작은 2D 이미지를 만드는 아티스트입니다. 이 용어는 콘솔이 화면상에서 독립적으로 이동시킬 수 있는 하드웨어 오브젝트였던 스프라이트가 존재했던 고전 게임 개발 시대에서 유래되었습니다. 오늘날에는 게임용 픽셀 아트를 작업하는 모든 사람을 통칭하는 용어로 사용됩니다.

HTML5가 픽셀 아트 게임에 왜 그렇게 적합한가요?

HTML5의 캔버스(canvas) 요소는 JavaScript가 비트맵에 직접 그릴 수 있게 해주며, 이는 픽셀 아트가 제작되는 방식과 자연스럽게 일치합니다. 여기에 하나의 코드베이스가 브라우저, 휴대폰, 태블릿에서 모두 실행된다는 점이 결합되어, 소규모 팀이 플랫폼별로 다시 빌드하지 않고도 픽셀 게임을 어디에나 출시할 수 있습니다. 또한 에셋 크기가 작아 웹에서의 로딩 시간도 빠릅니다.

컬러 사이클링(color cycling)이란 무엇이며 왜 중요한가요?

컬러 사이클링은 픽셀을 이동시키는 대신 인덱스 컬러 팔레트의 항목을 회전시켜 이미지에 애니메이션을 적용하는 기법입니다. 8비트 및 16비트 게임에서 물, 불, 하늘을 표현할 때 흔히 사용되었으며, 실행 비용이 매우 저렴합니다. CanvasCycle은 HTML5 캔버스에서 이 기술을 시연하며, 이는 분위기 있는 사이드 스크롤 배경을 만드는 훌륭한 트릭입니다.

픽셀 아트를 만들려면 값비싼 소프트웨어가 필요한가요?

아니요. Piskel, GraphicsGale, Aseprite(유료지만 저렴함)와 같은 무료 또는 저가 도구들이 대부분의 스프리터에게 필요한 모든 기능을 제공합니다. 도구보다 훨씬 더 중요한 것은 색감, 구도, 그리고 절제력입니다. 많은 유명 픽셀 게임들이 현대의 3D 툴셋보다 훨씬 단순한 도구로 제작되었습니다.

고해상도 화면에서 픽셀 아트를 어떻게 선명하게 유지하나요?

게임을 저해상도 백킹 캔버스(backing canvas)에 렌더링한 다음, 이미지 스무딩(image smoothing)을 끈 상태에서 해당 캔버스를 디스플레이 크기에 맞게 확대하십시오. 이렇게 하면 픽셀 가장자리가 흐려지지 않고 날카롭게 유지됩니다. 디바이스 픽셀 비율(device pixel ratio)을 올바르게 처리하는 것은 모든 HTML5 픽셀 개발자가 겪는 첫 번째 기술적 난관 중 하나입니다.

픽셀 아트는 단지 향수 때문인가요?

전혀 그렇지 않습니다. 픽셀 아트는 실제적인 장점을 가진 의도적인 미학입니다. 작은 크기에서도 가독성이 좋고, 제작 및 배포 비용이 저렴하며, 비슷비슷한 3D 게임들이 가득한 시장에서 독특한 존재감을 드러냅니다. 많은 현대 게임들이 기술적 제약 때문이 아니라 예술적인 이유로 픽셀 아트를 선택합니다. 앞서 말씀드렸듯이, 이것은 디지털 점묘법입니다.