게임 개발에서 출발해 패션이라는 새로운 영역에 도전한 ‘Make It Yours’ 팀. 시뮬레이션 최적화부터 팀 협업 방식까지, Unity로 온라인 쇼핑의 새로운 경험을 그려낸 제작 과정과 인사이트를 아래 아티클에서 확인해보세요!

입어보지 않아도 느낄 수 있는 착용감, Unity로 구현한 3D 가상 피팅 경험

‘Make It Yours’는 온라인 의류 쇼핑몰에서 소비자가 관심 있는 의류 소재의 특성을 직관적으로 확인할 수 있도록 Unity로 개발한 웹 기반 3D 시뮬레이터입니다. 사용자는 모델의 피부톤과 의상 컬러, 소재 옵션을 자유롭게 바꿔 가며 다양한 조합을 비교해볼 수 있어, 자신에게 맞춘 개인화된 쇼핑 경험을 할 수 있습니다. 옵션 변경에 그치지 않고 드레이핑 테스트와 워킹, 바람 시뮬레이션을 통해 실제로 입었을 때의 착용감까지 가상으로 확인할 수 있다는 점이 이 프로젝트의 가장 큰 특징입니다.

Q. ‘Make It Yours’를 기획하게 된 계기와 개발 배경이 궁금합니다.
게임 개발팀에서 패션 3D 콘텐츠로, 소비자의 니즈에서 출발한 새로운 도전

저희 팀은 원래 Unity 에디터로 게임을 개발하며 함께 활동해왔습니다. 게임이 주는 즐거움을 직접 설계하고 구현하는 과정에 큰 매력을 느꼈고, 특히 Unity를 활용한 3D 개발은 상상하는 무엇이든 구현할 수 있다는 점에서 무한한 가능성을 지닌 기술이라고 생각해왔습니다. 그러던 중 이러한 3D 기술이 이제는 웹 환경에서, 그리고 개발이 처음인 사람도 쉽게 다룰 수 있는 형태로 확장되고 있다는 점에 큰 흥미를 느꼈습니다. 패션뿐 아니라 교육, 모빌리티, 제조 공정 등 다양한 산업으로 활용 범위가 넓어질 수 있다고 보았고, 저희 팀이 가진 ‘재미’라는 색깔에 ‘실용성’을 더한 3D 콘텐츠에 도전해보기로 했습니다.

이후 여러 차례 기획 회의를 거쳐 패션 산업을 타깃으로 정했습니다. 초기에는 디자이너를 위한 소재 비교 시뮬레이터를 기획했습니다. 하지만 패션 분야의 전문 지식이 부족한 상황에서, 전문가용 가상 웹 환경이 실제 현업에서 좋은 반응을 얻을 수 있을지 확신하기 어려웠습니다. 교수님들과 상담하며 Unity 기반 웹 3D의 장점을 가장 잘 살릴 수 있는 패션 콘텐츠가 무엇인지 고민했고, 그 결과 타깃 오디언스를 패션 소비자로 바꾸게 되었습니다.

‘Make It Yours’는 증강현실 기반의 가상 피팅 서비스를 마네킹 시뮬레이션으로 간소화해 구현한 프로젝트입니다. 집에서 편하게 온라인 쇼핑을 하는 것은 즐거운 경험이지만, 옷이 실제로 나와 어울릴지, 입었을 때 어떤 느낌일지 알기에는 분명한 한계가 있습니다. 저희가 소비자로서 느꼈던 착용감에 대한 아쉬움에서 출발하다 보니, 컬러 옵션과 피부톤 변경 등으로 프로젝트의 범위도 자연스럽게 넓어졌습니다. 또한 Unity로 제작한 결과물은 별도의 앱을 설치하지 않고 웹 브라우저에서 바로 접속할 수 있어, 일반 소비자에게 제공하기에 매우 적합하다고 판단했습니다.

