# Unity Web 빌드의 JavaScript 인터페이스

> Learn about some useful functions you can use in the JavaScript interface.

Unity Web 빌드의 JavaScript 인터페이스는 웹 애플리케이션을 구성하는 데 사용할 수 있는 유용한 함수와 변수를 제공합니다. JavaScript 라이브러리 코드(.jslib 파일)에서 이러한 함수를 호출할 수 있습니다.

## 오류, 경고, 커스텀 배너 표시##display-error-warning-or-custom-banners

`unityShowBanner()` 함수를 사용하여 메시지 배너를 표시하거나 함수를 오버라이드하여 용도에 맞게 커스터마이즈합니다.

| **파라미터** | **설명**                                                                                                          |
| -------- | --------------------------------------------------------------------------------------------------------------- |
| `msg`    | 표시할 메시지입니다.                                                                                                     |
| `type`   | 표시할 메시지 유형입니다. 예시:`type == error`를 사용하여 캔버스 위에 오류 메시지를 영구적으로 표시합니다.`type == warning`을 사용하여 메시지를 노란색으로 강조 표시합니다. |

기본 WebGL 템플릿의 다음 코드로 오류와 경고 배너의 외형을 설정합니다. 커스텀 템플릿에서 이 함수를 오버라이드하여 자체 배너 유형을 생성하거나 중요하지 않은 경고 및 오류 메시지가 표시되는 방식을 커스터마이즈할 수 있습니다.

```js
function unityShowBanner(msg, type) {
        var warningBanner = document.querySelector("#unity-warning");
        function updateBannerVisibility() {
          warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
        }
        var div = document.createElement('div');
        div.innerHTML = msg;
        warningBanner.appendChild(div);
        if (type == 'error') div.style = 'background: red; padding: 10px;';
        else {
          if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
          setTimeout(function() {
            warningBanner.removeChild(div);
            updateBannerVisibility();
          }, 5000);
        }
        updateBannerVisibility();
      }
```

.jslib 파일에서 함수를 호출할 수 있습니다. 다음 배너는 오류 메시지로 **표시하려는 메시지**를 영구적으로 표시합니다.

```js
unityShowBanner('The message you want to show', 'error');
```

## WebGL 컨텍스트 속성 변경##change-webgl-context-attributes

WebGL 컨텍스트가 초기화되는 생성 속성을 커스터마이즈하려면 `webglContextAttributes`를 사용합니다. 다음 속성만 변경할 수 있습니다.

* `powerPreference`
* `premultipliedAlpha`
* `preserveDrawingBuffer`

이러한 옵션은 WebGL 렌더링 API를 사용하는 경우에만 적용됩니다. WebGPU 렌더링 API를 사용하는 경우 `webglContextAttributes` 필드가 무시됩니다.

이러한 속성을 변경하려면 커스텀 WebGL 템플릿에서 구성 오브젝트를 변경합니다. 예시:

```js
script.onload = () => {
  config['webglContextAttributes'] = {

    powerPreference: 'high-performance',
    premultipliedAlpha: false,
    preserveDrawingBuffer: true, 
  };
  createUnityInstance(canvas, config, (progress) => {
```

`powerPreference` 속성에는 다음과 같은 옵션이 있습니다.

| **옵션**           | **설명**                                            |
| ---------------- | ------------------------------------------------- |
| default          | 사용자 에이전트가 가장 적합한 GPU 구성을 결정하도록 합니다. 이 옵션이 기본값입니다. |
| high-performance | 렌더링 성능을 전력 소비보다 우선시합니다.                           |
| low-power        | 전력 절약을 렌더링 성능보다 우선시합니다.                           |

각 속성에 대한 자세한 내용은 [HTMLCanvasElement: getContext()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext)에 대한 Mozilla 기술 자료를 참조하십시오.

Unity WebGL 그래픽스에 대한 자세한 내용은 [WebGL 그래픽스](/engine/6000.0/manual/platform-specific/webgl/develop/graphics.md)를 참조하십시오.

## 스트리밍 에셋으로 프로젝트 설정##direct-your-project-to-your-streaming-assets

다른 CDN에서 스트리밍 에셋을 호스팅해야 하는 경우, 스트리밍 에셋이 있는 전체 URL을 가리키도록 `createUnityInstance()` 구성 오브젝트의 `streamingAssetsUrl` 프로퍼티를 조정할 수 있습니다.

```js
var buildUrl = "Build";
var config = {
  dataUrl: buildUrl + "/{{{ DATA_FILENAME }}}",
  frameworkUrl: buildUrl + "/{{{ FRAMEWORK_FILENAME }}}",
  codeUrl: buildUrl + "/{{{ CODE_FILENAME }}}",
#if MEMORY_FILENAME
  memoryUrl: buildUrl + "/{{{ MEMORY_FILENAME }}}",
#endif
#if SYMBOLS_FILENAME
  symbolsUrl: buildUrl + "/{{{ SYMBOLS_FILENAME }}}",
#endif
   streamingAssetsUrl: "https://mygameserver.com/StreamingAssets/",  // Add this line to override the default streaming assets location
  companyName: "{{{ COMPANY_NAME }}}",
  productName: "{{{ PRODUCT_NAME }}}",
  productVersion: "{{{ PRODUCT_VERSION }}}",
};
```

## 웹 페이지의 캐시 제어##control-cache-of-web-pages

`cacheControl()` 함수를 사용하여 `UnityCache`에 캐시되는 URL을 제어합니다. 함수는 URL을 파라미터로 받으며 `must-revalidate`나 `immutable`, `no-store`를 반환합니다. 고유한 용도로 함수를 오버라이드할 수도 있습니다.

코드 예시와 자세한 내용은 [웹의 캐시 동작](/engine/6000.0/manual/platform-specific/webgl/develop/caching.md)을 참고하십시오.

## 추가 리소스##additional-resources

* [JavaScript에서 Unity C# 스트립트 함수 호출](/engine/6000.0/manual/platform-specific/webgl/develop/interactingwithbrowserscripting/web-interacting-browser-unity-to-js.md)
* [웹 그래픽스](/engine/6000.0/manual/platform-specific/webgl/develop/graphics.md)
* [웹의 캐시 동작](/engine/6000.0/manual/platform-specific/webgl/develop/caching.md)