[출결 앱 개발 로그 01] QR 한 장에서 시작한 도장 출석 앱 #MVP #QR출석

주짓수 도장의 출석부를 앱으로 옮기기로 했을 때, 처음 떠올린 화면은 단순했다. 회원이 휴대폰에서 QR을 열고 입구의 태블릿이 읽으면 출석이 끝나는 구조였다. 하지만 실제로 만들어 보니 핵심은 QR 이미지가 아니라 누가 어디서 무엇을 해야 하는지 분명한 흐름이었다.

세 명의 사용자를 먼저 나눴다

같은 출석이라도 회원, 입구 태블릿, 사범님이 필요한 정보는 달랐다.

사용자	가장 중요한 행동
회원	로그인하고 내 QR을 빠르게 연다
입구 태블릿	QR을 읽고 처리 결과를 즉시 보여준다
사범님	날짜별 출석을 확인하고 필요한 기록을 수정한다

한 화면에 모든 기능을 넣으면 누구에게도 편하지 않았다. 회원 화면은 자신의 QR과 출석 상태에 집중하고, 태블릿은 카메라와 완료 피드백만 크게 보여주며, 관리 기능은 별도 화면으로 분리했다.

첫 기술 선택

프론트와 서버 기능을 한 프로젝트에서 빠르게 만들기 위해 Next.js App Router와 TypeScript를 사용했다. 화면은 Tailwind CSS로 구성했고, 브라우저 카메라 인식에는 html5-qrcode를 선택했다. 초기 API는 QR 발급과 출석 처리 두 갈래로 나눴다.

처음에는 회원 목록에서 이름을 선택하면 QR이 나오는 형태였다. 시연에는 편했지만 실제 서비스에는 맞지 않았다. 누구나 다른 사람 이름을 고를 수 있기 때문이다. 그래서 “목록에서 고르는 QR”을 폐기하고 “로그인한 회원의 QR”만 보여주는 방향으로 바꿨다.

로컬 화면을 다른 휴대폰에 보여주기

개발 PC에서는 잘 열렸지만, 다른 사람의 휴대폰에서 확인하려면 한 단계가 더 필요했다. 먼저 개발 서버를 외부 기기에서도 받을 수 있게 열고 같은 공유기의 내부 주소로 접속했다. PC가 유선이고 휴대폰이 Wi-Fi여도 같은 내부 네트워크라면 문제가 없었다.

다만 게스트 Wi-Fi, 공유기의 기기 간 통신 차단, PC 방화벽처럼 현장에서만 드러나는 변수가 있었다. 이후 임시 외부 주소를 만들어 모바일 데이터에서도 접속해 보면서 “내 컴퓨터에서 열린다”와 “실제 사용자가 쓸 수 있다”가 전혀 다른 검증이라는 점을 배웠다.

첫 버전에서 남긴 것

첫 MVP가 제공한 기능은 많지 않았다.

• 회원용 QR 화면
• 관리자용 카메라 스캔 화면
• QR을 읽지 못할 때 사용하는 수동 입력
• 팀 패션 주짓수의 로고와 기본 브랜드 화면
• 빌드와 모바일 접속 검증

그러나 이 단계에서 제품의 뼈대는 정해졌다. 출석 앱의 본질은 복잡한 대시보드가 아니라, 회원이 QR을 찾는 시간과 태블릿이 결과를 알려주는 시간을 최대한 줄이는 것이었다.

현재 결론

기능을 추가하기 전에 사용 장소를 분리한 결정은 이후 모든 화면의 기준이 됐다. 회원 화면에는 관리 기능을 넣지 않고, 키오스크 화면에는 회원 이력을 보여주지 않으며, 사범님 화면에서만 수정과 조회를 다룬다.

QR 한 장으로 시작했지만, 첫 개발에서 실제로 만든 것은 QR이 아니라 도장 입구에서 반복될 사용자 행동의 순서였다.