Build a simple product configurator in Unity in one hour or less
이 웹페이지는 이해를 돕기 위해 기계 번역으로 제공됩니다. 기계 번역으로 제공되는 콘텐츠에 대한 정확도나 신뢰도는 보장되지 않습니다. 번역된 콘텐츠의 정확도에 관해 의문이 있는 경우 웹페이지의 공식 영어 원문을 참고해 주시기 바랍니다.
제품 구성기는 정적인 이미지를 보는 것을 넘어 상호작용적인 경험으로 전환함으로써 고객이 귀사의 제품과 상호작용하는 방식을 변화시키고, 궁극적으로 시청자에게 더 풍부한 세부 정보와 더 많은 정보를 제공할 수 있습니다.
산업 응용 분야에서 구성기는 복잡한 장비를 보여주고, 실시간 맞춤 설정을 허용하며, 고객이 특정 환경에서 제품을 시각화하는 데 도움을 줄 수 있습니다.
이 튜토리얼 한 시간 이내에 첫 번째 웹 배포 가능한 제품 구성기를 만들게 됩니다. 귀하의 구성기는 간단한 인터페이스를 사용하여 사용자가 3D 모델의 다양한 재료를 변경할 수 있도록 할 것입니다. 마지막에는 전문적인 제품 구성기 제작을 위한 기본 기능에 대한 이해를 갖게 될 것입니다.
이 튜토리얼을 비디오로 따라 하고 싶다면 여기에서 시청할 수 있습니다.
더 자세한 정보는 제품 구성기 템플릿 웨비나를 확인하세요.
선행 요건
이 튜토리얼 Unity 프로젝트 개발에 초급에서 중급 지식을 가진 개발자를 대상으로 합니다. 튜토리얼 완료하려면 다음이 필요합니다
1. 다음을 설치하십시오:
Unity Industry용 평가판 또는 정규 라이선스
Unity의 Industry Product Configurator 패키지는 GitHub에서 사용할 수 있습니다.
2. 3D 모델 추가: 자체 3D 모델 파일 또는 템플릿에 포함된 파일을 사용하십시오.
3. 기본 재료 추가: 최소 2~3가지 다른 재료를 준비하거나 튜토리얼에 이미 포함된 금속 재료를 재사용하십시오.
예상 완료 시간: 30-60분
샘플 프로젝트를 탐색하세요
이 튜토리얼은 Unity의 Industry Product Configurator 샘플 프로젝트를 학습 기반 및 시작점으로 사용합니다. 이 샘플은 재료 및 구성 요소 전환, 카메라 제어, 사용자 인터페이스를 갖춘 완벽하게 작동하는 구성기(configurator)를 보여주며, 이는 연습에서 구현하게 될 기능과 정확히 일치합니다.
샘플에는 가시성, 재료, 애니메이션 및 변환 변형을 위한 기성 구성 요소가 포함되어 있어, 처음부터 변형 시스템을 구축하는 대신 제품에 집중할 수 있습니다.
샘플 프로젝트를 열고 자신만의 씬을 만드세요
샘플 프로젝트를 먼저 탐색함으로써, 자신만의 제품 구성기(product configurator)를 만들기 전에 실습 경험을 얻을 수 있습니다. 다음 단계를 따라 설치하세요:
1. Unity Hub에서 Universal 3D 템플릿을 사용하여 Universal Render Pipeline (URP) 기반의 새 Unity 프로젝트를 만드세요.
2. Industry Product Configurator sample project를 다운로드하고 설치하세요:
- 패키지를 설치하려면 GitHub 저장소의 녹색 Code 버튼에서 URL을 복사하여 Unity의 패키지 관리자를 엽니다.
플러스 아이콘을 클릭하고 git URL에서 패키지 추가을 선택한 다음 저장소 링크를 붙여넣으세요. Unity 필요한 모든 구성 요소를 다운로드하고 설치할 것입니다.
3. 다운로드가 완료되면 샘플 씬을 열고 실행하여 완벽하게 작동하는 구성기(configurator)를 확인하십시오. 이 샘플은 재료 전환, 구성 요소 가시성 토글 및 카메라 제어를 시연하여 시스템이 무엇을 할 수 있고 어떻게 작동하는지에 대한 즉각적인 통찰력을 제공합니다. 이 패키지는 프로토타입을 빠르게 시작할 수 있도록 Unity 기존 시스템에 구성기별 구성 요소를 추가합니다.
4. 참고: Git URL 설치에 문제가 있는 경우, 패키지 관리자 문제 해결 가이드를 확인하십시오.
✓ 체크포인트: 이제 계층 구조에서 마우스 오른쪽 버튼을 클릭하거나 GameObject 메뉴에서 Product Configurator 옵션을 볼 수 있습니다. GitHub 저장소에도 구성기 샘플에 대한 좋은 지침이 있어 이를 통해 최대한 많은 것을 배울 수 있을 것입니다.
제품 구성기가 편집기에서 열립니다
3D 모델을 가져오세요
샘플을 좀 탐색한 후, 다음 단계는 재질 전환 기능을 추가할 3D 모델을 가져오는 것입니다. 이 튜토리얼 더 빨리 완료하려면 샘플에 이미 포함된 Skidloader 모델을 사용할 수 있습니다(Skidloader 검색). 또는 다음 섹션에서 설명하는 두 가지 변환 옵션 중 하나를 사용하여 직접 모델을 가져올 수 있습니다. Unity Asset Manager 또는 Unity Asset Transformer Toolkit 내의 최적화 및 변환 기능. 샘플 프로젝트에 포함된 모델을 사용하려면 이 섹션을 건너뛸 수도 있습니다.
에셋 관리자
전문적인 구성기(configurator)를 구축할 계획이라면, 워크플로우에 에셋 매니저(Asset Manager를 통합하는 것을 고려해 보세요. Unity의 Asset Manager는 팀이 복잡한 실시간 3D 에셋을 업로드, 관리, 변환, 공유 및 액세스하는 방식을 간소화하는 클라우드 기반 디지털 에셋 관리(DAM) 솔루션입니다. Asset Manager에 대한 액세스는 Unity Industry 구독에 포함되어 있습니다.
Asset Manager를 사용하여 3D 모델을 준비하고 최적화할 수 있으며, 특히 Optimize and Convert 기능을 사용할 수 있습니다. 이것은 메시 정리, 폴리곤 수 최적화, 그리고 Unity 준비 형식으로 변환하여 3D 에셋을 변환합니다. 이 프로세스는 1분 이내에 완료되며 대용량 파일 변환의 워크플로우 효율성을 향상시킵니다.
Asset Manager에 대해 여기에서 자세히 알아보세요:
Asset Transformer 툴킷을 사용한 CAD 워크플로우
복잡한 CAD 모델을 변환해야 한다면, 다양한 CAD 파일 형식을 처리하고 고급 최적화 기능을 제공하는 Unity Asset Transformer Toolkit 사용을 고려해 보세요. CAD 모델을 Unity 직접 가져온 다음, Asset Transformer 도구를 사용하여 폴리곤 수를 줄이고, 재질을 단순화하며, 실시간 시각화를 위해 모델을 준비합니다.
Asset Transformer 플러그인에 대해 자세히 알아보려면 여기를 참조하세요:
장면을 설정하세요
구성기에서 새 장면을 만드세요. 빈 씬에 스키드로더를 추가하거나, 자체 3D 모델을 사용하는 경우 씬으로 가져와 적절하게 배치하십시오. 이제 모델은 샘플 프로젝트에서 관찰한 자료 전환 기능을 추가할 준비가 되었습니다.
✓ 체크포인트: 장면에 3D 모델을 배치하여 Scene 뷰에서 명확하게 볼 수 있도록 하십시오. 모델에는 재질이 적용되어 있고 게임 뷰에서 보여야 합니다.
재료 전환 기능을 구축하세요
이제 핵심 구성기 기능을 구현할 것입니다. 사용자가 제품의 재료를 실시간으로 변경할 수 있게 하는 기능입니다.
자재 변형 생성
1. GameObject 메뉴에서 선택하거나 Hierarchy에서 마우스 오른쪽 버튼을 클릭하여 내장된 변형 세트 컴포넌트를 사용해 시작하세요. 다양한 옵션이 있겠지만, 이 튜토리얼에서는 재료 변형에 중점을 둘 것입니다.
- 패키지의 재질 변형 시스템은 복잡한 객체 계층 구조 전반에 걸쳐 대상 재질을 사용하는 모든 메시 렌더러를 자동으로 찾는 감지 시스템을 사용합니다.
2. 컴포넌트의 Target Parent 옵션을 사용하여 기본 재료와 부모 객체를 정의한 다음, Capture 도구를 사용하여 모든 관련 메시 렌더러를 식별하십시오. 이는 성능을 유지하면서 여러 구성 요소로 이루어진 제품 전반에 걸쳐 일관성을 보장합니다.
기본 재료를 정의하세요
3. 이 두 가지 금속 마감재, Metal Paint - Red와 Metal Paint - Blue를 재사용하거나 자체적인 동등품을 만드십시오. 재료를 드래그하여 변형 필드에 할당하여 각 변형 슬롯에 할당하십시오. 시스템이 모든 전환 로직을 처리하며, 변형이 변경될 때 자동으로 자료를 업데이트합니다. 인스펙터의 내장 미리보기 슬라이더를 사용하여 변형을 즉시 테스트하고 모델에 빨간색 및 파란색 마감이 어떻게 보이는지 확인하세요.
✓ 체크포인트: 이제 Material Variant Set 컴포넌트에서 두 가지 재료 변형(메탈 페인트 - 레드 및 메탈 페인트 - 블루)을 볼 수 있습니다. 인스펙터에서 미리보기 슬라이더를 드래그할 때, 모델은 씬 뷰에서 빨간색과 파란색 금속 마감 사이를 실시간으로 변경해야 합니다.
재료 생성 도움말은 Unity의 materials documentation을 참조하십시오.
변형을 사용자 인터페이스에 연결하십시오
제품 구성기 패키지에는 빠른 구성기 개발을 위해 기존 변형 세트의 드롭다운 메뉴를 생성하는 VariantSelect 구성 요소가 포함되어 있습니다. 이 기능은 비개발자가 씬에서 변형 세트를 쉽게 선택할 수 있도록 설계되었으며, Unity 이벤트 시스템과 직접 통합되어 사용자 지정 스크립팅 없이 기능적인 구성기(configurator)를 구축할 수 있게 해줍니다. 이는 uGUI 솔루션을 사용하는 사용자에게 특히 유용하며, 컴포넌트를 OnClick 이벤트에 직접 할당할 수 있게 해줍니다.
사용자 인터페이스를 만드세요
재료 변형이 작동하고 있으므로, 사용자가 이러한 구성을 제어하고 제품 구성기(product configurator)와 상호 작용할 수 있는 인터페이스가 필요합니다.
Unity 두 가지 UI 시스템을 제공합니다: GameObject 기반 UI 시스템(uGUI)과 더 새로운 UI 툴킷. 이 튜토리얼 코딩 없이 VariantSelect 컴포넌트와 드래그 앤 드롭 통합을 허용하는 GameObject 기반 uGUI 시스템을 사용할 것입니다.
1. UI 메뉴에서 버튼을 끌어와 계층 구조에 놓고 이름을 지정하세요 (예: "빨간색 금속 버튼").
- 첫 번째 UI 요소를 생성하면 Unity는 씬에 Canvas와 EventSystem 객체를 자동으로 생성합니다. 캔버스는 모든 UI 요소의 컨테이너 역할을 하는 반면, 이벤트 시스템은 버튼 클릭과 같은 사용자 입력을 처리합니다.
- Canvas 컴포넌트가 Scale With Screen Size로 설정되었는지 확인하십시오. 이 설정은 다양한 화면 해상도에서 UI 요소가 일관된 비율을 유지하도록 허용합니다. 참조 해상도를 대상 화면 크기에 맞추세요. 이 예시에서는 1920x1080일 수 있습니다. 이것은 UI 레이아웃이 기반하는 기준 해상도를 정의합니다. 또한, Match 속성을 0.5로 설정하면 너비와 높이 배율 사이의 균형을 맞추어 화면이 참조보다 넓든 좁든 UI 요소가 균등하게 배율되도록 보장합니다.UI 고정 팁: 버튼을 특정 화면 가장자리(상단/하단)에 고정하려면, UI 요소를 선택하고 Rect Transform 구성 요소의 Anchor Presets 패널에서 원하는 앵커 프리셋을 클릭하십시오. Unity UI Anchoring Guide에서 더 알아보세요
2. 버튼을 변형 선택기에 연결하려면, 계층 구조에서 button을 선택하고, 인스펙터에서 Button 컴포넌트를 찾은 다음, OnClick() 섹션을 찾으십시오.
3. 새 이벤트를 추가하려면 "+"을 클릭하고, VariantSelect 컴포넌트가 있는 게임 오브젝트를 오브젝트 필드로 드래그한 다음, 드롭다운에서 VariantSelect를 선택하고, 버튼을 클릭할 때 재질 변경을 트리거하려면 SelectVariant을 선택하십시오.
4. 각 재료 마감(파란색 금속 버튼)에 대한 추가 버튼을 만들고 동일한 방식으로 연결하세요. uGUI 기본 사항에 대해 더 알고 싶다면, 이 튜토리얼을 방문하여 기본 사항을 마스터하세요.
✓ 체크포인트: 플레이 모드를 클릭 수 다음 빨간색 금속 버튼을 클릭 수 모델이 빨간색 금속 마감으로 변경되어야 합니다. 파란색 금속 버튼을 클릭 수 파란색으로 변경하세요. 계층 구조에서 Canvas와 EventSystem을 볼 수 있어야 하며, 버튼은 게임 뷰에 보여야 합니다.
버튼이 작동하지 않으면, OnClick 이벤트가 올바르게 연결되었는지 확인하고 Unity의 Button documentation을 확인하십시오.
고급 사용자를 위한: 스크립팅에 익숙하시다면, 20:10 지점의 이 비디오는 VariantSetController 스크립트를 사용하여 UI 버튼을 자동으로 생성하는 방법을 보여주며, 이 스크립트는 올바른 이름과 기능을 갖춘 버튼을 동적으로 생성합니다.
카메라 제어 추가
완벽한 구성기 인터페이스는 사용자가 제품을 보는 방식에 대한 제어 권한을 제공하여 다양한 각도와 관점을 탐색할 수 있도록 해야 합니다.
구성기에게 최고의 사용자 경험을 제공하려면, 전문적인 카메라 뷰 설정을 위한 노코드 솔루션을 제공하는 Cinemachine package을 사용할 수 있습니다. 구성기 샘플 프로젝트에는 이미 Cinemachine 설정이 포함되어 있으므로 바로 자신만의 카메라를 추가할 수 있습니다.
1. 제품에 대한 새로운 카메라 앵글을 만들려면, GameObject > Cinemachine > Camera로 이동하여 씬에 새 가상 카메라를 추가하십시오. 카메라를 원하는 각도에서 제품을 보여주도록 배치하세요. 예를 들어, 재질 변화를 강조하는 클로즈업 뷰와 같은 방식입니다.
팁: Align with View (Windows에서는 Ctrl-Shift-F, Mac에서는 Cmd-Shift-F)를 시작점으로 사용하십시오. 이것은 카메라를 씬 뷰와 같은 위치로 이동시킵니다. 이 위치에서 원하는 각도를 찾기가 더 쉽습니다.
2. Cinemachine 카메라 컴포넌트에서 Priority 값을 설정하여 이 카메라가 언제 활성화되어야 하는지 결정합니다(숫자가 높을수록 우선순위가 높습니다). Cinemachine 카메라 컴포넌트에서 Solo 버튼을 사용하여 다양한 카메라 뷰를 테스트하세요.
3. 다른 시야각을 위해 카메라 두세 대를 추가하세요. Cinemachine Brain 컴포넌트(메인 카메라에 자동으로 추가됨)는 우선순위가 가장 높은 가상 카메라를 항상 선택하여 다양한 카메라 간의 블렌딩을 제어합니다. Unity 6에서 Cinemachine 사용법에 대해 더 알아보려면 이 비디오를 시청하세요.
4. 카메라를 UI 컨트롤에 연결하기: 다른 카메라 뷰를 활성화하려면 UI 버튼을 만드세요(자료 변형 버튼에서 복사하여 붙여넣고 카메라용으로 이름을 변경하세요). OnClick 이벤트의 경우, 제어하려는 카메라를 드래그하고 Prioritize 옵션을 사용하십시오. 이렇게 하면 우선순위가 가장 높게 설정되어 이 가상 카메라가 활성 카메라가 됩니다.
5. 상호작용 카메라 제어 설정: 상호작용 카메라 이동을 위해 제품 주위를 마우스로 제어하는 궤도 이동이 가능한 FreeLook camera를 사용하십시오.
6. 입력 액션 구성: Cinemachine Input Axis Controller 컴포넌트에서 Driven Axes 섹션에 Look Orbit X, Look Orbit Y, Orbit Scale 옵션이 있는 것을 볼 수 있습니다. 이것들은 제품 구성기 패키지의 Player/Look 입력 액션으로 구성되어야 합니다. 이러한 작업을 찾으려면 다음으로 이동하십시오:
Assets/Samples/Product Configurator/1.6.0/Standard Configuration Setup/StandardUIAction
Driven Axes 섹션의 Look Orbit X 및 Look Orbit Y 입력 필드로 Player/Look 작업을 이 폴더에서 드래그하세요. 이것은 마우스 오른쪽 버튼을 클릭할 때만 마우스 제어 카메라를 활성화합니다
이제 사용자가 인터페이스를 통해 제어할 수 있는 여러 카메라 각도로 구성기를 테스트할 준비가 되었습니다.
마무리 작업 및 웹 Deployment
인터랙티브 구성기가 완성되었으니, 이제 사용자들이 브라우저에서 접속할 수 있도록 웹 Deployment 준비하는 것이 마지막 단계입니다.
WebGL용 빌드 및 빌드 프로필 구성
구성기를 WebGL에 배포하려면 플랫폼으로 Web 옵션을 사용하십시오. 파일 > 빌드 프로필로 이동하여 창 왼쪽에서 Web을 대상 플랫폼으로 선택하십시오. 장면이 장면 목록에 있는지 확인하고 원하지 않는 다른 장면은 삭제하십시오.
구성기를 WebGL에 배포하려면 플랫폼으로 Web 옵션을 사용하십시오.
No Web module loaded 메시지와 Install with Unity Hub 버튼이 보이면 WebGL Build Support 모듈을 설치해야 합니다. 설치 버튼을 클릭 수 Unity Hub WebGL 빌드 지원 모듈을 다운로드하고 설치합니다. 새 모듈을 로드하려면 편집기를 다시 시작해야 합니다.
WebGL 빌드 지원 모듈이 설치되면 텍스처 압축 옵션, 코드 최적화 수준, 브라우저 Deployment 적합한 메모리 제약 조건을 포함하여 빌드 설정을 구성하십시오.
WebGL 플랫폼으로 전환한 후, 웹별 최적화를 위해 플레이어 설정을 검토하십시오. Edit > Project Settings > Player로 이동하여 Web 탭을 선택하십시오. 게시 설정 섹션에서 압축 형식을 Brotli로 설정할 수 있습니다(더 작은 파일 크기에 권장). Unity의 Web Player 설정 문서에서 이러한 설정을 최적화하는 방법에 대한 자세한 지침을 확인하십시오.
모든 것이 준비되면 Build and Run을 클릭하십시오. Unity 웹 브라우저에서 구성기(configurator)를 실행하는 데 필요한 모든 것이 담긴 폴더를 생성할 것입니다. 브라우저가 자동으로 열리고 빌드가 원활하게 실행되는 것을 보실 수 있을 것입니다. Build만 클릭하면, 출력물을 로컬 또는 원격 웹 서버에 호스팅해야 합니다. Unity는 Unity Play를 통해 호스팅 옵션도 제공합니다. Unity 6.1 이상을 사용 중이라면, Unity WebGL 빌드 설정에서 Unity Play 직접 게시하는 옵션을 제공합니다.
이제 브라우저 창이 열리고 앱이 실행된 것을 보실 수 있습니다.
테스트하고 온라인에 게시
다양한 브라우저와 장치에서 구성기(configurator)를 테스트하여 일관된 성능을 확인하십시오. 패키지 구성 요소는 WebGL 빌드에서 잘 작동하지만, 대상 장치에서 변형 전환이 어떻게 작동하는지 고려하고 복잡성을 그에 맞춰 조정하십시오.
Unity index.html 파일, 압축된 게임 데이터 및 모든 필수 에셋을 포함하는 완전한 빌드 폴더를 생성합니다. 이 폴더는 모든 표준 웹 서버에 호스팅될 수 있어 모든 최신 웹 브라우저를 통해 구성기 사용이 가능합니다.
✓ 최종 성공: 이제 작동하는 제품 구성기가 있습니다. 빌드 폴더에는 브라우저에서 열거나 웹 서버에 호스팅했을 때 모델의 마감을 실시간으로 변경하는 상호작용적인 레드 메탈 및 블루 메탈 버튼이 있는 3D 모델을 표시하는 index.html 파일이 포함되어야 합니다.
선택 사항: 현실적인 산업 환경을 만드세요
향상된 전문적인 프레젠테이션을 위해 Unity 에셋 스토어 환경 패키지 중 하나를 추가하는 것을 고려해 보세요. Unity는 Unity Factory 및 Unity Warehouse와 같은 공식 산업 환경을 제공하거나, 사전 구성된 조명 및 후처리 프로필이 있는 깔끔한 스튜디오 설정을 찾아보십시오. 이 패키지들은 광범위한 환경 생성을 요구하지 않으면서 사실적인 제품 시각화의 기반을 제공합니다. 또한, Unity Hub에는 최적화된 조명 및 렌더링 설정을 보여주는 URP 3D Sample Scene 템플릿이 포함되어 있습니다.
선택 사항: UI Toolkit을 사용한 고급 UI
더 고급 UI 개발을 위해 Unity는 웹 개발 관행에서 파생된 UI Toolkit을 제공하며, CSS와 XML과 유사한 구조를 사용합니다 (UI Toolkit에서는 해당 요소가 USS 및 UXML이라고 불립니다). UI 툴킷 사용하여 구성기 인터페이스를 구축하려면 버튼 기능을 정의하고 타이밍을 지정하기 위해 C# 코딩이 필요합니다. 이는 UI 툴킷 버튼 클릭을 기능과 연결하는 기본 제공 방식을 제공하지 않기 때문입니다. 샘플 프로젝트의 사용자 인터페이스는 Unity UI 툴킷 구축되어 구현에 대한 귀중한 통찰력을 제공합니다.
아래에는 변형 선택(variant select) 구성 요소에서 정의된 동작을 특정 버튼(change)이 수행하도록 하는 방법을 보여주는 작은 코드 조각이 있습니다.
using IndustryCSE.Tool.ProductConfigurator.Runtime;
using UnityEngine;
using UnityEngine.UIElements;
public class SimpleUIController : MonoBehaviour
{
[SerializeField]
private VariantSelect variantSelect; // Reference to the VariantSelect instance
[SerializeField]
private UIDocument uiDocument; // Reference to the UI Document
private void Start()
{
if (variantSelect == null || uiDocument == null) return;
// Get the root visual element
var root = uiDocument.rootVisualElement;
// Query the button named "change"
var changeButton = root.Q<Button>("change");
if (changeButton != null)
{
// Add a callback to the button
changeButton.clicked += () =>
{
variantSelect.SelectVariant(); // Trigger the variant selection
};
}
}
}
UI Toolkit을 사용하여 UI에 버튼을 추가하는 방법을 알아보려면 Unity Learn의 이 튜토리얼을 참조하십시오.
선택 사항: 고급 변형 기능
기본적인 재료 교체를 넘어, 이 패키지는 동적 시연을 위한 애니메이션 및 변형(transform) 변형을 지원합니다. 움직이는 부품, 조절 가능한 구성 요소 또는 애니메이션 쇼케이스의 이점을 얻는 기능이 있는 제품에 사용하십시오. 변형 변형은 위치, 회전 및 크기 조정을 처리하는 반면, 애니메이션 변형은 기능을 시연하거나 매력적인 전환을 제공합니다. 이러한 고급 기능들은 제품 기능을 보여주거나 더 매력적인 구성기 경험을 만들고 싶을 때 훌륭하게 작동합니다.
기본적인 재료 교체를 넘어, 애니메이션 및 변형 변형을 사용하여 동적인 시연을 할 수도 있습니다.
이제 기본 지식을 갖추었으니 Unity Industry Product Configurator 패키지를 사용하여 구성기(configurator)를 구축하세요. 소비자 제품, 산업 장비 또는 건축 시각화 중 무엇을 구축하든, 이 기반은 비즈니스 성과를 이끄는 매력적인 구성기(configurator)를 만드는 데 필요한 모든 것을 제공합니다.