원하는 패션 아이템을 가상 환경에서 얼마든지 입어보고, 컬러 옵션을 자유롭게 비교하고, 마음에 드는 아이템을 입은 채 바람을 맞으며 걸어보는 것까지, 아이템을 ‘내 것’으로 만들어가는 과정을 재미있으면서도 실용적으로 구성하고자 했습니다. 프로젝트명이 ‘Make It Yours’가 된 것도 이 때문입니다.

Q. 드레이핑, 워킹, 바람 등 다양한 착용 시나리오를 구현하며 특히 신경 쓴 부분은 무엇인가요?
자연스러운 움직임과 충돌 안정성의 균형, 그리고 웹 환경을 위한 최적화

가장 신경 쓴 부분은 애니메이션되는 신체와 의상 사이의 충돌을 안정적으로 유지하는 것이었습니다. 워킹 시뮬레이션에서는 신체가 계속 움직이기 때문에 의상이 몸을 뚫고 나오지 않도록 해야 했습니다. 하지만 충돌 값을 지나치게 높이면 옷이 몸에서 뜨거나 실루엣이 딱딱해지는 문제가 생겼습니다. 이에 신체 충돌체의 형태와 두께, 의상과의 간격을 세밀하게 조정하며 자연스러운 움직임과 충돌 안정성 사이의 균형점을 반복적으로 검증했습니다.

웹 환경에서 원활하게 구동하기 위한 최적화도 큰 과제였습니다. Houdini의 시뮬레이션 결과를 그대로 쓰기에는 용량과 포맷에 제약이 있었기 때문에, DemBones를 활용해 천의 변형을 본(Bone) 애니메이션 기반의 FBX로 변환했습니다. 이 과정에서 본의 개수나 스무딩 값에 따라 원래의 주름과 실루엣이 달라질 수 있어, 원본 시뮬레이션과 변환 결과를 지속적으로 비교하며 파라미터를 조정했습니다.

특히 드레이핑처럼 움직임이 단순하거나 충돌 대상이 정적인 경우에는 DemBones가 천의 변형을 충분히 포착하지 못하기도 했습니다. 이럴 때는 변환 설정만 수정하는 데 그치지 않고, 충돌체의 형상이나 시뮬레이션 조건부터 다시 설계해야 했습니다. 시뮬레이션, 캐시 저장, 본 추출, FBX 변환, Unity에서의 결과 확인까지 전 과정을 반복해야 했기에 많은 시간이 들었습니다. 그럼에도 원본의 움직임을 최대한 유지하면서 웹에서도 안정적으로 실행되는 결과물을 만드는 데 집중했습니다. 

Q. 피부톤, 의상 컬러, 소재 옵션을 조합해 비교하는 기능은 어떻게 구현했나요?
옵션의 수보다 '차이의 체감'에 집중한 소재 튜닝과 직관적인 UI 설계

가장 어려웠던 점은 옵션의 개수를 늘리는 것이 아니라, 사용자가 소재를 바꿨을 때 그 차이를 즉시 알아볼 수 있게 만드는 것이었습니다. 같은 디자인의 의상이라도 소재에 따라 주름의 크기, 처지는 정도, 움직임에 반응하는 속도, 원래 형태로 돌아오는 방식이 모두 달라야 했습니다.

이를 위해 소재별로 원단의 굽힘 및 늘어남 강도, 감쇠값, 충돌 및 솔버 설정을 조정했습니다. 그리고 동일한 워킹과 바람 조건에서 결과를 비교하며 소재마다 고유한 실루엣과 주름이 드러나는지 반복적으로 확인했습니다. 단순히 수치상으로 다른 설정을 만드는 데 그치지 않고, 실제 화면에서 사용자가 그 차이를 인식할 수 있는지를 튜닝의 기준으로 삼았습니다.

