적은 폴리곤으로 디테일을 살린다! 노멀 맵의 역할과 원리, 베이킹부터 실전 활용까지 완전 정복

🧐 1. 노멀이 뭐길래? 시작은 '법선'부터

노멀(Normal)은 우리말로 법선이야. 어떤 표면에 수직으로 뻗은 방향 벡터를 말해. 책상 위에 연필을 똑바로 세우면 그 연필 방향이 책상면의 노멀이지.
왜 중요하냐면, 3D 렌더링에서 "이 표면이 얼마나 밝은가"를 계산할 때 핵심 재료가 노멀이거든.

가장 기본적인 램버트(Lambert) 확산 조명 모델은 이렇게 생겼어.

밝기 = max(0, dot(N, L)) × 빛의 색 × 표면 색
N : 표면 노멀 (정규화된 벡터)
L : 표면에서 광원으로 향하는 방향 (정규화된 벡터)

두 벡터의 내적(dot)은 사이 각도의 코사인 값이야. 표면이 빛을 정면으로 보면(각도 0°) 1이라 가장 밝고, 비스듬해질수록 어두워지고, 90°를 넘으면 0, 즉 빛을 못 받아.
여기서 중요한 포인트! 렌더러는 밝기를 계산할 때 '실제 기하 형태'가 아니라 '노멀 값'을 본다는 거야. 그러면 노멀만 살짝 다르게 알려주면? 평평한 면도 울퉁불퉁한 것처럼 빛을 받게 되지. 이게 노멀 맵의 핵심 아이디어야 💡

🔺 폴리곤이 많으면 안 되나?

"그냥 폴리곤 많이 쓰면 되지 않아?"라는 질문, 당연히 나올 수 있어. 문제는 비용이야.

스컬핑으로 만든 원본 캐릭터는 수백만~수천만 폴리곤도 흔해. 이걸 게임에 그대로 넣는 건 대부분의 경우 비현실적이지. 그래서 업계는 오랫동안 "형태(실루엣)는 폴리곤으로, 잔디테일은 텍스처로"라는 분업 전략을 써왔어.
참고로 언리얼 엔진 5의 나나이트(Nanite)처럼 초고밀도 지오메트리를 효율적으로 처리하는 기술도 나왔지만, 그 경우에도 머티리얼 디테일용 노멀 맵은 여전히 쓰이고 모바일·VR·웹 환경에선 저폴리+노멀 맵 조합이 표준이야.

🌈 2. 노멀 맵은 왜 파랗게 생겼을까?

노멀 맵 처음 보면 다들 "이 보라색 파란 이미지는 뭐지?" 싶어. 비밀은 간단해. 방향 벡터 (X, Y, Z)를 색상 채널 (R, G, B)에 저장한 거야.

노멀 벡터 각 성분은 -1~+1 범위인데, 이미지는 0~1(8비트면 0~255)만 저장할 수 있어. 그래서 이렇게 변환해.

저장할 때 : 색 = 노멀 × 0.5 + 0.5
읽을 때   : 노멀 = 색 × 2.0 - 1.0

평평한 표면의 노멀은 표면에서 바로 위를 보는 (0, 0, 1)이야. 이걸 변환하면 (0.5, 0.5, 1.0), 8비트로는 대략 (128, 128, 255). 바로 그 특유의 연보라 파랑색이지! 대부분 표면이 거의 평평하니까 이미지 전체가 파란 톤을 띠는 거야.

🧭 3. 노멀 맵의 3가지 공간: 탄젠트 vs 오브젝트 vs 월드

노멀 벡터를 "어느 기준으로" 저장했느냐에 따라 노멀 맵 종류가 갈려. 이게 은근히 헷갈리는 부분이니 표로 정리해 볼게.

게임 실무에서 압도적으로 많이 쓰는 건 탄젠트 스페이스 노멀 맵이야. 표면을 기준으로 "여기선 위쪽으로 살짝, 저기선 왼쪽으로 살짝" 하는 상대적 정보만 담으니까, 캐릭터 팔이 구부러져도 표면과 함께 따라가거든.

📐 TBN 행렬, 겁먹지 말기

탄젠트 스페이스를 쓰려면 정점마다 세 개의 축이 필요해.

