Make A Wish

축제 기간에 맡은 화면

축제는 정해진 기간에만 열립니다. 그 사이에 학생이 가입하고, 받은 스탬프를 확인하고, 부스를 찾는 과정이 막히면 다시 고칠 시간이 거의 없습니다.

• 로그인 · 인증 세션 연결
• 학교 계정 가입과 직접 가입
• 아이디 찾기 · 비밀번호 재설정과 로그인 후 환영창
• 부스 스탬프 조회와 별자리 화면
• 부스 지도의 선택 · 이동 경험 개선

부스 지도·시트·카드의 최초 구현은 팀원이 했고, 학교 신원·학생회비·입장 QR·운영자 권한 판별은 백엔드 담당 영역입니다. 배포와 로그 수집은 맡지 않았습니다.

학교 계정 가입과 직접 가입을 한 흐름으로

학교 계정 가입과 직접 가입은 학적을 확보하는 방법만 다르고, 계정·이메일·선택 정보·약관 단계는 같은 흐름을 공유하도록 만들었습니다.

가입 입력이 바뀌면 관련 확인 요청을 취소하고, 오래된 확인 결과를 현재 값의 승인으로 쓰지 않습니다. 가입 초안은 허용한 일부 입력만 sessionStorage에 저장하고, 비밀번호·인증번호·학적 정보·약관 동의는 복원하지 않습니다.

전화번호 입력에서 혼동이 생기는 것을 줄이려고 숫자만 받고 하이픈은 자동으로 표시했습니다. 표시 형식이 바뀌어도 커서 위치와 조합 입력이 흔들리지 않게 처리했습니다.

계정이 바뀌어도 이전 응답이 섞이지 않게

요청을 보낼 때의 세션 버전을 기록해, 이전 계정의 늦은 응답이 현재 토큰을 바꾸거나 현재 로그인을 지우지 않도록 했습니다. 로그인·로그아웃 때는 인증과 계정 단위 조회를 취소하고 지우되, 같은 세션의 토큰 갱신에서는 프로필 캐시를 유지합니다.

받은 스탬프를 별자리로

스탬프 응답의 지급 시각·부스 정보·총개수·중복 식별자를 검사해, 잘못된 응답을 정상적인 빈 판으로 보여주지 않았습니다. 스탬프는 지급 시각과 부스 분류로 별에 배정하고, 분류가 빠지거나 충돌하면 임의로 판정하지 않습니다.

화면이 앞에 있고 조회가 성공한 상태일 때만 주기적으로 갱신하고, 실패하면 자동 반복을 멈추고 직접 다시 시도할 수 있게 했습니다.

선택한 부스가 목록에 가려지지 않는 지도

어떤 부스를 선택했는지, 그 부스가 어디인지 바로 알기 어려웠습니다. 확대·축소와 강조 표시를 더하고, 지도·브라우저·하단 시트가 차지하는 영역을 계산해 선택한 위치가 목록에 가려지지 않게 했습니다.

선택 표시와 이동 요청을 나눠, 북마크·재조회·목록 높이 변경 때는 지도 시점을 유지하고 같은 부스를 다시 누르면 새 이동으로 처리했습니다.

일부러 이상한 값을 넣어 본 QA

로그인·가입·계정 복구 화면에서 개발한 세션과 다른 독립 QA 세션이 실제 브라우저로 일부러 이상한 입력과 상황을 만들어 보게 했습니다. 사례마다 실제 행동, 관찰한 결과, 캡처를 남겼습니다.

• 이름에 HTML 마크업을 넣어도 실행하지 않고 글자 그대로 보여줍니다. 공백만 있으면 '회원님'으로 표시하고, 아주 긴 이름은 버튼까지 닿을 수 있게 세로 스크롤로 받습니다.
• 학생회비 납부자 화면은 응답 값이 정확히 true일 때만 엽니다. null, 값 누락, 문자열 "true"는 모두 일반 화면입니다.
• 인증번호는 ASCII 숫자 6자리만 받고, 새 비밀번호는 8–20자의 허용 문자 안에서 대문자·소문자·숫자·특수문자를 모두 요구합니다. 아이디는 공백만으로 채울 수 없고 100자까지 받으며, 100자와 101자 경계를 자동 검사로 확인했습니다.
• 응답이 늦는 동안 버튼을 여러 번 누르거나, 입력을 고치거나, 창을 닫아도 요청이 섞이지 않습니다. 인증번호 재발송의 60초 대기는 이메일 대소문자를 바꾸거나 창을 닫았다 다시 열어도 우회되지 않습니다.
• 한글 조합 중이거나 형식이 틀린 값으로는 확인 요청을 보내지 않습니다.

연결이 끊기는 상황을 일부러 만든 QA에서는 한 번의 제출에 요청 7개가 도착하는 현상을 발견했습니다. 프론트엔드에는 자동 재전송이 없고, 단일 요청 실험에서도 연결 재사용 조건에서 같은 현상이 재현됐습니다. 그래서 운영 서버의 중복 처리 방지는 보장하지 않는다고 기록하고, 결과가 불확실하면 완료로 넘어가거나 자동으로 다시 보내지 않게 했습니다.

계정 복구·환영창 작업의 독립 QA 8개 사례가 모두 통과했고, 자동 검사는 260개 중 258개 통과, 실패 0개였습니다(2개는 환경 권한으로 건너뜀). 검증은 모두 로컬 합성 데이터로 했으며 실제 운영 서버와 실기기는 확인하지 않았습니다. 프론트엔드 입력 검증은 1차 방어이고, 최종 차단은 서버 검증이 맡습니다.

검토와 검증

직접 만든 개발 도구 AgentFlow로 작업하면서 공격적인 입력 QA와 검수를 요구하고, 디자인·배치 차이를 줄이려고 다른 AI 모델의 교차 검토를 작업 절차에 넣었습니다. 공통 인증 QA는 백엔드 담당자와 소통하며 직접 여러 차례 검증했습니다.

부스 스탬프 화면의 별 모양 테두리 점선 간격이 디자인본과 다르게 구현된 적이 있습니다. 검수 에이전트를 추가로 만들어 실제 코드와 스크린샷을 함께 검수하게 했고, 그 뒤로 디자인과 화면을 맞춰 가며 작업을 이어갔습니다.

지도 작업의 문서와 PR에는 단위별 읽기 전용 검수와 합성 API·SDK 모형 검증 기록이 있고, 실제 지도 SDK 연동 검증은 보류했다고 적었습니다. 기준 커밋의 CI에서는 테스트·서식·린트·빌드가 통과했습니다.

축제 당일의 팀 운영 결과

축제 당일 활동 이용자(식별)

1,889

축제 당일 페이지 조회

48,347

스탬프 참여

278

스탬프 완주

106

팀 성과 보고서의 집계입니다. 이용자와 조회는 2026-10-06 축제 당일 기준이고, 스탬프는 보존된 도장 상태 기준입니다. 식별된 활동 이용자는 실제 참석 인원과 같지 않으며, 이 수치는 본인 프론트엔드 작업의 효과가 아니라 팀 운영 결과입니다.

보고서는 인증 반복 실패와 제한·이메일 지연을 다음 개선 후보로 남겼습니다. 요청 실패를 사용자 이탈로 해석하지 않고, 계측이 거절되어 빠진 기록이 있을 수 있다고 함께 적었습니다.