컬러와 피부톤 선택 인터랙션 역시 패션 소비자에게 보다 직관적으로 다가갈 수 있도록 설계하는 데 주의를 기울였습니다. Unity 공식 문서에 관련 예제가 잘 정리되어 있어 이를 참고해 비교적 수월하게 구현할 수 있었습니다. 슬라이더로 컬러를 변경하는 방식 등 여러 방안을 시도한 끝에, 프로젝트의 목표에 맞춰 소재별로 선택 가능한 컬러와 피부톤을 UI 버튼으로 고르는 간결한 방식을 채택했습니다. 또한 Figma에서 제작한 UI 이미지 위에 투명 버튼을 얹는 방식으로 디자인 시안을 그대로 살리면서도 손쉽게 인터랙션을 적용할 수 있었습니다.

Q. 기획·디자인·개발 간 협업에서 Unity의 어떤 기능이 가장 도움이 되었나요?
누구나 참여할 수 있는 협업 환경과 직관적인 비주얼 스크립팅

협업 과정에서 가장 큰 도움이 된 부분은 팀원 간 작업물 공유가 매우 간편했다는 점입니다. 그동안 프로젝트를 진행하며 GitHub 사용이 익숙하지 않은 기획 및 디자인 팀원들을 많이 만나왔습니다. 이번 프로젝트에서는 같은 조직(Organization)에 속한 팀원들이 클라우드를 통해 하나의 작업물을 손쉽게 공유하고, 최신 버전을 저장하거나 불러올 수 있었습니다. 작업 시간을 나누어 운영해야 하는 등 일부 제약도 있었지만, 각자 작업을 진행한 뒤 저장만 하면 버전 관리와 동기화가 자연스럽게 이루어졌기 때문에 개발 경험이 적은 팀원도 부담 없이 협업에 참여할 수 있었습니다.

팀원 모두 Unity를 다뤄본 경험은 있었지만, 역할에 따라 엔진에 대한 숙련도에는 차이가 있었습니다. 디자인을 담당한 팀원의 경우 게임이나 VR 프로젝트에서 Unity를 사용해본 적은 있었지만, C#이나 엔진의 세부 구조에 대한 깊은 지식은 부족했습니다. 특히 원하는 인터랙션을 어떤 조건과 동작으로 구성해야 하는지 판단하는 과정이 가장 큰 어려움이었습니다.

이러한 어려움은 블록 기반의 비주얼 스크립팅 방식으로 인터랙션을 구성하며 크게 줄일 수 있었습니다. 각 블록이 어떤 이벤트를 받아 어떤 동작으로 이어지는지 화면에서 순서대로 확인할 수 있어 전체 흐름을 쉽게 이해할 수 있었습니다. 개발을 담당한 팀원에게도 빈 C# 스크립트에서 무엇부터 작성해야 할지 고민하는 시간을 줄여주었고, 필요한 요소가 모두 준비되어 있어 다양한 시도를 해보기에 좋았습니다. 어려운 코드나 전문 용어 대신 누구나 읽고 이해할 수 있는 직관적인 블록으로 구성되어 있고, 각 블록에 어떤 값이 들어갈 수 있는지도 안내해주어 별도의 도움 없이도 로직의 흐름을 파악하며 개발을 이어갈 수 있었습니다.

덕분에 개발 지식이 깊지 않은 디자인 담당자도 UI와 인터랙션 구조를 직접 파악하고 기획할 수 있었습니다. 모든 작업을 개발 담당자에게 의존하지 않고 각자 맡은 영역을 주도적으로 완성할 수 있었다는 점이 팀 협업에 큰 힘이 되었습니다.

Q. Unity Asset Manager를 활용하며 팀의 작업 방식과 커뮤니케이션에 어떤 변화가 있었나요?
단순한 저장 공간을 넘어, 역할 분담을 지켜주는 협업 공간으로

UI 디자인과 시뮬레이션을 담당하며 수많은 FBX, 텍스처, 2D 에셋을 반복적으로 제작해야 했습니다. 이 과정에서 Asset Manager를 통해 에셋을 폴더별로 체계적으로 정리하고, 미리보기로 파일 내용을 빠르게 파악할 수 있다는 점이 특히 유용했습니다.

