그리드에 픽셀 아트를 그리고 프레임을 애니메이션으로 만들어 PNG, GIF 또는 코드로 내보내세요.
마지막 업데이트
Coddy teaches you by writing real code in your browser - interactive lessons, instant feedback, and AI help when you get stuck.
픽셀 아트 메이커는 고정된 그리드 위에서 그리는 도구입니다. 자유로운 붓질 대신 픽셀을 한 칸씩 직접 놓습니다. 이 제약이 바로 픽셀 아트의 매력입니다. 게임 스프라이트, 레트로 아이콘, 아바타, 8비트 스타일 일러스트는 모든 픽셀을 의도적으로 골라서 만들어집니다.
이 에디터에는 스프라이트 에디터의 클래식 도구가 모두 있습니다. 8x8부터 64x64 그리드에서 쓰는 연필, 지우개, 채우기, 스포이드, 그리고 실시간 미리보기가 있는 프레임 단위 애니메이션까지. 결과물은 원하는 크기의 선명한 PNG, 움직이는 GIF, 게임 엔진에 바로 쓰는 스프라이트 시트로 내보낼 수 있습니다.
그리고 여기는 Coddy이니, 그림이 곧 코드이기도 합니다. 클릭 한 번이면 그리드가 Python 2차원 배열, JavaScript 캔버스 스니펫, CSS box-shadow 아트, SVG, 스프레드시트에서 여는 CSV로 바뀝니다. 이미지가 사실 색상 배열일 뿐임을 재미있게 확인하는 방법입니다.
작게 시작하세요. 16x16이나 32x32가 좋습니다. 작은 그리드는 단순하고 읽기 쉬운 형태를 만들게 해 줍니다. 클래식 게임 스프라이트 대부분이 16x16 또는 32x32입니다. 크기는 나중에 바꿔도 그림이 사라지지 않습니다.
윤곽은 연필, 넓은 면은 채우기로. 먼저 한 가지 색으로 전체 형태를 그리고 그다음 디테일을 더하세요. 마우스 오른쪽 클릭(또는 지우개)으로 픽셀을 지웁니다.
재질마다 2~3톤이면 충분합니다. 기본색, 하이라이트, 그림자. 내장 팔레트는 이런 색 계단을 찾기 쉽게 정렬되어 있고, 스포이드는 캔버스 위의 색을 바로 집어 옵니다.
프레임을 복제하고 픽셀 몇 개를 움직인 뒤 재생을 누르세요. 눈 깜빡임, 통통 튀기, 불꽃 흔들림은 두세 프레임이면 충분합니다.
최대 32배 크기의 PNG, 움직이는 GIF, 모든 프레임을 한 줄로 늘어놓은 스프라이트 시트를 내려받으세요. 아니면 코드 패널을 열어 Python, JavaScript, CSS, SVG, CSV로 복사하세요.
자주 쓰는 캔버스 크기와 내보내기 형식, 그리고 언제 쓰는지.
| 선택 | 어울리는 용도 | 메모 |
|---|---|---|
| 16x16 그리드 | 아이콘, 파비콘, 작은 스프라이트 | 클래식 스프라이트 크기, 픽셀 하나하나가 중요 |
| 32x32 그리드 | 게임 캐릭터, 아바타 | 디테일과 수고 사이의 최적점 |
| 64x64 그리드 | 디테일한 장면, 초상 | 실루엣부터 계획하세요. 4,096픽셀은 천천히 채워집니다 |
| PNG 내보내기 | 아바타, 스티커, 에셋 | 16배 이상으로 확대해야 픽셀이 선명합니다 |
| GIF 내보내기 | 채팅과 웹 애니메이션 | FPS 설정 사용, 투명도 지원 |
| 스프라이트 시트 | 게임 엔진 | 모든 프레임을 PNG 한 장에 나란히 |
| 코드 내보내기 | 학습, 제너러티브 아트 | Python, JavaScript, CSS, SVG, CSV |
PIXELS = [ [None, "#e43b44", "#e43b44", None], ["#e43b44", "#a22633", "#a22633", "#e43b44"], [None, "#e43b44", "#a22633", None], [None, None, "#e43b44", None],]
for row in PIXELS: print("".join("█" if c else " " for c in row))코드 내보내기는 모든 픽셀을 중첩 리스트의 hex 색상으로 기록하고, PNG로 되돌리는 Pillow 스니펫도 함께 제공합니다. 이 미니 버전은 터미널에 모양을 출력합니다. 이미지가 그저 2차원 배열이라는 증거죠.
.pixel-art { --px: 12px; width: var(--px); height: var(--px); box-shadow: calc(1 * var(--px)) 0 0 0 #e43b44, calc(2 * var(--px)) 0 0 0 #e43b44, calc(1 * var(--px)) calc(1 * var(--px)) 0 0 #a22633;}CSS 내보내기는 각 픽셀을 단일 div의 box-shadow 오프셋으로 바꿉니다. 프런트엔드의 고전 트릭이죠. 아무 페이지에나 붙여 넣고 --px 값만 바꾸면 작품 전체 크기가 조절됩니다.
,#e43b44,#e43b44, #e43b44,#a22633,#a22633,#e43b44 ,#e43b44,#e43b44, ,,#e43b44,
CSV 내보내기는 셀마다 hex 코드를 하나씩 넣습니다. Google 시트나 Excel에서 열어 열 너비를 정사각형으로 줄이고, 값에 따라 셀을 칠하는 조건부 서식 규칙 하나만 추가하면 스프레드시트 픽셀 아트 완성입니다.
