이미지에서 편집 가능한 Three.js 자산 코드로: 절차적 재구성 아키텍처

이미지를 코드 자산으로 바꾸는 이유

img2obj와 img2threejs는 참조 이미지를 픽셀 결과물로 남기지 않고 애니메이션 가능한 Three.js 절차적 코드로 다시 구성하는 접근을 공개했다. 여기서 결과물은 메시 추출물이나 내려받은 파일이 아니다. 프리미티브, 절차적 셰이더, 생성 지오메트리를 조합한 TypeScript THREE.Group 팩토리다.

생성 이미지는 일부가 마음에 들지 않아도 전체를 다시 생성해야 하며, 재생성 결과도 이전과 달라질 수 있다. 반면 코드 자산은 변수 조정으로 수정할 수 있고, 애니메이션에 필요한 변수를 처음부터 드러낼 수 있다. 이 방식의 핵심은 구조 분해, 프리미티브 대응, 재질과 조명 추정, 씬 그래프 설계, 검증과 반복 정제를 하나의 흐름으로 연결하는 데 있다.

재구성은 편집 단위부터 설계한다

img2obj는 코드 생성에 앞서 지오메트리, 재질, 계층, 피벗, 소켓, 시각적 우선순위를 기록하는 ObjectSculptSpec을 만든다. 이후 블록아웃, 폼, 룩 개발, 인터랙션 순으로 세부를 추가한다. 이 순서는 결과물을 보기 좋게 만드는 절차가 아니라, 어떤 부분을 나중에 고칠 수 있는지 정하는 설계 과정이다.

이미지를 분해할 때는 구성 요소와 부모·자식 관계를 함께 파악한다. 이 분해 단위가 이후의 편집 단위가 되므로 너무 잘게 나누면 오히려 수정 부담이 커진다. 시작 전에는 이미지 품질과 객체 가시성을 확인해 재구성 가능한 입력인지 판정해야 한다.

각 요소는 박스, 실린더, 구 같은 기하 프리미티브 조합 또는 생성 지오메트리에 대응시킨다. 프리미티브로 다루기 어려운 형상은 절차적 생성 함수로 넘긴다. 형상을 억지로 단순 프리미티브로 근사하면 편집성은 남아도 원래 형태가 무너질 수 있다.

색, 거칠기, 금속성, 광원 방향은 이미지에서 파라미터로 추정한다. 다만 이 값은 조정 가능한 초깃값이다. 이미지 한 장만으로 광원과 재질을 완전히 분리하는 일은 원리적으로 불완전하다.

씬 그래프에는 부모·자식 관계, 피벗, 소켓을 포함한다. 피벗을 잘못 두면 애니메이션 단계에서 구조 전체를 다시 손봐야 한다. 소켓은 다른 자산이 결합할 위치를 노출하며, 자산 재사용 가능성에도 직접 영향을 준다. 회전·개폐·확장 같은 동작 축은 명시적 파라미터로 분리하고, 허용 범위를 둬 잘못된 값으로 형상이 무너지지 않게 한다.

⤢✕

렌더 결과를 통과 조건으로 관리한다

코드가 컴파일된다는 사실만으로 형상이 참조 대상과 맞는 것은 아니다. 생성 코드는 실제로 렌더링해 오류와 형상 붕괴를 확인하고, 여러 각도에서 검증해야 한다. 한 시점만 보면 참조 이미지의 시점에만 맞춘 결과가 통과할 수 있다.

렌더 결과와 참조 이미지를 비교하는 유사도 기준도 필요하다. 이 기준이 없으면 반복 정제를 어디에서 멈춰야 할지 결정할 수 없다. 유사도는 참고 지표로 쓰되 최종 판정에는 사람 검수를 둔다. 픽셀 유사도와 구조적 정확성이 항상 같은 결론으로 이어지지는 않기 때문이다.

미달 항목이 확인되면 전체 자산을 새로 만들지 않고 해당 단계로 돌아간다. 단계 단위 되감기가 절차적 방식의 장점이다. 다만 수렴하지 않는 입력에서 정제가 계속되지 않도록 반복 횟수 상한을 두고, 상한에 이르면 수작업으로 넘긴다.

자산 파이프라인에 연결할 때 정할 것

처음에는 프리미티브 조합으로 표현할 수 있는 인공물을 대상으로 삼는 편이 낫다. 유기적 형상과 복잡한 표면은 절차적 재구성 난도가 급격히 높아진다. 특히 애니메이션이 필요한 자산에서 편집 가능한 코드의 가치가 크게 드러난다.

자산 용도에 따라 통과 기준도 달라야 한다. 배경 소품과 주요 오브젝트를 같은 기준으로 평가할 수는 없다. 구조적 정확성과 시각적 유사도는 분리해 평가해야 부족한 지점을 식별할 수 있다.

생성 코드를 기존 프로젝트의 셰이더와 조명 체계에 연결하는 방식은 초기에 정한다. 연동 방식을 뒤늦게 결정하면 만들어 둔 자산을 전량 다시 손봐야 할 수 있다. 사람 검수에서 반려된 항목은 유형별로 집계해 파이프라인 개선에 되돌린다.

