안녕하세요! 저는 ‘위비즈’ 유튜브 채널을 운영하고 있는 전서연이라고 합니다.
첫 포스팅으로 ‘기간별 매개변수 KPI 대시보드‘ 제작 방법을 준비해봤습니다.

태블로 첫 입문자도 이해하기 쉽게 상세하게 설명했으니 쉽게 따라하실 수 있으실 겁니다 🙂

핵심 기능

먼저 모바일 대시보드 시연 gif 입니다. 원하는 지표와 기준 기간을 선택할 수 있습니다.

• 측정값 선택 (Sales, Profit, Orders, Discount) → 영역 차트의 값이 선택한 측정값으로 변경됨
• 기간 선택 가능 (Daily, Weekly, Monthly, Yearly) → 영역 차트의 x축이 선택한 기간으로 변경됨

# 1 피그마에서 레이아웃 만들기

먼저 모바일 대시보드를 쉽게 만들기 위해, 저는 피그마에서 대시보드 레이아웃을 제작했습니다.

피그마는 무료고, 입문자에게도 쉬운 디자인 툴입니다.

또 PNG 로 금방 내보낼 수 있어 태블로 대시보드 배경으로 쓰기 좋습니다! (화질을 위해서는 PDF 로 내보내셨다가 JPG 로 변경하는 방법을 추천드립니다)

저는 아이폰 11 pro 기준으로 프레임을 만들었습니다.

1. 프레임 제작

왼쪽 상단 메뉴바에서 프레임을 선택한 뒤 오른쪽 창에서 원하는 템플릿의 크기를 선택합니다.

2. 기본 틀 잡기

• 오른쪽 메뉴 하단에서 fill 로 색상을 선택합니다.
• 오른쪽 메뉴 중반부에 Corner Radius 에서 원하는 만큼 모서리를 둥글게 만듭니다. (저는 20-30 정도를 선호합니다)

3. 레이아웃 잡기

• 중요한 정보 4가지가 들어갈 부분을 흰색 사각형으로 자리를 잡아둡니다.
• 왼쪽 상단 T 버튼을 눌러 제목과 각각의 상자 이름을 적어줍니다. (글씨체 : Gilroy)

4. 완성도 높이기

• Feather Icons 라는 피그마 익스텐션을 미리 설치하신 뒤, 동그라미 표시한 부분에 icons 라고 검색하시면 아이콘을 불러오는 창이 뜹니다.
  https://www.figma.com/resources/assets/feather-icons/
• 필요한 아이콘을 드래그한 뒤, 아이폰 프로 프레임 아래로 끌어줍니다. (새로운 프레임으로 불러와지기 때문에 PNG 로 내보낼때 한번에 내보내려면 아이폰 프레임 밑에 있어야 합니다.)
• 저는 인스타그램 프로필사진을 로고처럼 우측 상단에 배치했습니다.

# 2 태블로 데이터 연결

태블로 초기 화면 왼쪽에 저장된 데이터 원본 → Sample Superstore 를 클릭합니다.
(찾기 어려운 경우 문서 → 내 Tableau 리포지토리 폴더 → 데이터 원본 → Sample Superstore 를 찾고, 파일에 연결 → Excel → Sample Superstore를 연결해주세요!)

# 3 매개변수를 만들자

매개변수

측정값을 선택할 때마다 해당 측정값을 나타내는 영역차트를 만들기 위해서 매개변수가 필요합니다.

데이터 탭 상단에 역삼각형 모양을 누르면 매개변수 만들기가 뜹니다. 누르고, 만듭니다.

참고 ) 매개변수는 혼자서 쓰일 수 없습니다. 매개변수가 계산된 필드 안에 들어가서 그 계산된 필드가 시트에 적용될 때 비로소 매개변수를 통해 시트의 변수를 조정할 수 있습니다. 매개변수가 적용된 계산된 필드를 시트에 적용하지 않았다면, 매개변수를 아무리 조정해도 아무런 변화도 일어나지 않습니다.

1. Measure Select 매개변수

영역 차트에서 Sales, Profit, Orders, Discount 측정값을 번갈아서 보고 싶기 때문에 필요합니다.

매개변수 옵션을 문자열, 목록 으로 선택한 뒤, 값 목록에 직접 값들을 입력해줍니다.

2. Period Selection 매개변수

영역 차트의 X축 날짜 단위를 선택할때마다 번갈아서 보고 싶기 때문에 필요합니다.

매개변수 옵션을 문자열, 목록으로 선택한 뒤 값 목록에 직접 입력해주시면 됩니다.

# 4 매개변수를 적용을 위한 계산된 필드를 만들자

1. Select Measure 계산된 필드

이 필드의 목적은 Measure Select 매개변수를 시트에 적용하기 위해서입니다.

