2026-08-11

3D 모델을 8방향 스프라이트 시트로 — 브라우저에서, 무료로

3D 모델을 2D 스프라이트로 프리렌더링하는 것은 게임 제작에서 가장 오래된 기법 중 하나입니다. 디아블로 II가 그랬고, 폴아웃이 그랬고, 2000년대 한국 온라인 게임의 절반이 그랬습니다. 바람의나라와 리니지의 캐릭터들이 바로 이 방식입니다. 캐릭터를 3D로 한 번만 만들고, 모든 방향에서 렌더링해서, 완성된 스프라이트를 게임에 넣는 것. 2D의 성능과 화면 일관성, 그리고 3D 애니메이션의 저렴한 재사용을 동시에 얻습니다. 달라진 것은 이 작업이 도는 곳뿐입니다. 예전에는 3D 소프트웨어와 렌더 스크립트가 필요했지만, 지금은 브라우저 탭 하나로 끝납니다.

새로 나온 3D → 스프라이트 도구는 리깅된 3D 모델을 받아 게임에 바로 쓸 수 있는 스프라이트 시트를 만들어 줍니다. 이 글은 도구가 무엇을 하는지, 모델에 필요한 조건은 무엇인지, 그리고 정말 중요한 두세 가지 설정을 정리합니다.

이 도구가 하는 일

리깅된 GLB 또는 GLTF를 업로드합니다. 도구가 모델을 실시간 뷰포트에 불러오고, 파일에 들어 있는 애니메이션 클립을 나열해 고르게 해 줍니다. 방향 수(4·8·16), 카메라 부감각, 방향당 프레임 수, 출력 셀 크기를 정하고 렌더링을 누르면 됩니다. 모든 「방향 × 프레임」 조합이 당신의 그래픽카드에서 오프스크린으로 렌더링되고, 애니메이션·캐릭터 도구가 이미 쓰고 있는 것과 동일한 스프라이트 시트 + JSON 메타데이터 형식으로 묶여 나옵니다. 그 도구들에 맞춰 만들어 둔 파이프라인이 있다면 그대로 쓸 수 있습니다.

왜 무료인가

이 기능 뒤에는 서버 GPU가 없습니다. 렌더링은 당신 컴퓨터에서 도는 WebGL입니다. 브라우저에서 3D 게임이 도는 것과 같은 원리입니다. 시트 한 장을 만드는 데 우리 쪽 비용이 들지 않으니, 당신에게도 비용이 없습니다. 로그인만 하면 쓸 수 있고 크레딧도 들지 않습니다.

모델에 필요한 조건

모델은 리깅되어 있어야 합니다. 즉 메시에 스켈레톤이 바인딩되어 있어야 하고, 뼈 이름은 사실상의 표준인 Mixamo 규칙을 따라야 합니다. Adobe의 무료 Mixamo 서비스로 자동 리깅한 모델이 정확히 그 형식이고, 널리 쓰이는 AI 3D 생성기(Meshy, Tripo)의 출력도 호환됩니다. 리깅 안 된 모델이라면 먼저 Mixamo 자동 리깅을 한 번 거치세요. 몇 분이면 됩니다. 도구는 업로드 시점에 스켈레톤을 검사해서, 쓸 수 없으면 비틀린 결과를 렌더링하는 대신 이유를 분명히 알려 줍니다.

정말 중요한 카메라 설정

부감각 — 카메라가 아래를 내려다보는 각도 — 은 전역 설정 하나입니다. 횡스크롤 게임은 측면 0°, 아이소메트릭은 30°나 45°, 탑다운은 60°. 자유 카메라를 일부러 주지 않았습니다. 모든 방향이 정확히 같은 부감각을 공유해야 하고, 그렇지 않으면 시트의 행들이 서로 맞지 않게 됩니다.

투영은 더 미묘한 선택입니다. 직교 투영이 전통적인 방식이고 타일 그리드와 정확히 맞아떨어지지만, 완전한 직교 화면은 평평해 보이기 쉽습니다. 고전 프리렌더링의 질감은 망원 렌즈에서 나온 경우가 많습니다. 시야각을 좁히고 카메라를 멀리 빼서, 직교에 가깝지만 약간의 깊이가 남는 방식입니다. 도구는 둘 다 제공하고, 전환해도 구도가 그대로 유지되어 직접 비교할 수 있습니다.

픽셀화 옵션에 대해

외곽선 감지가 붙은 픽셀화 후처리를 선택할 수 있습니다. 분명히 해 둘 것: 이것은 기계적인 다운샘플링이지 손으로 찍은 도트가 아닙니다. 프로토타입이나 레트로 느낌을 원하는 게임에는 잘 어울리지만, 아트 방향이 진짜 도트 그래픽이라면 출력물을 그 위에 덧그릴 밑그림으로 쓰세요. 완성 에셋이 아닙니다.

시트를 엔진에 넣을 때

JSON 메타데이터의 두 가지 항목이 실제 디버깅 시간을 아껴 줍니다.

앵커. 카메라가 모델 주위에 안전 여백을 두기 때문에 모든 셀에서 캐릭터 발밑에 투명한 여백이 있습니다. 셀 하단 기준으로 스프라이트를 배치하면 캐릭터가 공중에 뜹니다. JSON에 footInset과 권장 앵커 — 발밑 지점 — 가 기록되어 있어 처음부터 제자리에 놓을 수 있습니다.

방향 순서. 시트의 행은 방향 순서대로 나열되고, 어느 행이 어느 각도인지 JSON에 적혀 있습니다. 이동 입력을 행 번호에 연결했는데 동쪽과 서쪽이 뒤바뀌어 보인다면 손대칭(handedness) 불일치입니다. 행 번호를 계산할 때 x 입력의 부호를 뒤집으면 됩니다.

오래된 기법, 파이프라인만 뺀

여기에 새로운 발명은 없습니다. 오히려 그게 핵심입니다. 프리렌더링은 출시된 게임 25년 치로 검증된 방식입니다. 새로운 것은 「3D 모델이 있다」에서 「올바른 메타데이터가 붙은 8방향 스프라이트 시트가 있다」까지가 이제 브라우저에서 몇 분이면 끝난다는 것, 그리고 성가신 부분들 — 방향 간 구도 일치, 발밑 앵커, 내보내기 형식 — 을 도구가 대신 처리해 준다는 것입니다.