> ## 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.

# 터치 적응 레이아웃 미리 보기

> 터치 적응 레이아웃 미리 보기

이 문서에서는 TAK 편집기를 사용하여 터치 적응 레이아웃을 미리 보는 방법과 미리 보기를 사용자 지정하는 데 사용할 수 있는 다양한 옵션에 대한 개요를 제공합니다.

## 사전 요구 사항

* TAK 편집기가 [설치](/build/core-features/common/game-streaming/tak-editor/game-streaming-tak-editor)되고 [설정](/build/core-features/common/game-streaming/tak-editor/game-streaming-tak-editor-setup)되어 있어야 합니다.
* 열려 있는 워크스페이스 폴더(들)에 [레이아웃](/build/core-features/common/game-streaming/tak-editor/game-streaming-tak-editor-create-bundle#create-a-new-layout)이 있는 적어도 하나의 [번들](/build/core-features/common/game-streaming/tak-editor/game-streaming-tak-editor-create-bundle#create-a-new-bundle)이 존재해야 합니다.

## 레이아웃 미리 보기

레이아웃 미리 보기는 [VS Code 탐색기](https://code.visualstudio.com/docs/getstarted/userinterface#_explorer)를 통해 편집기에서 레이아웃 파일을 여는 것만큼 간단합니다. 번들의 `layouts` 디렉터리 내에 있는 레이아웃 파일을 클릭하기만 하면 레이아웃의 JSON 내용이 한 탭에 표시되고, 레이아웃의 실시간 미리 보기가 옆의 탭에 자동으로 나타납니다.

<Info>레이아웃 파일에 **오류**가 있는 경우 [VS Code 문제 패널](https://code.visualstudio.com/docs/editor/editingevolved#_errors-warnings)에 표시됩니다. 오류가 해결될 때까지 미리 보기는 업데이트되지 않습니다. 이는 [상태, 오류 및 경고](#status-errors-and-warnings) 섹션에서 자세히 다룹니다.</Info>

미리 보기는 대화형이며, 이는 마우스(또는 터치 지원 디바이스를 사용하는 경우 터치 입력)를 사용하여 터치 컨트롤과 상호 작용할 수 있음을 의미합니다. 미리 보기는 실제 게임 스트림에서 렌더링되는 것처럼 입력에 응답합니다.

레이아웃 JSON 파일에 대한 변경 사항은 파일이 저장되면 미리 보기에 반영됩니다. 이를 통해 빠르고 반복적인 디자인 프로세스가 가능하며, 레이아웃을 변경하고 결과를 즉시 확인할 수 있습니다.

<img src="https://mintcdn.com/microsoft-4404708b/CwRBzaXvHw9zaPoe/images/gdk/features/common/tak-editor-layout-preview.png?fit=max&auto=format&n=CwRBzaXvHw9zaPoe&q=85&s=82bf7f431dfcc78bc2025f48f452d390" alt="TAK 편집기 레이아웃 미리 보기의 스크린샷" width="1380" height="901" data-path="images/gdk/features/common/tak-editor-layout-preview.png" />

미리 보기 탭이 닫힌 경우 다음 두 가지 방법 중 하나로 다시 열 수 있습니다.

1. 레이아웃 파일의 오른쪽 상단에 있는 "Open Preview" 버튼을 클릭합니다.

   <img src="https://mintcdn.com/microsoft-4404708b/CwRBzaXvHw9zaPoe/images/gdk/features/common/tak-editor-open-preview-button.png?fit=max&auto=format&n=CwRBzaXvHw9zaPoe&q=85&s=ad412fcbde407bcd41a74b1b5dd9dacb" alt="레이아웃 파일의 Open Preview 버튼 스크린샷" width="249" height="101" data-path="images/gdk/features/common/tak-editor-open-preview-button.png" />
2. 명령 팔레트를 통해 "Touch Adaptation Kit: Open preview to the side" 명령을 실행합니다.

   <img src="https://mintcdn.com/microsoft-4404708b/CwRBzaXvHw9zaPoe/images/gdk/features/common/tak-editor-open-preview-command.png?fit=max&auto=format&n=CwRBzaXvHw9zaPoe&q=85&s=824a54945397598058a9cee1ab83f0e0" alt="열기 미리 보기 명령이 선택된 명령 팔레트의 스크린샷" width="837" height="157" data-path="images/gdk/features/common/tak-editor-open-preview-command.png" />

명령과 버튼 모두 (1) 레이아웃 파일이 열려 있고, (2) 미리 보기가 아직 열려 있지 않을 때만 사용할 수 있다는 점에 유의하세요.

## 상태, 오류 및 경고

### 검증 상태

번들 내의 레이아웃, 자산 및 기타 파일에 수정이 이루어짐에 따라, 확장은 모든 번들이 준수해야 하는 미리 정의된 규칙 세트에 대해 번들의 유효성을 지속적으로 검증합니다. 이는 백그라운드에서 수행되며 번들 내에 중첩된 파일이 저장되거나 어떤 방식으로든 변경(예: 이름 변경)될 때마다 다시 평가됩니다.

이 검증의 상태는 창의 오른쪽 하단에 있는 상태 표시줄 항목을 통해 보고됩니다.

<img src="https://mintcdn.com/microsoft-4404708b/CwRBzaXvHw9zaPoe/images/gdk/features/common/tak-editor-verification-status-bar-item.png?fit=max&auto=format&n=CwRBzaXvHw9zaPoe&q=85&s=5a912a5bf0e751188fc613b39b8d4229" alt="OK 상태를 나타내는 검증 상태 표시줄 항목의 스크린샷" width="549" height="169" data-path="images/gdk/features/common/tak-editor-verification-status-bar-item.png" />

이 상태 표시줄 항목은 편집기에서 적어도 하나의 레이아웃 파일이 열려 있을 때만 표시됩니다. 활성 번들의 이름과 번들에서 발견된 문제 수(오류 및 경고)를 표시합니다. 상태 표시줄 항목을 클릭하면 번들에서 발견된 모든 문제 목록이 있는 [VS Code 문제 패널](https://code.visualstudio.com/docs/editor/editingevolved#_errors-warnings)이 열립니다.

### 동기화 상태

미리 보기 패널은 TAK CLI에 대한 활성 번들 사이드로드 연결을 갖고 있습니다. 이것이 어떻게 작동하는지에 대해 자세한 내용은 [TAK CLI 문서](/build/core-features/common/game-streaming/tak-command-line-tool/game-streaming-tak-command-line-serve-command)에서 읽을 수 있습니다.

이 연결의 상태는 검증 상태 표시줄 항목 옆에 있는 창의 오른쪽 하단에 있는 상태 표시줄 항목을 통해 보고됩니다. 이 상태는 미리 보기 패널이 열려 있을 때만 표시됩니다.

<img src="https://mintcdn.com/microsoft-4404708b/CwRBzaXvHw9zaPoe/images/gdk/features/common/tak-editor-sync-status-bar-item-ok.png?fit=max&auto=format&n=CwRBzaXvHw9zaPoe&q=85&s=7cffca199222d55bce8955221b158812" alt="OK 상태를 나타내는 동기화 상태 표시줄 항목의 스크린샷" width="736" height="301" data-path="images/gdk/features/common/tak-editor-sync-status-bar-item-ok.png" />

위의 스크린샷은 연결이 활성 상태이고 미리 보기가 동기화되었을 때의 상태 표시줄 항목을 보여줍니다. 이는 번들에 오류가 없는 경우입니다(경고는 허용되며 상태를 "동기화됨"으로 유지합니다). 오류가 있는 경우 상태는 "Out of sync"로 변경됩니다.

이 상태 표시줄 항목 위로 마우스를 가져가면 TAK CLI가 호스팅하는 사이드로드 서버에 대한 세부 정보가 있는 툴팁이 나타납니다. 이 주소는 [콘텐츠 테스트 앱](/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-touch-deploying-touch-layout)과 같은 다른 게임 스트리밍 클라이언트를 미리 보기에 연결하는 데 사용할 수 있습니다.

### 오류 및 경고

[VS Code 문제 패널](https://code.visualstudio.com/docs/editor/editingevolved#_errors-warnings)은 번들에서 발견된 모든 문제 목록을 표시합니다. 여기에는 검증 프로세스 중에 발견된 모든 문제가 포함됩니다.

문제가 있는 경우 검증 또는 동기화 상태 표시줄 항목을 클릭하면 문제 패널이 열리고 문제 목록이 표시됩니다. 각 문제에는 설명과 문제가 발견된 번들 내의 위치가 있습니다.

예를 들어, 다음 스크린샷에서는 `platformer-advanced.json` 레이아웃 파일이 번들에 존재하지 않는 자산(`run.png`)을 참조하는 오류가 번들에 하나 있습니다.

<img src="https://mintcdn.com/microsoft-4404708b/CwRBzaXvHw9zaPoe/images/gdk/features/common/tak-editor-preview-errors-warnings.png?fit=max&auto=format&n=CwRBzaXvHw9zaPoe&q=85&s=129c8ee737439aac6211f3d8a564ffe9" alt="번들에 오류가 있는 문제 패널의 스크린샷" width="1273" height="642" data-path="images/gdk/features/common/tak-editor-preview-errors-warnings.png" />

번들에 존재하는 자산으로 참조를 변경하거나 번들에 자산을 추가할 때까지 미리 보기의 상태는 "Out of sync"입니다.

## 다음 단계

> \[!div class="nextstepaction"]
> [미리 보기 사용자 지정](/build/core-features/common/game-streaming/tak-editor/game-streaming-tak-editor-customize-preview)


## Related topics

- [터치 레이아웃 게시](/ko/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-touch-publishing-layouts.md)
- [터치 컨트롤 레이아웃 구축](/ko/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-touch-building-touch-layout.md)
- [터치 번들 레이아웃 시작하기](/ko/build/core-features/common/game-streaming/building-touch-layouts/samples/game-streaming-touch-getting-started-with-sample-layouts.md)
- [터치 컨트롤 레이아웃 배포하기](/ko/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-touch-deploying-touch-layout.md)
- [게임 상태에 따라 터치 컨트롤 레이아웃 변경](/ko/build/core-features/common/game-streaming/building-touch-layouts/game-streaming-touch-changing-layouts-game-state.md)