학교 디지털 출결 시스템 만들기
이 프로젝트는 학교에서 쓰던 수기 출결 방식이 불편하다고 느껴서 시작했습니다. 매번 종이로 확인하고 정리하는 과정이 비효율적이라, QR코드로 출결을 처리할 수 있으면 훨씬 편하지 않을까 생각했습니다.
1. 기획
처음에는 지문인식, RFID 카드, QR코드 같은 방식을 같이 생각했습니다. 하지만 학교에서 실제로 쓰려면 비용과 접근성이 중요했습니다. 그래서 가장 현실적인 QR코드 방식을 선택했습니다. 네이버 QR코드 로그인처럼, 사용자마다 고유 QR코드를 보여주고 스캐너가 이를 읽는 구조를 생각했습니다.
기술 스택 선정
- Frontend: Vanilla HTML
- Backend: Express.js & Node.js
- Database: MongoDB
- 인증/보안: JWT & bcrypt
- UI/스타일링: Tailwind CSS
개발은 Claude 3.5 Sonnet의 도움을 많이 받았습니다. 먼저 백엔드 흐름을 잡고, 그에 맞춰 프론트엔드를 붙이는 방식으로 진행했습니다. 프론트엔드는 React도 고민했지만, 당시에는 빠르게 완성하는 게 더 중요해서 Vanilla HTML을 선택했습니다.
2. 개발 과정
📁 프로젝트 루트
├── 📁 css
├── 📁 js
├── 📁 node_modules
├── 📄 change-password.html
├── 📄 dashboard.html
├── 📄 find-password.html
├── 📄 hub.html
├── 📄 index.html
├── 📄 package.json
├── 📄 package-lock.json
├── 📄 qr.html
├── 📄 reader.html
├── 📄 signup.html
├── 📄 statistics-dashboard.html
└── 📄 tailwind.config.js
프로젝트 구조는 대략 다음과 같습니다.
index.html: 로그인 페이지hub.html: 사용자 권한에 따른 분기 처리- 일반 사용자:
qr.html로 자동 리다이렉트 - admin/reader 권한: hub 페이지에서 메뉴 선택 가능
- 일반 사용자:
qr.html: 30초마다 자동 갱신되는 암호화된 QR코드 표시reader.html: QR코드 스캔 페이지
관리자 대시보드에서는 사용자 승인과 권한 관리를 할 수 있게 만들었습니다.
통계 대시보드는 가장 공을 들인 페이지입니다. 전체 출결 현황과 개별 학생의 상세 통계를 볼 수 있게 만들었습니다.
병결처럼 특별한 사유가 있는 경우를 위해 인정출결 처리 기능도 넣었습니다.
나이스 학사일정 API를 연동해서 주말과 공휴일을 자동으로 반영하도록 했습니다.
출석, 지각, 결석 기준 시각도 설정할 수 있게 했고, 시간이 지나도 기록이 없으면 자동 결석 처리되도록 만들었습니다.
추가로 React Native를 활용해서 하이브리드 앱도 만들어봤습니다.
3. 마무리
2024년 9월부터 12월까지 제 학급에서 시범 운영을 해봤고, 실제로 어느 정도 작동하는 것을 확인했습니다. 만들 때는 기능 구현이 가장 큰 문제라고 생각했는데, 운영해보니 사용자 승인, 예외 처리, 기준 시간 같은 작은 정책들이 훨씬 중요하다는 걸 느꼈습니다.
앱 출시는 당시 나이 제한 때문에 바로 진행하기 어려웠지만, 이 프로젝트를 통해 학교 안의 실제 문제를 소프트웨어로 풀어보는 경험을 할 수 있었습니다.