이전 프로젝트에서는 주로 Git이나 Google Drive로 에셋을 공유했습니다. Git을 사용하면 대용량 에셋을 공유할 때마다 커밋, 푸시, 풀 과정을 거쳐야 했고, Google Drive를 사용하면 파일을 내려받아 프로젝트 폴더로 옮긴 뒤 Unity에서 다시 임포트해야 했습니다. 엔진에서 문제가 발견되면 파일을 수정한 뒤 같은 과정을 처음부터 반복해야 했기에, 단순한 에셋 전달에도 생각보다 많은 시간이 소요되었습니다.

Asset Manager에서는 외부 툴에서 제작한 에셋을 클라우드에 업로드하면 다른 팀원이 같은 공간에서 바로 확인하고 사용할 수 있었습니다. 폴더 구조와 미리보기 덕분에 에셋을 빠르게 구분할 수 있었고, 애니메이션이 정상적으로 인식되지 않는 등의 문제도 비교적 이른 단계에서 발견할 수 있었습니다. 문제가 생기면 해당 에셋만 수정해 다시 업로드하고, 팀원에게 곧바로 확인을 요청하면 되었습니다.

미리보기와 함께 제공되는 메타데이터 역시 큰 도움이 되었습니다. 직접 제작한 시뮬레이션 에셋을 사용하다 보니 웹 환경에서 성능이 크게 저하되는 문제를 겪었는데, Asset Manager가 3D 에셋의 버텍스(Vertex) 수와 파일 크기 등의 정보를 함께 보여주어 어떤 에셋을 우선적으로 최적화해야 하는지 쉽게 판단할 수 있었습니다. 또한 이름이 비슷한 파일이 여러 개 있어도 하나하나 열어보지 않고 미리보기만으로 필요한 에셋을 찾을 수 있어, 임포트 과정의 수고를 크게 덜 수 있었습니다. 파일명 정리에 많은 노력을 들이지 않아도 되었기에, 아트와 개발 간 커뮤니케이션도 한층 원활해졌습니다.

그 결과 한 사람이 프로젝트를 사용하는 동안 다른 팀원이 기다리거나, 최신 파일을 전달받기 위해 작업을 멈추는 일이 줄었습니다. “에셋을 올렸으니 확인해 달라”는 간단한 방식으로 협업이 가능해지면서, 각자 맡은 역할에 온전히 집중할 수 있었습니다. Asset Manager는 단순한 저장 공간을 넘어, 팀의 역할 분담을 명확하게 유지해주는 협업 공간으로 기능했다고 생각합니다.

Q. 3D 의류 시뮬레이터가 온라인 쇼핑몰에 적용되면 어떤 변화를 기대할 수 있나요?
이미지가 옷의 '형태'를 보여준다면, 시뮬레이션은 옷의 '성질'을 보여줍니다

온라인 쇼핑몰의 2D 모델 사진은 특정 포즈와 순간의 실루엣을 보여주는 데는 효과적이지만, 사람이 움직일 때 옷이 어떻게 반응하는지까지 전달하기는 어렵습니다. 옷은 걸을 때 밑단이 흔들리고, 소재의 무게에 따라 특정 부분이 처지며, 주름이 생겼다가 다시 펴지는 등 움직임 속에서 더 많은 특징이 드러나기 때문입니다.

3D 시뮬레이터를 활용하면 소비자는 의상을 여러 각도에서 살펴볼 수 있을 뿐 아니라, 워킹이나 바람 같은 상황에서 소재가 어떻게 움직이는지도 확인할 수 있습니다. 같은 디자인이라도 소재에 따라 실루엣과 주름, 흔들림이 어떻게 달라지는지 직접 비교할 수 있다는 점 또한 기존 2D 이미지와 차별화되는 장점입니다.

