NormalMap-Online 대안 · 스프라이트 노멀맵 사이트
NormalMap-Online은 오래전부터 쓰여 온 무료 노멀맵 만들기 사이트입니다. MIT 라이선스이고 페이지 안에서 로컬로 돌아가며, 노멀·변위·AO·스페큘러 탭과 3D 미리보기를 갖춘 텍스처 중심 도구입니다. Studio의 Texture 작업 공간도 무료·로컬이지만 2D 게임 스프라이트용으로 만들었습니다. 윤곽에서 입체를 만들고, 조명은 고도 엔진 방식 그대로이며, 내보낸 파일은 고도와 유니티에서 확인했습니다. 같은 CC0 에셋을 기본값으로 돌린 결과는 차이가 큽니다.
NormalMap-Online(MIT, 브라우저 안에서 처리)은 그림을 노멀·변위·앰비언트 오클루전·스페큘러 맵으로 바꾸며 Strength, Level, Blur/Sharp, Sobel·Scharr 필터, R·G·높이 반전 스위치가 있고, 결과를 3D 도형에 입혀 보여 주며, 서로 다른 방향에서 비춘 사진 네 장으로 노멀맵을 만들 수도 있습니다. Studio 텍스처 작업 공간은 2D 스프라이트용입니다. 실루엣 베벨, Godot를 따르는 2D 조명 미리보기, GL·DX 판별, 검증된 Godot 4·Unity 6 내보내기가 있습니다. 같은 CC0 스프라이트를 기본 설정으로 비교하면 그쪽 출력은 실제 노멀에서 훨씬 멀었고 빨강이 뒤집혀 있었습니다.

