4. 페이지 레이아웃 디자인 및 변경

이번 활동 요약

---

이번주에는 페이지를 어떤 식으로 구성할 것인지 레이아웃 을 정하고, 디자인을 고민했다.

지난번에는 Union-Find를 통해서 Community를 Detection하고 각 커뮤니티마다 다른 색상을 칠하는 게 가능한 것까지 확인했다.
이번에는 기존에 있던 페이지를 Migration할 때 기존 기능을 어떻게 구현하고, 디자인할지를 고민했다.

기존에 있었던 페이지의 문제점은, 사용자와의 상호작용이 불가능하다는 것이다.
옵션을 선택한 후 그래프를 요청하면 서버에서 그래프를 그린 다음 pdf 형태로 내려주는 방식이었다.
우리는 리액트를 사용해서 사용자와 실시간으로 상호작용을 하며, 옵션을 적용할 수 있는 형태로 바꾸고자 현재 프로젝트를 진행 중이다.

레퍼런스

---

옵션을 적용하면서 실시간으로 시각화를 하는 페이지를 만들기 위해 여러 시각화 사이트를 참고 했다.

그러다 우리가 원하는 느낌의 사이트를 발견했다.
Flourish라는 시각화 사이트인데, 우리가 구현하고자 하는 시각화 툴과 약간은 느낌이 다르지만 실시간으로 뭔가 그려낸다는 점에서 유사했다. 그리고 무엇보다 여러 옵션을 적용할 수 있다는 점에서 참고할만했다.

https://app.flourish.studio/projects

Flourish | Data Visualization & Storytelling

 

페이지의 구성은 아래와 같다.

Flourish

우측에 토글의 형태로 옵션들이 주어지고, 적용함에 따라 새롭게 그림을 그려준다.
우리도 이와 유사하게 페이지를 구성하면 좋겠다고 생각했다.

 

기존의 기능

---

기존의 페이지를 보면서, 어떤 기능들을 우리가 그대로 가져와서 구현해야 할지 알아보았다.

1. Organization Name

특정 조직 또는 조직 그룹을 선택하여 분석 시 제외 시킬 수 있도록 지정하는 옵션으로,
Type 1 ~ 4는 감염병 발생시 신설유무, 조직의 기능 유형에 따라 분류한 것.

2. Temporal Framework

감염병 대응 기간에 대하여 3단계 (early, peak, warning)으로 나누어 져있고,
이를 각 단계별로 분석할 것인지, 전체 기간을 분석할 것인지 지정하는 옵션 입니다.

3. Network Type

한국 MERS 데이터의 2가지 네트워크 중 하나를 선택 하는 옵션

4. Node Removal Method

Organization name에서 지정한 조직들을 제거할 때, 지정된 조직들과만 직접 연결된 이웃 노드를 같이 제거할 것인지를 선택 하는 옵션

5. Output Language

분석 결과데이터(조직명)에 대하여 언어 선택 하는 옵션

6. Network Visualization

시각화 데이터 분석 유무를 선택 하는 옵션

 

이렇게 설명이 되어 있었지만, 아직은 정확히 어떤 기능들인지 감이 안와서 다음 미팅때 조교님께 여쭤봐야 할 것 같다.

 

고민했던 부분

---

프로젝트를 진행하면서 고민했던 부분

 

데이터베이스

기존의 페이지는 데이터 베이스가 따로 존재하지 않고, csv 파일에 저장된 데이터를 읽어서 옵션과 함께 서버에 전송한 다음, 서버에서 그린 그림을 프론트로 가져와서 다운로드 받을 수 있게 하는 방식이다.

서버라기 보다는 파일을 읽어서, 그래프를 그리는 것에 불과했다.

그렇게 많은 파일과 기능들이 있지 않아서, 모노레포로 구성이 되어 있었다.

그런데 우리가 생각하기에는, 이전 팀이 진행했던 크롤링 기능을 이용해서 기사를 수집한 다음 수집한 데이터를 프론트에 반영하려면 서버가 있어야 할 것이라 생각했다.