Measure Select 매개변수가 특정 값일때 어떤 값을 반환해야하는지를 조건문으로 적어줍니다.

모든 측정값은 합계(sum)로 집계를 했습니다. 다만, Discount의 경우 30% 와 같이 할인율을 나타내는 지표이기 때문에 매출, 이익, 판매수량과 달리 평균(avg) 로 집계를 하고, 100을 곱해주었습니다.

// 아래 내용을 복사 붙여넣기 하시면 됩니다.
IF [Measure select]=='Sales' THEN SUM([Sales])
ELSEIF [Measure select]=='Profit' THEN SUM([Profit])
ELSEIF [Measure select]=='Orders' THEN SUM([Quantity])
ELSEIF [Measure select]=='Discount' THEN (AVG([Discount])*100)
END

2. Date 계산된 필드

이 필드의 목적은 Period Selection 매개변수를 시트에 적용하기 위해서 입니다.

Period Selection 매개변수가 특정 값일 때 어떤 값을 반환해야하는지를 조건문으로 적어줍니다.

여기서 DATETRUNC 함수는 날짜를 괄호 안에 쓴 날짜 단위만큼 잘라내는 함수입니다.

예를 들어 DATETRUNC(‘year’,#2020.11.12#) 는 2020.1.1 을 반환합니다. (연 단위로 자르면 1월 1일이 그 기준이 되니까요!)

// 아래 내용을 복사 붙여넣기 하시면 됩니다.
IF  [Period Selection]='Yearly' THEN DATETRUNC('year',[Order Date])
ELSEIF [Period Selection]='Quarterly' THEN DATETRUNC('quarter',[Order Date])
ELSEIF [Period Selection]='Monthly' THEN DATETRUNC('month',[Order Date])
ELSEIF [Period Selection]='Weekly' THEN DATETRUNC('week',[Order Date])
ELSEIF [Period Selection]='Daily' THEN DATETRUNC('day',[Order Date])
END

# 5 매개변수 적용 영역 차트

1. 계산된 필드 Date 를 열선반에, Select Measure 를 행선반에 넣기

• 이때 Date 필드를 우클릭해서 정확한 날짜, 불연속형으로 바꿔줍니다. (파란색)
• 마크 카드에서 시각화 유형을 영역으로 바꿔주고, 색상에서 원하는 색을 선택합니다.
• 축이 보기가 싫다면 축을 우클릭해서 머리글 표시 숨기기를 눌러줍니다.

2. 가장 최근 값을 강조하기 위해 Last Measure 계산된 필드 제작

영역 차트를 딱 봤을때 가장 최근 값을 바로 알 수 있도록 하기 위해 강조용 원을 표시해 줄겁니다.

여기서 LAST 함수는 테이블 계산 함수로, 가장 마지막 값 까지 남은 거리를 계산해줍니다.

즉 이 계산식은 ‘가장 마지막 값까지 남은 거리가 0이면, Select Measure 값을 반환해라’ 라는 뜻입니다.

IF LAST()==0 THEN ([Select Measure]) END

3. 이중축으로 가장 마지막 값과 트렌드 함께 표시하기

• Last Measure 를 행선반에 놓고, 우클릭을 누르고 ‘이중축’ 을 선택
• Last Measure 의 마크 형식을 원으로 변경
• 양쪽에 축이 생기면 우클릭 후 ‘축 동기화’ 선택

마지막으로 마크 카드 밑 빈공간을 우클릭하고 매개변수 Measure Selcet 와 Period Selection을 선택합니다. 그러면 옆에 매개변수 조정을 할 수 있도록 창이 뜹니다.

이 단계까지 마무리하셨으면, 매개변수를 변경할때마다 값이 변경되는 것을 볼 수 있으실 겁니다.

# 6 기간 단위 대비 매출 성장률 보여주기

이번에는 아래 동그라미 친 부분처럼 선택한 기간 단위 대비 매출 성장률을 보여주는 필드를 제작해보겠습니다.

1. Current (현재 날짜)

우리는 이전 주, 이전 달, 이전 분기 대비 현재의 성장률을 보고 싶습니다.

그래서 가장 먼저 현재 날짜 를 반환하는 식을 만들어 보겠습니다!

전체 데이터베이스에서 가장 큰 날짜에서 날짜를 뺐을 때 차이가 0 → 즉, 가장 최근 날짜를 의미합니다.

이 때 주의해야 할 것! Order Date 가 아니라, 새롭게 만든 Date 계산된 필드를 이용해야 합니다! 

그리고 이 계산된 필드를 필터 카드에 넣은 뒤 참에 체크합니다.

그러면 가장 최근의 날짜가 반환됩니다.

2. Previous (이전 날짜)

이전 날짜 단위 대비 현재 성장률을 보고 싶기 때문에 (이전 주 대비, 이전 월 대비, 이전 분기 대비)

Previous 필드에 매개변수를 넣어서 날짜 단위별로 반환하는 필드를 만들어 줍니다.

번외 ) 여기서 알고 가면 좋은 개념 두가지

