본문 바로가기
코딩 이야기/자바스크립트(JavaScript)

수능 점수 분석 사이트 만들기 (with AWS Lightsail & Netlify.com)

by 아재코더 2021. 12. 13.
수능 점수 분석 사이트 만들기

그동안 살펴본 파이썬과 자바스크립트를 이용하여 수능 점수 분석 사이트를 만들었습니다. 2~3년 전 아들내미 진학 과정에서 필요하다 싶었던 사이트를 이제서야 만들게 됩니다. (유료사이트는 많이 있지만 그래도 한 번쯤 만들어 보고 싶었답니다.)

 


대부분의 사용자 정보는 HTML로 입력받아 자바스크립트로 과거 입결 자료를 바탕으로 예상 합격선 자료를 만들고 비교하여 결과를 뿌리게 되며, 게시판 페이지는 파이썬 플라스크를 배우며 만든 사이트를 연결하였습니다.

이번 수능 점수 분석 사이트를 만들며 많은 우여곡절을 겪었습니다. 특히 과거 대학 입결 자료를 수집하고 해석하는 과정이라던가 종전과 많이 달라진 입시환경에서 대학별 예상 합격 데이터를 가공하는 부분, 그리고 기술적으로는 메인 사이트와 게시판 사이트를 연결하는 과정이 코딩 초보 입장에서는 쉽지 않았네요. 웹 사이트를 만들고 배포하는 전 과정이 익숙하지 않아 구석구석 부족한 부분이 많고 아마 생각하지 못한 오작동도 있겠지만 우선 배포했습니다. 그리고 시간을 두고 차근차근 수정할 예정입니다. ^^

전체 웹페이지는 나름 깔끔하다고 생각되는 부트스트랩이 적용된 템플릿 하나를 골라 작업을 진행했습니다.

수능 성적 분석 사이트 만들기 첫 화면

간단한 웹페이지를 하나 만들어도 코딩 설계가 필요하다는 것을 경험해 본 터라 전체적인 메뉴 구성과 각 메뉴마다 구현할 기능을 염두에 두고 코딩을 시작했습니다. 게시판을 포함하여 각 메뉴는 페이지 이동이 없도록 한 페이지로 구성했으며, 메뉴를 클릭하면 해당 영역으로 스크롤 되는 템플릿을 사용했습니다. (그나마 간단해 보여서 ^^)

과목별 점수 입력 폼

2021년 6월 모의고사 고3의 표준점수를 입력하면 예상 누적 백분율과 등급이 표기되며 탐구 과목은 선택에 따라 과목이 변경될 수 있도록 했습니다. 최대한 사용자 입력에 실수가 없도록 각 과목별 최고 점수와 최저 점수 범위를 벗어나지 않도록 하였으며 입력된 점수와 가장 근사한 값이 자동 입력되도록 하였습니다. (등급 컷은 한국교육과정평가원의 공개 자료를 사용하였으며, 점수별 누적 백분위는 별도 계산하였습니다.) 그리고 필수과목이 모두 입력되어야 결괏값이 출력되도록 하였습니다.

지원하고자 하는 대학과 학과 선택 폼
 

지원하고자 하는 대학과 학과 정보를 HTML의 동적 select 태그를 통해 최대 3곳 동시에 입력할 수 있도록 하였습니다. 90여 개 대학 2500여 개 학과의 정보를 입력하였으며 폐지된 전공과나 과거 자료를 찾을 수 없는 신생 전공과는 배제하였습니다. (대학교육 협의회에서 공개한 학과 정보를 기준으로 반영하였으며, 과거 입결 자료는 대입정보 포털 사이트를 참고하였습니다.)

예상 합격 점수에 근접할수록 하트 마크를 많이 출력
 
정확도가 다소 떨어지지만 등급과 과목별 백분위를 활용하여 결괏값을 출력하게 만들었습니다. 학교별 전공별 과거 입결 자료를 최대한 반영하였으며 예상 합격 라인에 근접할수록 하트 마크가 많이 출력되도록 하였습니다.

 

AWS Lightsail 서버에서 게시판 기능 구현

AWS Lightsail에서 운영되는 게시판을 불러왔습니다. 아주 기본적인 기능만 구현하였으나 사용자 입력 정보(이메일, 암호 등) 보호를 위해 HTTPS(SSL 인증)로 접속되게끔 했습니다. (겉으로 드러나는 차이는 없어 보이나 HTTPS으로 접속하게끔 하기가 쉽지 않았네요. 오히려 사이트 접속 속도는 좀 더 느려지는 것 같습니다.)

웹 페이지에서 문의사항 등을 입력하면 개인메일로 발송되는 폼 추가

마지막으로 사용자 입력창을 만들어 개선사항 또는 문의사항을 제 개인 메일로 바로 받을 수 있도록 하였습니다.

 


공개된 과거 자료를 바탕으로 예상 합격 점수를 만드는 과정이 쉽지 않네요. 사이트의 기능적인 부분은 어느 정도 구현했지만 예측 자료들은 손봐야 할 게 많이 남았습니다. 조만간 정식으로 사이트를 오픈할 수 있도록 하겠습니다. 사이트 관련 궁금하신 내용 있으시면 댓글로 남겨주세요~^^

 

핵심 수능 점수 분석

고3 모의고사 수능성적 분석 및 지원가능 대학 예측

www.hxm.kr

 

댓글