YoY(Year-over-Year) 지표를 보여주는 차트를 생성하고, 선택 연도와 비교 연도의 데이터를 보여주는 2가지 방법과 버튼으로 측정항목을 변경하는 방법들을 살펴보았습니다.
우리는 대시보드를 볼 때에 데이터를 빠르게 이해하고 인사이트를 얻는 것을 목표로 합니다. 시선을 효율적으로 사용할 수 있어야 하지요. 그렇게 하려면 우리의 시선이 논리적인 흐름을 자연스럽게 따라가도록 차트들을 구성해야 합니다. 지난 번에 제작했던 대시보드를 예시로 들어볼까요?
좌측 상단에 있는 연도 필터에서 ‘2025년’을, 측정항목 필터에서 ‘수량’을 선택하였습니다. 이제 대시보드는 2025년의 수량 데이터를 보여주고 있습니다.
하지만 각각의 차트에는 선택된 연도에 관한 표시나 측정항목에 관한 표시를 찾아볼 수 없습니다. 몇 년도를 선택했는지 확인하려면 시선을 다시 상단의 필터로 옮겨야 하고, 어려운 계산은 아니지만 전년도가 몇 년도인지 선택된 연도를 기준으로 암산을 해야 합니다. 사소한 것일 수 있지만 적절한 곳에 측정항목을 표시할 수 있다면 집중할 곳을 보다 명확히 제공할 수 있을 것입니다.
이제 몇 가지 요소를 추가한 다음의 예시를 살펴보겠습니다. 아래 이미지에서 빨간 박스로 표시한 부분에 유의해보겠습니다.
측정항목 표시(시계열 차트): 측정항목 ‘매출’과 ‘수량’ 중 지금 선택된 값을 표시합니다.
커스텀 헤더(표 차트): 현재 선택된 연도와 측정항목을 보여주고, 측정항목에 따라 증감된 값을 ‘증감량’ 또는 ‘증감액’으로 표시합니다.
조건부 서식(표 차트): 증감률의 값이 양수일 때 붉은 색, 음수일 때 푸른 색으로 표시합니다.
이렇게 몇 가지 요소를 추가하면 시선이 분산되지 않고 데이터에 집중하는데 도움이 됩니다. 오늘은 이와 같은 대시보드의 가독성을 높여주는 몇 가지 요소들을 추가하는 방법에 대해서 소개하겠습니다. 오늘 살펴볼 내용 중 ‘조건부 서식’을 제외한 요소들은 루커 스튜디오의 공식 기능을 응용한 일종의 트릭(Trick)을 사용합니다.
시계열 차트에 선택한 매개변수가 ‘매출’인지 ‘수량’인지 보여주기 위해 차트의 측정 기준을 ‘측정항목’ (매개변수) 필드로 바꿔보겠습니다.
‘측정항목‘(매개변수) 필드를 측정기준에 삽입하였습니다. 차트에 ‘매출’과 ‘수량’ 중에 ‘수량’만 나오는 이유는 상단의 측정항목 필터에 ‘수량’이 선택되어 있기 때문입니다.
측정항목 = 수량일 때
측정항목 필터를 ‘매출’로 설정하면 표의 측정항목 역시 ‘매출’로 바뀝니다.
측정항목 = 매출일 때
이제 아래에 빨간 박스에 표시한 측정항목(매개변수 값)만 제외하고 표에 보이는 모든 것들이 보이지 않도록 삭제해보겠습니다.
2.1 측정항목 필드 삭제
아래 빨간 박스 안의 X표시를 클릭하여 항목을 제거합니다.
X표시를 클릭하면 다음과 같이 측정항목(매개변수) 필드의 값만 보여주게 됩니다.
2.2 페이지 번호 삭제
이제 페이지 번호를 삭제해보겠습니다. 아래 이미지 안의 빨간 박스 안에 해당하는 부분입니다.
차트의 설정 창에서 아래로 스크롤하면 ‘행 수’ 라는 탭이 나옵니다. 여기서 ‘상위 행만 표시’로 설정하면 하단의 페이지 번호가 사라집니다.
이 기능은 표 차트에서 한번에 표시할 최대 행 개수를 정하는 역할을 합니다. ‘페이지로 나누기’를 선택하면 설정 값을 초과하는 데이터는 다음 페이지에 표시합니다. 따라서 ‘페이지로 나누기’로 설정하면 하단에 페이지 번호가 나오지요. 반면에 아래 이미지처럼 ‘상위 행만 표시’ 로 설정하면 하위의 값들은 표시가 되지 않고 페이지 번호도 나오지 않습니다.
‘상위 행만 표시’ 클릭
2.3 헤더 삭제
다음은 차트의 헤더를 삭제하겠습니다. 아래 이미지의 빨간 박스에 해당하는 부분으로 필드의 이름이 무엇인지 표시하는 부분입니다.
차트의 헤더는 스타일 탭의 ‘표 헤더’ 옵션의 ‘헤더 보기’를 해제하면 없어집니다.
‘표 추가’ → ‘헤더 보기’ 체크 해제
2.4 행 번호 삭제
다음은 행 번호입니다. 행 번호는 아래 이미지 안의 빨간 박스에 해당하는 부분으로, 각 행에 고유한 순번을 부여해서 식별성을 높이는 역할을 합니다. 하지만 이번 포스트에서는 삭제해야 하는 요소이지요.
행 번호는 스타일 탭의 ‘표 본문’ 옵션에서 ‘행 번호’를 해제하면 사라집니다.
‘표 본문’ → ‘행 번호’ 체크 해제
차트의 구성 요소들이 깔끔하게 사라졌지요? 이제 배경 색상과 폰트의 색상, 그리드 등 스타일 설정이 남았습니다.
2.5 스타일 설정
스타일 탭에는 ‘표 색상’이라는 옵션이 있습니다. 여기서 각 행을 구분시켜주는 테두리의 색상을 설정하거나, 홀수 행 또는 짝수행에 따라 별도의 서식을 지정할 수 있습니다. 행을 구분시켜주는 셀 테두리가 옅은 회색으로 표시되고 있기 때문에 더 깔끔하게 이 부분을 없애보겠습니다.
‘표 색상’ 옵션에서 ‘셀 테두리 색상’을 클릭합니다.
‘표 색상’ → ‘셀 테두리 색상’ 클릭
‘셀 테두리 색상’을 클릭하면 색상팔레트가 나오는데, 여기서 ‘투명’을 선택합니다.
‘투명’ 클릭
다음 이미지와 같이 표에 그리드가 투명하게 지정되어 보이지 않습니다.
다음으로 스타일 탭에서 ‘표 라벨’ 옵션을 설정하겠습니다. ‘표 라벨’ 옵션에서는 차트에 나오는 폰트와 폰트의 색상, 크기를 설정할 수 있습니다. 차트에 표시되는 라벨이기 때문에 색상이 도드라지지 않도록 옅은 회색으로, 폰트 사이즈는 40px로 설정하겠습니다.
‘표 라벨’ 에서 폰트, 폰트 사이즈와 컬러를 설정하였습니다.
다음은 배경 색상 지정입니다. ‘배경 및 테두리’ 옵션에서 페인트통 아이콘을 클릭하면 색상 팔레트가 나옵니다. 여기서도 ‘투명’으로 지정합니다.
‘배경 및 테두리’를 투명으로 설정
그러면 다음과 같이 투명한 배경에 선택된 측정항목만 보여주는 하나의 차트가 완성됩니다.
표 사이즈를 폰트의 크기에 맞게 조정한 뒤 원하는 곳에 표를 위치시키면 완성됩니다. 간단하죠?
측정항목 = 수량
측정항목 필터를 ‘매출’로 변경하면 다음과 같이 라벨이 변경되는 것을 확인할 수 있습니다.
측정항목 = 매출
시계열 차트의 그리드와 표 차트의 라벨이 겹쳐서 보이므로 시계열 차트의 그리드는 보이지 않도록 설정하겠습니다. 방법은 시계열 차트 ‘스타일’ 탭 → ‘그리드’ → ‘그리드 색상’을 클릭하면 컬러팔레트가 나옵니다. 여기서 색상을 설정할 수 있습니다. 예시에서는 차트의 배경이 흰색이므로 그리드의 색상도 흰색으로 처리하겠습니다.
‘스타일’ → ‘그리드’ → ‘그리드 색상’ 클릭
3. 표 차트 스타일(커스텀 헤더)
표 차트에서도 동일한 원리가 적용됩니다. 수작업이 디테일하게 들어가기 때문에 작업을 수월하게 하려면 수정 화면에 그리드(도트)를 표시하는 것이 좋습니다. 아래 이미지는 수정 모드에서 캡쳐한 이미지입니다. 배경에 회색 그리드(도트)가 보이지요?
루커 스튜디오의 차트의 크기를 조정하거나 이동할 때에 아주 작은 단위로 미세하게 조절이 가능하지만 루커 스튜디오를 재실행하면 위치나 사이즈가 틀어질 때가 있습니다. 하지만 배경에 설정된 그리드(도트) 단위로 사이즈를 조정하거나 배치하면 문제가 발생하지 않습니다. 배경에 그리드(도트)를 표시하려면 ‘보기’ → ‘그리드 보기’를 클릭해주세요.
‘보기’ → ‘그리드 보기’ 클릭
커스텀 헤더는 ‘도형’ 도구를 사용합니다. 수정 화면에서 상단의 ‘도형’ 버튼을 클릭하면 도형을 생성할 수 있고, 속성 탭에서는 색상과, 모서리 라운드 처리, 투명도 조절 등을 할 수 있습니다.
‘도형’ → ‘배경 및 테두리’ 속성 설정
도형을 생성하고 도형의 스타일 속성을 사용하여 차트의 헤더에 덮어 씌웁니다. 아래 이미지에 유의해주세요. 빨간 박스 안에는 색상이 다르게 설정된 3개의 사각형이 표 차트의 헤더를 덮고 있습니다.
💡예시처럼 막대가 포함된 표를 사용하고 색상을 동일하게 설정하면 데이터 간의 구분이 명확해집니다.
색상이 각각 다른 3개의 도형을 헤더에 덮어 씌운 모습
차트의 헤더에 고정된 값은 텍스트로, 선택한 연도와 항목에 따라 동적으로 보여주는 값들은 표 차트로 보여줍니다. 먼저 텍스트를 추가해보겠습니다. 상단의 ‘텍스트’를 클릭합니다.
다음과 같이 텍스트를 헤더 위에 추가하고 텍스트 박스의 크기를 헤더의 사이즈에 맞게 조정한 뒤 적절하게 제목을 입력합니다.
⚠️텍스트의 스타일 탭에서 폰트의 사이즈나 색상을 조절할 수 있습니다. 유의할 점은 텍스트의 배경 색상을 ‘투명’으로 지정하는 것이 좋습니다. 헤더 위에 배치한 ‘도형’과 텍스트의 배경 색상을 같은 색상으로 지정하더라도 각 요소의 테두리의 높이에 미세한 차이가 발생할 수 있기 때문입니다.
배경색 투명 지정
다음으로 선택한 연도를 보여주기 위한 표를 추가하고 ‘연도’를 측정기준에 삽입합니다.
표 차트에 현재 선택된 연도만 나옵니다. 이제 스타일을 포함한 여러 옵션의 설정을 통해 측정기준인 연도만 표에 나오도록 설정하겠습니다. ‘2. 시계열 차트 스타일’ 에서 살펴본 내용들이 기억나지요?
측정 값(연도)을 제외한 요소들을 표에서 삭제해야합니다. 설정 탭에서 ‘상위 행만 표시’를 클릭합니다.
이제 연도만 표에 나오고 있죠. 그리드 색상과 배경 색상을 투명하게 설정 후 표의 사이즈를 헤더와 동일하게 축소하였습니다.
💡헤더에 텍스트와 표를 추가하고 폰트 사이즈를 조정했을 때, 다음 이미지와 같이 서로 높이가 맞지 않는 경우가 있습니다. 여기서 디테일한 수작업이 필요합니다.
높이를 일정하게 맞추기 위해서는 헤더를 기준으로 텍스트의 높이를 맞추어야 합니다. 텍스트는 여백을 조정하는 기능이 있기 때문이지요. 텍스트 박스의 ‘속성’ 탭에 ‘패딩’ 옵션이 있습니다. 여기서 패딩 값을 조정하면 높이를 맞출 수 있습니다.
그렇게 해도 표의 높이가 맞지 않는다면 방법은 2가지 입니다. 표의 폰트 크기를 조정하거나 헤더의 높이를 조정해야 합니다. ➡️ 헤더의 높이와 폰트를 최적화할 수 있는 설정은 배경의 그리드(도트) 1칸을 1px로 볼 때, 헤더의 높이를 3px, 5px 등 홀수로 지정하는 것이 가장 좋습니다.
다음은 측정항목을 표시하는 표를 추가합니다. ‘측정항목’ 매개변수를 직접 측정기준에 삽입합니다. 스타일 세팅은 위와 동일하게 설정하였습니다.
다음은 선택된 연도가 아니라 전년도 라벨을 넣어야합니다. ‘비교월’을 측정기준에 넣고 연도만 보여주면 되겠죠?
연도만 보여주는 방법은 측정기준에 있는 ‘비교월’의 좌측 작은 아이콘을 클릭합니다. 이 기능은 차트에 노출되는 필드명을 변경하거나 데이터 유형 또는 표시 형식을 변경할 때 사용합니다.
‘데이터 유형’ → ‘날짜 및 시간’ → ‘연도’를 클릭합니다.
‘데이터 유형’ → ‘날짜 및 시간’ → ‘연도’ 선택
이렇게 하면 라벨은 깔끔하게 연도만 표시합니다. 측정 기준도 위에서 살펴본 것과 동일한 방법으로 삽입하였습니다.
다음은 측정항목에 따라 ‘증감액’ 또는 ‘증감량’으로 표시하는 라벨을 추가해야 합니다. 이것은 계산된 필드 기능으로 새로운 필드를 생성해야 합니다. 수식은 다음과 같습니다.
1
2
3
4
CASE
WHEN측정항목='수량'THEN'증감량'
WHEN측정항목='매출'THEN'증감액'
END
이 수식은 측정항목이 ‘수량’을 선택했을 때 ‘증감량’ 텍스트를 반환하고, 측정항목이 ‘매출’을 선택했을 때 ‘증감액’을 반환합니다.
💡계산된 필드가 늘어나면 대시보드를 관리할 때에 필드를 헷갈리기 쉽습니다. 따라서 필드의 이름을 작성할 때에는 ‘라벨: 증감(매출/수량)’과 같이 용도를 함께 적어두면 소스를 관리하는 데 도움이 됩니다.
이제 표를 추가하고 측정기준에 방금 추가한 필드를 삽입합니다. 이렇게 하면 표는 측정항목의 선택 값에 따라 ‘증감액’ 또는 ‘증감량’을 표시합니다.
커스텀 헤더가 완성되었습니다. 그런데 표 차트는 교차필터링을 지원하기 때문에 표 위에 커서를 올리면 다음 이미지와 같이 커서가 변경되며 스크롤이 화면에 나타납니다. 깔끔한 미관을 위해 후처리해보겠습니다.
💡차트 설정 메뉴의 하단에는 ‘교차필터링’을 OFF 하면 클릭이 되지 않으므로 필수로 설정하는 것이 좋습니다. 하지만 이렇게 설정하더라도 해당 요소 위에 마우스를 올리면 클릭은 되지 않지만 커서가 변경됩니다. 커서까지 변경되지 않도록 하기 위해서는 다음 순서를 따를 수 있습니다.
차트의 헤더를 만들 때 도형을 사용했었지요? 헤더의 사이즈만큼 도형을 하나 추가합니다.
그리고 배경 색상을 ‘투명’으로 설정합니다. 그 외 다른 방법도 있는데, 도형의 속성을 보면 아래 이미지의 빨간 박스 옵션이 있습니다. 이것은 도형의 투명도를 조정하는 기능을 합니다. 이 투명도를 0으로 설정하면, 헤더 위에 도형이 투명하게 만드는 효과가 있습니다.
투명도 0 선택
이렇게 하면 커서를 올려도 모양이 바뀌지 않고, 표를 클릭할 수 없게 됩니다. 꼭 종이를 코팅하는 것 같지요? 대시보드에 이 기능을 통해서 선택 값을 표시하고 있다면 해당 표마다 투명한 도형을 덮어 씌우는 것이 좋습니다.
4. 조건부 서식
다음은 조건부 서식을 지정하는 방법입니다. 아래 이미지를 보면 비율에 관한 열은 배경색이 회색으로 지정되어있고, 증감률이 양수이면 붉은색, 음수이면 푸른색으로 표시하고 있습니다.
이것은 표의 ‘스타일’ 탭에서 지정합니다. 표 차트 클릭 후 ‘스타일’ → ‘조건부 서식’ 의 ‘추가’ 버튼을 클릭합니다.
‘스타일’ → 조건부 서식 ‘추가’ 클릭
‘추가’ 버튼을 클릭하면 규칙을 생성하는 화면이 나옵니다. 각각의 항목에 대해 간단히 설명하겠습니다.
(1) 색상 유형: 색상 유형 옵션은 단색과 색상 스케일로 나뉩니다. ‘단색’은 특정 조건에 따라 셀이나 텍스트의 색상을 한 가지 색상으로 지정합니다. 간단한 조건을 기반으로 데이터를 시각적으로 분류하기에 적합합니다. ‘색상 스케일’은 숫자 값의 범위에 따라 색상이 점진적으로 변화하는 스케일을 적용합니다. 값의 크기를 상대적으로 비교하거나, 데이터를 연속적인 스펙트럼으로 시각화하고 싶다면 ‘색상 스케일’ 옵션이 적합합니다. 이번 예시에서는 ‘단색’ 옵션을 적용하였습니다.
(2) 서식 규칙: 행 또는 열에 조건을 설정하는 기능입니다. 숫자, 텍스트, 날짜, 빈 셀 여부, 특정 조건식 등에 따라 서식을 적용하고자 하는 조건을 설정합니다.
💡서식 규칙에서 나오는 필드의 목록은 차트에 삽입된 측정 기준, 항목 순서와 동일합니다. 따라서 ‘비중’필드가 2개 있지만 차트에 삽입한 순서를 참고하여 구분할 수 있습니다. 예를 들어, ‘선택연도’ 다음 ‘비중’은 선택연도에 대한 비중, ‘전년도’ 다음 ‘비중’은 전년도에 대한 ‘비중’으로 이해하면 쉽습니다.
(3) 색상 및 스타일: 서식 규칙에 부합할 때 어느 범위까지 스타일을 지정하고, 어떤 스타일을 적용할 것인지를 지정합니다. 텍스트 색상과 배경 색상을 지정할 수 있습니다. 예시에서는 비중 열만 회색으로 지정하도록 설정하였습니다.
이제 예시에 실제로 적용된 각각의 조건들을 살펴볼까요? 먼저 ‘비중’ 열의 배경을 회색으로 처리하는 조건부 서식 세팅입니다. 비중이 0이상이거나 0이하인 값(사실상 모든 비중 값)에 대하여 배경색을 회색으로 지정한 것입니다. 조건과 서식을 설정 후 우측 하단의 ‘저장’버튼을 클릭하면 조건부 서식이 적용됩니다 .
설정 후 ‘저장’ 클릭
다음은 ‘증감률’ 배경 서식입니다. 역시 모든 값에 대하여 회색 배경을 지정하도록 설정하였습니다. 비율을 보여주는 열이 3개(비중 2개, 증감률 1개) 이므로 3개의 열에 대하여 각각 아래와 동일하게 배경 서식을 지정하였습니다.
다음은 ‘증감률’이 양수인 값에 대하여 텍스트를 붉은 색으로 표시하는 서식입니다.
‘증감률’이 음수인 값에 대하여 텍스트를 푸른 색으로 표시하는 서식입니다.
이렇게 다음 5개의 조건부 서식을 적용하였습니다.
조건부 서식까지 완성된 대시보드를 다시 한번 확인해볼까요? 측정항목을 ‘매출’로 적용한 대시보드입니다.
측정항목 = 매출
이번엔 측정항목을 ‘수량’으로 지정해보겠습니다.
측정항목 = 수량
오늘은 연도, 측정항목을 화면에 보여주는 기능을 살펴보았습니다. 이처럼 표 차트를 응용하고, 조건부 서식을 적용하면 시각화 도구로서의 장점을 더욱 부각시킬 수 있죠. 작은 변화만으로도 차트의 가독성이 달라지는 것입니다. 루커 스튜디오를 사용 중이신가요? 오늘 배운 조건부 서식과 표 차트를 꼭 응용해보시길 바랍니다!
