이 프로젝트는 학교에서 쓰던 수기 출결이 불편해서 시작했습니다. 매번 종이로 확인하고 정리하는 게 비효율적이라, 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월까지 제 학급에서 돌려봤고, 실제로 어느 정도 작동하는 걸 확인했습니다. 만들 때는 기능 구현이 제일 큰 문제라고 생각했는데, 막상 돌려보니까 사용자 승인이나 예외 처리, 기준 시간 같은 작은 정책들이 훨씬 손이 많이 가더라고요.
앱 출시는 그때 나이 제한 때문에 바로 못 했습니다.