셰이더는 텍스처에서 읽은 노멀을 이 TBN 행렬로 변환해서 월드 공간의 노멀로 만들고 조명을 계산해. 대략 이런 모양이야.

vec3 n = texture(normalMap, uv).rgb * 2.0 - 1.0;  // 0~1 → -1~1
mat3 TBN = mat3(T, B, N);
vec3 worldNormal = normalize(TBN * n);
float diffuse = max(dot(worldNormal, lightDir), 0.0);

여기서 중요한 사실: 탄젠트를 어떻게 계산하느냐가 툴마다 달랐던 게 수많은 이음새 버그의 원인이었어. 그래서 업계는 MikkTSpace라는 표준 탄젠트 계산 방식을 널리 채택했어. 블렌더, 언리얼 엔진, 서브스턴스 페인터, 마모셋 툴백 등 주요 툴이 지원하지. 베이킹 툴과 렌더링 엔진이 같은 탄젠트 방식을 쓰면 "베이크한 그대로" 정확히 보이는데, 이걸 동기화된 탄젠트 공간(synced tangent space)이라고 해.

🟢 4. 악명 높은 초록 채널: OpenGL vs DirectX

노멀 맵 쓰다가 "어? 튀어나와야 할 게 들어가 보이는데?" 경험해 봤다면 십중팔구 이거야. 바로 Y(초록) 채널 방향 차이!

둘은 G 채널만 반전돼 있어. 그래서 잘못 쓰면 빛이 위에서 비치는데 홈이 볼록해 보이거나, 볼록한 게 오목해 보이는 착시가 생겨. 해결은 쉬워. G 채널을 반전하면 끝! 대부분 엔진은 텍스처 설정에 "Flip Green Channel" 같은 옵션이 있고, 서브스턴스 페인터도 내보내기 시 포맷 선택이 가능해.

🔥 5. 핵심 실무: 노멀 맵 베이킹 워크플로

노멀 맵은 보통 직접 그리는 게 아니라 베이킹(Baking)으로 만들어. 고폴리 모델의 표면 디테일을 저폴리 모델 텍스처로 "구워 내는" 거지. 흐름은 이래.

🎯 레이캐스팅: 베이킹의 실제 원리

베이커는 로우폴리 표면의 각 텍셀(텍스처 픽셀) 위치에서 노멀 방향으로 광선(레이)을 쏴. 그 광선이 하이폴리 표면에 부딪히면, 그 지점의 하이폴리 노멀을 읽어서 로우폴리의 탄젠트 공간 기준으로 변환해 저장해. 이걸 텍셀마다 반복하면 노멀 맵 완성!

케이지(Cage)는 로우폴리를 바깥쪽으로 살짝 부풀린 껍데기야. 광선이 케이지에서 출발해 안쪽으로 향하기 때문에, 하이폴리가 로우폴리보다 바깥으로 튀어나와 있어도 잡아낼 수 있어. 케이지가 너무 작으면 디테일이 잘려 나가고, 너무 크면 옆에 있는 다른 부분까지 광선이 닿아 이상한 무늬가 생겨.

⚠️ 베이킹 단골 오류 TOP 5

🧪 6. 범프 맵, 하이트 맵, 디스플레이스먼트… 형제들과 비교

"표면 디테일" 하면 노멀 맵만 있는 게 아니야. 가족 관계를 정리해 보자.

노멀 맵의 가장 큰 한계는 실루엣은 못 바꾼다는 거야. 정면에서 보면 울퉁불퉁한 벽돌도, 모서리를 옆에서 보면 일직선이지. 그래서 실무에선 "큰 형태는 폴리곤, 중간은 노멀, 실루엣 근처 깊은 굴곡은 필요하면 디스플레이스먼트" 식으로 섞어서 써.

🎨 7. PBR 시대의 노멀 맵: 다른 텍스처와의 팀플레이

요즘 표준인 PBR(물리 기반 렌더링) 파이프라인에서 노멀 맵은 혼자 일하지 않아. 베이스 컬러, 러프니스, 메탈릭, AO(앰비언트 오클루전) 등과 함께 한 세트로 움직여.

