태블로 도구설명(Tooltip)에 이미지 넣기
태블로 대시보드를 만들다 보면 마우스 오버 시 나타나는 도구설명 팝업 창에 가이드 도면이나 참조용 기준표 같은 단일 이미지를 띄워주고 싶을 때가 있습니다. 단순히 숫자를 나열하는 것보다 직관적인 이미지를 함께 보여주면 사용자의 데이터 이해도를 크게 높일 수 있습니다.
💡
도구설명에 이미지를 넣기 위해 보통 '모양(Shapes)' 마크나 '이미지 역할(Image Role)' 기능을 떠올리기 쉽습니다. 하지만 모양 마크를 도구설명에 삽입하면 팝업 크기에 따라 이미지 비율이 찌그러지는 현상이 발생하며, 웹 이미지를 가져오는 이미지 역할은 파일당 200KB라는 엄격한 용량 제한이 있어 고화질 이미지를 사용하기 어렵습니다.
화질 저하와 비율 왜곡 없이 도구설명에 이미지를 가장 깔끔하게 띄우려면 상단 [맵] 메뉴에 있는 '배경 이미지(Background Images)' 기능을 활용하는 것이 좋습니다.
Step-by-Step: 도구설명에 이미지 넣기
- 이 기능은 본래 지도 위에 이미지를 매핑하기 위해 만들어졌으므로 가상의 X축과 Y축이 필요합니다. 데이터 원본에 좌표 정보가 없더라도 아주 간단하게 해결할 수 있습니다. 계산된 필드를 열어
0만 입력하여 가상의 축 필드 두 개([X],[Y])를 만들어 줍니다.
- 새 워크시트를 열고 생성한 두 필드를 각각 열 선반과 행 선반에 올린 뒤, 화면에 불필요한 마커가 찍히지 않도록 마크 카드 유형을 '다각형'으로 바꿔 빈 도화지를 만듭니다.
- 이제 상단 메뉴에서 [맵] > [배경 이미지]를 클릭해 데이터 원본을 선택한 후 화면에 띄울 이미지를 추가합니다. 위치 지정 섹션에서 X 필드와 Y 필드에 방금 만든 축을 지정하고, 좌/우 및 하/상 범위를 모두 0에서 1로 고정해 줍니다. 이렇게 하면 0과 1 사이의 가상 공간에 이미지가 가득 차게 됩니다.
- (Optional) [조건] 탭에 차원 값을 지정하면, 마우스를 올리는 항목마다 다른 이미지가 뜨는 '동적 이미지'로도 활용할 수 있습니다. 다만 항목마다 이미지를 일일이 수동으로 등록해야 하므로 항목의 수가 적은 경우에만 사용하시기를 권장합니다.
- 축 머리글을 숨겨 깔끔한 이미지 시트를 완성했다면, 이제 메인 차트로 돌아갑니다. 마크 카드의 [도구설명]을 열고 상단 메뉴의 [삽입] > [워크시트]에서 방금 만든 이미지 시트를 불러옵니다.
태블로가 자동으로 생성한 삽입 코드에서 maxwidth와 maxheight 픽셀 수치를 원본 이미지 비율에 맞게 조금만 다듬어 주면, 여백 없이 선명한 고화질 이미지 팝업이 대시보드에 완성됩니다.