👨‍💻 수업 대시보드 제작 후기 (부제: 컴공이 코로나 19를 대응하는 자세)

 

소개

 

3학기 연속 TA

 

졸업과제 시절 방학 거주비를 벌기 위해서 18년 12월 비전공자를 위한 인공지능 강의를 교재 개발을 하였으며 그리고 3학기 연속 TA를 맡아서 강의를 운영하고 있습니다.

정규학기가 끝나지 않았지만 온라인 강의는 끝나고 프로젝트 기간이며 대시보드의 큰 수정은 없을것 같기에 대시보드 운영 회고록을 남깁니다.

 

😖 많아도 너무 많다...

 

단 하루만에 공지와 질문이 뒤셖여...

 

Piazza라는 낯선 플랫폼에서 { 질문, 공지, 과제 제출 }이 이루어짐 + 처음 수강 시 환경 설정의 어려움 + 수업 영상 및 자료 링크 업로드로 인해 하루에도 질문과 공지가 섞여서 수십 개가 올라갔습니다. 수강생들이 공지를 숙지하지 않고 과제를 제출하였으며, 1주차 설문조사에서 Piazza가 복잡하다고 하다는 피드백을 받고 대시보드를 제작을 결심하였습니다.

세 시간 만에

 

세 시간만에 만든 작품 [구경가기 링크]

 

HTML, CSS, Bootstrap, 그리고 Github Page를 이용한 무료 배포로 쉽게 만들 수 있었습니다. 규칙적인 과제의 경우 표를 보면 어떤 과제가 앞으로 계획되어있는지 별도의 공지를 하지 않더라도 있었기에 전달하기에 좋았습니다. 대시보드를 만들고 공지를 숙지하지 않아 생기는 문제는 없었습니다.

그러나 한 번에 한 학기 예정된 모든 과제, 퀴즈를 표로 보여주니 수업에 부담을 느끼고 수강 취소하는 학생들이 생겼습니다. 오프라인 수업이었다면 끌고 갈 수 있었는데..

🌸 벚꽃 낭만을..

 

 

벚꽃이 내려요~ [구경가기 링크]

 

전공 생활하면서 벚꽃 구경을 마음 편하게 해 본 적이 없어서, 이번에 마음먹고 해보려고 했으나 코로나로 인하여 불가능했기에 웹으로 구현했습니다.
벛꽃과 움직이는 자바스크립트 함수는 오픈소스를 이용했으며 대시보드에 맞게 떠어지는 속도, 이동거리, 벚꽃 색 등등 수정했습니다.
백엔드 개발자라 디자인 센스가 떨어지는데 우연히 블러 처리된 배경을 넣었는데 느낌 있어서 넣어서 배포했습니다.

⚛️ 리엑트로 바꾸자

 

다 나눠나눠~

 

가장 크게 Header 부분과 Container로 나누었습니다. Container는 강의 / 프로젝트 / KMOOC 강좌 일정 / 점수로 나누었습니다. 일정을 바꾸거나 표를 추가하려고 한다면 해당 리엑트 파일만 수정하면 되기에 Ctrl + F는 더 이상 사용하지 않아도 되었습니다.

 

그렇게 완성한 ⭐⭐[리액트로 개발한 페이지 구경가기 링크]⭐⭐

 

수업이 6주차를 넘어가면서 표가 점점 길어져서 새롭 값을 추가하거나 변경하려면 Ctrl + F 신공을 발휘해야 했습니다. 또한 다른 TA가 다음 학기에도 활용하기 위해서 그대로 두어서는 안되었습니다.

구름 과제를 하면서 급하게 공부한 리엑트를 이용해서 개발하기로 하였습니다.

디자인 영감은 poiemaweb을 운영하시는 Ungmo Lee님의 페이지에서 영감을 받아서 SPA 상황에 맞게 개발하였습니다.

 

커버 이미지

 

새롭게 바뀐 표

 

래퍼런스 디자인의 색상이 너무 강렬해서 색을 다운했습니다.

 

28일 동안 총 페이지 뷰

수강생 약 30명이 약 900회의 페이지 뷰가 발생했습니다.(이곳저곳 자랑했지만..) 실용적으로 프론트앤드를 잡아본 것은 웨일 앱 개발 이후 (궁금하시다면? 🐋 2019 웨일 확장 앱 콘테스트 개발 이야기) 오랜만이어서 재미있게 개발하였습니다.

 

앞으로 더 재밌는 개발을 위하여~👨‍💻🔥🔥