클라이언트 보고서용 이미지를 파워포인트에 붙여 넣을 때마다 겪는 문제가 있다. 화면에서는 선명했던 차트가 슬라이드에서 확대하는 순간 계단 현상이 생기면서 뭉개진다. PNG로 내보낸 이미지는 해상도가 고정되어 있어서, 원본보다 크게 키우면 무조건 화질이 깨진다.
이 문제를 해결하는 방법 중 하나가 SVG로 내보내는 것이다. 오늘은 SVG가 정확히 무엇이고, PNG·JPG와 뭐가 다른지, 그리고 파워포인트와 피그마에서 실제로 어떻게 활용하는지 실무 기준으로 정리한다.
태블로에서 SVG로 내보내는 방법
태블로에서 뷰를 이미지로 내보낼 때 선택할 수 있는 파일 형식은 다음과 같다.
| 위치 | 메뉴 경로 | 선택 가능한 형식 |
|---|---|---|
| 워크시트 단위 | Worksheet > Export > Image |
BMP, JPEG, PNG, SVG |
| 대시보드 단위 | Dashboard > Export Image |
BMP, JPEG, PNG, SVG |
Export Image 대화상자에서 파일 형식 드롭다운을 SVG(Scalable Vector Graphics)로 바꾸기만 하면 된다. 단, 한 가지 주의할 점이 있는데 SVG로 내보내면 태블로 전용 폰트(Tableau Regular, Tableau Semibold 등)가 시스템의 유사한 폰트로 자동 대체된다. 폰트가 중요한 보고서라면 내보내기 전에 워크시트 폰트를 범용 폰트(예: Noto Sans KR, 맑은 고딕)로 바꿔두는 걸 추천한다.
참고로 이 기능 자체는 최근에 생긴 게 아니라 꽤 오래전부터 있었던 기능이다. 실무자들 사이에서도 의외로 존재 자체를 모르는 경우가 많아서, 알고 나면 바로 써먹을 수 있는 "숨은 기능"에 가깝다.
SVG는 도대체 뭘까 — PNG·JPG와 뭐가 다른가
래스터(Raster) vs 벡터(Vector)
이미지 파일은 크게 두 종류로 나뉜다.
| 구분 | 래스터 이미지 | 벡터 이미지 |
|---|---|---|
| 저장 방식 | 픽셀(점) 하나하나의 색상 정보를 격자로 저장 | 점·선·곡선의 좌표와 수식(경로, path)으로 저장 |
| 대표 포맷 | PNG, JPG, BMP, GIF | SVG, AI, EPS, PDF(내부 그래픽) |
| 확대 시 | 픽셀이 그대로 늘어나 계단 현상(앨리어싱) 발생 | 좌표를 다시 계산해서 그리므로 화질 저하 없음 |
| 파일 구조 | 이진(binary) 데이터 | XML 기반 텍스트 코드 |
| 편집 | 픽셀 단위로만 수정 가능 | 개별 도형·선·텍스트를 요소 단위로 수정 가능 |
SVG는 Scalable Vector Graphics의 약자로, 이름 그대로 "크기를 조절해도(Scalable) 품질이 유지되는 벡터(Vector) 그래픽" 포맷이다. 파일을 열어보면 실제로 <svg>, <path>, <rect>, <text> 같은 XML 태그로 이루어진 텍스트 코드라는 걸 확인할 수 있다. 원, 사각형, 선 같은 도형을 좌표와 수학적 경로로 표현하기 때문에, 이미지를 10배로 확대해도 태블로 화면에서 보던 것과 동일한 선명도를 유지한다.
반면 PNG나 JPG는 가로×세로 픽셀 수가 고정된 상태로 저장되기 때문에, 원본보다 큰 사이즈로 늘리면 픽셀이 억지로 늘어나면서 뿌옇게 보이거나 계단 현상이 생긴다.
그럼 SVG가 무조건 좋은가
꼭 그렇지는 않다.
- 파일 크기: 마크(포인트)가 많은 산점도나 복잡한 지도 시각화는 경로 데이터가 많아지기 때문에 오히려 PNG보다 SVG 파일 용량이 커질 수 있다. 단순한 막대·선 차트라면 SVG가 유리하지만, 마크 수가 수천 개를 넘어가는 시각화는 PNG가 더 가벼울 수 있다.
- 폰트 대체: 위에서 언급했듯 태블로 전용 폰트가 유사 폰트로 바뀐다.
- 커스텀 셰이프 미지원: 태블로 대시보드 안에서 커스텀 셰이프(Custom Shape)로 SVG 파일 자체를 불러오는 기능은 없다. 지금 다루는 건 "태블로 화면을 SVG로 내보내는 것"이지, "SVG를 태블로 안으로 가져오는 것"이 아니라는 점을 헷갈리면 안 된다.
- 웹 이미지 삽입(Image Role)과는 별개 기능: 대시보드 헤더 등에 URL 기반 동적 이미지를 넣는 "이미지 역할" 기능에서도 SVG 확장자가 지원되긴 하지만, 이건 오늘 다루는 "내보내기" 기능과는 별도의 기능이니 참고만 해두자.
파워포인트에서 SVG 활용하기
태블로에서 내보낸 SVG 파일을 파워포인트에 삽입하면, 단순히 "그림"으로 붙는 게 아니라 파워포인트 자체 도형으로 변환할 수 있다.
삽입 > 그림 > 이 디바이스로 SVG 파일을 삽입한다.- 삽입된 이미지를 마우스 우클릭 → 도형으로 변환(Convert to Shape) 선택.
- 이 작업을 거치면 차트를 구성하는 막대, 선, 텍스트, 범례가 개별 파워포인트 도형으로 분리된다.
- 이후에는 일반 도형 다루듯이 색상, 굵기, 위치를 개별적으로 수정할 수 있다.
이 방식이 유용한 상황은 명확하다. 클라이언트가 "이 막대 색깔만 강조색으로 바꿔달라"거나 "범례 위치만 옮겨달라"고 요청할 때, 태블로 파일을 다시 열어서 수정하고 재배포할 필요 없이 파워포인트 안에서 바로 끝낼 수 있다. 보고서 막판에 급하게 디자인만 손보는 상황에서 특히 체감된다.
단, macOS의 Keynote는 SVG의 도형 변환 기능을 지원하지 않으니 참고하자.
피그마(Figma)에서 SVG 활용하기
배경 이미지나 대시보드 디자인 작업에 Figma를 쓰는 실무자라면, SVG는 특히 잘 맞는 조합이다.
활용 시나리오: 태블로 그래프 + Figma 배경 디자인 합성
- 태블로 대시보드에서 Dashboard Shading = None으로 설정해 배경을 투명하게 만든다. (워크시트도 동일하게 Format → Shading → None)
- 이 상태로
Dashboard > Export Image에서 SVG로 내보낸다. - Figma에서 새 파일을 열고 SVG를 드래그 앤 드롭으로 가져온다.
- Figma에서 미리 만들어 둔 배경 디자인(로고, 타이틀, 장식 요소) 레이어 위에 태블로 SVG를 겹친다.
- 두 파일 모두 벡터 기반이라 픽셀 비율이 어긋나지 않고 정확히 정렬된다.
- 최종적으로 하나의 이미지로 병합(Export)하면, 태블로에서 직접 만들기 어려운 고해상도 합성 이미지가 완성된다.
이 방식의 핵심 장점은 태블로가 렌더링 한 데이터 그래픽의 선명도를 그대로 유지하면서, 디자인 자유도가 높은 Figma의 배경/장식 요소를 결합할 수 있다는 것이다. 태블로 안에서 이미지 오브젝트로 배경을 넣는 것보다 훨씬 깨끗한 결과물이 나온다.
단, 한 가지 함정이 있다. 태블로가 자체적으로 생성한 벡터 요소(막대, 선, 텍스트)는 SVG로 내보내도 고해상도를 유지하지만, 만약 대시보드 안에 이미지 오브젝트(PNG 로고 등)를 이미 넣어둔 상태에서 통째로 SVG로 내보내면 그 이미지 오브젝트 부분은 래스터 그대로 남아서 확대 시 깨진다. 그래서 배경 이미지·로고 같은 요소는 애초에 태블로 밖에서(Figma 등) 별도로 합성하는 게 화질 측면에서 유리하다.
정리 — 언제 SVG를 쓰고 언제 PNG를 쓸까
| 상황 | 추천 형식 |
|---|---|
| 파워포인트에서 색상·요소를 개별 수정해야 할 때 | SVG |
| Figma 등 벡터 툴에서 배경 디자인과 합성할 때 | SVG |
| 인쇄물·대형 배너처럼 확대 출력이 필요할 때 | SVG |
| 마크(포인트) 수가 매우 많은 산점도·지도 시각화 | PNG (파일 크기 고려) |
| 이메일 첨부, 빠른 공유용 스크린샷 | PNG |
| 태블로 전용 폰트를 그대로 유지해야 할 때 | PNG |
SVG는 "무조건 고급 포맷"이 아니라 벡터 기반이라는 특성이 필요한 상황에서 쓰는 도구로 이해하는 게 정확하다.