그리드에 픽셀 아트를 그리고 프레임을 애니메이션으로 만들어 PNG, GIF 또는 코드로 내보내세요.
마지막 업데이트
Coddy는 브라우저에서 실제 코드를 작성하며 배웁니다. 인터랙티브 레슨, 즉각적인 피드백, 막힐 때 도와주는 AI까지.
픽셀 아트 메이커는 고정된 그리드 위에서 그리는 도구입니다. 자유로운 붓질 대신 픽셀을 한 칸씩 직접 놓습니다. 이 제약이 바로 픽셀 아트의 매력입니다. 게임 스프라이트, 레트로 아이콘, 아바타, 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에서 열어 열 너비를 정사각형으로 줄이고, 값에 따라 셀을 칠하는 조건부 서식 규칙 하나만 추가하면 스프레드시트 픽셀 아트 완성입니다.
작은 그리드 위에 픽셀을 하나씩 놓아 만드는 디지털 아트로, 모든 칸이 의도적으로 배치됩니다. 클래식 비디오 게임의 비주얼 스타일이며 지금도 인디 게임, 아바타, 아이콘, 프로필 사진 등 어디에나 있습니다.
16x16 그리드와 3~4가지 색으로 시작하세요. 하트, 버섯, 검처럼 단순한 것의 실루엣을 그리고 하이라이트와 그림자 톤을 하나씩 더하세요. 내장 스텐실이 다시 칠하고 고칠 수 있는 출발점이 되어 줍니다. 쉬운 픽셀 아트의 핵심은 디테일이 아니라 깔끔한 형태입니다.
16x16과 32x32가 클래식 스프라이트 크기이자 최고의 출발점입니다. 32x32면 대부분의 캐릭터와 아바타에 충분합니다. 64x64는 진짜 디테일이 필요할 때만 쓰세요. 내보낼 때는 16배, 32배로 확대해야 픽셀이 선명하게 유지됩니다.
복제 버튼으로 두 번째 프레임을 추가하고 픽셀 몇 개를 바꾼 뒤(눈 깜빡임, 불꽃 흔들림) FPS를 설정하고 재생으로 미리 보세요. GIF 다운로드를 누르면 투명도를 지원하는 반복 GIF가 만들어져 채팅 앱, Discord, 웹사이트에 바로 쓸 수 있습니다.
모든 애니메이션 프레임을 나란히 담은 이미지 한 장입니다. Unity, Godot, Phaser 같은 엔진은 시트를 한 번 불러온 뒤 보이는 영역을 옮겨 가며 프레임을 재생합니다. 내보내기는 일정한 셀 크기로 프레임을 한 줄로 배치합니다.
네. 프레임을 하나씩 그리고 게임의 프레임 속도로 루프를 미리 본 다음, 투명 배경의 스프라이트 시트 PNG로 내보내세요. SVG와 PNG 내보내기는 UI 아이콘과 타일에도 좋습니다.
Piskel의 핵심 워크플로(그리드 드로잉, 프레임 애니메이션, GIF와 스프라이트 시트 내보내기)를 그대로 지원하고, 설치 없이 브라우저에서 완전히 돌아가며, 코드 내보내기까지 얹었습니다. 단순하고 관리되는 온라인 스프라이트 에디터를 찾는다면 바로 그 용도로 만들어졌습니다.
교실에서 유행한 고전 놀이입니다. 스프레드시트 셀을 정사각형으로 줄이고 색을 칠해 그림을 만드는 거죠. CSV 내보내기가 셀마다 hex 코드를 넣어 주므로, Google 시트나 Excel의 조건부 서식 규칙 하나면 그림이 다시 살아납니다.
코드 패널에서 형식을 고르세요. Python은 2차원 리스트와 Pillow 렌더러, JavaScript는 캔버스 그리기, CSS는 div 하나짜리 box-shadow 아트, SVG는 선명한 벡터 사각형, CSV는 스프레드시트용 데이터를 만들어 줍니다.
네. 무료이고 가입도 워터마크도 없습니다. 모든 것이 브라우저 안에서 로컬로 동작합니다. 작품은 기기에 자동 저장되며 서버로 업로드되지 않습니다.
