픽셀 아트 에디터 — 픽셀 하나하나 그리기

픽셀 아트의 크기는 관례이고, 그 관례는 통하기 때문에 존재합니다. 16×16은 고전적인 타일과 스프라이트 크기입니다 — 패미컴(NES) 캐릭터, 마인크래프트 아이템 아이콘, 파비콘이 이 크기죠. 32×32면 캐릭터에 얼굴과 포즈가 생깁니다. 64×64는 초상이나 디테일한 적 캐릭터, 100×100은 한 장면입니다. 그림의 용도에 맞는 크기를 고르세요. 64×64로 그려서 16×16으로 줄인 스프라이트는 뭉개지고, 16×16 아이콘을 키워 봐야 그냥 큰 16×16 아이콘일 뿐입니다.

그리기 전에 확정하세요. 나중에 크기를 바꾸면 픽셀은 남지만 구도는 남지 않습니다. 32×32 프레임을 꽉 채우던 캐릭터가 64×64에서는 구석의 작은 인물이 되어 버립니다. 타일셋, 아이콘 팩, 캐릭터 파티처럼 세트를 그린다면 세트 전체에 캔버스 크기를 하나로 정하고 모든 조각을 그 크기에 맞추세요. 그래야 게임 안에서든 페이지 위에서든 같은 스케일로 나란히 놓입니다.

256색 팔레트는 메뉴이지 목표가 아닙니다. 완성된 스프라이트 대부분은 8~16색을 쓰며, 이 색들은 '램프'로 정리됩니다. 한 재질을 그림자에서 하이라이트까지 3~5단계로 늘어놓은 것이죠. 좋은 픽셀 아트와 밋밋한 픽셀 아트를 가르는 것은, 램프가 단순히 밝아지기만 하지 않고 색상(hue)도 함께 이동한다는 점입니다. 그림자는 파랑이나 보라 쪽으로, 하이라이트는 노랑이나 주황 쪽으로 기울어서, 빨간 셔츠의 그림자는 차가운 진홍이 되고 하이라이트는 그냥 분홍빛 빨강이 아니라 따뜻한 산호색이 됩니다.

램프부터 만들고 그다음에 그리세요. 재질마다 중간 톤을 고르고, 명도뿐 아니라 색상도 이동하는 그림자와 하이라이트를 정한 뒤, 하나의 램프를 여러 재질에 돌려쓰려고 해 보세요. 같은 회색 세 개가 갑옷도, 돌도, 구름도 될 수 있습니다. 스프라이트 안의 두 색이 확대해야 구분될 만큼 가깝다면, 둘 중 하나는 제 몫을 못 하고 있는 것입니다.

픽셀 아트의 대각선은 계단이고, 눈은 계단이 규칙적일 때만 그것을 매끄러운 선으로 읽습니다. 45° 선은 한 단에 픽셀 하나입니다. 더 완만한 선은 픽셀 2개, 3개, 4개짜리 구간이 이어지는데, 이 구간의 길이가 모두 같아야 합니다. 안 그러면 선이 휘어 보입니다. 고전적인 실수는 두 선이 만나는 모서리에 픽셀이 겹쳐 두 개가 되는 것인데, 그 하나를 지우면 모서리가 날카로워집니다. 펜은 1픽셀 굵기로 그리고 자주 축소해서 보세요. 8배 확대에서는 안 보이던 계단 현상(재기)이 1배에서는 드러납니다.

디더링 — 두 색을 체크무늬로 섞는 것 — 은 제한된 팔레트로 제3의 색과 그라데이션을 흉내 내는 픽셀 아트의 방법입니다. 램프의 두 단계 사이를 50% 체크무늬로 채우면 그 중간 단계로 읽히고, 더 성긴 패턴은 더 부드러운 전환으로 읽힙니다. 하늘, 넓은 면의 그림자, 금속에 쓰고, 작은 스프라이트에는 쓰지 마세요. 16×16에서 체크무늬는 그냥 노이즈로 보입니다.

그림은 실제 크기 또는 그 정수 배로 보이지, 당신이 그릴 때의 확대 배율로 보이는 일은 없습니다. 몇 분에 한 번씩 격자를 끄고 캔버스 전체를 보세요. 더 좋은 방법은 눈을 가늘게 뜨고 보는 것입니다. 디테일이 흐려진 상태에서도 포즈, 사물, 글자가 여전히 읽힌다면 실루엣이 맞는 것입니다. 읽히지 않는다면 어떤 명암도 그 그림을 구하지 못합니다. 윤곽부터 고치세요.

채움색보다 어두운 색(검정이 아니라)으로 넣은 1픽셀 외곽선은 어떤 배경 위에서도 스프라이트를 읽히게 해 줍니다. 순수한 검정 외곽선은 밝은 배경에서는 통하지만 어두운 배경에서는 사라집니다. 선택적 외곽선 — 형태가 빛에서 등을 돌리는 쪽은 어둡게, 빛을 향하는 쪽은 밝게 — 이 요즘 픽셀 아트 대부분이 쓰는 기법이고, 램프를 미리 만들어 두면 펜 도구로 알맞은 단계의 색을 클릭하는 일만 남습니다.

PNG 내보내기는 캔버스 한 칸을 이미지 픽셀 하나로, 어떤 보정도 없이 기록합니다. 게임 엔진이 원하는 바로 그 형태죠. 그래도 그림을 흐리게 만들 수 있는 것은 그다음 단계인 확대·축소입니다. 픽셀 아트는 반드시 정수 배 — 2배, 3배, 4배 — 로만, 최근접 이웃(nearest-neighbour) 보간으로 키우세요. 유니티라면 텍스처의 Filter Mode를 Point로, Compression을 None으로. 고도(Godot)라면 텍스처 필터를 Nearest로. 브라우저라면 image-rendering: pixelated입니다. 150% 확대나 어떤 종류든 바이리니어 리샘플링은 당신이 그린 모든 모서리를 뭉갭니다.

비워 둔 칸은 투명으로 내보내지므로 스프라이트에는 배경색이 전혀 필요 없습니다. 그림이 게임이 아니라 웹 페이지나 문서에 들어간다면 캔버스 크기 그대로 내보내고 페이지가 확대하게 두거나, 인쇄용으로 한 번에 4배로 내보내세요. 포토 편집기의 기본 설정으로 PNG 크기를 바꾸는 일만은 절대 하지 마세요.