[영국유학] 미리 가보는 University of Bristol: 코로나 시대... 공대생의 사이드 프로젝트 (코로나 현황 페이지 - 1화)

2020.11.20

안녕하세요 13기, Unversity of Bristol, Electrical and Electronic Engineering 3학년 재학중인 김종윤입니다!

원래 계획대로였으면 방학중에 글을 한두편 더 올리려고 했으나 출국 준비에 정신이 없던지라 몇 편 못 올리게 된거 같습니다.

 

이번 글은 계획대로 올라갔을 글에 연결되는 내용이지만 순서를 뒤집어서 풀어가볼까합니다.

순서를 뒤집어 전체 글의 개요와 웹페이지 공유부터 해드리고자합니다.

(글보다 웹페이지 먼저 보고픈 분들을 위해 위에도 링크를 넣겠습니다!)

http://johnjongyoonkim.eu.ngrok.io/

 

#0. 코로나....? 우한 바이러스 이게 뭐야

제가 2월말에 겪은 반응 그 자체입니다. 당시 2학년 2학기가 막 시작되서 랩 수업에 정신이 없던 상황이라 한국 뉴스는 물론 영국 뉴스도 잘 안보고 있었죠. 그러다 무언가 위험한 바이러스가 퍼지고 있다는 소식을 부모님을 통해 듣게 되었고 그러고 얼마 지나지 않아 학교를 휴교할 거란 소문이 돌기 시작합니다.

 

#1. 한국으로 돌아...가야하나?

전 처음엔 대수롭지 않게 유럽은 그래도 확진자가 별로 나오지 않는다는 생각에 괜찮을 거라고 느꼈습니다. 하지만 곧 영국에서도 확진자가 조금씩 나오기 시작했고 많은 다른 지역에 거주 중인 친구들이 한국으로 귀국편 티켓을 끊기 시작했습니다.

저는 공대생인지라 수업도 많고 시험도 많은 지라 엄청 위험한 상황이거나 학교의 휴교가 확정되기 전까지는 귀국하지 않으려고 했습니다.

그렇게 2월말~3월초, 학교에서는 랩 수업을 제외한 모든 오프라인 수업을 취소하고 온라인으로 전환한다는 공지를 보냅니다.

해당 공지와 함께 시험에 대해서는 아직 논의중이지만 큰 규모로 축소 혹은 온라인 퀴즈 형태로 전환된다는 내용도 있었죠.

덤으로 갑자기 생긴 재해와 같은 일이었기 때문에 Safety Net (간략하게 말해 이전에 해당 학생의 성적을 참고하여 이번 성적이 낮더라도 평균으로 반영하는 규정입니다.

실제 규정은 좀더 복잡하고 20/21 academic year부터는 적용하지 않는 다고 하니 여기서 말 줄이겠습니다.)도 적용한다는 내용도 있었죠.

이렇게 학업에 대한 텐션이 갑자기 풀려버리니 저로썬 마땅히 뭘 할게 없어 허무해졌습니다.

그때 한국에서 정부보다 앞서 코로나 지도를 만들어서 화제라는 뉴스를 접하게되고 저는 Global 코로나 현황을 보여줄 수 있는 웹페이지를 개발하고자 했습니다.

 

#2. 프런트엔드.. 백엔드.. 데이터베이스...? LAMP...? 이게 뭐지..?

단순히 프로그래밍 좀 할 줄 안다고 웹페이지 만들려고 했던 저는 금세 벽을 마주하게 됩니다. 데이터의 저장, 이용, 이동 등에 대한 내용과 관련한 프레임워크나 라이브러리에 대한 지식이 없었고, 서버에 대한 내용도 제대로 공부한 적이 없었기 때문이죠.

그래도 당장 공부할 것도 사라졌겠다 라즈베리파이라는 소형 SoC (System on Chip) 컴퓨터를 서버로 놓고 이것저것 해보기 시작했습니다.

LAMP (Linux, Apache, MySQL, PHP)도 설치하고 기본 웹페이지도 만들어서 로컬(localhost: 쉽게말해 개인 네트워크, 해당컴퓨터에서만 접속가능한 상태입니다.)에서 접속도 해보았습니다.