여기서 꿀팁 하나! 서브스턴스 페인터 같은 텍스처링 툴은 베이크된 노멀, AO, 커버처 맵을 이용해서 모서리만 페인트가 벗겨지거나 틈새에만 먼지가 쌓이는 스마트 머티리얼을 자동으로 적용해. 즉 노멀 맵을 잘 구워두면 텍스처링 품질까지 덩달아 올라가는 거야 🎉

🧱 디테일 노멀 맵 & 노멀 블렌딩

큰 형태용 노멀 맵 위에 피부 모공, 원단 결 같은 타일링되는 디테일 노멀 맵을 겹치는 기법도 흔해. 캐릭터 전용 노멀은 해상도가 한정적이니, 가까이서 볼 때를 위한 미세 디테일을 반복 패턴으로 보강하는 거지.

이때 노멀 두 장을 그냥 평균 내면 디테일이 납작해져. 그래서 Whiteout 블렌딩, RNM(Reoriented Normal Mapping) 같은 전용 합성 방식을 써. 언리얼 엔진의 BlendAngleCorrectedNormals 노드가 대표적인 예야.

// Whiteout 블렌딩 예시 (탄젠트 공간, -1~1 범위 노멀)
vec3 blendWhiteout(vec3 n1, vec3 n2) {
    return normalize(vec3(n1.xy + n2.xy, n1.z * n2.z));
}

⚡ 8. 성능과 품질 사이 줄타기: 해상도, 압축, 밉맵

🛠️ 9. 툴별 실전 체크리스트

✅ 베이크 직전 최종 점검

특히 첫 번째가 중요해. 노멀 맵은 "로우폴리 정점 노멀과의 차이"를 기록한 거라서, 베이크 후에 로우폴리의 스무딩이나 삼각형 분할을 바꾸면 그 차이 정보가 어긋나. 그래서 베이크 전에 메시를 삼각형화(Triangulate)해서 고정하는 것도 좋은 습관이야. 엔진이 사각형을 다른 방향으로 쪼개면 미묘한 음영 오류가 날 수 있거든.

🌍 10. 노멀 맵은 어디서 빛나고 있을까?

노멀 매핑 아이디어는 1990년대 후반 연구들에서 정리됐고(범프 매핑 자체는 1978년 제임스 블린이 제안), 2000년대 초중반 실시간 셰이더 성능이 올라오면서 게임에서 본격적으로 퍼졌어. 지금은 거의 모든 3D 분야에서 쓰여.

건축 시각화나 제품 도면을 3D로 렌더링할 때도, 매끈한 박스 위에 콘크리트 질감 노멀 맵 하나만 얹어도 분위기가 확 달라져. 도면 기반 모델링은 형태가 정확해야 하는 만큼 모든 질감을 폴리곤으로 만들 이유가 없고, 노멀 맵이 그 빈틈을 효율적으로 채워줘.

🙋 11. 자주 묻는 질문

정리하면, 노멀 맵은 "보이는 것"과 "실제로 계산하는 것" 사이의 틈을 영리하게 파고든 기술이야. 폴리곤은 아끼고, 빛이 만들어 내는 음영으로 디테일을 표현하지. 원리를 알고 나면 파란 이미지가 더 이상 외계 문자로 안 보일 거야 😄 다음에 게임 하다가 멋진 갑옷이 보이면, 와이어프레임 속 단순한 폴리곤과 그 위의 파란 노멀 맵을 한번 상상해 봐!

📚 참고 자료

Blinn, J. F. (1978). "Simulation of Wrinkled Surfaces", SIGGRAPH
MikkTSpace 탄젠트 공간 표준 - http://www.mikktspace.com/
Blender Manual: Normal Map Node / Baking - https://docs.blender.org/manual/
Unreal Engine Documentation: Texture Compression Settings - https://dev.epicgames.com/documentation/
Unity Manual: Normal map (Bump mapping) - https://docs.unity3d.com/Manual/StandardShaderMaterialParameterNormalMap.html
Khronos glTF 2.0 Specification - https://registry.khronos.org/glTF/
Barré-Brisebois & Hill, "Blending in Detail" - https://blog.selfshadow.com/publications/blending-in-detail/