1시간 이내에 Unity에서 간단한 제품 구성기를 구축하세요.
제품 구성기는 고객이 정적 이미지를 보는 것을 넘어 상호작용하는 경험으로 제품과 상호작용하는 방식을 변화시킬 수 있으며, 궁극적으로 시청자에게 더 풍부한 세부정보와 더 많은 정보를 제공합니다.
산업 응용 프로그램에서 구성기는 복잡한 장비를 보여주고, 실시간 사용자 지정을 허용하며, 고객이 특정 맥락에서 제품을 시각화하는 데 도움을 줄 수 있습니다.
이 튜토리얼에서는 1시간 이내에 첫 번째 웹 배포 가능한 제품 구성기를 구축할 것입니다. 귀하의 구성기는 사용자가 간단한 인터페이스를 사용하여 3D 모델의 다양한 재료를 변경할 수 있도록 합니다. 끝날 때쯤이면 전문 제품 구성기를 만드는 데 필요한 기본 기능을 이해하게 될 것입니다.
이 튜토리얼을 비디오로 진행하고 싶다면 여기에서 시청할 수 있습니다.
참고: 7월 15일에 열리는 제품 구성기 템플릿에 대한 웨비나를 놓치지 마세요!
선행 요건
이 튜토리얼은 Unity에서 프로젝트를 개발하는 초급에서 중급 지식을 가진 개발자를 대상으로 합니다. 튜토리얼을 완료하려면 다음이 필요합니다.
1. 다음 설치:
- Unity 6 및 WebGL 빌드 지원
- Unity Industry에 대한 체험판 또는 정기 라이센스
- GitHub에서 제공되는 Unity의 산업 제품 구성기 패키지
2. 3D 모델 추가: 자신의 3D 모델 파일이나 템플릿에 포함된 모델을 사용하세요.
3. 기본 재료 추가: 최소 2-3개의 다양한 재료를 준비하거나 튜토리얼에 이미 포함된 금속 재료를 재사용하세요.
완료 예상 시간: 30-60 분
샘플 프로젝트 탐색
이 튜토리얼은 학습 기초 및 시작점으로 Unity의 산업 제품 구성기 샘플 프로젝트를 사용합니다. 샘플은 재료 및 구성 요소 전환, 카메라 제어 및 사용자 인터페이스를 갖춘 완전한 작동 구성기를 보여줍니다. 이는 연습에서 구현하는 기능과 정확히 일치합니다.
샘플에는 가시성을 위한 준비된 구성 요소와 재료, 애니메이션 및 변형 변형이 포함되어 있어 변형 시스템을 처음부터 구축하는 대신 제품에 집중할 수 있습니다.
샘플 프로젝트를 열고 자신의 장면을 만드세요
먼저 샘플 프로젝트를 탐색하면 자신의 제품 구성기를 만들기 전에 실습 경험을 얻을 수 있습니다. 설치하려면 다음 단계를 따르세요:
1. Unity Hub에서 유니버설 3D 템플릿을 사용하여 새 Unity 프로젝트를 만드세요. 이 템플릿은 유니버설 렌더 파이프라인 (URP)를 기반으로 합니다.
2. 산업 제품 구성기 샘플 프로젝트를 다운로드하고 설치하세요:
- 패키지를 설치하려면 GitHub 리포지토리의 녹색 코드 버튼에서 URL을 복사하고 Unity의 패키지 관리자(Package Manager)를 엽니다.
- 더하기 아이콘을 클릭하고 git URL에서 패키지 추가를 선택한 다음 리포지토리 링크를 붙여넣습니다. Unity는 필요한 모든 구성 요소를 다운로드하고 설치합니다.
3. 다운로드가 완료되면 샘플 장면을 열고 실행하여 완전한 기능의 구성기가 작동하는 모습을 확인하세요. 샘플은 재료 전환, 구성 요소 가시성 전환 및 카메라 제어를 보여주며, 가능한 것과 시스템 작동 방식에 대한 즉각적인 통찰력을 제공합니다. 패키지는 프로토타입을 시작하기 위해 Unity의 기존 시스템에 구성기 전용 구성 요소를 추가합니다.
4. 참고: Git URL 설치에 문제가 있는 경우 패키지 관리자 문제 해결 가이드를 확인하세요.
✓ 체크포인트: 이제 계층(Hierarchy)에서 마우스 오른쪽 버튼을 클릭하거나 게임 오브젝트(GameObject) 메뉴 아래에서 제품 구성기 옵션을 볼 수 있어야 합니다. 구성기 샘플에 대한 GitHub 리포지토리에도 유용한 지침이 있어 최대한 많은 학습을 할 수 있도록 도와줍니다.
제품 구성기가 편집기에서 열립니다.
3D 모델을 가져옵니다.
샘플을 탐색하는 데 시간을 보낸 후, 다음 단계는 재료 전환 기능을 추가할 3D 모델을 가져오는 것입니다. 이 튜토리얼을 더 빨리 완료하고 싶다면 샘플에 이미 포함된 Skidloader 모델을 사용할 수 있습니다(검색: Skidloader). 또는 다음 섹션에서 설명하는 두 가지 변환 옵션 중 하나를 사용하여 쉽게 자신의 모델을 가져올 수 있습니다: Unity Asset Manager 내의 최적화 및 변환 기능 또는 Unity Asset Transformer Toolkit. 샘플 프로젝트에 포함된 모델을 사용하려면 이 섹션을 건너뛸 수 있습니다.
에셋 관리자
전문 구성기를 구축할 계획이라면 Asset Manager를 워크플로에 통합하는 것을 고려하세요. Unity의 Asset Manager는 팀이 복잡한 실시간 3D 자산을 업로드, 관리, 변환, 공유 및 액세스하는 방식을 간소화하는 클라우드 기반 디지털 자산 관리(DAM) 솔루션입니다. Asset Manager에 대한 액세스는 Unity Industry 구독에 포함되어 있습니다.
Asset Manager를 사용하여 3D 모델을 준비하고 최적화할 수 있으며, 특히 최적화 및 변환 기능을 사용하여 가능합니다. 이 과정은 메시를 정리하고, 폴리곤 수를 최적화하며, Unity 준비 형식으로 변환하여 3D 자산을 변환합니다. 이 과정은 1분 이내에 완료되며 대용량 파일 변환의 워크플로 효율성을 향상시킵니다.
여기에서 Asset Manager에 대해 더 알아보세요:
Asset Transformer Toolkit을 사용한 CAD 워크플로
복잡한 CAD 모델을 변환해야 하는 경우, 다양한 CAD 파일 형식을 처리하고 고급 최적화 기능을 제공하는 Unity Asset Transformer Toolkit을 사용하는 것을 고려하세요. CAD 모델을 Unity로 직접 가져온 후, Asset Transformer의 도구를 사용하여 폴리곤 수를 줄이고, 재료를 단순화하며, 실시간 시각화를 위해 모델을 준비합니다.
여기에서 Asset Transformer Plugin에 대해 더 알아보세요:
장면 설정하기
구성기를 위한 새 장면을 생성하는 것으로 시작하세요. 빈 장면에 스키드로더를 추가하거나, 자신의 3D 모델을 사용하는 경우 장면에 가져와 적절하게 위치시킵니다. 모델은 이제 샘플 프로젝트에서 관찰한 재료 전환 기능을 추가할 준비가 되었습니다.
✓ 체크포인트: 장면에는 3D 모델이 포함되어 있어야 하며, 장면 뷰에서 명확하게 볼 수 있는 위치에 있어야 합니다. 모델에는 재료가 적용되어 있어야 하며 게임 뷰에서 볼 수 있어야 합니다.
재료 전환 기능 구축하기
이제 사용자가 제품의 재료를 실시간으로 전환할 수 있도록 하는 핵심 구성기 기능을 구현할 것입니다.
재료 변형 만들기
1. 게임 오브젝트 메뉴에서 선택하거나 계층 구조에서 마우스 오른쪽 버튼을 클릭하여 변형 세트를 위한 내장 구성 요소를 사용하여 시작하세요. 다양한 옵션이 있지만 이 튜토리얼에서는 재료 변형에 집중하겠습니다.
- 패키지의 재료 변형 시스템은 복잡한 객체 계층 구조에서 대상 재료를 사용하는 모든 메시 렌더러를 자동으로 찾는 감지 시스템을 사용합니다.
2. 구성 요소의 대상 부모 옵션을 사용하여 기본 재료와 부모 객체를 정의한 다음, 캡처 도구가 모든 관련 메시 렌더러를 식별하도록 합니다. 이것은 성능을 유지하면서 여러 구성 요소가 있는 제품 간의 일관성을 보장합니다.
기본 재료 정의하기
3. 금속 마감이 있는 이 두 재료를 재사용하세요, 금속 페인트 - 빨강 및 금속 페인트 - 파랑 (또는 자신의 동등한 것을 만드세요). 각 변형 슬롯에 재료를 드래그하여 변형 필드에 할당합니다. 시스템은 모든 전환 논리를 처리하며, 변형이 변경될 때 재료를 자동으로 업데이트합니다. 검사기에서 내장된 미리보기 슬라이더를 사용하여 즉시 변형을 테스트하고 모델에서 빨간색 및 파란색 마감이 어떻게 보이는지 확인하십시오.
✓ 체크포인트: 이제 재료 변형 세트 구성 요소에서 두 개의 재료 변형(금속 페인트 - 빨간색 및 금속 페인트 - 파란색)을 볼 수 있어야 합니다. 검사기에서 미리보기 슬라이더를 드래그하면 장면 보기에서 모델이 빨간색 및 파란색 금속 마감 사이에서 실시간으로 변경되어야 합니다.
재료 생성 도움말은 Unity의 재료 문서를 참조하십시오.
변형을 사용자 인터페이스에 연결
제품 구성기 패키지에는 빠른 구성기 개발을 위해 기존 변형 세트의 드롭다운 메뉴를 생성하는 VariantSelect 구성 요소가 포함되어 있습니다. 이 기능은 비개발자가 장면에서 변형 세트를 쉽게 선택할 수 있도록 설계되었으며, 사용자 지정 스크립팅 없이도 기능적인 구성기를 구축할 수 있도록 Unity의 이벤트 시스템과 직접 통합됩니다. 이는 uGUI 솔루션을 사용하는 사용자에게 특히 유용하며, 구성 요소를 OnClick 이벤트에 직접 할당할 수 있습니다.
사용자 인터페이스 만들기
재료 변형이 작동하면 사용자가 이러한 구성을 제어하고 제품 구성기와 상호 작용할 수 있는 인터페이스가 필요합니다.
Unity는 두 가지 UI 시스템을 제공합니다: GameObject 기반 UI 시스템(uGUI)과 최신 UI Toolkit입니다. 이 튜토리얼에서는 VariantSelect 구성 요소와의 드래그 앤 드롭 통합을 허용하므로 GameObject 기반 uGUI 시스템을 사용할 것입니다.
1. UI 메뉴에서 버튼을 계층 구조로 드래그 앤 드롭하고 이름을 지정합니다(예: "빨간 금속 버튼").
- 첫 번째 UI 요소를 만들면 Unity는 자동으로 장면에 캔버스 및 이벤트 시스템 객체를 생성합니다. 캔버스는 모든 UI 요소의 컨테이너 역할을 하며, 이벤트 시스템은 버튼 클릭과 같은 사용자 입력을 처리합니다.
- 캔버스 구성 요소가 화면 크기에 맞게 조정으로 설정되어 있는지 확인하십시오. 이 설정은 UI 요소가 서로 다른 화면 해상도에서 일관된 비율을 유지할 수 있도록 합니다. 기준 해상도를 목표 화면 크기에 맞게 설정하십시오. 이 예에서는 1920x1080일 수 있습니다. 이는 UI 레이아웃이 기반하는 기준 해상도를 정의합니다. 또한 일치 속성을 0.5로 설정하여 너비와 높이 스케일링 간의 균형을 맞추고, 화면이 기준보다 넓거나 높더라도 UI 요소가 고르게 스케일링되도록 합니다.UI 앵커링 팁: 버튼을 특정 화면 가장자리(상단/하단)에 고정하려면 UI 요소를 선택하고 Rect Transform 구성 요소의 앵커 프리셋 패널에서 원하는 앵커 프리셋을 클릭합니다. Unity UI 앵커링 가이드에서 자세히 알아보세요.
2. 버튼을 변형 선택에 연결하려면 계층에서 버튼을 선택하고 검사기에서 버튼 구성 요소를 찾아 OnClick() 섹션을 확인하세요.
3. "+"를 클릭하여 새 이벤트를 추가하고, VariantSelect 구성 요소가 있는 GameObject를 객체 필드로 드래그한 다음 드롭다운에서 VariantSelect를 선택하고 버튼을 클릭할 때 재질 변경을 트리거하기 위해 SelectVariant를 선택하세요.
4. 각 재질 마감(파란 금속 버튼)에 대해 추가 버튼을 만들고 같은 방식으로 연결하세요. uGUI 기본 사항에 대해 더 배우고 싶다면, 기본 사항을 마스터하기 위한 이 튜토리얼을 방문하세요.
✓ 체크포인트: 재생 모드를 클릭한 다음 빨간 금속 버튼을 클릭하면 모델이 빨간 금속 마감으로 변경됩니다. 파란 금속 버튼을 클릭하여 파란색으로 변경하세요. 계층에서 캔버스와 이벤트 시스템을 확인하고 게임 뷰에서 버튼이 보이는지 확인하세요.
버튼이 작동하지 않으면 OnClick 이벤트가 제대로 연결되었는지 확인하고 Unity의 버튼 문서를 확인하세요.
고급 사용자용: 스크립팅에 익숙하다면, 20:10부터의 이 비디오는 VariantSetController 스크립트를 사용하여 UI 버튼을 자동으로 생성하는 방법을 보여줍니다. 이 스크립트는 올바른 이름과 기능으로 버튼을 동적으로 생성합니다.
카메라 제어 추가
완전한 구성기 인터페이스는 사용자가 제품을 보는 방식을 제어할 수 있도록 하여 다양한 각도와 관점을 탐색할 수 있게 해야 합니다.
구성기에 최상의 사용자 경험을 제공하려면 Cinemachine 패키지를 사용할 수 있습니다. 이 패키지는 전문 카메라 뷰를 설정하기 위한 코드 없는 솔루션을 제공합니다. 구성기 샘플 프로젝트에는 이미 Cinemachine 설정이 포함되어 있으므로 즉시 자신의 카메라를 추가할 수 있습니다.
1. 제품에 대한 새로운 카메라 각도를 만들려면 GameObject > Cinemachine > Camera로 이동하여 장면에 새로운 가상 카메라를 추가하세요. 이 카메라를 원하는 각도에서 제품을 보여주도록 위치시키세요. 예를 들어, 재질 변경을 강조하는 클로즈업 뷰입니다.
- 팁: 시작점으로 뷰와 정렬 (Windows에서는 Ctrl-Shift-F, Mac에서는 Cmd-Shift-F)를 사용하세요. 이것은 카메라를 장면 뷰와 동일한 위치로 이동시킵니다. 이 위치에서 원하는 각도를 찾기가 더 쉽습니다.
2. Cinemachine 카메라 구성 요소에서 우선 순위 값을 설정하여 이 카메라가 활성화되어야 할 때를 결정합니다(높은 숫자가 우선합니다). Cinemachine 카메라 구성 요소에서 솔로 버튼을 사용하여 다양한 카메라 뷰를 테스트합니다.
3. 다양한 시청 각도를 위해 두 개에서 세 개의 카메라를 추가합니다. Cinemachine Brain 구성 요소(주 카메라에 자동으로 추가됨)는 서로 다른 카메라 간의 블렌드를 제어하며, 항상 가장 높은 우선 순위를 가진 가상 카메라를 사용합니다. Unity 6에서 Cinemachine 사용에 대해 더 알아보려면 이 비디오를 참조하세요.
4. UI 컨트롤에 카메라 연결하기: 다양한 카메라 뷰를 활성화하려면 UI 버튼을 생성합니다(재료 변형 버튼에서 복사하여 붙여넣고 카메라에 맞게 이름을 바꿉니다). OnClick 이벤트의 경우, 제어하려는 카메라를 드래그하고 우선 순위 지정 옵션을 사용합니다. 이렇게 하면 우선 순위가 최고로 설정되며, 따라서 이 가상 카메라가 활성 카메라가 됩니다.
5. 인터랙티브 카메라 제어 설정: 인터랙티브 카메라 이동을 위해, 제품 주위에서 마우스 제어 궤도 이동을 허용하는 프리룩 카메라를 사용합니다.
6. 입력 작업 구성: Cinemachine 입력 축 컨트롤러 구성 요소에서 구동 축 섹션을 볼 수 있으며, 보기 궤도 X, 보기 궤도 Y, 및 궤도 비율 옵션이 있습니다. 이들은 제품 구성기 패키지의 플레이어/보기 입력 작업으로 구성되어야 합니다. 이 작업을 찾으려면 다음으로 이동하세요:
Assets/Samples/Product Configurator/1.6.0/Standard Configuration Setup/StandardUIAction
이 폴더에서 플레이어/보기 작업을 드래그하여 구동 축 섹션의 보기 궤도 X 및 보기 궤도 Y 입력 필드에 놓습니다. 이렇게 하면 오른쪽 마우스 버튼이 클릭될 때만 마우스 제어 카메라가 활성화됩니다.
이제 사용자가 인터페이스를 통해 제어할 수 있는 여러 카메라 앵글로 구성 요소를 테스트할 준비가 되었습니다.
마무리 작업 및 웹 배포
인터랙티브 구성 요소가 완성되면, 마지막 단계는 사용자가 브라우저에서 접근할 수 있도록 웹 배포를 준비하는 것입니다.
웹GL용 빌드 프로필
구성 요소를 웹GL에 배포하려면 웹 옵션을 플랫폼으로 사용하세요. 파일 > 빌드 프로필로 이동하여 창 왼쪽에서 웹를 대상 플랫폼으로 선택하세요. 장면 목록에 장면이 있는지 확인하고 빌드하고 싶지 않은 다른 장면은 삭제하세요.
구성 요소를 웹GL에 배포하려면 웹 옵션을 플랫폼으로 사용하세요.
메시지 웹 모듈이 로드되지 않음과 함께 Unity Hub로 설치 버튼이 표시되면 WebGL 빌드 지원 모듈을 설치해야 합니다. 설치 버튼을 클릭하면 Unity Hub가 WebGL 빌드 지원 모듈을 다운로드하고 설치합니다. 새 모듈을 로드하려면 편집기를 다시 시작해야 합니다.
WebGL 빌드 지원 모듈이 설치되면 텍스처 압축 옵션, 코드 최적화 수준 및 브라우저 배포에 적합한 메모리 제약을 포함하여 빌드 설정을 구성하세요.
WebGL 플랫폼으로 전환한 후 웹 전용 최적화를 위해 플레이어 설정을 검토하세요. 편집 > 프로젝트 설정 > 플레이어로 이동하여 웹 탭을 선택하세요. 퍼블리싱 설정 섹션에서 압축 형식을 브로틀리로 설정할 수 있습니다(파일 크기를 줄이기 위해 권장됨). 이 설정을 최적화하는 방법에 대한 자세한 안내는 Unity의 웹 플레이어 설정 문서를 참조하세요.
모든 준비가 완료되면 빌드 및 실행을 클릭하세요. Unity는 웹 브라우저에서 구성 요소를 실행하는 데 필요한 모든 것이 포함된 폴더를 생성합니다. 브라우저가 자동으로 열리고 빌드가 원활하게 실행되는 것을 볼 수 있어야 합니다. 빌드만 클릭하면 출력물을 로컬 또는 원격 웹 서버에 호스팅해야 합니다. Unity Play를 통해 호스팅 옵션을 제공합니다.
이제 브라우저 창이 열리고 앱이 라이브 상태로 표시됩니다.
온라인에서 테스트 및 게시
일관된 성능을 보장하기 위해 다양한 브라우저와 장치에서 구성기를 테스트하세요. 패키지 구성 요소는 WebGL 빌드에서 잘 작동하지만, 변형 전환이 대상 장치에서 어떻게 작동하는지 고려하고 복잡성을 조정하세요.
Unity는 index.html 파일, 압축된 게임 데이터 및 모든 필요한 자산을 포함하는 전체 빌드 폴더를 생성합니다. 이 폴더는 모든 표준 웹 서버에서 호스팅할 수 있어, 구성기를 모든 현대 웹 브라우저를 통해 접근할 수 있게 합니다.
✓ 최종 성공: 이제 작동하는 제품 구성기가 있습니다. 빌드 폴더에는 브라우저에서 열거나 웹 서버에 호스팅할 때 실시간으로 모델의 마감을 변경하는 인터랙티브한 빨간 금속 및 파란 금속 버튼이 있는 3D 모델을 표시하는 index.html 파일이 포함되어야 합니다.
선택 사항: 현실적인 산업 환경 만들기
향상된 전문 프레젠테이션을 위해 Unity의 자산 스토어 환경 패키지 중 하나를 추가하는 것을 고려하세요. Unity는 Unity Factory 및 Unity Warehouse와 같은 공식 산업 환경을 제공하거나, 사전 구성된 조명 및 후처리 프로필이 있는 깔끔한 스튜디오 설정을 찾아보세요. 이 패키지는 광범위한 환경 생성 없이도 현실적인 제품 시각화를 위한 기초를 제공합니다. 또한, Unity Hub에는 최적화된 조명 및 렌더링 설정을 보여주는 URP 3D 샘플 장면 템플릿이 포함되어 있습니다.
선택 사항: UI Toolkit을 사용한 고급 UI
더 고급 UI 개발을 위해 Unity는 웹 개발 관행에서 영감을 받은 UI Toolkit을 제공합니다. 이는 CSS 및 XML과 유사한 구조를 사용합니다(UI Toolkit에서는 해당 구조를 USS 및 UXML이라고 부릅니다). UI Toolkit을 사용하여 구성기 인터페이스를 구축하려면 버튼 기능을 정의하고 타이밍하기 위해 C#에서 약간의 코딩이 필요합니다. 이는 UI Toolkit이 버튼 클릭과 기능을 연결하는 즉시 사용할 수 있는 방법을 제공하지 않기 때문입니다. 샘플 프로젝트의 사용자 인터페이스는 Unity UI Toolkit으로 구축되어 있으며, 구현에 대한 귀중한 통찰력을 제공합니다.
아래에서 특정 버튼(변경이라고 불리는 버튼)이 변형 선택 구성 요소에서 정의된 작업을 수행하는 방법을 보여주는 작은 코드 스니펫을 볼 수 있습니다:
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에서 참조하세요.
선택 사항: 고급 변형 기능
기본 재료 교체를 넘어, 이 패키지는 동적 시연을 위한 애니메이션 및 변형 변수를 지원합니다. 이것들은 움직이는 부품, 조정 가능한 구성 요소 또는 애니메이션 쇼케이스에서 이점을 얻는 기능이 있는 제품에 사용하세요. 변형 변환은 위치, 회전 및 크기 수정을 처리하며, 애니메이션 변형은 기능을 시연하거나 매력적인 전환을 제공합니다. 이러한 고급 기능은 제품 기능을 보여주거나 더 매력적인 구성기 경험을 만들고 싶을 때 훌륭하게 작동합니다.
기본 재료 교체를 넘어, 동적 시연을 위해 애니메이션 및 변형 변수를 사용할 수도 있습니다.
이제 Unity의 Industry Product Configurator 패키지를 사용하여 구성기를 구축하는 기본 지식을 갖추게 되었습니다. 산업 장비, 소비자 제품 또는 건축 시각화를 위해 구축하든, 이 기초는 비즈니스 결과를 이끄는 매력적인 구성기를 만드는 데 필요한 모든 것을 제공합니다.
Read the article
Fill out this form to stay up-to-date with Unity’s latest offerings and solutions
