> ## Content Index
> Fetch the complete content index at: https://kr.vizney.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# 태블로 도구설명(Tooltip)에 이미지 넣기
- URL: https://kr.vizney.com/tableau-insert-image-in-tooltip/
- Published: 2026-07-07T11:07:55.000Z
- Updated: 2026-07-07T11:08:49.000Z
- Author: 황예환
- Tags: Tips & Tricks

태블로 대시보드를 만들다 보면 마우스 오버 시 나타나는 도구설명 팝업 창에 가이드 도면이나 참조용 기준표 같은 단일 이미지를 띄워주고 싶을 때가 있습니다. 단순히 숫자를 나열하는 것보다 직관적인 이미지를 함께 보여주면 사용자의 데이터 이해도를 크게 높일 수 있습니다.

💡

도구설명에 이미지를 넣기 위해 보통 '모양(Shapes)' 마크나 '이미지 역할(Image Role)' 기능을 떠올리기 쉽습니다. 하지만 모양 마크를 도구설명에 삽입하면 팝업 크기에 따라 이미지 비율이 찌그러지는 현상이 발생하며, 웹 이미지를 가져오는 이미지 역할은 파일당 200KB라는 엄격한 용량 제한이 있어 고화질 이미지를 사용하기 어렵습니다.

화질 저하와 비율 왜곡 없이 도구설명에 이미지를 가장 깔끔하게 띄우려면 상단 **\[맵\]** 메뉴에 있는 **'배경 이미지(Background Images)'** 기능을 활용하는 것이 좋습니다.

---

### Step-by-Step: 도구설명에 이미지 넣기

1. 이 기능은 본래 지도 위에 이미지를 매핑하기 위해 만들어졌으므로 가상의 X축과 Y축이 필요합니다. 데이터 원본에 좌표 정보가 없더라도 아주 간단하게 해결할 수 있습니다. 계산된 필드를 열어 `0`만 입력하여 가상의 축 필드 두 개(`[X]`, `[Y]`)를 만들어 줍니다.

![](https://storage.ghost.io/c/71/f6/71f6ee37-5711-4588-b703-c29372b31c0a/content/images/2026/07/X.png)

1. 새 워크시트를 열고 생성한 두 필드를 각각 열 선반과 행 선반에 올린 뒤, 화면에 불필요한 마커가 찍히지 않도록 마크 카드 유형을 '다각형'으로 바꿔 빈 도화지를 만듭니다.
2. 이제 상단 메뉴에서 \[맵\] > \[배경 이미지\]를 클릭해 데이터 원본을 선택한 후 화면에 띄울 이미지를 추가합니다. 위치 지정 섹션에서 X 필드와 Y 필드에 방금 만든 축을 지정하고, 좌/우 및 하/상 범위를 모두 **0에서 1로 고정**해 줍니다. 이렇게 하면 0과 1 사이의 가상 공간에 이미지가 가득 차게 됩니다.

![](https://storage.ghost.io/c/71/f6/71f6ee37-5711-4588-b703-c29372b31c0a/content/images/2026/07/Edit-Background-Image_Image.png)

1. (Optional) \[조건\] 탭에 차원 값을 지정하면, 마우스를 올리는 항목마다 다른 이미지가 뜨는 '동적 이미지'로도 활용할 수 있습니다. 다만 항목마다 이미지를 일일이 수동으로 등록해야 하므로 항목의 수가 적은 경우에만 사용하시기를 권장합니다.

![](https://storage.ghost.io/c/71/f6/71f6ee37-5711-4588-b703-c29372b31c0a/content/images/2026/07/Edit-Background-Image_Options.png)

1. 축 머리글을 숨겨 깔끔한 이미지 시트를 완성했다면, 이제 메인 차트로 돌아갑니다. 마크 카드의 \[도구설명\]을 열고 상단 메뉴의 \[삽입\] > \[워크시트\]에서 방금 만든 이미지 시트를 불러옵니다.

![](https://storage.ghost.io/c/71/f6/71f6ee37-5711-4588-b703-c29372b31c0a/content/images/2026/07/image.png)

태블로가 자동으로 생성한 삽입 코드에서 `maxwidth`와 `maxheight` 픽셀 수치를 원본 이미지 비율에 맞게 조금만 다듬어 주면, 여백 없이 선명한 고화질 이미지 팝업이 대시보드에 완성됩니다.