이미지가 옷의 형태를 보여준다면, 애니메이션된 시뮬레이션은 그 옷의 성질을 보여준다고 생각합니다. 이를 온라인 쇼핑몰에 적용한다면 소비자는 실제 착용 모습을 보다 구체적으로 상상하고, 제품에 대한 충분한 정보를 바탕으로 구매를 결정할 수 있을 것으로 기대합니다.

Q. 향후 ‘Make It Yours’를 어떤 방향으로 발전시켜 나갈 계획인가요?
체형과 피부톤까지 나에게 맞춘, 더욱 개인화된 가상 피팅 경험

앞으로 프로젝트를 발전시킬 수 있다면, 보다 개인화된 경험에 집중하고 싶습니다. 현재 프로젝트에서 가장 아쉬운 점을 꼽자면 커스터마이징 옵션이 제한적이라는 것입니다.

기존 온라인 쇼핑몰의 또 다른 한계는 다양한 체형의 착용 모습을 보여주기 어렵다는 점입니다. 쇼핑몰은 옷의 특징을 잘 살려줄 전문 모델을 기용하지만, 사람마다 체형이 모두 다르기 때문에 실제로 착용했을 때 기대와 달라 아쉬움을 느끼는 소비자가 많다는 것을 여러 쇼핑몰 리뷰를 통해 확인할 수 있었습니다.

제한된 개발 기간 안에서 다양한 체형의 마네킹 시뮬레이션을 구현할지 많은 고민을 했지만, 시간 관계상 이번에는 담아내지 못해 아쉬움이 컸습니다. 앞으로는 사용자가 처음부터 자신의 체형과 피부톤에 맞춘 아바타를 생성하고, 해당 아바타에 ‘Make It Yours’의 시뮬레이션을 적용하는 방향으로 발전시키고 싶습니다. 나와 닮은 마네킹을 만드는 과정 자체가 하나의 재미가 될 뿐 아니라, ‘패션 아이템을 나의 것으로 만들어 상상해본다’는 프로젝트 본연의 취지에도 한층 가까워질 것이라 생각합니다.

Q. 프로젝트를 완성하며 느낀 소감과 마지막으로 전하고 싶은 말씀 부탁드립니다.
게임을 넘어 산업으로, 누구나 3D 개발에 도전할 수 있는 가능성을 체감하다

이번 프로젝트는 무엇보다 즐거운 경험이었습니다. 그동안 Unity는 주로 게임이나 VR 콘텐츠를 제작하는 엔진이라고 생각해왔는데, Unity의 기술을 웹 기반 의류 시뮬레이터에 활용해볼 수 있었다는 점이 매우 신선했습니다.

특히 Unity로 구현한 3D 콘텐츠를 브라우저에서 바로 실행하고, 수정한 결과를 곧바로 공유하고 배포할 수 있다는 점이 인상적이었습니다. 외부 제작 도구에서 만든 3D 에셋을 웹 환경으로 가져와 인터랙티브 콘텐츠로 구성하는 과정을 경험하면서, Unity가 게임 제작을 넘어 다양한 산업에서 활용될 수 있다는 가능성을 체감했습니다. 3D로 보여줘야 할 대상이 있는 기업이나 팀이라면 짧은 시간 안에 프로토타입을 만들고, 피드백을 반영해 웹으로 공유하는 과정을 충분히 구현할 수 있을 것이라 생각합니다.

아직 배우는 단계의 학생팀이 이러한 결과물을 완성할 수 있었던 것처럼, Unity는 3D 개발에 관심 있는 누구에게나 도전의 기회를 열어준다고 생각합니다. 개발 전문 지식이 없더라도 더 많은 아이디어를 가진 사람들이 함께 3D 콘텐츠를 만들어가는 날이 성큼 다가왔다고 느낍니다. 앞으로 어떤 놀라운 프로젝트들이 탄생해 새로운 영감을 전해줄지 기대됩니다.