- Godot 4 2D lights검증됨· Godot 4.7.2
- PNG set + JSON일반 파일
- Unity 6 URP 2D검증됨· Unity 6000.5.3f1 (URP 17.5)
서로 다른 두 작업: 표면과 스프라이트
NormalMap-Online은 그림을 높이 맵으로 봅니다. 밝기가 높이이고, 고른 필터가 기울기를 구하며, Strength·Level·Blur/Sharp가 결과를 다듬습니다. 사진으로 찍은 표면이나 반복 텍스처에 어울립니다. 스프라이트는 실루엣에서 밝기에 높이 정보가 없어 베벨이 없으면 가장자리가 평평하게 남습니다. 3D로 렌더한 소행성에서 그 기본값은 실제 노멀과 61.1°, Studio는 20.0° 차이였습니다.
측정 때 그 기본 출력은 빨강 채널이 뒤집혀 있었고(실제 노멀과 상관 −0.58) z가 매우 낮았습니다. 페이지에 Invert R·Invert G 스위치와 Z Range 옵션이 있으니, 그걸로 만든 스프라이트가 좌우 반대쪽에서 비치면 먼저 Invert R을 확인하세요. Studio 점검 패널은 스프라이트에서 이런 맵을 "빨강 뒤집힘"으로 알려 주고 빨강 뒤집기 (X−)로 고칩니다.
벽돌 텍스처에서는 두 툴 모두 반복이 정확했으므로(롤 오차 0), 단순 반복 텍스처라면 차이는 추측이 얼마나 가까운지(색 이미지에서 만든 벽돌 65.6° 대 14.7°)와 각 툴이 주는 추가 맵입니다.
맵 다음 단계에서 Studio는 2D 게임에 필요한 것을 더합니다. 스프라이트 위로 끄는 조명, 프레임별 시트, _n·_n_dx 파일, 엔진 번들입니다. NormalMap-Online은 내려받기에서 끝납니다.
- 포토메트릭 스테레오
- 같은 표면을 여러 방향에서 비춘 사진들로 노멀을 복원하는 방법.
- Invert R / G
- X나 Y의 부호를 바꾸는 스위치. 잘못 켜면 스프라이트가 반대쪽에서 비칩니다.
- 베벨
- 투명한 가장자리에서 올라오는 높이. 스프라이트 외곽선에 입체를 주는 부분.
이렇게 작동합니다
- 투명 영역이 있는 스프라이트는 윤곽에서 베벨을 만들므로, 가장자리에만 노멀이 있고 안쪽은 평평하게 남는 일이 없습니다.
- 열어 본 노멀맵은 쓰기 전에 검사합니다. OpenGL인지 DirectX인지 신뢰도와 함께 알려 주고, 스프라이트라면 빨강 채널 반전도 찾습니다. "It is OpenGL / It is DirectX"나 Flip red (X−)를 누르기 전에는 바꾸지 않습니다.
- 미리보기는 고도 엔진이 그리는 방식 그대로 조명한 2D 화면(기준과 1/255 이내)이고, 점광원을 8개까지 스프라이트 위로 끌어 놓을 수 있습니다.
- 대상별 폴더로 내보냅니다. 조명이 달린 고도 씬, 유니티 6 URP 2D 임포터, 또는 두 규약(_n, _n_dx)의 노멀맵과 16비트 높이 맵이 든 PNG 묶음.
같은 에셋으로 본 Nerulio Studio와 NormalMap-Online
실제 정답 노멀맵과의 평균 각도이며 낮을수록 좋습니다. NormalMap-Online은 실제 사이트에서 그림을 높이 입력으로 넣고 기본값으로 돌렸습니다.
| Nerulio Studio | NormalMap-Online | |
|---|---|---|
| 소행성(3D 모델에서 렌더링한 노멀) | 20.0° | 61.1° |
| 손으로 그린 도트 횃불 | 38.1° | 87.1° |
| 벽돌: 색상 이미지 / 8비트 높이 맵에서 | 14.7° / 8.8°, 롤 오차 0 | 65.6° / 77.8°, 이 에셋에서는 롤 오차 0 |
| 기본 출력을 Studio 검사로 읽으면 | OpenGL, 높음 | 빨강 반전(상관 −0.58), z가 매우 낮음. "빨강 반전"으로 표시 |
| 투명 영역이 있는 스프라이트 | 윤곽에서 베벨, 크기에 맞춤 | 베벨 없음 |
| 미리보기 | 고도 엔진 조명 모델과 1/255 이내로 같은 2D 조명 화면 | 3D 도형: 정육면체, 평면, 구, 원기둥, 주전자, 직접 넣는 .obj |
| 엔진 설정 | 조명 달린 고도 씬, 유니티 임포터(둘 다 검증) | PNG를 받아 엔진에서 직접 설정 |
| 실행 환경 | 브라우저, 로컬, 무료 | 브라우저, 로컬, 무료, MIT 라이선스 |
이 수치의 출처: docs/STUDIO-TEXTURE.md (Head-to-head, 2026-09-24)
NormalMap-Online 쪽이 더 나은 경우
- 포토메트릭 스테레오: 위·왼쪽·오른쪽·아래에서 비춘 실제 표면 사진 4장으로 노멀맵을 만듭니다. Studio에는 이런 기능이 없습니다.
- 변위·스페큘러 탭이 따로 있고 각각 설정할 수 있으며, 직접 넣은 .obj 모델까지 3D 도형으로 봅니다.
- "Download all"이 있는 일괄 처리로 텍스처 여러 장을 한 번에.
- MIT 오픈 소스라 직접 호스팅하거나 고쳐 쓸 수 있습니다.
사용 방법
- 텍스처나 스프라이트를 이 페이지에 끌어다 놓으면 Texture 작업 공간이 Sprite·Tileable texture 중 하나를 추천하고 바로 노멀맵을 만듭니다.
- NormalMap-Online에서 만든 맵을 쓰려면 원본 그림과 함께 열어 소스로 고르고, Check 패널이 빨강 반전을 알리면 Flip red (X−)를 누릅니다.
- Normal·Lit·Maps 보기를 오가고, 텍스처라면 T로 3×3 반복을 봅니다.
- Export(Ctrl+E)로 _n·_n_dx가 든 PNG 묶음이나 고도·유니티 폴더를 받습니다.
다른 방법
| 방법 | 이럴 때 더 낫습니다 |
|---|---|
| NormalMap-Online | 실제 표면 사진(위·왼쪽·오른쪽·아래에서 비춘 네 장), 변위·AO·스페큘러 탭을 한곳에서, 구·주전자·내 모델에 입혀 빠르게 보기, 일괄 처리, JPG·TIFF 출력, 직접 호스팅할 수 있는 MIT 프로젝트가 필요할 때. |
| Nerulio Studio 텍스처 | 투명 배경 스프라이트, 애니메이션 시트, Godot·Unity에 바로 쓸 결과, 규약을 확인해야 하는 다른 곳의 맵. |
| 텍스처 랩 높이 → 노멀 | Sobel·Scharr·Sobel 5×5, Wrap, OpenGL·DirectX로 높이 이미지에서 단순한 기울기 노멀맵을 만들 때. NormalMap-Online의 핵심 기능에 가깝습니다. |
엔진별 내보내기와 검증 방법
"검증됨"은 실제 CC0 에셋으로 내보낸 파일을 해당 엔진·도구가 직접 불러와 원본과 비교했다는 뜻입니다. 불러오지 않은 형식은 그렇게 표시합니다.
| 대상 | 파일 | 검증 |
|---|---|---|
| Godot 4 2D lights | _lit.tscn · CanvasTexture .tres · normal / specular PNG | 검증됨 Godot 4.7.2실제 CC0 사례 6개를 Godot(gl_compatibility)가 렌더링했고, 확인한 모든 프레임이 Studio 조명 미리보기와 1/255 이내로 같았습니다. 초록을 뒤집은 같은 렌더는 3.8~37단계 어긋나므로 잘못된 규약을 잡아낼 수 있습니다. |
| Unity 6 URP 2D | PNG · nerulio-texture.json · Editor/NerulioNormalMapImporter.cs | 검증됨 Unity 6000.5.3f1 (URP 17.5)12회 중 12회 통과(사례 6개 × 감마·리니어 색 공간): URP가 적용한 조명이 내보낸 노멀맵과 일치합니다(평균 오차 0.0037~0.0085). 빛의 감쇠는 URP 방식이라 밝기는 미리보기가 아니라 Unity 기준입니다. |
| PNG set + JSON | albedo · _n (OpenGL) · _n_dx (DirectX) · 16-bit height · AO · specular · manifest | 일반 파일어떤 엔진이나 도구에서도 쓰는 일반 파일이며, 엔진 실행 검증은 주장하지 않습니다. |
검증 근거
Godot 4.7.2가 실제 CC0 사례 6개(도트, HD 스프라이트, 반복 텍스처, 가져온 DirectX 맵)를 렌더링했고 확인한 모든 프레임이 Studio 미리보기와 1/255 이내였습니다. Unity 6000.5 URP 2D: 12회 중 12회 통과(사례 6개 × 감마·리니어). 규약을 아는 실제 맵으로 OpenGL/DirectX 판별: 1K 전체 맵 128개 100% 정답, 표본 1,562개 중 틀린 "높음" 판정 0건(초록이 밝으면 OpenGL이라는 단순 규칙은 46%).
한계
- 포토메트릭 스테레오가 없어 사진으로 노멀맵을 만들 수 없습니다.
- 내 3D 모델로 미리 볼 수 없으며, Studio의 3D 보기는 구나 평면뿐입니다.
- 폴더 단위 일괄 처리가 없습니다.
- 맵은 PNG로만 저장합니다(JPG·TIFF 없음).
- 투명한 가장자리가 없는 그림(반복 텍스처)에서는 빨강이 뒤집힌 것과 DirectX 초록을 구별할 수 없습니다. 점검 패널이 이를 알리고 "빨강 뒤집기"를 제공합니다.
- 시트는 스프라이트 작업 공간에서 프레임을 자르기 전까지 그림 하나로 조명됩니다. 텍스처 작업 공간은 프레임을 자르지 않습니다.
- 림 라이트는 미리보기 전용이며, Unity로는 스페큘러 맵을 내보내지 않습니다(Godot는 내보냄).
- Unity는 자체 빛 감쇠를 씁니다. 내보낸 노멀맵은 Unity에서 검증했지만 밝기 곡선은 Unity 방식입니다.
버전과 출처
2026-09-24에 NormalMap-Online 실제 사이트를 Playwright로 조작해, 그림을 높이 입력으로 넣고 기본 설정으로 결과를 받아 실제 기준 노멀과 비교했으며, Nerulio는 제안 설정 그대로 옆에서 측정했습니다. 위의 컨트롤 이름은 2026-09-28에 그 페이지에서 읽었고, 라이선스와 로컬 처리는 저장소에 적혀 있습니다.
참고한 공식 문서
자주 묻는 질문
NormalMap-Online으로 만든 스프라이트가 반대쪽에서 빛을 받는 것처럼 보여요.
이번 비교에서 기본 출력의 빨강 채널이 반전돼 있었습니다(정답과의 상관 −0.58). 그래서 왼쪽 빛이 오른쪽 빛처럼 보입니다. Studio의 검사는 스프라이트에서 이를 "빨강 반전"으로 표시하고, Flip red (X−)로 불러올 때 고칠 수 있으며 되돌리기도 됩니다.
NormalMap-Online 노멀맵을 반복하면 이음새가 생기나요?
이번 벽돌 텍스처에서는 생기지 않았습니다(롤 오차 0, Wrap을 쓴 Studio와 같음). 예전 조사에서 다른 그림에 경계 띠가 보였지만 이번에는 재현되지 않았으니, 직접 확인해 보세요. Studio의 반복 검사는 이음새가 없으면 0을 보여 줍니다.
Studio도 변위 맵이나 스페큘러 맵을 만드나요?
16비트 높이 맵, AO, 고도용 스페큘러 맵을 씁니다. 색에서 추정한 거칠기·스페큘러는 근사값이라고 표시합니다. 사진으로 만드는 포토메트릭 스테레오는 없습니다.
무료인가요? 계정이 필요한가요?
이 페이지의 기능은 모두 무료이며 계정 없이 쓸 수 있습니다. 워터마크나 막혀 있는 내보내기가 없습니다.
스프라이트가 업로드되나요?
아니요. Studio는 이 브라우저 탭 안에서 디코딩·패킹·내보내기를 합니다. 프로젝트는 브라우저(IndexedDB)에 자동 저장되며 .nerulio 파일로 저장할 수 있습니다.
Aseprite나 엔진 플러그인을 설치해야 하나요?
아니요. .aseprite 파일은 브라우저에서 읽고 씁니다. 엔진별 번들에는 그 엔진에 필요한 것이 들어 있습니다(Godot는 가져오기 설정과 씬, Unity와 Godot 타일셋은 작은 편집기 스크립트).