대학별 실시간 경쟁률 확인 사이트 제작기

서론

코딩을 엔트리로 처음 입문한 초딩 시절을 지나 그냥 저냥 지냈던 중딩, 그리고 고1, 고2를 지나 결국엔 오지 않을것 같았던 고3 대학 원서접수철이 되었다.

나는 공부를 잘하는 편은 아니기에 그냥 대충 성적에 맞게 대학을 알아보고 있었는데 친구에게 연락이 왔다.

"대학별로 실시간 경쟁률 볼수 있는 프로그램 만들어줘"

그냥 진학사 경쟁률 페이지 들어가서 보면 되는거 아니냐고 되물으니 대학교 여러개를 돌려가며 보는게 불편하니 한곳에서 모와보고 싶단다.

귀찮긴 하지만 만들면 나도 꽤 유용하게 쓸거 같기도 하고 재밌어 보여서 개발에 들어갔다.

 

개발 - 백엔드

프레임워크는 항상 그랬듯 ExpressJS로 시작하였다. 요즘 NestJS를 조금 깔짝여보고 있긴 하지만 이건 원서접수기간인 일주일안에 빠르게 제작해야했기에 빠르게 개발할 수 있는 ExpressJS로 선택하였다.

경쟁률을 보는 사이트이기에 경쟁률을 불러올 수 있는 API가 필요하지만, 안타깝게도 진학사에서는 공식적(공개적)으로 경쟁률을 제공하는 API를 제공하지 않는다. 그러기에 뒷문(?)을 찾아서 경쟁률 정보를 가져와야한다. 진학사와 유웨이는 SSR(Server-Side-Rendering)을 사용하여 대학별 경쟁률을 표시해주기 때문에 직접 사이트의 HTML을 파싱해줘야했다.

우선 진학사 스마트 경쟁률 페이지에 들어가 대학 목록 리스트를 찾아주었다.

여기서 우리가 볼것은 'hdnResultNow' 값이다. 여기에는 아무 조건을 걸지않고 검색했을때 경쟁률 페이지로 인도해줄 URL 정보가 포함된 JSON이 들어간다. 이 JSON을 그냥 사용하기에는 구조가 약간 더럽다(?)

그렇기에 한번 가공을 통해 필요한 정보만 정리한 JSON으로 변환해주었다.

이제 특정 대학의 경쟁률 페이지에서 특정 전형/특정 과의 경쟁률을 크롤링해주는 코드를 작성해주었다.

진학사 제공 경쟁률 페이지는 표마다 각각 데이터에 해당하는 셀마다 클래스가 잘 붙어있어서 크롤링이 수월했다.

좀 까다로웠던건 유웨이 제공 경쟁률 페이지였는데, 얘내들은 클래스에 무슨 셀인지를 적어놓질 않고, 학과마다 표 구조가 약간씩 달랐다.

덕분에 마음에는 안들지만 좀 더러운 분기문을 써서 어찌저찌 제대로 긁어오도록 처리하였다.

이후 이를 핸들링해주는 Router 코드와 응답속도 개선을 위한 간단한 캐시를 적용하며 백엔드를 마무리 하였다.

개발 - 프론트엔드

프론트엔드는 디자인에 재능이 없기 때문에 그냥 bootstrap으로 딸깍해주었다.

깨알같이 면책조항도 써두었다.

데이터는 추가할때마다 localStorage를 사용하여 저장하게 하였고, 브라우저 변경등에 대응하도록 목록 내보내기/불러오기를 추가하였다.

후기

이렇게 하루만에 주요 기능을 완성하고 친구들에게 웹페이지 URL를 주었을때 친구들은 아주 만족하였다.

비록 크롤링이라는 한계에서 오는 어쩔수 없는 불편함(학과/전형 자동완성 안됨, 정확히 입력 안하면 조회안됨 등등)은 있었지만 친구들은 돈받고 팔아도 되겠다며 극찬을 날려주었고, 동시에 황금돼지띠인 이번 Team 07의 엄청난 경쟁력(...)을 한눈에 보여주게되며 절망 역시 심어주게되었다.

원서접수기간인 일주일 안에 최대한 빨리 개발해야한다는 제약때문에 아쉬움이 좀 남았긴하지만, 그래도 이정도면 나름 만족스러운 결과물이 뽑힌거 같고 또 친구들도 만족하며 써주니 나름 뿌듯하다.

---

프로젝트 Github: https://github.com/bass9030/univ-live-ratio

GitHub - bass9030/univ-live-ratio