웰컴키트부원 45명이 쓴 13기 동아리 앱

부원 45명이 쓴 13기 동아리 앱

웰컴키트

배경

한국외대 멋쟁이사자처럼 13기 부원 45명의 세션 출석을 운영진이 수기 출석부로 관리하고 있었습니다. 13기 운영진으로 출석, 팀 빙고 미션, 신입 부원 소개를 한 앱에서 처리하는 웰컴키트 PWA를 기획하고 프론트엔드 개발을 이끌었습니다. (2025.03 ~ 2025.09)
- React 18 PWA입니다. 2025년 운영 당시 프론트엔드 저장소 커밋 98개 중 60개를 맡았고, 2026.09에는 다음 기수를 위한 출석 관리 개선을 프론트엔드와 백엔드(Spring) 모두 직접 구현해 반영했습니다.

운영진이 'QR 체크 진행'을 누르면 서버가 만든 QR이 뜨고, 부원이 휴대폰으로 스캔하면 서버에 바로 출석이 기록되게 했습니다. 세션 시작 20분이 지난 스캔은 지각으로 자동 판정됩니다.
오늘 출석부에는 지각·결석자만 팀과 이름으로 보이고, 운영진이 '출석수정' 버튼으로 결석과 지각을 바로잡을 수 있게 했습니다.
데스크톱에서는 QR 띄우기와 출석부 최신화만, 모바일에서는 출석하기 버튼만 보이게 해 운영진 화면과 부원 화면을 나눴습니다.

첫 화면에서 13기 아기사자를 맞이하고, 소개 페이지에 트랙별 교육(프론트엔드·백엔드), 해커톤, 교육봉사 같은 동아리 활동을 정리해 신입 부원이 동아리를 한 번에 알 수 있게 했습니다.
로그인·회원가입과 마이페이지(프로필 사진, 비밀번호 변경)를 두어 부원마다 자기 계정으로 출석과 미션에 참여하게 했습니다.

운영진이 출석 상태를 고르면 서버에 저장되고 수정한 사람이 함께 남도록, 출석 수정 화면과 API를 만들었습니다.
고정된 QR은 캡처해 돌려 쓸 수 있다고 판단해, QR마다 1회성 토큰을 넣고 30분이 지나거나 새 QR을 띄우면 이전 QR이 무효가 되게 했습니다. 휴대폰 기본 카메라로 찍어도 출석이 바로 제출되고, 로그인이 안 돼 있으면 로그인 뒤 원래 화면으로 돌아옵니다.
부원은 마이페이지에서 자기 출석 이력을, 운영진은 세션별 출석과 부원별 출석률을 보고 CSV로 내려받게 했습니다. 출석률은 전체 세션 수가 아니라 부원마다 기록된 세션 수로 나눴습니다. 늦게 들어온 부원이 가입 전 세션 때문에 결석으로 잡히지 않아야 한다고 판단했습니다.
메뉴를 보여 줄지는 화면에서 정하지만, 수정·통계 권한은 서버가 검사하게 해 부원 계정으로는 요청이 막히도록 했습니다.
위 화면의 운영진 통계·QR·내 출석은 예시 데이터로 찍었습니다. 이름과 수치는 실제 기록이 아닙니다.