Encoder-Decoder Seq2Seq2 Model을 이용한 Data Visualization 추천 시스템

이 글은 이화여자대학교 2021-1학기 캡스톤디자인프로젝트B - 스타트7팀(이화BTS) 나정현의 기술 블로그 제출물입니다. 본 팀은 “ERP: Customizing Recommended Data Visualization Plots” 을 주제로 웹 서비스를 제작 중에 있으며, 해당 서비스는 Data2Vis의 Encoder-Decoder 모델, Seq2Seq2 모델에 기반하여 Plot 추천 시스템을 제공합니다.

GitHub 소스코드 : https://github.com/Ewha-BTS/ERP

(※ 현재 비공개인 상태입니다.)

Project Overview

들어가기 앞서, Visualization Recommender System이란 무엇일까?

이는 이름 그대로, 전문가가 일일이 차트를 만들지 않아도 제공되는 차트 리스트 중에 가장 적합한 것을 고를 수 있도록, 자동적으로 차트를 만들어 주는 추천 시스템이다.

본 팀은 큰 데이터셋과 이와 관련된 차트를 이용하여 학습시킨 모델을 통해 시각화 타입과 디자인 초이스를 추천해주는 시스템을 설계하고, 이를 웹에 올려 웹 서비스로서 Visualization 추천 시스템을 제공하는 ERP를 제작하고자 한다.

data를 활용하는 일이 급진적으로 증가하고 있고, 이에 따라 data specialist도 많아지고 있다. 이 트렌드에 맞게 굳이 플랏을 그리기까지의 모든 과정을 다 컨트롤하지 않아도 (길었지만, 흔히 노가다 라고 합니다..) 자동적으로 플랏을 추천해주는 서비스에 대한 요구도 증가하고 있다. 실제로 이에 가장 유명한 서비스는 Tableau 인데, 직접 사용해 본 결과 UI 도 복잡하고 UX도 좋지 못하다고 느꼈다. 하나의 윈도우에 너무 많은 정보가 한꺼번에 떠있는 느낌이었고, UX 플로우가 원활하지 못해 그리는 동안 엑셀에 엔터가 안 쳐지는 것과 비슷한 불편함을 느꼈다.

이를 보완하기 위해, 최근 핫하고 사용성으로 유명한 노션 의 UI와 UX를 차용하여 위 서비스를 사용자 중심 서비스로 탈바꿈하는 것이 어떨까, 생각하였다. 여기에 연구 결과(성능)가 좋아 사용하고 싶었던 Data2Vis 모델을 이용하고, 부족했다고 느꼈거나 원했던 점도 추가해 볼 예정이다.

더하여, - 노션이 가진 최대 장점이라고 생각하는 - 자유자재로 element를 배치하여 활용할 수 있는 대시보드의 편리함을 서비스의 2번째 메인 기능으로 제공하고자 한다. 사용자가 임의로 플랏을 그릴 수 있는 기능을 마지막 메인 기능으로 추가할 예정이다.

이렇게 총 3가지의 메인 기능을 가지고 있는 본 팀의 서비스는 가장 중요한 분야 중 하나인 data 의 활용을 돕고 사용성을 증대시키고자 하며, 이를 통해 전문가가 데이터를 활용함에 있어서 중요한 부분에 집중할 수 있도록 돕고자 한다.

🌝 그럼, 이제부터 전체적인 data 플로우와 웹 UI, 사용한 테크 스택, 실행 방법 및 데모 등에 대해 소개해보겠다.

Model

전체적인 서비스의 흐름도를 ~~아주, 아주!~~ 간단하게 표현해보자면 다음과 같다.

일단 사용자는 플랏으로 그리고자 하는 데이터가 배열에 담긴 .json .csv 과 같은 유형의 data 파일을 input으로 넣는다.

해당 데이터는 앞으로 설명하게 될 Encoder-Decoder과 Seq2Seq2 모델을 기반으로 한 모델을 통해 플랏으로 그려진다. 이 때 데이터는 한개의 플랏이 아닌 모델에서 제시하는 추천 플랏들 k (임의 설정) 개로 표현된다.

이를 토대로 사용자가 원하는 플랏을 선택한 후 세부적인 사항을 조정한 뒤 저장하면, 사용자의 ‘마이 리스트’에 해당 플랏이 저장되어 메인 대시보드에서 이를 이용할 수 있다. 이 때 이용이란, 그래프를 격자 형태를 가진 대시보드에 임의로 배치하고 크기 등을 조정하여 서로 연관된 플랏들을 한눈에 파악 가능하도록 하는 것을 의미한다.

본 팀이 베이스로 사용하게 될 모델은 Vega-Lite를 기반으로 한 Data2Vis 모델이다. 이에 대해 자세히 알아보자.