저장소에는 생성 코드만 남기지 않는다. 참조 이미지, 명세, 검증 렌더를 하나의 단위로 보관해야 생성 이유를 다시 추적할 수 있다. 소켓과 변수 목록은 검색 가능한 메타데이터로 관리한다. 재사용은 자산을 찾는 단계에서 시작된다.

재생성 이력에는 어떤 참조와 어떤 파이프라인 버전으로 생성했는지 기록한다. 이 정보는 파이프라인 개선 뒤 재생성 대상을 고르는 근거가 된다. 수작업 수정이 들어간 자산에는 표시를 남겨 재생성 과정에서 덮어쓰지 않도록 한다. 참조 이미지 저작권 확인은 자산 등록의 필수 절차로 두고, 파이프라인 버전 변경과 품질 기준 조정은 승인 대상으로 관리한다.

코드 자산과 생성 결과물의 경계

구분	절차적 코드 산출	래스터 이미지 산출
편집 자유도	높음	없음
초기 품질	낮음	높음
부분 수정	변수 조정	전체 재생성
애니메이션	내장	별도 작업
표현 범위	제한	넓음
재현성	결정적	확률적

절차적 코드 산출물은 변수를 통해 수정하고, 동일한 코드에서 같은 결과를 얻으며, 애니메이션 축과 소켓을 처음부터 구성할 수 있다. 반면 프리미티브와 셰이더로 표현하기 어려운 형상은 재현이 어렵고 초기 시각 품질은 이미지 생성 모델에 미치지 못할 수 있다.

래스터 이미지 산출은 초기 품질이 높고 형상 표현 범위가 넓으며 바로 사용할 수 있다. 그러나 일부만 수정하려 해도 전체를 다시 생성해야 하고 결과가 달라질 수 있다. 애니메이션 역시 별도 작업이다. 최종 시각 품질이 중요한 정적 자산은 이미지로, 조작과 애니메이션이 필요한 자산은 절차적 코드로 구분하는 방식이 현실적이다.

코드 기반 애니메이션은 프레임 간 일관성을 구조적으로 유지하고 동작을 파라미터로 지정할 수 있으며, 길이 제약 없이 실시간 상호작용까지 다룰 수 있다. 대신 시각적 스타일은 렌더러 능력에 묶이고 사실적 질감이나 복잡한 물리 현상 재현에는 한계가 있다. 영상 생성 모델은 사실적 질감과 복잡한 장면을 빠르게 만들고 스타일 표현 폭이 넓지만, 클립 경계의 일관성이 흔들릴 수 있고 동작을 정확히 지정하기 어렵다. 사용자 조작이 들어가는 자산은 코드로, 일방향 시청 콘텐츠는 생성 모델로 나누는 경계가 여기서 생긴다.

자동 재구성은 참조 이미지 한 장으로 수 분 내에 조작 가능한 자산을 만들 수 있어 대량 자산 확보에 유리하다. 파이프라인을 개선하면 전체 자산 품질에도 일괄 반영할 수 있다. 다만 정밀도는 참조 이미지와 추정 알고리즘에 묶이고, 정확한 치수나 특정 디자인 의도를 담기 어렵다. 검수와 정제에도 사람 시간이 든다. 자동 재구성으로 블록아웃을 만들고 수작업으로 마감하는 분업은 속도와 정밀도를 함께 얻는 방식이다.

재사용과 형상 관리까지 포함한 설계

이미지에서 기하·재질·조명 파라미터를 추정하는 과정은 미디어 분석과 특징 추출의 응용으로 볼 수 있다. 계층 씬 그래프는 멀티미디어 객체를 구조적으로 표현하는 모델에 해당한다.

소켓과 파라미터를 외부에 노출한 THREE.Group 팩토리는 재사용 가능한 컴포넌트 인터페이스가 된다. 자산 저장소에서 메타데이터를 검색할 수 있어야 이 재사용 구조도 실제로 작동한다.

생성 코드, 참조, 명세, 검증 렌더를 함께 보관하는 방식은 구성 항목을 묶어 관리하는 구조다. 수작업 수정 자산의 표시와 재생성 이력 기록은 변경 충돌을 피하기 위한 통제 수단으로 기능한다.

절차적 자산 생성이 향하는 방향

3D 자산 생성의 산출 형태는 메시 파일에서 편집 가능한 절차적 코드로 이동하는 흐름이 확산되는 방향이다. 품질 게이트를 파이프라인 안에 강제하는 구성도 생성 도구의 기본 요건으로 자리 잡는 흐름이다.

소켓과 파라미터 메타데이터를 표준화해 자산 간 조합 가능성을 높이는 규격 논의가 진행되는 방향이며, 자동 재구성으로 블록아웃을 만들고 수작업으로 마감하는 분업은 제작 워크플로 표준으로 정착되는 흐름이다.