도트 외곽선·그림자 넣기 · 1px 테두리 한 번에
스프라이트를 두르는 깔끔한 1px 외곽선과 그 아래 1px 그림자를 캔버스에서 명령 하나로 넣습니다. 비교에 쓴 스프라이트에서 외곽선은 에이스프라이트 결과와 픽셀까지 같았고, Aseprite 1.3.18에서는 손으로 여섯 단계쯤 걸리는 그림자가 여기서는 명령 하나입니다.
도트 외곽선은 실루엣을 두르는 1px 어두운 테두리입니다. 바깥 외곽선은 스프라이트에 닿은 투명 픽셀을 칠하므로 스프라이트가 사방으로 1px씩 커지고, 그래서 먼저 캔버스에 사방 1px 여유가 있어야 합니다. 안쪽 외곽선은 스프라이트 가장자리 픽셀을 덧칠해 크기가 그대로입니다. Nerulio에서는 픽셀 › 캔버스 크기…(Ctrl+Alt+C)가 기본으로 사방 +1을 제안하고, 이어서 픽셀 › 외곽선이 현재 레이어와 프레임에 전경색으로 변이 맞닿는 바깥 외곽선을 그립니다. 픽셀 › 드롭 섀도는 배경색으로 1px 그림자를 넣습니다.
- .aseprite검증됨· Aseprite 1.3.18
- Palette files측정 확인· read back
- Engine bundles검증됨· Godot 4.7.2 · Unity 6000.5
- Frame PNG · .nerulio일반 파일
바깥이냐 안쪽이냐, 변이냐 모서리냐, 그리고 캔버스 1픽셀
바깥 외곽선은 그린 픽셀을 모두 남기고 그 밖에 테두리를 더합니다. 복잡한 배경 위에서 캐릭터를 도드라지게 할 때 흔히 쓰지만 스프라이트가 가로·세로 2px씩 커지므로, 32×32 캐릭터라면 34×34 캔버스가 필요하거나 30×30 안에 그려야 합니다. 안쪽 외곽선은 대신 스프라이트의 가장 바깥 픽셀을 덧칠합니다. 크기는 그대로지만 1px 칼이나 머리카락 한 가닥 같은 가장 가는 부분이 선에 묻혀 사라집니다.
어떤 이웃을 세느냐가 모서리 모양을 정합니다. 4방향 외곽선은 스프라이트와 변으로 맞닿은 곳에만 픽셀을 더해 대각선 모서리가 비고 둥글게 보입니다. 8방향은 대각선 모서리까지 채워 각져 보입니다. Nerulio의 명령은 4방향 모양을 그리며, 비교 시험 스프라이트에서 에이스프라이트 기본 외곽선과 같은 모양이었습니다.
외곽선은 레이어에서 투명하지 않은 모든 것을 기준으로 계산합니다. 팔과 몸 사이 틈처럼 둘러싸인 구멍도 투명이라 안쪽에서 외곽선이 생기고, 반투명한 빛도 채워진 것으로 셉니다. 실루엣 전체를 한 레이어에 두거나 두를 영역을 선택하세요. 선택 영역이 있으면 명령은 선택한 픽셀을 1px 넓힌 범위만 건드립니다.
- 바깥 외곽선
- 실루엣의 투명한 쪽에 새 픽셀로 두른 테두리. 스프라이트가 사방 1px씩 커짐.
- 안쪽 외곽선
- 스프라이트 자체의 가장자리 픽셀을 다시 칠한 것. 크기는 그대로.
- 4방향 연결
- 변을 공유하는 이웃(위·아래·왼쪽·오른쪽). 모서리는 비어 있음.
- 8방향 연결
- 변과 대각선 이웃. 모서리가 채워짐.
- 캔버스 크기
- 그림을 확대·축소하지 않고 가장자리에 픽셀을 더하거나 빼는 명령.
예시: 외곽선 픽셀 세기
4×4로 채운 정사각형을 명령과 같은 계산으로 처리한 결과입니다.
8×8 캔버스 위 4×4 정사각형 그림 16 px
바깥, 4방향 (Nerulio 명령) +16 px (변마다 4, 모서리 비움)
바깥, 8방향 +20 px (모서리 4개도 채움)
안쪽 12 px 덧칠, 크기 그대로
왼쪽 가장자리에 닿은 정사각형 바깥 +12 px (한쪽에 자리가 없음)
왼쪽 캔버스 +1 뒤 바깥 +16 px (다시 완전함)
드롭 섀도(오른쪽·아래 1 px) 정사각형만 +7 px, 외곽선 뒤 +9 px
실제 스프라이트 96×144 → 캔버스 98×146 외곽선 1846 px, 그림자 705 px, 에이스프라이트와 동일외곽선을 먼저, 그림자를 나중에 넣으세요. 그러면 그림자가 외곽선까지 포함한 실루엣에서 떨어지며, 비교 시험 스프라이트도 두 프로그램에서 이 순서로 만들었습니다.
이렇게 작동합니다
- 픽셀 › 외곽선은 불투명 픽셀 바깥쪽에 전경색으로 1px 테두리를 그립니다. 변으로 맞닿는(4방향) 모양이라 에이스프라이트 기본 외곽선과 같고, 원래 그림은 바뀌지 않습니다.
- 픽셀 › 드롭 섀도는 실루엣을 오른쪽 아래로 1px 옮겨 배경색으로 그림 뒤에 놓습니다. Aseprite 1.3.18에는 그림자 명령이 없어 레이어 복제, 채우기, 이동, 순서 변경, 합치기를 거쳐야 합니다.
- 선택 영역이 있으면 두 명령 모두 선택한 픽셀을 1px 넓힌 범위에만 적용되므로, 붐비는 시트에서 캐릭터 하나나 스프라이트 일부만 두를 수 있습니다.
- 캔버스 크기(Ctrl+Alt+C)로 먼저 여백을 늘리면 가장자리에 닿은 그림의 외곽선이 잘리지 않습니다. 명령 하나가 히스토리 한 단계라 통째로 되돌릴 수 있습니다.
- 여러 프레임을 한 번에 하려면 확대된 그림을 정리하는 정리 패널에서 외곽선과 그림자를 함께 넣을 수 있고, 결과는 프레임·시간·태그가 있는 새 스프라이트가 됩니다.
사용 방법
- 스프라이트나 프레임을 이 페이지에 끌어다 놓으면 첫 프레임이 열린 픽셀 작업 공간이 나옵니다.
- 그림이 가장자리에 닿아 있으면 Ctrl+Alt+C로 캔버스를 사방 1px씩 넓힙니다.
- 전경색을 외곽선 색으로 정하고 픽셀 › 외곽선을, 배경색을 그림자 색으로 정하고 픽셀 › 드롭 섀도를 실행합니다.
- 쉼표·마침표로 프레임을 넘기며 필요한 곳에 반복한 뒤, .aseprite로 저장하거나 패킹·내보내기에서 프레임을 내보냅니다.
외곽선 확인하기
- 실행하기 전에 가장 바깥 줄과 칸을 봅니다. 그림 픽셀이 하나라도 있으면 먼저 캔버스를 늘립니다.
- 400 %로 확대해 실루엣을 따라갑니다. 가장자리 픽셀마다 바깥에 외곽선 픽셀이 정확히 하나 있고 대각선 모서리는 비어 있어야 합니다.
- 외곽선을 넣은 레이어 주변 레이어를 숨겨 봅니다. 팔과 몸 사이 틈에 원치 않는 외곽선이 생겼다면 지우거나 틈을 먼저 메우세요.
- 쉼표·마침표로 프레임을 넘깁니다. 명령은 현재 프레임에만 적용되므로 필요한 프레임마다 외곽선이 있어야 합니다.
같은 외곽선·그림자 작업의 실측
Eris의 Sumo Hulk 시트(OpenGameArt, CC0), 96×144. docs/STUDIO-PIXEL.md §6, T8.
| 단계 | Nerulio 픽셀 | Aseprite 1.3.18 |
|---|---|---|
| 여백 만들기 | 캔버스 크기 +1(명령 하나) | 캔버스 크기 +1 |
| 1px 외곽선 | 픽셀 › 외곽선: 1846px 추가 | Edit › FX › Outline: 1846px 추가, 동일 |
| 드롭 섀도 | 픽셀 › 드롭 섀도: 705px, 수작업 결과와 동일 | 명령 없음: 복제, 채우기, 1,1 이동, 아래로, 합치기(약 6단계) |
| 되돌리기 | 명령마다 히스토리 한 단계 | 동작마다 각각 되돌리기 |
문제 해결
| 증상 | 유력한 원인 | 확인 방법 | 해결 |
|---|---|---|---|
| 한쪽 외곽선이 없음 | 그림이 캔버스 끝에 닿아 칠할 바깥 픽셀이 없음 | 첫째·마지막 줄이나 칸에 불투명 픽셀이 있음 | 되돌린 뒤 픽셀 › 캔버스 크기…로 사방 +1을 하고 다시 외곽선 |
| 스프라이트 안의 구멍에도 외곽선이 생김 | 둘러싸인 투명 픽셀도 바깥으로 셈 | 팔다리와 몸 사이 틈을 확대해 봄 | 틈을 메우거나, 틈을 뺀 스프라이트를 선택하고 선택 영역에 외곽선 |
| 캐릭터 일부에만 외곽선이 생김 | 명령은 현재 레이어에만 적용되는데 실루엣이 여러 레이어에 나뉨 | 레이어 표시를 켜고 끄면 외곽선이 한 레이어 모양만 따름 | 먼저 아래로 합치기(Ctrl+E)를 하거나, 실루엣 전체가 있는 레이어에 외곽선 |
| 빛이나 연기에 딱딱한 어두운 테두리가 생김 | 알파가 0보다 큰 픽셀은 모두 채워진 것으로 셈 | 빛 픽셀을 찍어 보면 알파가 1~254 사이 | 몸만 선택한 뒤 외곽선을 넣거나, 빛은 외곽선 뒤에 추가 |
| 외곽선이 2픽셀 두께 | 명령을 두 번 실행해 테두리가 한 겹 더 생김 | 히스토리에 외곽선 항목이 두 개 | 한 번 되돌리기. 실행마다 히스토리 한 단계 |
| 다른 프레임에는 외곽선이 없음 | 명령은 현재 프레임만 바꿈 | 마침표로 다음 프레임으로 넘겨 봄 | 프레임마다 반복하거나, 정리 패널의 외곽선 옵션을 범위(태그 또는 모든 프레임)로 사용 |
다른 방법
| 방법 | 이럴 때 더 낫습니다 |
|---|---|
| 에이스프라이트: Edit › FX › Outline(Shift+O) | 안쪽 외곽선, 이웃 모양 직접 지정, 애니메이션의 모든 셀에 한 번에 적용이 필요할 때. 공식 문서에 Inside/Outside, 모양 프리셋, Selected/All이 설명돼 있습니다. |
| 손으로 외곽선 그리기 | 빛을 받는 쪽은 밝게, 땅에 닿는 곳은 빼는 선택적 외곽선은 명령이 대신해 주지 못하는 표현상의 선택입니다. |
| Nerulio 정리 패널 | 어차피 확대된 그림을 변환할 때. 외곽선·그림자 옵션이 정한 범위 전체에 적용되고 새 스프라이트가 됩니다. 도트 축소 참고. |
엔진별 내보내기와 검증 방법
"검증됨"은 실제 CC0 에셋으로 내보낸 파일을 해당 엔진·도구가 직접 불러와 원본과 비교했다는 뜻입니다. 불러오지 않은 형식은 그렇게 표시합니다.
| 대상 | 파일 | 검증 |
|---|---|---|
| .aseprite | layers · blend · opacity · locked · indexed palette · frames · tags | 검증됨 Aseprite 1.3.18실제 Aseprite 명령줄이 파일을 인덱스 모드, 레이어 2개, 불투명도 160의 곱하기, 편집 불가로 잠긴 레이어 그대로 다시 열었고 프레임 픽셀이 같았습니다. |
| Palette files | .gpl · .pal · .hex · .ase · .act · .json | 측정 확인 read back형식마다 쓰고 다시 읽어 같음을 확인했고, Aseprite가 만든 .gpl·.pal·.hex·.act와 실제 Adobe .ase(16색)를 읽었습니다. |
| Engine bundles | Godot 4 · Unity 6 · Phaser 3/4 · PixiJS 8 … through Pack & Export | 검증됨 Godot 4.7.2 · Unity 6000.5그린 스프라이트는 패킹·내보내기에서 묶습니다. 그 엔진 파일은 실제 CC0 에셋으로 각 엔진에서 불러와 확인했습니다(49회 중 47회 통과, 실패 2회는 Phaser 3 프리셋이 피하는 Phaser 3.90 버그). |
| Frame PNG · .nerulio | PNG-8 with the palette when an indexed frame fits it · project file | 일반 파일어떤 도구에서도 쓰는 일반 파일이며, 엔진 실행 검증은 주장하지 않습니다. |
검증 근거
정리 벤치마크(원래 1배 그림을 아는 CC0 사례 69개): 크기를 정확히 찾은 비율 81 %(±1px 90 %), 배경 유지 시 픽셀 74.0 % 정확. 가장 나은 경쟁 도구는 크기 30 %(perfectPixel), 정확한 픽셀 44.6 %(unfake.js). Aseprite로 만든 ×4 최근접 확대는 100 %, ×3.78 쌍선형 확대는 99.7 % 정확하게 돌아왔고 두 경우 모두 크기를 자동으로 찾았습니다. 1px 외곽선과 드롭 섀도는 Aseprite 결과와 픽셀까지 같았습니다(1846px, 705px). 여기서 쓴 .aseprite는 Aseprite 1.3.18에서 인덱스 모드와 레이어·블렌드·잠금이 그대로 열립니다.
한계
- 명령으로 쓸 수 있는 것은 바깥·4방향 외곽선뿐이며 안쪽과 8방향 외곽선은 없습니다.
- 명령은 현재 레이어와 프레임에만 적용됩니다. 애니메이션 전체는 정리 패널이나 프레임마다 실행해야 합니다.
- 그림자 위치는 오른쪽 1px, 아래 1px로 고정입니다.
- 픽셀 작업 공간에 없는 것(Aseprite에는 있음): 레이어 그룹, 링크된 셀, 타일맵 레이어, 참조 레이어, RotSprite와 선택 영역 자유 회전·크기 조절(뒤집기와 90°만), 그라디언트·스프레이·윤곽·텍스트 도구, 사용자 브러시(사각·원 1~16px), 타일 반복 그리기, Lua 스크립트와 명령줄.
- 대칭 축은 숫자로 입력하며 캔버스에서 끌 수 없습니다. 터치에서는 오른쪽 버튼이 없어 배경색은 전환 버튼이나 X로 씁니다.
- 정리: JPEG는 가깝게 돌아오지만(배경 유지 시 84 %가 ΔE 0.02 이내) 정확히 같은 경우는 드뭅니다(12 %). 모의 생성 그림은 크기를 정확히 맞힌 비율이 20 %(±1px 80 %)이고, 실제 생성 그림 7장은 하나도 자동으로 맞추지 않았습니다. 패널이 제안한 픽셀 크기를 직접 입력해야 합니다.
- 인덱스 변환은 Aseprite의 RGB 거리가 아니라 Oklab에서 가장 가까운 색을 고릅니다. 시험 스프라이트의 68 % 픽셀이 다른(눈으로 더 가까운) 색이 됐습니다. Lospec 검색이 유일한 네트워크 요청이며 먼저 묻습니다.
버전과 출처
Nerulio: 96×144 CC0 비교 시험 스프라이트에서 캔버스 크기 +1, 외곽선, 드롭 섀도가 1846px와 705px를 더했고, Aseprite 1.3.18에서 만든 결과와 픽셀까지 같았습니다(docs/STUDIO-PIXEL.md §6, T8). 위 정사각형 수치는 src/studio/pixel/raster.js로 계산했습니다. 에이스프라이트 옵션 설명은 공식 문서를 따릅니다.
참고한 공식 문서
자주 묻는 질문
외곽선은 스프라이트 안쪽에 그려지나요, 바깥쪽인가요?
바깥쪽입니다. 불투명 픽셀 옆의 투명 픽셀만 채우므로 그림 자체는 덮지 않습니다. 비교 시험에서 1846픽셀이 추가됐고, 같은 스프라이트에 에이스프라이트의 Edit › FX › Outline이 만든 4방향 외곽선과 정확히 같았습니다.
애니메이션 전체 프레임에 한 번에 넣을 수 있나요?
명령은 현재 프레임에 적용됩니다. 애니메이션 전체라면 프레임마다 실행하거나, 정리 패널의 외곽선·그림자 옵션을 쓰세요. 정한 범위(이 프레임, 태그, 모든 프레임)에 적용해 새 스프라이트를 만듭니다.
인덱스 스프라이트에서도 되나요?
네. 외곽선과 그림자는 팔레트의 전경색·배경색을 쓰고 셀은 다시 인덱스 PNG로 저장되므로 스프라이트는 인덱스 모드 그대로입니다.
무료인가요? 계정이 필요한가요?
이 페이지의 기능은 모두 무료이며 계정 없이 쓸 수 있습니다. 워터마크나 막혀 있는 내보내기가 없습니다.
스프라이트가 업로드되나요?
아니요. Studio는 이 브라우저 탭 안에서 디코딩·패킹·내보내기를 합니다. 프로젝트는 브라우저(IndexedDB)에 자동 저장되며 .nerulio 파일로 저장할 수 있습니다.
Aseprite나 엔진 플러그인을 설치해야 하나요?
아니요. .aseprite 파일은 브라우저에서 읽고 씁니다. 엔진별 번들에는 그 엔진에 필요한 것이 들어 있습니다(Godot는 가져오기 설정과 씬, Unity와 Godot 타일셋은 작은 편집기 스크립트).