[TIL] 2026-07-23 — 툰 룩 적용기: 만든 셰이더를 레벨 전체에 입히며 생긴 문제들

부트캠프 8조 팀 프로젝트(UE5 협동 게임, 저장소 TeamCarry)는 게임 레벨의 비주얼 방향을 툰 룩으로 잡았고, 그 툰 룩 셰이더 작업을 내가 진행해 왔다. 셰이더를 만드는 것과 팀 게임에 정착시키는 것은 다른 일이었다. 7/6에 툰 스카이 머티리얼을 만들었고, 7/8에 포스트 프로세스 셀 셰이딩과 아웃라인 경계를 다듬었다 — 거기까지가 “제작기”라면, 이 글은 그 툰 룩을 팀 레벨 전체에 입히면서 생긴 문제들을 잡아온 적용기다. 7/16 L_Level1 툰스카이 적용부터 7/20 아티팩트 제거·노을·밤 연출까지, 커밋과 캡처가 남아 있는 구간을 정리한다.

적용 — 필터 한 겹으로 레벨 전체가 바뀐다

포스트 프로세스 방식의 힘은 적용 순간에 드러난다. 다 그린 화면 위에 필터 한 겹을 얹는 구조라, 팀원들이 만든 재질 수백 개를 한 개도 수정하지 않고 게임 전체에 만화 명암·손그림 외곽선·하이라이트가 한 번에 걸린다.

적용 전 — 기본 렌더링의 거실. 부드러운 음영, 외곽선 없음

적용 후 — 같은 장면에 만화 명암 밴딩과 손그림 외곽선. 그런데 커피테이블 모서리를 따라 초록 얼룩이 끼어 있다(7/20 13:57 캡처) — 아래 트러블슈팅의 주인공

