매점 프로젝트

학생용 웹

학교 매점의 학생용 웹을 구현했습니다. 학번과 비밀번호로 로그인하는 방식이며, 아래 링크에서 접속할 수 있습니다.

경소마고 매점 웹사이트 열기

로그인 화면

원본 이미지 보기 ↗

초기 키오스크 기획

학생은 키오스크에서 상품을 고르고 결제하고, 관리자는 웹에서 상품·재고·주문·학생 포인트를 관리하는 학교 매점 시스템을 기획했습니다. 백엔드와 데이터베이스 설계를 맡았습니다.

초기 키오스크 개발은 학교 측이 프로젝트에 긍정적이지 않아 중단된 적이 있습니다. 아래는 그때 정리한 설계와 검토 내용입니다. 현재 구현한 학생용 웹과는 진행 범위를 구분해 기록했습니다.

당시 기획한 주문 흐름

1. 학생이 상품을 골라 장바구니에 담습니다.
2. 키오스크 포인트를 사용할 때 학생증 NFC로 본인을 확인합니다.
3. 결제 직전에 재고를 확인하고, 결제가 성공하면 주문을 저장하고 재고를 차감합니다.
4. 관리자는 웹에서 상품·재고·주문·포인트를 확인하고 수정합니다.

학생이 상품 재고와 품절 여부를 미리 볼 수 있는 웹도 계획했습니다. 결제 오류, 포인트·재고 부족, 서버 연결 오류에 대한 처리 방식을 함께 정리했습니다.

초기 설계에서 정한 것

필수 기능과 후순위 기능

상품 선택·포인트 결제·주문 저장·재고 차감을 먼저 구현하고, 영수증 출력은 뒤로 미뤘습니다. 현금 결제는 지폐·동전 인식과 거스름돈 장치가 필요해 당시 범위에서 제외했습니다.

NFC는 학생 확인에만 사용

NFC에는 결제 정보를 저장하지 않고, 학생 확인 결과를 백엔드 API에서 포인트 잔액과 연결하도록 설계했습니다.

데이터 변경은 API를 통해 처리

키오스크와 웹이 데이터베이스에 직접 접속하지 않도록 중간에 백엔드 API를 두었습니다. 여러 주문이 동시에 들어올 때 수량이 어긋나지 않도록 결제 전 재고 확인과 결제 성공 후 주문 저장·재고 차감 순서를 정리했습니다.

중단 당시 진행 상황

사용자 흐름, 결제 방식, NFC 사용 범위, 관리자 기능과 예외 상황을 정리했습니다. 키오스크 UI와 백엔드 API·데이터 구조, 학교 서버 연동, NFC 리더기 연결은 개발·검토 중이었습니다.

기술은 HTML·CSS·JavaScript·PostgreSQL을 검토했고, 하드웨어와 연결 환경으로 Raspberry Pi 5·터치 디스플레이·NFC 리더기·Tailscale을 계획했습니다.

이후에는 화면과 API를 연결하고, 학생·상품·재고·주문 데이터 구조를 확정한 뒤 라즈베리파이와 NFC 리더기를 검증할 예정이었습니다. 네트워크 단절·전원 차단·결제 오류 테스트와 실제 매점 사용성 확인도 남아 있었습니다.

WORK NOTES

트러블슈팅

01 CASES

1. 01

   초기 키오스크 계획을 계속하기 어려웠습니다.

   초기 계획

   학생증 확인 → 포인트 결제 → 재고 차감

   현재 상태

   키오스크 중단 · 학생용 웹은 별도 구현

   점검 과정과 자료 보기

   원인

   학생증 NFC와 포인트 결제가 포함된 키오스크는 실제 매점에 장치를 설치하고 운영할 조건을 확보하지 못했습니다.

   진행한 대응

   결제·주문·재고 흐름과 필요한 하드웨어·서버 조건을 정리한 뒤 키오스크 개발을 중단했습니다. 이후 학생용 웹을 별도 범위로 구현했습니다.

   현재 상태

   키오스크 결제와 재고 차감은 완성되지 않았습니다. 공개된 화면은 별도 학생용 웹의 로그인 화면입니다.