전국 지점의 매출 목표 달성 현황을 직관적으로 확인할 수 있도록 구성된 매출 모니터링 보고서입니다.

각 지점의 목표 금액, 매출 실적,  달성률 등을 시각화하고 월별 매출 실적 표를 통해 지점별 실적 추이를  분석함으로써 지점 간 매출 기여도를 빠르게 파악할 수 있습니다.

구축된 보고서는 여러 관리자가 동시에 접속하여 실시간으로 데이터를 공유하고 분석할 수 있습니다.

제공된 샘플 엑셀 파일을 활용해 손익계산서를 웹으로 변환해보세요.

Step 1. 엑셀 파일 준비

1. • 샘플로 제공된 엑셀 파일을 체험하기 샘플 자료에서 다운로드합니다.

Step 2. 엑셀 시트 이름 규칙

• • 다운로드 받은 엑셀 파일에 있는 데이터를 활용해 지점별 매출 현황 보고서를 작성합니다.

  • 각 시트에 대해 먼저 알아보겠습니다.

    • V시트 : V_지점별 매출 현황
      엑셀에 여러 개의 시트가 존재할 때, 웹 화면에 보여질 시트의 이름은 'V_(문자)' 혹은 'V(숫자)' 형식으로 작성합니다.

      
      
      
      

    • D시트 : D1
      데이터를 입력하거나 DB와 연결해 데이터를 불러올 수 있는 시트입니다.
      
      
      
      

    • P시트 : P1
      데이터 조회 시에 사용할 변수를 작성합니다. 엑셀의 '이름정의' 기능을 사용하면 셀 값을 변수로 사용할 수 있습니다.
      이번 실습에서는 해당 연도의 지점별 매출 현황을 확인하기 위해 '연도' 변수를 사용합니다.
      
      
      

      엑셀 시트명 규칙은 다음과 같습니다.

      
      

Step 3. 변수 설정, V시트에 데이터 연결하기

• • 엑셀의 '이름정의'기능을 사용해 P시트에서 '연도' 변수를 설정합니다.

  • 변수는 웹 화면에서 조회 조건으로 사용할 수 있습니다. 조회 조건을 설정하면 변수값에 해당하는 데이터만 조회됩니다.
    
    
    
    

  • 엑셀의 SUMIFS 함수를 활용해 각 지점명의 조회년도에 해당하는 '목표금액'과 '매출실적' 값을 계산합니다.
    * 조회년도 : VS_YYYY
    * 지점명 : 서울, 대전, 대구 ...
    * 값 : 매출목표, 매출실적 ...
    예) C12셀 : =SUMIFS('D1'!$D:$D,  'D1'!$A:$A,VS_YYYY,  'D1'!$C:$C,'V_지점별 매출 현황'!$B12)

    

    
    

  • ‘목표금액’과 ‘매출실적’을 입력하면 관련 차트와 목표 대비 실적, 달성률이 자동으로 표시됩니다.

    
    
    

  • 하단의 지점별 월별 실적 표도 엑셀의 SUMIFS 함수를 활용하여 각 지점별 월별 실적 값을 계산합니다.
    * 조회년월 : VS_YYYY & 1월 ...
    * 지점명 : 서울, 대전, 대구 ...
    * 값 :  매출실적 ...
    
    

  • 먼저, SUMIFS 함수의 조건 설정을 간소화하기 위해, D1 시트에서는 '년도'와 '월' 데이터를 결합하여 하나의 파생 값을 생성합니다.

    
    
    

  • 파생 열을 참조하여 SUMIFS 함수를 작성합니다.
    예) C21셀 : =SUMIFS( 'D1'!$D:$D,   'D1'!$F:$F, VS_YYYY&'V1'!$B21,   'D1'!$C:$C, 'V1'!C$20)
    
    
    

  • 데이터 입력을 완료되면 지점별 매출 현황 보고서가 완성됩니다. 완성된 엑셀 파일을 저장합니다.

    

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 사이트 메인 화면 좌측 [메뉴] > [개인]을 선택합니다.
  • '돋보기' 버튼을 클릭해 보고서 목록을 새로 고침 하면 저장된 보고서를 확인할 수 있습니다.
  • 연도를 바꾸고 '조회' 버튼을 클릭하면 데이터가 갱신 되는 것을 확인할 수 있습니다.