적용 시작점은 7/16 스테이지 맵 개편(커밋 e9df64e)이었다. 신규 레벨 L_Level1에 툰스카이를 적용하고 M_ToonSky에 태양 고도 연동 주야 체인을 붙였다. 이틀 뒤(7/18)에는 레벨 담당 팀원이 라이팅을 전체 수정하고 포스트 프로세스 볼륨을 레벨별 느낌에 맞게 각각 조정했다(커밋 806a568) — 내가 만든 툰 룩 위에 레벨마다 다른 무드가 얹히는 구조가 됐다. 운반 아웃라인이 캐릭터를 관통해 보이던 가림 문제(PR #138)는 7/16 TIL에 따로 정리했다.

머티리얼 구조 — 휘도 밴딩 셀 셰이딩

적용기를 따라가기 전에, 걸려 있는 머티리얼이 뭘 하는 물건인지부터.

만화 명암의 중심은 셀 셰이딩 포스트 프로세스 머티리얼 M_PP_ToonTest(Content/Developers/goldb/Shading/)다. 방식은 휘도(luminance) 밴딩 — 씬의 밝기를 몇 단계의 계단으로 양자화해서, 부드럽게 이어지는 명암 그라데이션을 셀 애니메이션처럼 면 단위로 뚝뚝 끊어진 명암으로 바꾸는 방식이다. 이걸 포스트 프로세스 볼륨(PPV)의 블렌더블로 연결하면 레벨 단위로 걸린다.

튜닝 값은 머티리얼 인스턴스 MI_PP_ToonTest로 분리했다 — Toon_Steps=6, Cel_Blend=0.35. 이 조합은 바닥 노이즈를 완화하려고 잡은 값이다. 그리고 본 레벨에 바로 걸지 않고, L_LevelProto를 복사한 실험 맵 L_ShadingTest에서 검증한 뒤 본 레벨에 적용했다 — 팀원들이 작업 중인 레벨에서 셰이더 실험을 하지 않기 위한 분리다.

해 보고 접은 것 — 포스트 프로세스 림라이트·아웃라인

포스트 프로세스 단계에서 림라이트와 아웃라인을 더 얹는 실험도 했지만 TSR 환경에서는 불가 판정을 내렸다. GBuffer·SceneDepth·DDX·UVs 오프셋 샘플링 — 어느 방식으로 접근해도 화면 가장자리에 스테일 메모리 아티팩트(이전 프레임 잔상이 낀 더트 프레임)가 생겼고, BufferUV 변환으로도 해소되지 않았다. 결론은 아웃라인을 화면 공간에서 긁어내지 말고 오브젝트별 inverted-hull 방식으로 가는 것.

이 머티리얼이 명암 계단을 만들 때 쓰는 밴딩 증폭 비율이 아래 트러블슈팅 1의 주인공이다.

트러블슈팅 1 — 가구 모서리의 초록 얼룩

증상

툰 PP를 켠 화면에서 가구 모서리를 따라 초록 얼룩이 끼었다. 위 적용 후 캡처의 커피테이블 모서리에 그대로 찍혀 있다 — 특정 가구의 어두운 몰딩(모서리 띠) 부분에서만 나타나고, 벽이나 바닥 같은 평탄한 면은 멀쩡했다.

구조 분석

셀 셰이딩 머티리얼(M_PP_ToonTest)은 명암을 계단으로 만들기 위해 밴딩 증폭 비율을 나눗셈으로 계산한다. 문제는 나눗셈의 성질이다 — 분모가 어두운 픽셀일수록 작은 노이즈가 크게 튄다. 어두운 몰딩 픽셀에서는 이 비율이 수십 배까지 증폭돼, 노이즈가 초록 얼룩으로 화면에 그대로 나왔다. 얼룩이 “어두운 모서리에서만” 생기던 증상과 정확히 맞는 구조다.

해결과 근거 (커밋 438b191)

증폭 비율에 상한 x12를 걸었다. 상한값을 x12로 잡은 근거는 정상 동작 범위다 — 벽·가구를 평탄하게 만드는 리프트는 x10 이내에서 동작하므로, x12 상한은 정상 리프트는 그대로 통과시키고 노이즈 증폭만 자른다. 기존 색감이 유지되는 이유다. 또 하나, 이 비율은 노출(exposure)이 분자·분모에서 약분되는 무차원 값이라 눈 적응 상태와 무관하게 같은 결과를 낸다 — 카메라가 밝은 곳을 보다가 어두운 곳을 봐도 상한이 흔들리지 않는다.

트러블슈팅 2 — 가구 측면의 광택 줄무늬

증상: 스피커 등 가구 측면에 조명 스펙큘러가 만든 광택 줄무늬가 남아, 만화 톤 위에 사진 같은 하이라이트가 섞였다.

구조 분석: 원인은 셰이더가 아니라 에셋 쪽에 있었다. Furniture_Free 에셋팩의 공용 머티리얼 M_Material에 러프니스/스펙큘러 입력이 미연결 상태였다 — 기본값으로 굴러가면서 조명에 따라 광택이 살아났던 것.

해결과 근거 (같은 커밋): 러프니스/스펙큘러를 매트한 상수(0.85/0.03)로 고정했다. 앞서 지붕 반사를 제거했던 것과 같은 방향 — 툰 룩에서는 물리 기반 반사보다 균일한 매트 표면이 맞다. 공용 머티리얼 한 곳을 고치면 이 팩을 쓰는 가구 전체에 걸리는 구조라 개별 대응이 필요 없었다.

툰스카이 노을·밤 — 수식으로 그린 하늘의 확장

7/16에 붙인 태양 고도 연동 주야 체인 위에, 7/20 노을·밤 연출을 추가했다(커밋 b11c998).

노을 — 해가 수평선 근처일 때 고도 그라데이션(지평선 쨍한 주황 → 상공 태운 적색)으로 교체. 구름은 실루엣 대비 유지

밤 — 남색 그라데이션 + 절차식 별밭(반짝임 포함) + 지평선 글로우. 구름 실루엣은 30% 통과로 유지

연출별 파라미터는 MI로 빼서 튜닝 가능하게 했다 — Sunset(색 2종·강도·폭·피크), Night(별 밀도·밝기·글로우색). 텍스처 없이 수식만으로 그리는 하늘이라, 시간대 전환도 파라미터 보간으로 처리된다.

발표 슬라이드로 정착

이 작업들은 팀 발표자료(COUPENG 템플릿)의 슬라이드 2장으로 정착됐다.

“다 그린 화면 위에 필터 한 겹” — before/after와 함께, 배경 외곽선을 꺼 구역 안에 시선을 집중시킨 점·팀원 재질 수백 개 무수정·게임 전체 일괄 적용을 요약

“도시는 만화풍인데 하늘만 실사 구름” 문제 제기 → 텍스처 0장, 수식만으로 그린 툰 스카이 교체와 낮→노을→밤 실시간 전환 요약

오늘 배운 것

• 셰이더 적용기는 제작기와 다른 문제를 낸다 — 나눗셈 기반 비율은 어두운 픽셀에서 노이즈를 수십 배 증폭하므로, 정상 동작 범위(x10) 근거로 상한(x12)을 걸어 노이즈만 자른다
• 노출이 약분되는 무차원 비율로 설계하면 눈 적응 상태와 무관하게 같은 결과가 나온다
• 툰 룩 아티팩트의 원인이 셰이더가 아니라 에셋(미연결 머티리얼 입력) 쪽일 수 있다 — 공용 머티리얼 한 곳 수정으로 팩 전체에 반영

면접에서 이렇게 말한다

• 예상 질문: “포스트 프로세스 셀 셰이딩의 장단점은?” → 재질 수백 개 무수정 일괄 적용(장점) vs 어두운 픽셀 나눗셈 노이즈 같은 화면 공간 아티팩트(단점, 상한으로 해결)를 이 사례로 답변
• 예상 질문: “시각 아티팩트 디버깅은 어떻게 접근하나요?” → 증상의 발생 조건(어두운 몰딩에서만)에서 수식의 성질(나눗셈 증폭)로 역추적한 과정
• 키워드: 포스트 프로세스 볼륨, 셀 셰이딩 밴딩, 노출 약분·무차원 비율, 스펙큘러/러프니스, 절차식 스카이