동의대학교 공지사항 대시보드 구현
포스트
취소

동의대학교 공지사항 대시보드 구현

개요

모 학교인 동의대학교는 부서별로 운영하는 사이트가 정말 많고 사용하지 않는 사이트도 있습니다. 대표적인 예로는 학과 사이트, 학생 정보 시스템, 창업 교육 센터, 링크 사업, 학교 식단표, 기숙사 식단표 등 정말 기능 1개를 하기 위해서 1개의 사이트를 방문 해야하는 것이 매우 많은 귀찮음과 로그인을 해야지 볼 수 있었습니다. 그래서 해당 모든 자료를 한 곳에서 볼 수 있다면 효율적이고, 간편할 것이라 생각하여 진행한 프로젝트 입니다.

개발자

3월 중순에 갑작스럽게 시작된 토이 프로젝트 입니다. 개발자는 2022년 기준 1학년 후 휴학생인 INMD1차주형이 개발을 했습니다. INMD1 친구는 수집된 데이터를 시각화, 깔끔한 표로 그렸으며 차주형, 본인은 각 사이트의 데이터를 수집하고 한곳에서 json 형식으로 볼 수 있도록 제공 하는 서비스를 구현 하였습니다.

개발 계획

원래에는 공지사항을 가져 온 뒤에 안드로이드, 아이폰과 같은 모바일 기기에 출시할 계획 했었다. 공지사항을 가져와서 한군데에 모아서 처리를 하는 것 자체가 학교 정책과 맞지 않아서 이리저리 어떻게 하면 좋을까 하다가 우연찮게 TV가 보여서 TV에 공지사항을 나타내고, TV만 관리를 하는거라면 어떨까? 라는 아이디어가 나와 모바일을 갈아 엎고 TV에 크게 대시보드 형식으로 제공으로 계획을 변경 하였다. 처음에 모바일 기기에 출시할 때 웹앱을 기획 했었기 때문에 플랫폼에 상관없이 웹브라우저만 있으면 모두 동작하므로 플랫폼, 기기 변경에 자유로움이 있었다.

데이터 수집

학생 정보 시스템에는 비교과 프로그램이나, 취업 공지, 장학 공지등 유익한 학교 생활을 위한 공지사항이 올라온다. 하지만 여기에서 데이터를 가져오기 위해서는 “학교 정보 시스템”에 로그인을 필수적으로 해야지 정보를 가져 올 수 있기 때문에 단순 크롤링으로는 많은 어려움이 있었다. 그래서 dap 사이트에 로그인을 하고 값을 가져와야하는 번거로움이 있다. 그래서 학생 정보 시스템에 로그인을 하고, 각종 공지사항을 가져온 뒤 Github에 Issue로 등록하는 과정을 거친다. 그리고 로그인을 따로 하지 않아도 공지사항을 가져오는게 가능한 창업 교육 센터, 링크 공지, 학과 공지사항 정도는 Github Action을 통하여 매일 데이터를 수집하도록 하였다.

데이터 수집에 어려웠던 점

놀랍게도 학교가 중구 난방으로 시스템이 구축이 되면서 하나의 로그인으로 학교 모든 사이트에 자동 로그인이 되도록 하기 위해서 SSO 시스템을 도입했었다. SSO 도입을 진행 했지만 보안이 약하거나 쉽게 뚫리는 기술이 아니였다. 학교에서 도입한 시스템이 Pentasecurity사의 iSIGN+이였다. 처음엔 로컬로 테스트가 성공적으로 진행이 된걸 확인 한 뒤 Github Action을 통해 크롤링을 시도 하였다. 하지만 이것이 무슨일인가! iSIGN+ 인증에서 해외 프록시, VPN, 클라우드 환경 대역대를 모두 블락을 해놓아져 있었다. 와! 그래서 Github Action으로 코드를 돌리면 만사 오케이 였지만 Github Action은 접근 금지가 되어 있었기 때문에 학과 내 서버에 돌려야만 했다. 돌리기 위해서.. 당연하지만 쿠버네티스 환경이기 때문에 컨테이너로 만들고 배포 하였다. [컨테이너]에 배포하고 있다.

Argo 상태k8s 크론 상태Issue 상태
알고 상태알고 상태이슈

쿠버네티스 배포 상태

서버 접속 방법

서버는 현재 학교 대시보드에 배포 하고 있다. 해당 서버는 학교에 설치한 개인 나스에 접근 하여 Synology사의 리버스 프록시를 이용하여 서버에 접속하고 있다. 실제 서버 주소는 리버스 프록시를 통해서 가려졌다. 그 외에 현재 모바일기기로 개발 된 버전은 모바일 주소로 접근이 가능하다. 모든 도메인 주소의 주인은 필자가 가지고 있으며 SSL 인증서는 Cloudflare를 통해 사용하고 있다.

개발 결과물

최초 버전과 최종 결과물은 많이 달라지고 중요한 내용을 크게 변경 하였다. 그 외에 OpenWeather을 이용하여 날씨 정보를 가져와서 날씨를 출력하고, 업데이트 시간 정보, 의외로 보안이 강했던 학식 정보 였다. 그 외에 다양한 사람의 피드백을 통해 UI 수정, 유튜브 노래 재생 추가 하였다.

베타버전알파버전
이미지1이미지1

후기

무엇이든 도와줘서 추가해줬던 호준에몽! 고마워요!
개발을 진행 할 때 INMD1 학우가 UI 까지 완벽하게 하고자 하길래 먼저 프로토 타입으로 대충 UI만 작성하고 피드백을 받아 수정하기로 진행 했습니다. 그 덕분에? 인지 잘 모르겠지만 더 깔끔하고 변동 가능성을 주고 개발을 했기 때문에 더 좋은 퀄리티가 나올수 있었다고 생각합니다.

이미지가 작게 보여서 한번 더 크게 올립니다. 이미지1

후배 밥 사줘야지.. 열심히 일했는데

이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.

쿠버네티스의 서비스 앱 만들기

Pipe를 이용한 다른 프로그램간 통신