브라우저에서 HUD가 갑자기 거꾸로 섰을 때 🙃

2026년 11월 7일

버전 2026.10.10에서 우리는 눈에 보이지 않는 곳에서 큰 걸음을 두 번 내디뎠어요. 게임이 이제 Unity 6.6에서 돌아가고, 브라우저 버전은 브라우저가 지원하는 곳이면 어디서든 WebGPU로 시작해요. 예를 들면 최신 Chrome과 Edge예요. 그렇지 않으면 예전처럼 WebGL 2로 돌아가요. 둘 다 웹사이트가 그래픽 카드와 이야기하는 방법이에요. WebGL은 오래전부터 있었고, WebGPU는 그 후속으로 요즘 그래픽 카드의 작동 방식에 더 가까워요. 얼마 지나지 않아 제 HUD가 거꾸로 섰어요. 🙃

한 번 보고, 다시는 못 봤어요. 노트북의 Chrome에서 게임을 열었는데 HUD가 뒤집혀 있었어요. 재현해 보려 했지만 안 됐어요. 저도 다시는 보지 못했고요. 그래서 일단 이 일은 덮어 두었어요.

그러다 사진 증거와 함께 다시 나타났어요. 10월 19일, 새 월드에서 또 일어났어요. 이번에는 바로 스크린샷과 함께 버그 리포트를 보냈어요. 그런데 스크린샷 자체가 망가져 있었어요. 줄무늬투성이인 그림이 세 장 나란히 있었죠. 그 뒤의 추리 과정은 이래요. 그림은 픽셀로 이루어져 있고, 픽셀 하나에는 보통 빨강, 초록, 파랑 값이 세 개 있어요. 게임은 픽셀당 값 세 개를 기대했는데 WebGPU는 투명도를 위한 값까지 네 개를 보냈어요. 같은 데이터를 픽셀당 값 네 개로 읽으면 그림이 제대로 읽혀요. 월드는 똑바른데 HUD 전체가 뒤집혀 있었어요. 핫바는 위에 붙어 있고, VEGA의 질문 “기본 조작을 알려 줄까요?”는 거꾸로였어요. 그러다 알게 됐어요. WebGPU로 바꾼 뒤로 브라우저에서 찍은 스크린샷이 전부 깨져 있었다는 걸요. 그때까지 브라우저에서 온 리포트에 스크린샷이 붙은 적이 없어서 아무도 눈치채지 못했어요. 🔍

왜 HUD만 그럴까요? 그래픽 단계가 “보통” 이상이고 바이저 효과를 켜면, 별도의 카메라가 HUD를 그래픽 메모리 안의 자기만의 그림에 그려요. 전문가들은 이걸 렌더 텍스처라고 불러요. 그다음 게임은 이 그림을 바이저 효과와 빛 번짐과 함께 월드 위에 얹어요. 까다로운 점은 이런 그림에서 “위”가 어디인지 그래픽 시스템끼리 의견이 다르다는 거예요. 어떤 시스템은 줄을 위에서부터 세고, 어떤 시스템은 아래에서부터 세요. 보통은 게임 엔진이 이 차이를 맞춰 줘요. 그런데 WebGPU 브라우저에서는 HUD 그림에서 가끔 이게 틀어졌어요. 왜 가끔만 그런지는 아직 확실히 몰라요.

재현해 볼까요? 안 되더라고요. 브라우저 버그를 우리가 직접 찾으려고 작은 테스트 트랙을 만들었어요. 어떤 버전의 완성된 게임 패키지를 내려받아 우리 컴퓨터에서 시작해요. 그러면 WebGPU가 켜진 원격 조종 브라우저가 메뉴를 클릭하고, 월드를 시작하고, 우리 AI가 살펴볼 스크린샷을 찍어요. 제가 쓴 링크와 똑같이, 같은 그래픽 칩에서 세 번이나 해 봤는데 세 번 다 HUD는 똑바로 서 있었어요. 버그가 있던 건 제 진짜 Chrome뿐이었어요.

버그를 일으킬 수 없다면, 알아채야 해요. 그래서 이제 HUD 카메라는 자기 그림의 왼쪽 위 모서리에 네 픽셀 크기의 작은 자홍색 점을 그려요. HUD를 월드 위에 얹기 전에, 바이저 셰이더가 두 왼쪽 모서리를 모두 살펴서 점이 어디에 있는지 확인해요. (셰이더는 그래픽 카드에서 바로 돌아가는 작은 프로그램이에요.) 점이 아래쪽에 있으면 셰이더가 HUD를 뒤집어요. 그때 모서리를 가려서 점은 절대 보이지 않아요. 하지만 버그가 숨어 있는 동안에는 이런 수리를 시험하기 어려워요. 그래서 일부러 점을 엉뚱한 모서리에 놓는 테스트 스위치를 만들었어요. 그러면 HUD가 반드시 거꾸로 서야 하고, 실제로 제 스크린샷과 똑같이 그렇게 됐어요. 감지가 제대로 작동한다는 증명이었죠. ✅

뻔한 해결책은 오히려 버그였을 거예요. “그럼 WebGPU에서는 무조건 뒤집으면 되잖아요!” 만들어 넣기 전에 테스트 트랙에서 해 봤어요. 그랬다면 모두의 HUD가 망가졌을 거예요. 대부분의 경우 HUD는 똑바로 서 있었으니까요.

가는 길의 함정 세 가지. WebGPU는 우리에게 몇 가지 장난을 더 쳤어요. 첫째, 단순한 복사 단계가 WebGPU에서는 저절로 그림을 뒤집을 수 있어요. 그래서 뒤집힌 복사본으로 버그를 재현하는 건 통하지 않았어요. 둘째, 셰이더에 넘기려던 새 스위치가 한 번은 브라우저에 아예 도착하지 않았어요. 셋째, 줄 순서를 확인하려고 픽셀을 되읽었는데 서로 모순되는 답이 나왔어요. 그래서 이제 셰이더는 판정을 딱 한 픽셀에 적고, 우리는 그걸 읽어요. 한 픽셀에는 위도 아래도 없으니까요. 😄

여러분이 얻는 것. 버전 2026.10.24부터 브라우저의 HUD는 똑바로 서 있고, 브라우저에서 찍은 스크린샷도 다시 제대로 된 그림이에요. 버그 리포트에는 이제 그래픽 정보도 들어가는데, 그중에는 HUD가 어느 쪽이 위였는지도 있어요. 그러니 다음에는 그림이 없어도 알 수 있어요. 같은 패키지에서 Lyxette의 리포트에서 나온 버그도 고쳤어요. 이제 동물이 파 놓은 도랑 위에 둥둥 떠 있지 않아요. 🐾

그래도 언젠가 HUD가 거꾸로 보이면, 브라우저에서는 F2로 버그 리포트를 열 수 있어요. 저희가 살펴볼게요. 🙏