흰 배경으로도 충분하지 않나?
태블로를 처음 배울 때, 대부분은 흰 배경 위에 차트를 얹는 방식으로 시작한다. 그게 틀렸다는 게 아니다. 데이터 시각화의 핵심은 데이터 자체이고, 화려한 껍데기가 오히려 방해가 되는 경우도 분명 있다.
하지만 여러 고객사를 거치면서 한 가지를 배웠다. 보기 좋은 음식이 먹기도 좋다. UI/UX는 단순히 예쁨의 문제가 아니다. 잘 설계된 배경 이미지는 사용자의 시선 동선을 유도하고, 각 개체의 위치를 안정적으로 잡아주며, 대시보드 전체에 맥락을 부여한다. 웹 디자이너가 레이아웃 그리드를 먼저 잡고 콘텐츠를 얹는 것처럼, 태블로도 배경 이미지를 먼저 설계하고 그 위에 시각화를 올리면 훨씬 완성도 높은 결과물이 나온다.
이번 포스트에서는 그 전 과정을 담는다.
배경 이미지를 어떻게 만들고, 어떻게 태블로에 올리고, URL 방식으로 해결하는 방법까지.
배경 이미지, 왜 넣는가
배경 이미지의 역할을 크게 세 가지로 정리할 수 있다.
1. 레이아웃 고정
태블로 대시보드는 개체를 드래그해서 배치하는 방식이다. 그런데 타일드(Tiled) 방식으로만 작업하면 레이아웃이 미묘하게 틀어지거나, 여러 개체 사이의 간격이 들쭉날쭉해지는 문제가 생긴다. 배경 이미지에 레이아웃을 미리 그려두면, 그 위에 개체를 올릴 때 눈으로 정렬을 맞출 수 있다. 픽셀 단위의 정밀도가 생긴다.
2. 브랜드 일관성
고객사 CI 색상, 로고 영역, 헤더 디자인을 배경에 포함시키면, 태블로 내에서 별도로 텍스트 개체나 이미지를 여러 개 띄울 필요가 없다. 결과적으로 대시보드 구조가 단순해지고 유지보수가 쉬워진다.
3. 시각적 위계 형성
색 대비와 영역 구분을 배경에서 처리하면, 사용자는 자연스럽게 중요한 KPI 영역으로 시선이 간다. 다만 여기서 주의할 점이 있다 — 너무 많은 색을 쓰거나 텍스처가 강한 배경은 오히려 시선을 분산시킨다. 배경은 조연이어야 한다. 차트와 숫자가 주연이다.
배경 작업 도구: Figma
온프레미스 환경에서 일한다면 포토샵, 일러스트레이터 같은 툴을 별도 설치하기 어려운 경우가 많다. 라이선스 문제도 있고, 보안 정책으로 외부 프로그램 설치가 제한되기도 한다.
그래서 보통 온프레미스 환경보다 온라인이 보장된 환경에서 배경 이미지를 작업한다. 포토샵, 일러스트에 비해 라이선스로부터 자유로운 Figma가 현실적인 대안이 된다. 웹 브라우저에서 실행되고, 무료 플랜으로도 대시보드 배경 작업에 필요한 기능은 충분히 쓸 수 있다. 실제로 나는 대부분의 배경 이미지를 Figma에서 작업한다.
레퍼런스는 주로 세 곳에서 가져온다.
- Tableau Public: 다른 사람이 만든 대시보드를 보면서 색 조합, 레이아웃 구조, 폰트 사용 방식을 참고한다.
- 고객사 홈페이지: 해당 기업의 CI 색상, 로고, 톤앤매너를 맞추기 위해 먼저 홈페이지를 분석한다.
- Pinterest: "tableau dashboard design", "dark mode dashboard", "BI dashboard background" 같은 키워드로 검색하면 수준 높은 레퍼런스를 많이 찾을 수 있다.
Figma 작업 시 캔버스 크기는 태블로 대시보드의 픽셀 크기와 정확히 맞춰야 한다. 예를 들어 1200×800 대시보드라면 Figma에서도 1200×800으로 작업한다. 나중에 이미지를 업로드했을 때 배경이 틀어지지 않는다.
팁: Figma에서 배경 작업 시 레이아웃 섹션 경계선, 헤더 영역, KPI 카드 위치를 낮은 불투명도의 사각형으로 미리 표시해두면, 태블로에서 개체를 올릴 때 정렬이 훨씬 쉬워진다.
배경 이미지를 대시보드에 올리는 방법
기본 순서
먼저 빈 대시보드 화면에서 좌측 패널 하단의 [이미지(Image)] 개체를 대시보드로 드래그한다. 그러면 이미지 삽입 다이얼로그가 뜬다.
이미지를 올리는 경로는 두 가지다:
- 로컬 파일 업로드: PC에 저장된 이미지 파일을 직접 선택
- URL 입력: 웹에 호스팅된 이미지의 주소를 입력
어느 방법을 쓰든, 반드시 확인해야 할 것이 있다. 여백(Padding) 설정이다.
여백 조정 — 이걸 모르면 배경이 안 붙는다
태블로의 기본 여백 설정이 배경 이미지 작업의 가장 큰 함정이다.
- 대시보드 바깥쪽 여백(Outer Padding): 기본값 8px
- 이미지 개체 여백(Image Padding): 기본값 4px
이 상태로 배경 이미지를 올리면 네 귀퉁이에 흰 공백이 생긴다. 배경이 대시보드 전체를 채우지 못하고 떠 있는 것처럼 보인다.
해결 방법은 간단하다. 둘 다 0으로 설정한다.
- 대시보드 메뉴 → 서식(Format) → 대시보드(Dashboard) → 바깥쪽 여백을 0으로
- 이미지 개체 선택 후 → 오른쪽 패널에서 여백을 0으로
이렇게 해야 배경 이미지가 대시보드 캔버스에 꽉 맞게 붙는다.
2편에서는 Figma에서 Export한 파일을 실제로 태블로에 올리는 두 가지 방법
— 로컬 파일 직접 업로드와 GitHub Raw URL을 활용한 방법 — 을 단계별로 정리한다.