태블로 대시보드, 배경 이미지로 완성도를 높이는 법 2편

1편에서 이어서

1편에서는 배경 이미지를 왜 쓰는지, Figma로 어떻게 준비하는지, 그리고 태블로에서 여백을 0으로 맞춰야 배경이 제대로 붙는다는 것까지 다뤘다.

이번 2편에서는 그 배경 이미지를 실제로 태블로 대시보드에 올리는 두 가지 방법을 정리한다. 방법에 따라 파일 저장 방식이 달라지고, 서버나 클라우드 배포 시 이미지가 사라지는 문제가 생길 수도 있다. 그 차이를 명확히 짚어둔다.

방법 1: Figma 파일 다운로드 후 직접 업로드

가장 직관적인 방법이다.

Figma에서 배경 이미지 작업 완료 후 Export 실행
파일 형식은 PNG 권장 (JPG는 압축 아티팩트가 생길 수 있다)
해상도는 @1x — 태블로에서 픽셀 매핑이 1:1로 들어가야 크기가 맞는다
다운로드한 PNG 파일을 태블로 이미지 개체에서 업로드

이 방법의 핵심 주의사항: 반드시 .twbx로 저장

로컬 이미지를 포함한 파일을 .twb 형식으로 저장하면, 이미지 파일은 태블로 파일 내부에 포함되지 않는다. 단순히 파일 경로(path)만 참조한다. 즉, 해당 파일을 다른 PC로 옮기거나, 이미지 파일 위치가 바뀌면 배경이 사라진다.

.twbx는 태블로 패키지 워크북 포맷으로, 이미지·데이터 추출 파일 등 외부 리소스를 ZIP으로 묶어서 함께 저장한다. 배경 이미지가 있는 파일은 가급적이면 .twbx로 저장해야 한다.

파일 형식 이미지 포함 여부 공유 시 이미지 유지

.twb	❌ 경로 참조만	❌ 이미지 사라짐
.twbx	✅ 내부 패키징	✅ 이미지 유지

방법 2: GitHub에 이미지 올리고 Raw URL로 사용

이미지를 GitHub 저장소에 올리고, 그 Raw URL을 태블로에 넣으면 .twb 파일이어도 이미지가 항상 정상적으로 불러와진다. 파일 경로에 종속되지 않는다.

GitHub에 이미지 호스팅하는 방법 (단계별)

Step 1. GitHub 저장소 준비

GitHub 계정이 있다면 이미지 전용 저장소를 하나 만든다. 예: tableau-assets 혹은 dashboard-resources
저장소는 Public으로 설정해야 태블로에서 인증 없이 이미지를 불러올 수 있다.

깃허브에서 New repository 를 클릭, 반드시 저장소는 Public 으로 설정

Step 2. 이미지 파일 업로드

저장소 페이지에서 Add file → Upload files를 클릭하고 Figma에서 Export한 PNG 파일을 올린다.

처음 생성한 화면이라면 아직 저장소가 비어 있는 상태라서 "Add file" 버튼이 안 보인다. 현재 화면에서 Quick setup 박스 안을 보면 uploading an existing file 파란색 링크를 클릭한다.

클릭하면 아래와 같은 화면으로 이동한다. PNG 파일을 드래그하거나 choose your files을 클릭해서 파일을 업로드 한 뒤,

Commit changes 녹색 버튼을 클릭해준다. 그럼 업로드 완료.

이렇게 폴더 구조로 정리하는 것을 권장한다.

tableau-assets/
  └── backgrounds/
        ├── sales_dashboard_bg.png
        ├── hr_dashboard_bg.png
        └── finance_dashboard_bg.png

Step 3. Raw URL 추출

파일을 클릭하면 GitHub 미리보기 페이지가 열린다. 여기서 Raw 버튼을 클릭하면 이미지 파일만 단독으로 열리는 URL이 나온다.

URL 형식:

https://raw.githubusercontent.com/[사용자명]/[저장소명]/[브랜치명]/[파일경로]

예시:

https://raw.githubusercontent.com/kangyeonuk/tableau-assets/main/backgrounds/sales_dashboard_bg.png

이 URL을 복사한다.

Step 4. 태블로에서 URL 입력

태블로 대시보드에서 이미지 개체를 드래그한 후, URL 입력 필드에 위에서 복사한 Raw URL을 붙여 넣는다.

이 방법의 장점

.twb 파일로도 이미지가 유지된다 — URL 방식이므로 파일 경로 의존성 없음
Tableau Server / Tableau Cloud 배포 시에도 작동 — 온라인 환경에서 이미지가 깨지지 않는다
이미지 버전 관리 — GitHub에서 파일을 교체하면 대시보드 이미지도 자동으로 업데이트된다
협업 용이 — 팀원과 같은 저장소를 공유하면 배경 이미지 자산을 공동 관리할 수 있다

주의사항

저장소가 Private이면 태블로에서 이미지를 불러오지 못한다 (인증이 필요하기 때문)
사내 네트워크에서 GitHub 외부 접근이 차단된 경우, 내부 서버나 SharePoint에 이미지를 호스팅하는 방식을 검토해야 한다
GitHub Raw URL은 CDN을 거치지 않기 때문에, 대규모 환경(동시 접속자 수백 명)에서는 GitHub Pages나 별도 이미지 CDN을 고려할 수 있다

배경 이미지 설계 원칙 — 실무에서 배운 것들

마지막으로 배경 이미지 자체를 어떻게 설계할지에 대한 실무 원칙을 정리한다.

색은 2~3가지로 제한한다
고객사 CI에서 주 색상 1개, 보조 색상 1~2개를 뽑아 사용한다. 그 이상은 시선이 분산된다. 배경의 색이 많을수록 데이터가 묻힌다.

영역 구분은 명도 차이로
헤더 영역, KPI 카드 영역, 차트 영역을 색이 아닌 **명도(Lightness)**의 차이로 구분하면 훨씬 깔끔하다. 예: 전체 배경 #1A2332, 카드 영역 #243447. 같은 계열이지만 구분이 된다.

텍스트가 올라갈 자리는 단색으로
배경에 패턴이나 그라데이션이 있으면 그 위에 태블로 텍스트 개체가 올라갈 때 가독성이 떨어진다. 텍스트가 올라갈 구역은 단색 블록으로 처리한다.

Figma에서 레이아웃 가이드를 함께 만든다
실제 Export할 배경 이미지 레이어와 별도로, 개체 위치 가이드 레이어를 Figma에서 만들어두면 태블로에서 개체를 올릴 때 기준이 생긴다. 가이드 레이어는 Export 시 숨긴다.

정리

항목 내용

배경 작업 도구	Figma (웹 기반, 데스크탑 설치 버전도 있음.)
레퍼런스	Tableau Public, 고객사 홈페이지, Pinterest
Export 형식	PNG, @1x 해상도
업로드 방법 1	로컬 파일 직접 업로드 → 반드시 .twbx로 저장
업로드 방법 2	GitHub Raw URL → .twb로도 이미지 유지 가능
여백 설정	대시보드 바깥쪽 여백 0, 이미지 개체 여백 0
배경 색 수	2~3가지로 제한, 텍스트 영역은 단색 처리

데이터가 정확해야 하는 건 기본이다.

하지만 그 데이터를 보는 사람의 경험을 설계하는 것도 BI 엔지니어의 역할이다.

배경 이미지 하나로 대시보드의 완성도가 달라진다.

Insight Data Lab

태블로 대시보드, 배경 이미지로 완성도를 높이는 법 2편 — Figma부터 GitHub 호스팅까지