디지털 스탬프 챌린지!는 참가자가 특정 부스를 방문하고 정답을 맞히면 디지털 도장을 받을 수 있는 웹 애플리케이션입니다. 각 부스에는 개별 비밀번호가 설정되어 있으며, 사용자는 본인 인증 후 스탬프를 클릭해 비밀번호를 입력하면 도장을 획득할 수 있습니다. 진행 상황은 브라우저에 저장되며, 모든 스탬프를 모으면 축하 메시지가 표시됩니다. 학교 행사, 축제, 캠페인 등의 체험 부스 운영에 적합합니다.
첫 화면에서 생년월일 6자리를 입력하여 본인 인증을 한 후 로그인합니다. 각 부스별 체험이 끝난 후 부스 이름이 표시된 스탬프를 클릭합니다. 해당 부스의 비밀번호를 입력하여 정답이면 도장을 획득합니다. 💾 진행 상황 저장하기 버튼을 누르면 브라우저에 현재 상태가 저장됩니다. 🔄 처음부터 다시하기를 누르면 저장된 기록이 삭제되며 초기화됩니다. 🚪 로그아웃을 누르면 로그인 화면으로 돌아갑니다. 모든 스탬프를 획득하면 축하 메시지가 표시됩니다.
각 스탬프별로 정답을 확인해야 스탬프를 획득할 수 있도록 구성한 것이 포인트입니다. 사용자의 생년월일을 활용해 개인별 진행 상황을 저장/불러오기 할 수 있도록 설계했습니다. 모바일 환경을 고려해 반응형 레이아웃을 적용하였으며, 부스 수가 많아도 깔끔하게 표시되도록 그리드 구조를 사용했습니다. 간단한 코드 수정으로 부스 이름과 비밀번호를 수정할 수 있습니다. 학교의 다양한 축제 등에서 쉽게 재활용 할 수 있도록 제작했습니다.