이때의 경험은 다른 에피소드로 후술하겠지만 이땐 정말 아무것도 몰라서 서버에 이것저것 설치하면서 고장도 나서 포맷만 10번 넘게 했던거 같습니다. 이때 사용했던 서버는 스펙이 낮았던지라 지금은 테스트용으로, 새로 구매한 고스펙 라즈베리파이로 서버를 돌리고 있습니다.

 

#3. 첫 코로나 현황 웹페이지

이전에도 장고(파이썬 프레임 워크)등을 이용해서 야매(?), 주먹구구로 만든 웹페이지가 있던지라 비슷하게 웹페이지를 구성했고...

보기좋게 작동하지 않았습니다. 허허

그래서 잘 알지도 못하는 기술, 프레임워크, 라이브러리 모두 제거하고

90년대에 사용하던 방식으로 HTML 스크립트에 직접 링크를 걸어가며 웹페이지를 만들었고 호스팅하는 방식도 구버전을 따라갔습니다.

역시 현대 기술의 기반이 되는 기술인지라 모든 게 정상적으로 작동했습니다. (그 때 제작한 웹페이지는 아래 screenshots으로 첨부했습니다. 생각보다 굉장히 조잡해요 ㅎㅎ)

undefined

 초기 코로나 현황 페이지

undefined

초기 코로나 현황 페이지 - 그래프

#4. 인턴...? 예?

이러다 좋은 친구를 둔 덕과 이 친구가 제가 하는 프로젝트에 대해 인지하고 있던 덕분에 네이버에 인턴을 지원할 수 있는 좋은 기회를 얻게 됩니다. (네 여기서 말하는 친구는 13기 김유빈입니다. ^^)

이때의 경험도 다른 에피소드로 후술할 예정입니다.

인턴을 하며 배운 여러 기술과 스킬 덕분에 제 웹페이지를 좀더 잘 구성된 페이지로 업데이트할 수 있게 됩니다.

프런트엔드 - 백엔드 - 데이터 베이스 의 관계 그리고 REST api를 통해 데이터를 주고 받는 과정까지 모두 구현하게 됩니다.

그리고 서버에서 유저를 받는 방식도 nginx와 도커를 활용해 좀더 빠르게 바꾸었습니다.

아! 너무 기술적인 내용을 많이 이야기한 듯하네요. ㅎㅎ 기술적인 부분은 다른 에피소드나 개인 블로그를 통해서 하고 바로 지금 웹페이지 공유하고 마치도록 하겠습니다. :)

 

#5. 현재의 웹페이지

이젠 프런트엔드 프레임워크를 사용하여 좀더 보기좋고 사용하기 편리하게 변경되었습니다.

undefined

현재 코로나 현황 웹페이지 - Home

사실 해당 웹페이지 업데이트는 3달전에 완료하였으나..

영국에 온뒤 영국이 지역별 확진자 자료 공개가 잘 안되어 있고 되어 있다하더라도 찾기 힘들었습니다. 그래서 제 웹페이지에 영국 데이터를 따로 볼수 있게 추가했고 기존에 진행하고 있는 오늘, 내일, 다음주 확진자 예측 모델도 적용하여 어제 마무리 되었습니다.

(아래 링크 첨부합니다.)

http://johnjongyoonkim.eu.ngrok.io/

부족함 많은 웹페이지지만 여러분들에게 도움되길 바라는 마음에 공유합니다. (개선사항이 있다면 해당 웹페이지에 게시된 제 이메일로 보내주세요! 시간되는 데로 바로 반영하겠습니다! XD)

영국에 계신 선후배 분들, 한국에 계신 선후배 분들 모두 건강 조심하세요!

특히 영국에서 확진자수 찾느라 바쁜 분들이 이용하시면 좋을 듯합니다. (제가 그래서 만들게 되었거든요 ㅎㅎ)

(너무 두서없게 작성된 점 죄송합니다. ㅠㅠ 논문읽다 멍한 상태에서 쓰다보니 ㅠ)

undefined

로그인


Reset Password 회원 가입하기