Unity WebGL 템플릿 활용 가이드
Unity로 WebGL 애플리케이션을 빌드하고 배포하기 위해 템플릿을 사용합니다. 이 문서에서는 WebGL 템플릿의 중요성, 템플릿을 만드는 방법, 그리고 JavaScript 매크로 및 조건부 지시문 사용법에 대해 설명합니다.
1. WebGL 템플릿의 중요성
WebGL 템플릿은 Unity 애플리케이션을 HTML 페이지에서 구성하는 설정입니다. 이 설정은 웹 브라우저에서 Unity 애플리케이션을 테스트하고, 설명하며, 미리 볼 수 있도록 돕습니다.
1.1 기본 템플릿 제공 사항
- Default: 기본 로딩 바가 있는 흰색 페이지.
- Minimal: 최소한의 보일러플레이트 코드 포함.
- PWA: 프로그레시브 웹 앱으로 웹 매니페스트 파일과 서비스 워커 코드 포함.
2. WebGL 템플릿 추가하기
- 폴더 생성: 프로젝트의
Assets폴더에WebGLTemplates라는 폴더를 생성합니다. - 템플릿 추가: 기본 내장 템플릿을 복사하여
WebGLTemplates폴더에 붙여넣습니다. - 이름 변경: 템플릿 폴더와 파일의 이름을 의미 있게 변경합니다.
| 단계 | 설명 |
|---|---|
| 1 | 프로젝트의 Assets 폴더에 WebGLTemplates 생성 |
| 2 | 내장 템플릿 복사 및 붙여넣기 |
| 3 | 템플릿 이름 변경 |
3. 템플릿 변수 및 매크로
Unity는 템플릿 파일을 전처리하여 내부 프리 프로세서 변수를 사용하여 동적 내용을 생성합니다. 주요 내부 변수는 다음과 같습니다.
| 변수 이름 | 타입 | 설명 |
|---|---|---|
| COMPANY_NAME | String | 플레이어 설정에 정의된 회사 이름 |
| PRODUCT_NAME | String | 플레이어 설정에 정의된 제품 이름 |
| PRODUCT_VERSION | String | 플레이어 설정에 정의된 버전 |
3.1 JavaScript 매크로 사용
JavaScript 매크로는 HTML 템플릿 내 JavaScript 코드에서 내부 프리 프로세서 변수를 사용할 수 있게 합니다.
예시:
<div id="unity-build-title">{{{ PRODUCT_NAME }}}</div>
이 경우 PRODUCT_NAME이 "My WebGL Game"으로 설정되면, 결과는 다음과 같습니다.
<div id="unity-build-title">My WebGL Game</div>
3.2 조건부 지시문
조건부 지시문 #if, #else, #endif를 사용하여 특정 코드 블록을 포함할 수 있습니다. 예를 들어:
#if EXPRESSION
// 조건에 따라 포함될 코드
#else
// 조건에 따라 포함되지 않을 코드
#endif
4. 커스텀 사용자 변수
사용자가 헌신한 변수를 사용해 HTML 문서 내 다양한 요소를 동적으로 변경할 수 있습니다. 예를 들어 페이지 제목을 동적으로 설정하려면 index.html 파일에서 다음과 같이 수정합니다.
<title>{{{ PAGE_TITLE }}}</title>
이후 페이지 제목을 설정하면 PAGE_TITLE 변수가 자동으로 템플릿에 반영됩니다.
5. 코드 및 데이터 URL 설정
WebGL 빌드는 다음과 같이 설정할 수 있습니다.
var buildUrl = "Build";
var config = {
dataUrl: buildUrl + "/{{{ DATA_FILENAME }}}",
frameworkUrl: buildUrl + "/{{{ FRAMEWORK_FILENAME }}}",
codeUrl: buildUrl + "/{{{ CODE_FILENAME }}}"
};
이 설정을 통해 호스팅 서버와의 관계를 명확하게 할 수 있으며, 빌드가 성공적으로 인스턴스화되면 Unity 인스턴스와 상호작용할 수 있습니다.
6. 빌드 인스턴스화 메서드
인스턴스화 메서드를 사용하여 Unity 인스턴스를 만들고 버튼 클릭 등을 통해 다양한 메서드를 호출할 수 있습니다.
| 메서드 | 설명 |
|---|---|
| SetFullscreen(fullscreen) | 전체 화면 모드를 토글합니다. |
| SendMessage(objectName, methodName, value) | 특정 오브젝트에 메시지를 보냅니다. |
| Quit() | 런타임을 종료합니다. |
7. 결론
WebGL 템플릿은 Unity에서 직접 브라우저에서 실행될 HTML 환경을 구성하고, 다양한 매크로와 사용자 변수를 통해 확장할 수 있는 강력한 도구입니다. 사용자 정의 템플릿을 활용하여 더 많은 사용자 경험을 제공할 수 있습니다.
참고 자료
- Unity 공식 문서: Unity Scripting API
- WebGL 프로젝트 빌드 및 실행 관련 추가 정보.
이 문서가 Unity WebGL 템플릿을 이해하고 활용하는 데 도움이 되길 바랍니다.