> ## Documentation Index
> Fetch the complete documentation index at: https://devdocs.xbox.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 웹 콘텐츠 테스트 애플리케이션(CTA) 개요

> 웹 콘텐츠 테스트 애플리케이션(CTA) 개요

이 항목에서는 [xbox.com/play/dev-tools](https://www.xbox.com/play/dev-tools)에서 사용할 수 있는 개발자 도구 목록을 다룹니다. 이 도구는 Windows의 Edge와 Chrome 브라우저 및 Mac, iOS, iPadOS의 Safari에서 사용할 수 있도록 설계되었습니다.

* [랜딩 페이지](#landing-page)
* [오퍼링 선택](#offering-selection)
* [원격 연결](#remote-connect)
* [Dev 설정 메뉴](#dev-settings-menu)
* [Dev 도구 메뉴](#dev-tools-menu)

<a id="landing-page" />

## 개발자 홈 페이지

개발자 도구 사용을 시작하려면 [xbox.com/play/dev-tools](https://www.xbox.com/play/dev-tools)를 방문하거나 [xbox.com/play](https://www.xbox.com/play/)와 같은 웹 기반 스트리밍 환경을 실행한 후 다음 단계에 따라 개발자 모드로 진입하세요.

1. 설정을 엽니다.
   <img src="https://mintcdn.com/microsoft-4404708b/nTPVBuko1tKGsd6P/images/gdk/features/common/game-streaming-web-cta-dev-mode-activation-me-settings.webp?fit=max&auto=format&n=nTPVBuko1tKGsd6P&q=85&s=6f99c1a4807303e873fdf87a5258e456" alt="설정 열기 스크린샷" width="1765" height="431" data-path="images/gdk/features/common/game-streaming-web-cta-dev-mode-activation-me-settings.webp" />

2. 개발자 설정 탭을 표시하려면 "Account"를 **빠르게 10번 연속으로** 클릭하거나 탭합니다.
   <img src="https://mintcdn.com/microsoft-4404708b/nTPVBuko1tKGsd6P/images/gdk/features/common/game-streaming-web-cta-dev-mode-activation-account.webp?fit=max&auto=format&n=nTPVBuko1tKGsd6P&q=85&s=426c5b0766183735eb1d8fbee3531425" alt="설정의 계정 탭을 클릭하는 스크린샷" width="1771" height="591" data-path="images/gdk/features/common/game-streaming-web-cta-dev-mode-activation-account.webp" />

3. "Developer Tools Home" 버튼을 클릭합니다. 로그인 상태와 계정 액세스에 따라 개발자 탭에서 다양한 옵션을 사용할 수 있습니다.
   <img src="https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/game-streaming-web-cta-dev-settings.png?fit=max&auto=format&n=UZTRJSf0emX1fheE&q=85&s=fe93be3ea75e8351e87321d2cab7eb2d" alt="설정의 개발자 탭 스크린샷" width="1531" height="1127" data-path="images/gdk/features/common/game-streaming-web-cta-dev-settings.png" />

<Note>iOS 또는 iPad OS에서는 공유 버튼을 클릭하고 "홈 화면에 추가"를 선택하여 이 페이지를 PWA(프로그레시브 웹 앱)로 저장할 수 있습니다. 설정되면 이 PWA는 계정과 구성을 기억하므로 나중에 테스트를 계속하기 위해 쉽게 돌아올 수 있습니다.</Note>

* 리테일 계정의 경우 샌드박스를 비워두고 XBOX 개발 키트에 로그인되어 있거나 비공개 오퍼링에 액세스하도록 구성된 동일한 계정을 사용하여 로그인하세요.

<Note>샌드박스 테스트 계정의 경우, 로그인하기 전에 샌드박스 ID를 입력해야 합니다. 그렇게 하지 않으면 이러한 계정에는 리테일 기능에 대한 액세스 권한이 없으므로 일부 기능이 제대로 작동하지 않을 수 있습니다. 이 경우 [outlook.com](https://www.outlook.com)과 같은 다른 microsoft 웹사이트를 방문하여 계정에서 수동으로 로그아웃한 후 올바른 샌드박스 ID로 다시 시도해야 할 수 있습니다.</Note>

<img src="https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/game-streaming-web-cta-landing-page-signin.png?fit=max&auto=format&n=UZTRJSf0emX1fheE&q=85&s=65b27ba4ef15e8a5692d39a5849a4281" alt="로그인 대화 상자 스크린샷" width="1318" height="859" data-path="images/gdk/features/common/game-streaming-web-cta-landing-page-signin.png" />

로그인하면 이 랜딩 페이지에는 원격 플레이 및 비공개 오퍼링 선택에 빠르게 액세스할 수 있는 링크가 있습니다. 로그인된 계정이 XBOX 개발 키트와 연결되었거나 비공개 오퍼링에 대한 액세스 권한이 부여되었는지 여부에 따라 일부 옵션이 비활성화될 수 있습니다. 계정이 개발자 시나리오에 액세스할 수 없는 경우 설정 방법에 대한 정보가 포함된 오류 메시지가 표시됩니다. 아래 섹션은 특정 계정 설정 요구 사항에 대해 자세히 설명합니다.

<img src="https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/game-streaming-web-cta-landing-page.png?fit=max&auto=format&n=UZTRJSf0emX1fheE&q=85&s=6f2ebaf10f15f97bf43a648035fee186" alt="랜딩 페이지 스크린샷" width="1327" height="790" data-path="images/gdk/features/common/game-streaming-web-cta-landing-page.png" />

<img src="https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/game-streaming-web-cta-landing-page-oops.png?fit=max&auto=format&n=UZTRJSf0emX1fheE&q=85&s=3335080b03974f9a6552e58b743aae77" alt="랜딩 페이지 오류 스크린샷" width="1324" height="997" data-path="images/gdk/features/common/game-streaming-web-cta-landing-page-oops.png" />

<a id="offering-selection" />

## 오퍼링 선택

오퍼링은 데이터센터 하드웨어에서 실행되는 게임을 검증하는 데 사용되는 비공개 테스트 환경입니다. 오퍼링에 대한 자세한 정보는 [게임 스트리밍 개요](/build/core-features/common/game-streaming/game-streaming-overview#what-are-private-offerings)의 정보를 확인하세요.

특정 오퍼링을 사용하려면 [xbox.com/play/dev-tools/select-offering](https://www.xbox.com/play/dev-tools/select-offering)으로 이동하거나 개발자 홈 페이지에서 "Select Offering"을 클릭합니다. 오퍼링 선택 페이지에서는 액세스 권한이 있는 오퍼링이 드롭다운 목록에 미리 채워집니다. 그런 다음 오퍼링을 선택하고 connect를 클릭할 수 있습니다. 어떤 이유로 원하는 오퍼링이 드롭다운 목록에 없는 경우 위의 입력 상자에 수동으로 입력하고 "Add offering"을 클릭할 수 있습니다.

connect를 클릭하면 오퍼링에 대해 구성된 기본 카탈로그 페이지로 이동합니다. 페이지에는 이제 사용자 지정 오퍼링을 사용하고 있음을 나타내는 텍스트가 있습니다. 오퍼링에 액세스할 수 없는 경우 해당 오퍼링을 사용할 권한이 있는 계정에 로그인되어 있는지 확인하세요.

### 오퍼링 지역

오퍼링이 실제 데이터센터에 연결되므로 다양한 지역에서 테스트하고 해당 지역의 대표적인 스트리밍 경험을 체험할 수 있는 것이 중요합니다. 현재 오퍼링은 사용자를 가장 가까운 사용 가능한 데이터 센터로 자동으로 라우팅하지 않습니다. 대신, 개발자 설정 메뉴의 스트리밍 지역 드롭다운이나 `user.region` 쿼리 매개 변수로 수동으로 제어할 수 있습니다. 사용 가능한 지역은 미리 구성해야 한다는 점에 유의하세요. 오퍼링의 사용 가능한 지역을 조정하려면 Microsoft 계정 담당자에게 문의하세요.

<img src="https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/game-streaming-web-cta-offering-selection.png?fit=max&auto=format&n=UZTRJSf0emX1fheE&q=85&s=05d5d894c48e36949e51808cd6001575" alt="오퍼링 선택 페이지 스크린샷" width="1888" height="993" data-path="images/gdk/features/common/game-streaming-web-cta-offering-selection.png" />

<a id="remote-connect" />

## 원격 연결

원격 연결을 사용하면 사용자가 해당 사용자에 대해 원격 기능이 활성화된 XBOX 개발 키트에 원격으로 연결할 수 있습니다. 이 경험을 활성화하려면 먼저 XBOX 개발 키트에서 다음 단계를 수행해야 합니다.

### XBOX 개발 키트 설정

* 원격 연결 웹사이트에 로그인을 시도하기 전에 이 부분을 수행해야 합니다. 계정에 대해 원격 사용용 XBOX 개발 키트를 아직 구성하지 않은 경우 원격 연결 페이지는 xbox.com/play 랜딩 페이지로 리디렉션됩니다.
* 웹사이트에서 사용할 계정(샌드박스 계정 포함)으로 XBOX 개발 키트에 로그인합니다.
* 원하는 경우 쉽게 식별할 수 있도록 XBOX 개발 키트에 이름을 지정합니다.
* Dev Home -> Streaming -> "Remote Connect" 아래에서 계정을 선택합니다.
  * 대안으로, 원격 연결은 소비자 설정을 통해서도 활성화할 수 있습니다: Dev Home -> Settings -> Launch Settings -> Devices & Connections -> Remote Features -> Enable Remote Features로 이동하여 원격 연결을 활성화합니다.

<img src="https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/game-streaming-dev-home-streaming-enable-direct-connect.png?fit=max&auto=format&n=UZTRJSf0emX1fheE&q=85&s=760dc6361383a0a01619a05ecd4c49e0" alt="Streaming 원격 연결 페이지 스크린샷" width="1920" height="1080" data-path="images/gdk/features/common/game-streaming-dev-home-streaming-enable-direct-connect.png" />

### 웹 콘텐츠 테스트 앱 설정

계속하기 전에 위의 XBOX 개발 키트 설정 단계를 완료했는지 확인하세요. XBOX 개발 키트에서 원격 기능을 활성화하지 않은 경우 개발자 도구 홈 페이지에서 원격 연결 기능이 비활성화될 수 있습니다.

XBOX 개발 키트에서 원격 플레이용으로 설정된 동일한 계정으로 로그인하려면 이 페이지 상단의 단계를 따르세요. 샌드박스 테스트 계정의 경우 샌드박스 ID를 입력해야 한다는 점을 기억하세요.

로그인 후 [Developer Tools Home](https://www.xbox.com/play/dev-tools)에서 원격 연결 옵션을 선택하여 사용자가 연결할 수 있는 디바이스 목록을 확인합니다. "Setup New XBOX" 버튼을 클릭하면 이 페이지에서 새 디바이스 추가 지침도 찾을 수 있습니다.

<img src="https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/game-streaming-web-cta-remote-connect.png?fit=max&auto=format&n=UZTRJSf0emX1fheE&q=85&s=eb132f82ab1eb407b9c0a69d6db147fd" alt="디바이스에 연결하고 새 xbox를 설정하는 옵션이 표시된 원격 연결 스크린샷" width="771" height="440" data-path="images/gdk/features/common/game-streaming-web-cta-remote-connect.png" />

<Note>XBOX 개발 키트에 연결하는 클라이언트 디바이스가 XBOX 개발 키트와 동일한 네트워크에 있는지 확인하세요. 연결은 VPN을 통해서도 작동합니다. XBOX 개발 키트로의 네트워크 트래픽은 UDP 포트 9002를 통해 흐르므로, 네트워크 구성에서 이 포트도 차단 해제되어야 합니다.</Note>

<a id="dev-settings-menu" />

## Dev 설정 메뉴

사용자 지정 오퍼링을 사용하거나 원격 XBOX 개발 키트에 연결할 때 설정 메뉴에서 액세스할 수 있는 개발자 설정 세트를 찾을 수 있습니다. 설정 메뉴는 오른쪽 상단의 사용자 프로필 사진을 클릭하고 settings를 선택하여 접근할 수 있습니다. 이 개발자 설정에는 개발자 도구 홈페이지로 돌아가고, 비공개 오퍼링을 변경하고, 스트림 구성 설정을 조정할 수 있는 기능이 포함됩니다. 재정의할 수 있는 특정 스트림 구성 설정에 대한 자세한 내용은 [스트림 구성 개요](/build/core-features/common/game-streaming/game-streaming-content-test-application-stream-config)를 참조하세요.

* [TAK 사이드로드](/build/core-features/common/game-streaming/tak-command-line-tool/game-streaming-tak-command-line) 활성화
* 사이드로드 서버 주소
* 자동 새로 고침 활성화: TAK 사이드로드에 대한 자동 새로 고침 활성화
* 마우스 상호 작용 허용: TAK로 스트리밍할 때 마우스 상호 작용 허용

이 dev 설정 메뉴는 [xbox.com/play/dev-tools/select-offering](https://www.xbox.com/play/dev-tools/select-offering) 및 [xbox.com/play/dev-tools/direct-connect](https://www.xbox.com/play/dev-tools/direct-connect) 페이지에서 항상 활성화됩니다.

<img src="https://mintcdn.com/microsoft-4404708b/nTPVBuko1tKGsd6P/images/gdk/features/common/game-streaming-web-cta-dev-mode-activation-me-settings.webp?fit=max&auto=format&n=nTPVBuko1tKGsd6P&q=85&s=6f99c1a4807303e873fdf87a5258e456" alt="설정 열기 스크린샷" width="1765" height="431" data-path="images/gdk/features/common/game-streaming-web-cta-dev-mode-activation-me-settings.webp" />

<img src="https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/game-streaming-web-cta-dev-settings.png?fit=max&auto=format&n=UZTRJSf0emX1fheE&q=85&s=fe93be3ea75e8351e87321d2cab7eb2d" alt="dev 모드 스크린샷" width="1531" height="1127" data-path="images/gdk/features/common/game-streaming-web-cta-dev-settings.png" />

<a id="dev-tools-menu" />

## Dev 도구 메뉴

사용자 지정 오퍼링 또는 XBOX 개발 키트에서 스트리밍할 때 스트림의 왼쪽 하단 모서리에서 찾을 수 있는 개발자 메뉴에 액세스할 수 있습니다. 이 메뉴를 클릭하면 [TAK CLI를 사용하여 레이아웃을 사이드로드](/build/core-features/common/game-streaming/tak-command-line-tool/game-streaming-tak-command-line)하는 경우 활성 TAK 레이아웃을 전환할 수 있습니다.

<img src="https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/game-streaming-web-cta-dev-menu.png?fit=max&auto=format&n=UZTRJSf0emX1fheE&q=85&s=da9086e49bbde7d804555be56201e771" alt="dev 메뉴 스크린샷" width="1827" height="1933" data-path="images/gdk/features/common/game-streaming-web-cta-dev-menu.png" />

## 마우스 및 키보드

마우스와 키보드는 사용자가 익숙해진 게임 플레이 경험을 열어주고, 마우스와 키보드만 지원하는 게임을 사용자가 플레이할 수 있는 기회를 제공합니다. 또한, 이를 통해 사용자는 컨트롤러가 없을 때 마우스 및 키보드가 지원되는 타이틀을 플레이할 수 있습니다. 개발자의 경우 키보드 지원을 통해 내부 디버깅 명령에 액세스할 수 있게 됩니다.

CTA가 테스트를 위해 설정되어 있는지 확인하고, 여기의 지침을 따르세요: [웹 CTA 구성](/build/core-features/common/game-streaming/game-streaming-web-content-test-application)

### 마우스 및 키보드 테스트 방법

콘텐츠 테스트 애플리케이션(CTA)이 설정되면 다음 스크린샷과 같이 계정 아이콘으로 이동하여 Developer 탭으로 이동하여 마우스 및 키보드 구현을 테스트할 수 있습니다.

<img src="https://mintcdn.com/microsoft-4404708b/nTPVBuko1tKGsd6P/images/gdk/features/common/game-streaming-cta-web-dev-homepage-mkb.webp?fit=max&auto=format&n=nTPVBuko1tKGsd6P&q=85&s=911a58d30a16013c3ba2ba1078675925" alt="웹 CTA의 홈페이지" width="2255" height="1027" data-path="images/gdk/features/common/game-streaming-cta-web-dev-homepage-mkb.webp" />

Developer 탭으로 이동한 후, "Mouse and Keyboard"를 켜서 기능을 활성화합니다.

<Note>마우스 및 키보드를 테스트하는 동안 터치 적응 섹션 아래의 "Emulate touch with mouse"는 OFF로 유지하는 것이 좋습니다. 스트리밍 중 두 가지가 모두 켜져 있으면 마우스 클릭이 터치로 해석됩니다. 그러나 F9를 탭하면 여전히 마우스 및 키보드 모드를 시작 및 종료할 수 있습니다.</Note>

<img src="https://mintcdn.com/microsoft-4404708b/UZTRJSf0emX1fheE/images/gdk/features/common/game-streaming-cta-web-dev-settings-mkb.png?fit=max&auto=format&n=UZTRJSf0emX1fheE&q=85&s=68a359583efe8d2eb130ab53540a36a3" alt="웹 CTA의 설정" width="410" height="585" data-path="images/gdk/features/common/game-streaming-cta-web-dev-settings-mkb.png" />

<Note>플레이어는 일반적으로 F9인 단축키를 사용하여 키보드 모드를 시작 및 종료할 수 있습니다. 플레이어가 이 키를 다시 매핑할 수 있지만, 가능하면 F9를 중요한 게임 기능에 사용하지 말거나 플레이어가 게임 내에서 키를 다시 매핑할 수 있도록 허용하세요.</Note>

**마우스 및 키보드 모드로 진입하려면** 스트림이 시작되면 화면을 왼쪽 클릭하거나 F9를 탭할 수 있습니다.
**마우스 및 키보드 모드를 종료하려면** F9를 탭합니다.

테스트를 완료하고 모든 사용자에게 마우스 및 키보드를 활성화할 준비가 되면 Microsoft 계정 담당자에게 문의하세요.


## Related topics

- [스트리밍 페이지 (Dev Home)](/ko/tools/tools-console/devhome/devhome-streaming.md)
- [콘텐츠 테스트 애플리케이션(CTA) 스트림 구성 개요](/ko/build/core-features/common/game-streaming/game-streaming-content-test-application-stream-config.md)
- [Android 콘텐츠 테스트 애플리케이션(CTA) 개요(사용되지 않음)](/ko/build/core-features/common/game-streaming/game-streaming-android-content-test-application.md)
- [터치 컨트롤 레이아웃 배포하기](/ko/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-touch-deploying-touch-layout.md)
- [PAGE 106 · 접근 가능한 웹 콘텐츠와 애플리케이션](/ko/build/game-principles/accessibility/page/page-106-web-content-applications.md)