지난 포스트에서는 여러 차트에서 공통으로 쓰이는 설정 위주로 살펴보았는데요. 이번에는 스타일 패널을 살펴보겠습니다.
스타일 패널은 편집 모드에서 차트를 선택하면 우측에 나오는 패널 중 하나입니다. 설정 패널이 어떤 데이터를 보여줄지를 정하는 곳이라면, 스타일 패널은 그 데이터를 어떻게 꾸며서 보여줄 것인지를 정하는 곳입니다.
스타일 패널도 차트마다 세부 항목이 조금씩 다르기 때문에 이번 포스트에서도 여러 차트에서 볼 수 있는 스타일 옵션들 중 아래 기능들에 대해서 소개하겠습니다.
•
차트 제목
•
조건부 서식
•
축약 번호
•
데이터 누락
•
배경 및 테두리
1. 차트 제목
차트 상단이나 하단에 표시되는 이름이에요. 아래와 같이 표시 옵션이 꺼져 있을 때는 차트 위에 아무것도 표시되지 않습니다.
[스타일] - [차트 제목]
제목 표시 옵션을 켜면 제목 입력란이 나오며, 글꼴, 사이즈, 색상 등 텍스트 서식을 조절할 수 있죠. 제목을 입력하는 대로 차트 상단에 제목이 표시됩니다.
하단에 있는 아래 옵션들은 좌측부터 순서대로 굵게, 기울임꼴, 밑줄을 표시하는 옵션이며, 제목을 상단/하단에 표시하는 옵션과, 좌측/중앙/우측으로 정렬하는 옵션도 있습니다.
정렬 옵션을 사용하면 아래와 같이 다양한 위치에 제목을 표시할 수 있습니다. 좌측 상단부터 시계 방향 순으로 중앙, 우측 상단, 우측 하단, 좌측 하단에 제목을 표시하고 있죠.
제목 옵션을 끄고 텍스트 도구로 입력한 제목을 차트 위로 올리는 방식으로 표시할 수도 있습니다. 어떤 경우에는 제목을 텍스트로 따로 표시하는 것이 나은 경우도 있는데요. 예를 들면, 스타일의 제목 옵션은 차트와 제목 사이의 간격을 조정하는 기능은 없기 때문에 커스텀하게 제목을 표시하길 원한다면 텍스트 도구를 사용하는 것이 더 낫습니다.
2. 조건부 서식
이 기능은 설정한 조건에 따라 글꼴 색상이나 배경 색상을 자동으로 바꿔주는 기능입니다. 이 스타일 옵션은 스코어카드, 표, 피벗 차트 등 일부 차트에서 지원하는 옵션입니다.
[스타일] - [조건부 서식]
서식 추가 버튼을 클릭하면 설정 화면이 나옵니다. 여기서 [형식 유형]은 차트에 색상을 적용하는 방식을 [규칙] 또는 [색상 스케일(그라디언트)] 중에서 선택합니다. 규칙은 내가 지정한 조건에 맞는 데이터에만 색을 적용하는 방식이고 색상 스케일은 값의 크기에 따라 색이 자동으로 진하거나 옅게 표시되는 히트맵 방식입니다.
어떻게 선택하는 지에 따라 하위의 옵션들이 달라지게 되는데요. 규칙과 색상 스케일로 나누어서 살펴볼까요?
2-1. 형식 유형: 규칙을 선택했을 때
서식 규칙
형식을 지정할 요소를 정합니다. 필드를 선택하고 조건과 값을 입력하면 그 조건에 해당하는 데이터에만 서식이 적용됩니다. 필드 선택 상자 옆의 '또는'은 한 줄 안에서 조건 값을 여러 개 지정했을 때 그중 하나라도 해당하면 서식을 적용하는 방식이고, 그 아래에 있는 AND 버튼은 완전히 새로운 조건 줄을 하나 더 추가해서, 두 줄의 조건을 모두 만족할 때만 서식이 적용되도록 하는 기능입니다.
예를 들면, 아래의 서식 규칙은 판매처가 ‘쿠팡’, ‘네이버’인 모든 데이터에 서식을 적용하는 규칙입니다.
아래의 서식 규칙은 판매처가 ‘네이버’이면서 판매 수량이 0 미만인 데이터에 서식을 적용하는 규칙입니다.
이렇게 조건부 서식을 사용하면 마진이 적은 품목이나 반품이 많이 발생하는 데이터를 분간하기에 편리하다는 장점이 있습니다.
디자인
규칙과 일치하는 요소의 서식을 결정합니다. [전체 행]에 서식을 적용할 수도 있고, 특정 필드에만 적용할 수도 있습니다. 서식을 적용할 대상을 선택하고 셀 글꼴 색상과 셀 배경 색상을 지정합니다.
예를 들어, 아래와 같이 판매처가 네이버인 경우 전체 행에 색상을 입히도록 설정하면 그 다음 이미지와 같이 적용됩니다.
아래와 같이 전체 행이 아닌 특정 필드에만 적용하도록 설정할 수도 있습니다.
2-2. 형식 유형: 색상 스케일(그라디언트)를 선택했을 때
색상 스케일은 규칙처럼 조건을 하나하나 지정하는 대신, 값의 크기에 따라 색이 자동으로, 연속적으로 변하는 그라데이션을 적용하는 방식입니다. 화면 구성도 규칙일 때와는 좀 다릅니다.
서식 지정 기준
그라데이션의 기준이 될 필드를 선택합니다. 규칙과 달리 조건이나 값을 따로 입력하지 않고, 이 필드의 값 크기 자체가 색상 진하기를 결정합니다. 따라서 서식 지정 기준은 숫자 형식의 필드만 선택할 수 있습니다.
색상 및 스타일
먼저, 전체 행처럼 서식을 적용할 대상을 선택합니다. 그 옆에 있는 그라데이션 색상 바에서 지금 설정된 색상 배열을 미리 볼 수 있고, 
버튼을 누르면 색상 방향을 반전시킬 수 있습니다.
버튼을 누르면 색상 방향을 반전시킬 수 있습니다. 아래에는 그라데이션의 기준이 되는 점 1, 점 2, 점 3이 있는데, 각 점마다 값의 유형(백분율 등), 구체적인 값, 그리고 그 지점에 적용할 색상을 지정합니다.
예를 들어, 점 1을 백분율 0에 빨간색, 점 2를 백분율 50에 노란색, 점 3을 백분율 100에 초록색으로 두면, 값이 낮을수록 빨간색에 가깝고 값이 높을수록 초록색에 가까운 그라데이션이 만들어지죠.
각각의 점 옆에 있는 페인트 통을 클릭하면 색상을 변경할 수도 있습니다.
예를 들어, 아래와 같이 세팅하면 그 다음 이미지처럼 차트에 서식이 적용됩니다.
이렇게 전체 데이터의 백분율에 따라 색상 그라디언트가 적용됩니다.
이렇게 두 가지 유형의 조건부 서식을 살펴보았는데요. 규칙을 더 만들고 싶다면 [다른 규칙 추가]를 클릭하여 더 추가할 수도 있습니다.
매출 또는 정산예정금액처럼 연속적인 숫자 값을 다룰 때, 표 전체의 크기 분포를 한눈에 훑어보고 싶다면 색상 스케일이 유용해요. 특정 기준을 넘는지 아닌지를 딱 잘라 표시하고 싶다면 규칙을, 전체적인 값의 흐름을 색상 농도로 보여주고 싶다면 색상 스케일을 사용한다고 구분하면 간단하죠?
조건부 서식 기능에 대한 구글 공식 가이드는 아래 링크를 참조해주세요.
3. 축약 번호
이 기능은 차트의 핵심 숫자가 어떤 형태로 보일지 정하는 옵션입니다. 선 차트나 막대 차트에서는 [데이터 라벨 표시]라는 옵션이 켜져있을 때에만 사용할 수 있으며, 스코어카드나 표, 피벗 차트에서는 기본 옵션으로 제공됩니다. 각각의 차트마다 옵션이 노출되는 조건과 옵션의 위치가 다를 수는 있지만 옵션명은 [축약 번호]로 동일합니다.
[스타일] - [기본 측정항목]
나중에도 설명하겠지만, 선 차트와 막대 차트에 있는 [데이터 라벨 표시] 옵션은 차트에 커서를 올려두지 않아도 각각의 포인트 위에 값을 표시하는 기능입니다.
스코어 카드에 축약 번호를 적용해서 바로 확인해보겠습니다. 우측의 스코어 카드가 축약 번호를 적용한 것입니다. 좌측의 스코어 카드는 숫자가 1의 단위까지 모두 보이는 반면, 우측 스코어 카드는 억 단위로 축약해서 보여주고 있죠. 금액은 억, 만 단위로 자동 축약됩니다.
축약 번호 옵션을 켜면 자동으로 만, 억 단위로 축약되는데, 그 외의 숫자 단위로 축약하려면 계산된 필드를 사용하는 방법도 있습니다. 이 방법은 추후 계산된 필드 기능을 다룰 때에 소개하겠습니다.
[소수점 정밀도]는 소수점 이하 몇 자리까지 표시할지 지정하는 옵션입니다. 결과는 그 다음 이미지와 같습니다. 소수점 정밀도를 3으로 세팅하면 그 다음 이미지와 같이 소수점 셋째 자리까지 표시됩니다.
매출처럼 자릿수가 큰 데이터를 다룰 때, 숫자가 너무 길어 차트에서 숫자가 잘리거나 차트 밖으로 넘어간다면 축약 표시를 켜서 깔끔하게 정리할 수 있습니다. 반대로 정확한 금액을 그대로 보여줘야 하는 경우에는 옵션을 꺼두어야 합니다.
4. 데이터 누락
데이터에 빈 값이 있을 때 이를 어떻게 처리할지 정하는 옵션으로 스코어 카드, 표, 피벗 등 일부 차트에서 지원하는 기능입니다. 예를 들어 아래와 같이 대시보드에서 날짜 컨트롤이나 드롭다운 필터를 사용하다보면 특정 차트에 데이터가 존재하지 않는 경우도 발생하곤 하죠. 그런 때에 기본적으로는 ‘데이터 없음’이라는 텍스트가 나옵니다.
스타일 패널의 [데이터 누락] 옵션은 이 텍스트를 다른 방식으로 보여주도록 설정할 수 있습니다.
[스타일] - [데이터 누락]
드롭다운을 클릭하면 선택할 수 있는 옵션들이 나오는데, 총 5종류의 옵션을 선택할 수 있습니다.
각각의 옵션을 선택하면 아래와 같이 변경됩니다.
여기서 중요한 점은, 이 옵션이 적용되는 것은 어디까지나 데이터가 실제로 누락된 경우에만 해당한다는 것입니다. 실무에서 차트를 다루다보면 이 옵션을 적용할 수 있는 경우와 그렇지 않은, 비슷하지만 실제로는 다른 세 가지 상황을 마주하기도 하는데요.
DB에 실제 0 값이 입력된 경우: 이건 데이터가 없는 것이 아니라, 조회 결과 자체가 정상적으로 0인 경우에 해당합니다. 데이터 누락 옵션은 조회 결과가 아예 없을 때만 작동하기 때문에, 실제 0값에는 이 옵션이 적용되지 않고 그대로 0이 표시됩니다. 
필터에 의해 표시할 값이 사라진 경우: 이 경우가 [데이터 누락] 옵션을 적용할 수 있는 경우에 해당하기 때문에 이 옵션을 적용할 수 있습니다. 
표에서 표시할 행이 아예 없는 경우: 표는 여러 행을 나열하는 차트라서, 표에서 데이터 누락 옵션은 원래 '행은 있는데 특정 셀 값만 비어있는 경우'를 위한 서식입니다. 그런데 필터로 인해 조건에 맞는 행이 통째로 0개가 되면, 이건 셀 값이 비어있는 게 아니라 표에 보여줄 행 자체가 없는 상태가 되죠. 이때는 아래와 같이 데이터 스튜디오가 표 전체에 대해 고정된 '데이터 없음' 안내를 보여주고, 데이터 누락 옵션으로는 표기를 바꿀 수 없게 됩니다. 반면 같은 조건이라도 스코어카드처럼 행 개념이 없는 차트에서는 조회 결과가 0건이 되어도 '측정항목 값이 누락된 것'으로 처리되기 때문에, 데이터 누락 옵션이 정상적으로 작동합니다.
5. 배경 및 테두리
차트 전체를 감싸는 배경과 테두리의 모양을 정하는 옵션입니다. 이 옵션은 모든 차트에서 볼 수 있습니다.
[스타일] - [배경 및 테두리]
각 기능에 대해서 살펴볼까요?
•
배경: 배경을 클릭하면 컬러 팔레트 창이 나옵니다. 이곳에서 색상을 선택하여 차트 배경에 채울 색상을 지정합니다. 컬러 팔레트의 사용법과 부가적인 기능은 다음 포스트에서 더 소개하겠습니다.
•
불투명도: 차트의 투명도를 조절합니다. 100%면 완전히 불투명하고, 수치가 낮아질수록 뒤쪽이 비쳐 보여요. 아래는 불투명도 30%를 적용했을 때의 화면입니다.
•
테두리 색상: 차트를 감싸는 테두리 선의 색상을 지정합니다. 아래는 검은색 테두리를 적용했을 때의 화면입니다.
•
테두리 반경: 테두리 모서리를 얼마나 둥글게 만들지 설정하며, 값이 클수록 모서리가 더 둥글어집니다. 아래는 테두리 반경 ‘30’을 적용했을 때의 화면입니다.
테두리 반경: 30
•
테두리 두께: 테두리 선의 굵기를 설정하며, 아래는 테두리 두께 ‘3’을 적용했을 때의 화면입니다.
테두리 두께: 3
•
테두리 스타일: 테두리 선의 모양을 설정합니다. 아래와 같이 4종류의 스타일을 제공하며 적용했을 때의 모습은 그 아래 이미지와 같습니다.
파선, 점선, 이중 실선 순서로 아래와 같이 나타납니다.
•
테두리 그림자 추가: 이 토글을 켜면 차트 오른쪽 아래에 은은한 그림자 효과가 추가돼요. 조금 더 입체적인 느낌이 나죠?
모든 차트에 같은 배경색과 테두리 반경, 그림자를 통일해서 적용하면 완성도가 한결 높아 보이는 효과가 있습니다.
마치며
여기까지 제목, 조건부 서식, 축약 번호, 데이터 누락, 배경 및 테두리까지 다섯 가지 스타일 옵션을 살펴봤는데요. 이 옵션들은 단순히 차트를 예쁘게 꾸미는 데 그치지 않습니다.
조건부 서식 기능으로 이상치가 있는 데이터를 한 눈에 강조할 수 있고, 데이터 누락 옵션으로는 진짜 0인지 데이터가 아예 없는 건지 헷갈리지 않게 구분해서 보여줄 수 있죠. 데이터를 보다 정확하고 빠르게 전달하는 역할도 하는 셈입니다.
다음 포스트에서는 배경 항목에서 잠깐 언급했던 컬러 팔레트(커스텀·그라데이션)와, 차트 헤더 옵션과 그 기능들에 대해 이어서 다루겠습니다.
