웹 앱에 개별 대시보드 시나리오 포함하기

Embedded BI 개요

Embedded BI는 BI 솔루션을 비즈니스 프로세스 소프트웨어 안에 통합하는 것을 의미합니다. 독립 실행형 애플리케이션 대신 임베디드 BI 를 사용하면 조직의 애플리케이션 내부에서 직접 비즈니스 인텔리전스를 활용할 수 있습니다.

임베디드 BI는 일상 운영부터 장기 전략 수립까지, 동일한 환경에서 실행 가능한 인사이트를 제공하여 비즈니스 의사결정을 가속화합니다.

왜 ‘단일 시나리오’ 임베드인가

전체 대시보드를 임베드하는 방식은 유용하지만, 사용자(대시보드 소비자)가 핵심 요점을 놓치거나 시각화를 오해할 위험이 있습니다. 따라서 임베디드 BI는 개별 시각화(시나리오/KPI)를 독립 엔티티로 애플리케이션에 임베드할 수 있는 유연성을 제공해야 합니다. Wyn에서는 이를 단일 시나리오 임베드 (single scenario integration)로 구현할 수 있습니다.

단일 시나리오 임베드 살펴보기

이 글에서는 단일 시나리오를 통합 하는 방법을 다룹니다. 아래 예시는 완전한 대시보드에서 가져온 개별 시나리오(‘ 매출총이익률 ’, ‘ 영업이익 ’, ‘ 월간 매출 ’)를 각각 임베드한 화면입니다.

애플리케이션에서 시나리오 URL 생성

단일 시나리오를 임베드하는 기본 개념은 시나리오용 URL 을 필요한 옵션과 함께 구성하고, 해당 URL을 <iframe> 의 src 로 설정하는 것입니다. 전체 대시보드 임베드와 유사하지만, scenario 파라미터에 시각화 이름 을 지정한다는 점이 다릅니다.

URL 패턴

 Copy 
 http://<WynServerUrl>/dashboards/view/<DashboardID>?scenario=<ScenarioName> 

생성한 URL을 iFrame의 소스로 설정합니다.

 Copy 
 <iframe class="dashboard-preview" title="Scenario View" src="{scenarioUrl}"></iframe> 

React 예시 (상태에서 URL 구성)

이 예시는 React 애플리케이션 기준입니다. Server URL, Token, Dashboard ID를 컴포넌트 state에 보관합니다.

 Copy 
 export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      token: '61keii49qdakj031k9e1h9ann0s8e08qhlk741nkjkl22n2asdf983yi2bsi3bdn', // Wyn 서버에서 발급된 토큰 (예시)
      serverURL: 'http://localhost:51980', // Wyn 서버 URL (예시)
      dashboardID: '28ack2s2-9cc9-2h8s-j9l1-ois2nai4la32', // 시나리오가 포함된 대시보드 ID (예시)
      docTitle: 'Retail Sales Analysis',
      scenarioURL: '',
      selectedStore: null,
      selectedRegion: 'All'
    };
  }
} 

아래처럼 시나리오 이름을 받아 URL을 생성하는 함수를 추가합니다.

 Copy 
 generateScenarioUrl = (scenarioName) => {
  const url =
    `/dashboards/view/${this.state.dashboardID}` +
    `?token=${this.state.token}` +
    `&scenario=${encodeURIComponent(scenarioName)}` +
    `&size=fittoscreen&actions=clearselection&openfulldashboardmode=newwindow`;
  return url;
} 

Wyn 포털로 시나리오 URL 생성

애플리케이션에서 직접 URL을 만들 수도 있지만, Wyn Enterprise 포털에서도 간단히 생성할 수 있습니다. 아래 두 단계만 거치면 됩니다.

1) 대시보드 편집

임베드할 시각화/KPI가 있는 대시보드의 더보기(More…) ▸ Edit Dashboard 를 클릭합니다.

2) 시나리오 마크업 가져오기

임베드할 시나리오/시각화를 선택하고, 우측 상단의 Share Scenario 를 클릭합니다. 팝업에서 포함/제외할 옵션을 선택한 후 Copy Options 버튼으로 마크업을 복사하세요.

복사한 iFrame 마크업을 애플리케이션에 그대로 붙여 넣으면 됩니다. 이 마크업에는 서버 URL, 토큰, 대시보드 ID, 시나리오 이름과 함께 size , analysis path 등 필요한 옵션이 포함됩니다.

샘플 실행 방법

1. 의존성 설치
   샘플 위치에서 명령 프롬프트를 열고 다음을 실행합니다.

    Copy 
    npm install 
   

2. 애플리케이션 실행
   아래 명령으로 개발 서버를 시작합니다.

    Copy 
    npm run start