대학교 Student Progress Tracker

안녕하세요 노마드 코더 여러분!

종종 이 커뮤니티에 사이드 프로젝트나 아이디어 공유했었는데요, 이번에는 제가 Maker Masterclass 들으면서 배운 React 지식으로 만들어본 새로운 프로젝트를 소개드려요. 🙌

개발자가 아닌 저도, Next.js 15 + React 18 + TailwindCSS + Node 22 조합으로 도전해봤습니다. 아직 React Router v7은 조금 익숙하지 않아서 Nextjs 기반으로 갔고요, shadcn도 버튼/카드 정도만 사용해봤어요. 😅 Tailwind부터 좀 더 익혀야겠단 생각이 드네요... (전 python은 그래도 쉽게 사용하는데, react는 왜 이렇게 어려운지 모르겠습니다...)

💡 프로젝트 소개: University Student Progress Tracker

제가 뉴질랜드의 한 대학교에서 근무하고 있는데, 학생들마다 매 학기 PDF로 발급되는 성적표(transcript)를 일일이 수작업으로 확인해서 수료 조건을 체크하고 있어요. 정말 아직도 눈으로 하나하나 확인하는 구조입니다... 🫠

그래서 이걸 자동화 해볼수있을까? -- 아이디어 자체는 Excel VBA와 Python으로 체크 기능을 해보고 UI로 만들어야지 다른 사람들도 알아들을거같아서 한번 도전해 봤습니다.

✅ 주요 기능

• PDF 성적표 업로드 → 자동으로 pass 과목 추출 (그래서 형식 맞는 PDF는 있어야함)

• PDF가 없다면, 수동으로 체크 가능.

• 합격 과목은 초록색 표시, 누적 포인트/과목수/진행률은 실시간 업데이트

• 각 프로그램(예: 간호학, 작업치료 등) 별로 조건 커스터마이징 가능

• Custom 과목도 수동으로 추가 가능

📷 간단한 화면 미리보기

🛠️ 기술 스택

• Next.js 15, React 18, Node 22

• TailwindCSS, shadcn/ui

• PDF parsing은 아직 실험 중인데, pdfjs 쪽으로 시도 중입니다

👨‍🎓 앞으로의 목표

이걸 실제 업무에 쓸 수 있을 정도로 다듬어서, 나중에 기회가 된다면 부서에 제안해보고 싶어요. 그리고 준비를 해놔야 갑자기 이런 프로젝트 나오면 뽑혀서 일 을 해 볼수가 있어서 지금 미리 해봤습니다.(대학교가 AI 도입이나 자동화에 좀 보수적인 편이라… 😓)

궁극적으로는 학생들이 성적표만 업로드하면 자동으로 진도 체크되고, 관리자도 쉽게 확인할 수 있는 시스템으로 발전시켜보고 싶습니다.

지금은 단순한 UI 단계이지만, 한 발 한 발 나아가 보고 있어요. 아직 많이 부족하지만, 여러분들의 피드백도 언제든지 환영입니다. 🙏

배포: https://aut-healthscience-tracker.vercel.app/

Git: https://github.com/LeConsulat2/aut-healthscience-tracker