전국 지점의 매출 목표 달성 현황을 직관적으로 확인할 수 있도록 구성된 매출 모니터링 보고서입니다.
각 지점의 목표 금액, 매출 실적, 달성률 등을 시각화하고 월별 매출 실적 표를 통해 지점별 실적 추이를 분석함으로써 지점 간 매출 기여도를 빠르게 파악할 수 있습니다.
구축된 보고서는 여러 관리자가 동시에 접속하여 실시간으로 데이터를 공유하고 분석할 수 있습니다.
제공된 샘플 엑셀 파일을 활용해 손익계산서를 웹으로 변환해보세요.
Step 1. 엑셀 파일 준비
샘플로 제공된 엑셀 파일을 체험하기 샘플 자료에서 다운로드합니다.
Step 2. 엑셀 시트 이름 규칙
다운로드 받은 엑셀 파일에 있는 데이터를 활용해 지점별 매출 현황 보고서를 작성합니다.
각 시트에 대해 먼저 알아보겠습니다.
V시트 : V_지점별 매출 현황
엑셀에 여러 개의 시트가 존재할 때, 웹 화면에 보여질 시트의 이름은 'V_(문자)' 혹은 'V(숫자)' 형식으로 작성합니다.
- D시트 : D1
데이터를 입력하거나 DB와 연결해 데이터를 불러올 수 있는 시트입니다.
P시트 : P1
데이터 조회 시에 사용할 변수를 작성합니다. 엑셀의 '이름정의' 기능을 사용하면 셀 값을 변수로 사용할 수 있습니다.
이번 실습에서는 해당 연도의 지점별 매출 현황을 확인하기 위해 '연도' 변수를 사용합니다.
엑셀 시트명 규칙
엑셀 시트명 규칙은 다음과 같습니다.
Step 3. 변수 설정, V시트에 데이터 연결하기
엑셀의 '이름정의'기능을 사용해 P시트에서 '연도' 변수를 설정합니다.
변수는 웹 화면에서 조회 조건으로 사용할 수 있습니다. 조회 조건을 설정하면 변수값에 해당하는 데이터만 조회됩니다.
먼저, SUMIFS 함수의 조건 설정을 간소화하기 위해, D1 시트에서는 '날짜' 데이터를 구분하여 '년도' 와 '월' 두 개의 파생 값을 생성합니다.
(이미지)
파생 열을 참조하여 SUMIFS 함수를 활용해 각 지점명의 조회년도에 해당하는 '목표금액'과 '매출실적' 값을 계산합니다.
* 조회년도 : VS_YYYY
* 지점명 : 서울, 대전, 대구 ...
* 값 : 매출목표, 매출실적 ...
예) C13셀 : =SUMIFS('D1'!$C:$C, 'D1'!$E:$E, VS_YYYY, 'D1'!$B:$B, 'V_Sales Performance Report'!$B$13)
‘목표금액’과 ‘매출실적’을 입력하면 관련 차트와 목표 대비 실적, 달성률이 자동으로 표시됩니다.
하단의 지점별 월별 실적 표도 엑셀의 SUMIFS 함수를 활용하여 각 지점별 월별 실적 값을 계산합니다.
* 조회년월 : VS_YYYY & 1월 ...
* 지점명 : 서울, 대전, 대구 ...
* 값 : 매출실적 ...- 파생 열을 참조하여 SUMIFS 함수를 작성합니다.
예) C21셀 : =SUMIFS('D1'!$D:$D, 'D1'!$E:$E, VS_YYYY, 'D1'!$B:$B, 'V_Sales Performance Report'!C$21, 'D1'!$F:$F, 'V_Sales Performance Report'!$B22)
데이터 입력을 완료되면 지점별 매출 현황 보고서가 완성됩니다. 완성된 엑셀 파일을 저장합니다.
Step 4. 웹 화면으로 변환하기
EPA 사이트 메인 화면으로 돌아가 좌측 [도구]에서 i-AUD Designer를 클릭 합니다.
저장한 엑셀 파일을 마우스로 끌어 i-AUD Designer 도구 창 위에 놓습니다.
엑셀 보고서가 웹 화면에 그대로 반영된 것을 확인할 수 있습니다.
변환된 엑셀 화면이 웹 브라우저의 화면 크기에 맞게 자동으로 조정되도록 설정합니다.
웹으로 변환된 보고서를 선택하고 우측 속성 창 > Docking 영역 Left, Right, Bottom에 체크 합니다.
Border에서 Line Type을 'None'으로 설정하면 디자이너 화면에서 보고서의 테두리가 표시되지 않도록 설정 할 수 있습니다.
Step 5. 조회 조건 설정하기
- 연도별로 손익계산서를 웹에서 확인하기 위한 '년도' 조회 조건을 배치하고 설정해 보겠습니다.
- 조회할 연도를 선택할 수 있도록 '기준연도' 라벨과 달력을 배치한 뒤, 클릭 했을 때 데이터를 갱신할 수 있도록 '조회' 버튼을 추가합니다.
- 상단 UI Bot > Label을 클릭한 뒤 우측 속성 창 > Text 혹은 키보드 F2를 눌러 내용을 '기준연도'로 변경합니다.
- 달력을 배치하겠습니다.
- UI Bot > Calendar > Year를 클릭하고 알맞은 위치에 배치합니다.
- 이 때, 배치한 달력 컴포넌트의 'Name'을 엑셀에서 '이름정의'한 변수명과 동일하게 설정하면 달력에서 선택한 값이 조회 조건으로 사용됩니다.
- InitDate는 보고서를 처음 열었을 때 값을 설정할 수 있습니다.
- 마지막으로 '조회' 버튼을 배치해 보겠습니다.
- UI Bot > Button을 클릭하고 알맞은 위치에 배치합니다.
- 라벨과 마찬가지로 버튼의 Text를 '조회'로 수정한 뒤, Style에서 서식을 변경합니다.
이 때, BoxStyle을 활용하면 저장된 스타일을 빠르게 적용할 수 있습니다.
- '조회' 버튼을 클릭 했을 때, 설정한 날짜 변수 값으로 데이터가 갱신되도록 이벤트를 설정해 보겠습니다.
- 상단 Process Bot을 클릭해 Objects 목록에서 'Button'을 더블 클릭합니다.
Activities 탭으로 이동하여 'Refresh' 동작을 더블 클릭합니다.
'Button'을 클릭했을 때 'Refresh' 동작이 실행되도록 프로세스봇 창에 배치된 'Button'을 선택 후 마우스로 끌어 'Refresh' 동작에 연결합니다.
Refresh 모듈의 상세 버튼을 클릭한 뒤, 갱신할 컴포넌트로 'MXGrid'를 선택합니다.
(엑셀을 웹 화면에 끌어다 놓으면 MX-Grid 컴포넌트가 생성됩니다.)
이번에는 아래의 차트에 원하는 색상으로 표현되도록 색상 모듈을 연결합니다.
색상을 적용할 차트를 Objects 목록 에서 더블클릭 합니다.
'차트'가 데이터와 연결 되었을 때 '[Chart] 차트 색상 팔렛트 지정하기' 동작이 실행되도록 프로세스봇 창에 배치된 차트에 'OnDataBindEnd'을 선택 후 마우스로 끌어 '[Chart] 차트 색상 팔렛트 지정하기' 동작에 연결합니다.
[Chart] 차트 색상 팔렛트 지정하기' 모듈의 상세 버튼을 클릭한 뒤, 적용할 차트와 색상 값을 입력합니다.
* 색상값 : #195BAF, #2797FA, #66D8BD, #E2E6EA, #F98A45
- 프로세스봇을 저장하고 닫습니다.
- 보고서 설정이 완료되었습니다.
Step 6. 보고서 저장하기
- 완성된 보고서를 내 폴더에 저장합니다.
- EPA 사이트 메인 화면 좌측 [메뉴] > [개인]을 선택합니다.
- '돋보기' 버튼을 클릭해 보고서 목록을 새로 고침 하면 저장된 보고서를 확인할 수 있습니다.
- 연도를 바꾸고 '조회' 버튼을 클릭하면 데이터가 갱신 되는 것을 확인할 수 있습니다.
- 완성된 보고서를 내 폴더에 저장합니다.