데이터가 변경될 때마다 csv 파일을 수정하고 새로 배포하는 것은 너무 번거로운 일이었다.

또한 모든 데이터를 프론트에서 가지고 있으면 프로젝트의 크기가 너무 커지기 때문에 그것도 부담이다.

그래서 데이터 베이스를 만들어서 서버를 구축할 것인지 논의가 필요했다.

 

기능

기존에 있던 기능중에 어떤 기능을 가져가고, 또 어떤 기능들을 추가할지를 생각해야 했다.

그런데 아직은 기존의 기능에 대한 이해가 부족했기 때문에 이 부분부터 해결을 해야 했다.

역시 다음 미팅에서 자세하게 여쭤봐야 할 것 같다.

 

미팅 결과

---

미팅에서 교수님과 조교님께 앞으로의 진행 방향에 대해서 논의를 드렸다.

앞서 말했듯이, 데이터를 쉽게 넣고 빼기 위해서는 데이터 베이스를 구축하는 것이 좋을 것 같다고 말씀드렸고 상호작용을 쉽게 하기 위해서는 데이터 베이스를 구축하는 게 좋을 것 같다고 교수님도 말씀하셨다.

또 기존의 기능들에 대해서 어떤 기능을 살리고 어떤 기능을 추가할지에 대해서는 조교님이 추가적으로 논의를 해보자고 말씀하셨다.

그럼 또 한가지 문제는 데이터 베이스를 AWS의 RDS 처럼 클라우드에 데이터베이스를 띄워놓을지,
아니면 지금 연구실에서 사용되고 있는 서버 컴퓨터에 로컬 데이터 베이스를 생성할지가 고민이었다.

그렇게 많은 종류의 API가 필요할 것 같지 않았고, 사용 대상이 일반 사용자들이 아니기 때문에 유저풀이 그렇게 많지는 않을 것으로 예상했다.

클라우드에 데이터 베이스를 띄우게 되면, 추가적인 비용이 발생하기 때문에 더 고민이었다.
비싸고 성능 좋은 서버 컴퓨터를 두고 굳이 그렇게 하지 않아도 될 것 같다고 결론을 내렸다.

서버 컴퓨터에서 백엔드 서버를 돌리고, 프론트 서버만 외부에서 호스팅을 하면 비용이 많이 발생하지 않을 것 같았다.
문제는 백엔드를 로컬에서 돌리는 방식으로 배포해본 적이 없다는 것이다. 물론 백엔드에 대한 경험도 많지 않지만, 더 특수한 상황이라 잘 알아봐야 할 것 같다.

조교님이 서버 컴퓨터를 원격에서 접속할 수 있도록 도와주시면 작업을 해봐야 알 것 같다.

 

추후 진행 방향

---

미팅을 바탕으로 앞으로 어떤 것을 어떤 식으로 진행해야 할지 정리했다.

 

1. 서버 구축

일단 배포는 나중으로 미루고, 먼저 로컬에서 백엔드 서버를 구축하는 것에 우선순위를 뒀다.

우리는 요즘 많이 사용되는 NestJS를 사용해서 백엔드를 구축할 것이다.

2. Measure 기능

조교님이 Degree를 측정한다던가, 그래프의 Depth를 측정한다던가 등의 기능이 추가적으로 필요할 것이라 하셨다.

일단은 지금 우리가 시각화에 사용하고 있는 Cytoscape에 그런 기능이 있는지를 알아봐야 할 것 같다.

3. Landing Page

기존 사이트에는 상단에 페이지에 대한 설명과, 사용 방법이 적혀 있었다.

그런데 우리는 웹 사이트에서 바로 그래프를 시각화해서 보여주기 때문에 설명을 상단에 적게 되면, 시각화하는 부분이 적어져서 불편할 것 같았다.

그래서 랜딩 페이지를 따로 만든 다음에, 특정 버튼을 클릭하면 시각화 페이지로 넘어가는 방식으로 구현할 것이다.