Data2Vis

Data2Vis를 이해하기 위해, 이와 연관된 연구이자 기본에 충실해 Data Visualization에 대한 이해도를 높일 수 있는 [VizML](https://leahincom.github.io/2021/05/19/VizML-paper-review/) 논문을 리뷰하였으며, 이후 [Data2Vis](https://leahincom.github.io/2021/05/21/Data2Vis-paper-review/) 논문을 리뷰하였다. 이와 관련한 요약본은 다음과 같다.

이 때, 모델에 학습시킬 데이터셋 마련을 위해 양질의 데이터를 크롤링하는 데 한계가 있다고 판단하여, 오픈 소스로 공개되어 있는 Vega-Lite 기반의 Data2Vis의 데이터셋을 이용하여 1차적으로 training 시켰으며, 이후 Plotly 기반의 VizML 데이터셋을 이용하여 Plotly JavaScript 라이브러리를 이용하여 프론트엔드를 구현할 예정이다.

Specification

Data2Vis의 examplesdata에서 가져온 airports.json 의 structure는 다음과 같다.

해당 데이터를 plot으로 그리기 위해 사용된 Vega-Lite grammer은 다음과 같다.

위와 같은 그래머를 training data로 학습시킨 모델이 Vega Editor를 통해 그린 plot들은 다음과 같다.

결론적으로, 본 팀이 사용하고자 하는 모델의 input 과 output , dataset 및 model 개요 는 다음과 같다.

input	model	output	dataset
1개의 dataset(.csv)	Seq2Seq + Encoder-Decoder Model	visualization recommended plots (Top-k개)	Data2Vis의 dataset

input dataset의 경우 Training : Eval : Test = 0.8 : 0.1 : 0.1 의 비율로 구성한다.

WEB

Guideline

1. 먼저, 소스를 받기 위해 `git clone` 으로 모든 파일을 local server로 가져온다. 2. 이후, 필요한 모든 npm package를 다운받아 프로젝트를 run할 준비를 마친다. 3. 아직 배포를 하지 않은 상태이므로, localhost로 실행하기 위해 client 폴더로 이동한다. 4. client를 실행시킨다.

※ 자동으로 브라우저가 실행되지 않는 경우, http://localhost:3000 를 주소창에 입력하여 프론트를 확인해 주세요.

git clone https://github.com/Ewha-BTS/ERP.git
npm i
cd erp-client
npm start

Front-end

Tech Stack

React.js
Recoil
styled-components (SASS 기반)
axios

Structure

public/
	├ index.html
src/
	├ assets/
	├ components/
		├ common/
			├ TabBar.js
		├ main/
			├ Dashboard.js
			├ Graph.js
			├ DetailBar.js
			├ RecBar.js
			├ MyList.js
	├ lib/
		├ api.js
		├ state.js
	├ pages/
		├ MainDashboard.js
		├ UserDefine.js
		├ Recommendation.js
		├ MyPage.js
	├ App.js
	├ index.css
	├ index.js

UI

Details

Recoil

component 내 data 이동이 많아 state를 유연하게 관리하기 위해 필자는 Recoil을 사용하였다. App.js에서 state 관리가 이루어지기 때문에 index.js 에서 컴포넌트를 RecoilRoot 로 감싼 후, data 이동을 관리하였다.

1	import { RecoilRoot } from "recoil";

ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById("root")
);

Axios

server와의 통신을 위해 필자는 axios 를 사용하였다. 기본적으로 생성한 객체는 다음과 같다.

1	import axios from "axios";

const instance = axios.create({
  baseURL: "http://203.255.176.80:5016",
  timeout: 1000
});

세부적인 API는 서버가 구축된 후 구현할 예정이다.

Back-end

서버의 경우 Data2Vis의 웹 데모 오픈 소스에서 webserver.py 를 본 팀의 프론트엔드에 맞게 변형하여 라우팅 및 기능을 구현하였으며, 모델의 경우 직접 학습시킨 model.ckpt-15000 을 연동시켰다.

Conclusion

본 팀은 현재 Recommendation System Model을 서버에 올려 메인 기능인 "추천 플랏 보여주기" 을 구현하였다.

이후,

남은 메인 기능 구현
그에 따른 서버 연동
모델 수정
배포

등을 수행하고, 이 과정에서 Plotly 와 같은 다양한 모델과 그에 따른 JavaScript 라이브러리를 이용하여 더 나은 서비스를 구축할 예정이다. 결론적으로 목표하는 바는 Customizing Recommended Data Visualization Plots 을 제공하는 서비스의 완성도를 높이고 직접 배포한 후 유지, 보수 관리를 꾸준히 이어나가는 것이다.