[Dev Course Monthly 프로젝트]#1 인공지능 데브코스, 데이터 시각화 웹페이지 만들기

Introduction

django를 사용해서 웹페이지를 만들고, 그것을 aws를 활용해 배포하는 프로젝트를 진행해 보았다.

웹페이지 생성을 위한 조건은 다음과 같다.

• EDA한 결과를 웹 상에서 확인할 수 있는 웹 페이지를 만들어주세요.
• 웹 어플리케이션은 서버에서 배포되어야합니다.
• Django를 이용하는 경우, uWSGI와 Nginx를 추가적으로 사용해야합니다.

추가 조건은 다음과 같다.

• 정해진 EDA 코드의 결과가 아닌, 웹페이지 상에서 코드의 parameter를 조정할 수 있는 기능을 추가한 동적 웹 페이지를 만들어봅시다.
• Bootstrap 등을 이용해 웹 페이지의 디자인을 쉽고 깔끔하게 꾸밀 수 있습니다.
• JavaScript 등을 이용해서 웹을 더욱 다이나믹하게 꾸며봅시다.
  동적인 시각화를 위해서 Javascript의 D3.js 라이브러리를 사용하셔도 됩니다.

Obstacles

웹페이지 구성을 위한 대략의 과정은 수업에서 배운 내용을 활용할 수 있었다. 하지만 uWSGI와 Nginx를 활용하는 부분에서는 막혀버렸다. 해결을 위해 여러 블로그와 해외 사이트들을 헤맸지만 그 시간이 길어지다보니 작업의 효율성이 떨어지는 것 같아 서버를 django의 내장 서버로 구동하는 방식으로 타협을 하기로 했다.

Output

server url : http://3.38.22.205:8000/
github code : https://github.com/clayryu/clayryu

클라우드 서버의 플랫폼으로 AWS lightsail을 이용했다. 하지만 3개월 무료 이용 이후에는 일단 서버를 닫아야할거 같아서 결과물의 이미지를 첨부한다.

1. Intro page
   

• video game sales라는 kaggle의 데이터셋을 이용했으며 그것을 EDA했다는 내용을 간략하게 인트로 페이지로 작성했다.
• velog의 주소와 사용한 Data셋의 링크를 연결해두었다.
• learn의 링크로 결과물을 볼 수있는 페이지를 연결해주었다.

2. analysis page
   

• 게시판의 형식으로 /admin 링크에서 게시글을 만들고 그것을 /blogMain에서 확인 할 수 있게 만들었다.
• About Data는 앞선 intro페이지로 연결하게 만들었다.
• 앞선 intro와 analysis 페이지의 화면은 bootstrap의 source code를 적용해보았다.
• 자세히알아보기 링크로 해당 게시글이 내용을 확인할 수 있도록 했다.

3. detail page
   
   
   

• 게시글의 내용으로 EDA의 과정을 볼 수 있다.
• 앞선 intro, analysis 페이지로의 이동이 가능한 링크를 상단에 만들어 두었다.

Left to do & Questions

• 일정에 맞추는 것을 우선 순위로 두다보니 완성도가 많이 떨어지는 것을 알고도 그냥 넘어가게 되었다. 또한 웹페이지를 만들기 위해 구상한 것들이 몇개 있었지만 배포에 얼마 만큼의 시간이 걸릴지몰라서 일단 미뤄두었고, 배포에 예상보다 시간이 많이 투자가 되어서 미뤄둔 것들은 그저 미뤄두게 되었다.
• 개인적으로 본인이 처음에 어떤 것을 잘해내는 재능이 있는 존재(?)가 아니라고 생각하기에 우선 전과정을 경험하는 것을 목표로 두었다. 분명 다음에 또 웹페이지를 개발할 기회가 올 것이고 그때는 이번보다 좀더 좋은 결과를 낼 수 있을거라 믿는다.
• 추가로, 진행을 하며 막히는 부분들을 뚫어내는게 성취감이 있지만 동시에 좌절감을 느끼게 하는 점들이 많은 것 같다. 이번에 작업은 다른 사람의 작업을 따라가며 만들어갔는데 그 와중에서도 사용하는 프로그램들의 버전 차이로 인해 달라진 것들, 내용의 선택 취합에서 오는 수정에서 만들어지는 사소한 문제들은 계속 발생을 했고 서버의 배포에서는 결국에 완전히 막혀버렸다. 개발자분들은 대단한거 같다.