(따라해야 하는 부분이 아닙니다)

1 ) 매개변수

보라색으로 된 부분이 매개변수 입니다. 매개변수는 혼자 동작할 수 없습니다!

매개변수는 말 그대로 매개역할을 하는 변수기 때문에 반드시 계산된 필드에 매개변수별로 어떤 식을 반환할지 써 준 뒤에 행 또는 열 선반에 배치해야 합니다.

그래서 아까 만든 날짜 단위 선택 매개변수가 작동하기 위해 매개변수를 포함한 계산된 필드 [Previous] 를 만들어주는 것입니다!

2) DATE_PART 값

모든 날짜 함수에는 날짜 단위를 입력하는 부분이 있는데, 이 양식에 맞게 써주시면 됩니다!

Tableau의 많은 날짜 함수에서 상수 문자열 인수인 date_part가 사용됩니다.
사용할 수 있는 올바른 date_part 값은 다음과 같습니다.

DATE_PART	값
'year'	4자리 연도
'quarter'	1-4
'month'	1-12 또는 “1월”, “2월” 등
'dayofyear'	일년 중 몇째 날. 1월 1일은 1, 2월 1일은 32 등으로 계산됩니다.
'day'	1-31
'weekday'	1-7 또는 “일요일”, “월요일” 등
'week'	1-52
'hour'	0-23
'minute'	0-59
'second'	0-60
'iso-year'	4자리 ISO 8601 연도
'iso-quarter'	1-4
'iso-week'	1-52, 주의 시작은 항상 월요일
'iso-weekday'	1-7, 주의 시작은 항상 월요일

3. Current Value (현재 값 반환)

날짜가 가장 최근의 날짜일 경우 매출 합계를 반환합니다.

4. Previous Value (이전 값 반환)

매개변수에 맞춰 날짜 단위에 맞는 이전 값(매출 합계)을 반환합니다.

5. Chg

현재 값에서 이전 값을 뺀 차이를 반환합니다.

6. % Chg

차이에서 이전 값을 나눠서 몇 % 변화를 했는지

참고) 매출액 증가율 공식

7. 시트에 올리기

1. 마크 카드

마크 카드 텍스트에 매출, % Chg, Period Selection 매개변수를 넣어줍니다.

그러면 이런 뷰가 완성됩니다.

2. 서식 편집

% Chg 마우스 우클릭 →서식→ 사용자 지정에서 ▲ 0.00%; ▼ 0.00% 를 입력합니다.

그러면 자동으로 화살표가 바뀝니다!

마크 카드에서 텍스트를 선택한 뒤 레이블 편집에서 이런식으로 변경해주었습니다!

저는 디자인적 이유로 Period Selection은 따로 추가하지 않았는데 추가하면 정보 측면에서 좋을 것 같습니다.

# 7 나머지 필드 제작

다 왔습니다! 이제는 행선반과 열선반에 올리기만 하면 나머지 여섯개 시트는 금방 만듭니다!

1. Profit

• Date (계산된 필드) 를 올리고, 불연속형 정확한 날짜로 바꾼 뒤
• 필터에 Current 조건을 참으로 설정 후
• profit 필드를 텍스트에 넣어줍니다.

2. Orders

• 위와 똑같은 방법입니다.

3. Ship Days

• 위와 똑같은 방법입니다.

4. Segment 별 Sales 제작

맨 밑에 넣은 세그먼트 별 매출 시트들은 필터와 함께 동적으로 움직이는 부분이 아닌, 그저 정적으로 정보를 전달하기 위한 용입니다.

• Sales 를 텍스트에 합계로 드래그
• Segment 필터를 각각 설정해 놓고 똑같은 방법으로 각 세그먼트 매출을 나타내는 시트를 3개를 제작해줍니다.

8. 완성!

이제 아까 만든 필드들을 요리조리 잘 배치만 해주면 대시보드 제작은 끝이 납니다.

모바일 레이아웃은 저는 따로 만들지 않았는데, 모바일에서 열었을때 해당 화면처럼 보이게 하고 싶으시다면 전화 레이아웃을 따로 추가해주셔야 합니다!

• 아래 사진에서 기기 미리보기 → 원하는 기기를 선택
• 전화 대시보드에 잠긴 자물쇠를 풀고 크기를 조정한 뒤 원하는 대로 시트를 배치해주시면 됩니다.

이렇게 제 첫 포스팅은 마무리하도록 하겠습니다! ^0^
제 포스팅이 조금이라도 도움이 되셨기를 바라며, 다음 포스팅에서 뵙겠습니다!

궁금한 점이 생기셨다면 댓글로 알려주세요! 답변드리도록 하겠습니다.