---
schema_version: "1"
id: 8c2e044dae61a7aba0059184ec9bc8dd3b66173099aae2cbc8ea7d033f9da15b
title: 대시보드 내장
collection: tableau
version: next
locale: ko-kr
portal_url: https://docs.salesforce.com/tableau/next/ko-kr/pro/desktop/embed_dashboard.md
canonical_url: https://help.tableau.com/v0.0/pro/desktop/ko-kr/embed_dashboard.htm
source_site: help.tableau.com
content_type: documentation
content_hash: 6cd4b652124683b4e4b864c94ebb35613347178cd9c16c3d694b82488c27b44d
description: Tableau Server 2022
---
[주요 콘텐츠로 건너뛰기](#main-content)

# 대시보드 내장

> [!TIP]
> 
> Tableau Server 2022.3 이상 및 Tableau Cloud의 내장 코드가 Embedding API v3을 사용하도록 변경되었습니다. 기기별 레이아웃 및 대시보드 크기 조정에 대한 최신 정보는 [Embedding API 도움말](https://help.tableau.com/current/api/embedding_api/en-us/index.html)에서 [내장 개체 및 구성 요소 구성(영문)](https://help.tableau.com/current/api/embedding_api/en-us/docs/embedding_api_configure.html#table-of-properties-and-values-for-embedded-objects-and-components)을 참조하십시오. 본 항목의 정보는 이전 버전의 Embedding(Tableau JavaScript API v1 및 v2 사용)에 대한 것입니다.

이전 버전의 Embedding을 사용하여 대시보드 내장

자신이 소유한 웹 사이트나 Wiki 페이지에 Tableau 대시보드를 내장할 수 있으며 iframe 크기를 기준으로 다양한 레이아웃을 사용하여 대시보드를 표시할 수 있습니다.

- 사용하는 기기에 관계없이 사용자에게 올바른 레이아웃이 자동으로 나타나게 하려면 Tableau Desktop에서 대시보드에 대해 기기별 레이아웃을 만듭니다. 그러면 iframe의 너비와 높이에 대해 정확한 픽셀 값 대신 100%를 사용하는 경우 Tableau Server 및 Tableau Cloud에서 iframe 크기에 기반하여 올바른 레이아웃이 자동으로 표시됩니다(아래 참조).
- iframe 크기에 관계없이 항상 특정 레이아웃이 나타나게 하려면 내장 코드에서 `device` 매개 변수를 사용합니다.

다음 예제의 내장 코드는 너비가 800픽셀이고 높이가 600픽셀인 대시보드를 표시합니다. 정확한 너비 및 높이 값은 뷰 또는 대시보드 상단의 공유 단추를 클릭할 때 표시되는 기본 내장 코드에 포함되어 있습니다.

<script type='text/javascript' src='http://mysite.myserver.com/javascripts/api/viz\_v1.js'></script>
  <div class='tableauPlaceholder' **style='width: 800px; height: 600px;'** >
  <object class='tableauViz' width='**800**' height='**600**' style='display:none;'>
  <param name='host\_url' value='http://mysite.myserver.com' />
  <param name='site\_root' value='' />
  <param name='name' value='ProfitAnalysis/Sales\_Dashboard' />		
  <param name='tabs' value='yes' />
  <param name='toolbar' value='yes' />
  <param name='filter' value=':original\_view=yes' /></object></div>

대시보드에서 기기별 레이아웃을 사용하는 이 예에서는 div 클래스의 style 속성이 제거되었으며 width 및 height에 대한 개체 클래스 값이 100%로 대체되었습니다. 대부분의 경우 올바른 레이아웃이 표시되며, 이는 너비와 높이가 CSS의 다른 곳에서도 제어되지 않는 경우입니다.

<script type='text/javascript' src='http://mysite.myserver.com/javascripts/api/viz\_v1.js'></script>
  <div class='tableauPlaceholder' >
  <object class='tableauViz' width='**100%**' height='**100%**' style='display:none;'>
  <param name='host\_url' value='http://mysite.myserver.com' />
  <param name='site\_root' value='' />
  <param name='name' value='ProfitAnalysis/Sales\_Dashboard' />		
  <param name='tabs' value='yes' />
  <param name='toolbar' value='yes' />
  <param name='filter' value=':original\_view=yes' /></object></div>

올바른 레이아웃이 표시되지 않는 경우 내장에 사용 중인 HTML 페이지에 있는 `<!DOCTYPE html>` 태그로 인해 페이지 본문의 항목 크기를 100%로 조정할 수 없기 때문일 수 있습니다([스택 오버플로 세부 정보](https://stackoverflow.com/questions/1966300/height-100-is-not-working-in-html-when-using-doctype-how-i-can-fix-this) 참조). 이 경우 HTML 페이지 본문에 다음 줄을 추가하면 문제를 해결할 수 있습니다.

<style>
  html, body { height: 100% }
</style>

다음 예제에서는 내장 대시보드에 기기별 레이아웃이 있다고 가정합니다. `device` 매개 변수는 `phone`으로 설정되어 있습니다. 이것은 어떤 기기에 대시보드가 표시되더라도 전화용으로 생성된 레이아웃이 표시되는 레이아웃이 된다는 의미입니다.

<script type='text/javascript' src='http://mysite.myserver.com/javascripts/api/viz\_v1.js'></script>
  <div class='tableauPlaceholder'>
  <object class='tableauViz' width='100%' height='100%' style='display:none;'>
  <param name='host\_url' value='http://mysite.myserver.com' />
  <param name='site\_root' value='' />
  <param name='name' value='ProfitAnalysis/Sales\_Dashboard' />
  <param name='device' value='**phone**' />			
  <param name='tabs' value='yes' />
  <param name='toolbar' value='yes' />
  <param name='filter' value=':original\_view=yes' /></object></div>

## iframe 크기 및 기기 레이아웃

기기에 표시되는 대시보드 레이아웃은 Tableau 뷰가 나타나는 iframe의 가장 작은 크기(높이 또는 너비)에 기반합니다. 다른 유형의 기기에 데스크톱, 태블릿 또는 스마트폰 레이아웃이 나타날 수 있습니다. 예를 들어 디스플레이 또는 브라우저 창이 작은 경우 데스크톱 컴퓨터에서 태블릿 레이아웃이 나타날 수 있습니다.

<table style="width: 100%;"><colgroup><col><col></colgroup><tbody><tr><th style="text-align: left;">가장 작은 iframe 크기...</th><th style="text-align: left;">나타나는 기기 레이아웃...</th></tr><tr><td>500픽셀 이하</td><td>전화</td></tr><tr><td>501~800픽셀 사이</td><td>태블릿</td></tr><tr><td>800픽셀보다 큼</td><td>데스크톱</td></tr></tbody></table>

기기별 레이아웃을 사용하는 대시보드를 만드는 방법에 대한 자세한 내용은 [서로 다른 기기 유형에 대한 대시보드 레이아웃 만들기](https://help.tableau.com/v0.0/pro/desktop/ko-kr/dashboards_dsd_create.htm)를 참조하십시오.