알바생 교대 앱을 만들다 로그인에서 한 시간 막힌 날

알바생 근무 교대 서비스를 방송에서 바로 만들다가, 로그인이 끝나지 않는 버그 하나에 한 시간 넘게 붙잡혔어요. 계획에 없던 시간이었지만, 덕분에 오류를 AI에게 어떻게 넘겨야 고쳐지는지 다섯 가지로 정리할 수 있었어요. 기획 문서 → 태스크 → 구현 흐름과 그 디버깅 과정을 순서대로 담았어요.

이 노트를 읽고 나면 할 수 있는 것

1. 오류를 "어디서, 무엇을 했더니, 어떻게 됐다"로 설명하고, 콘솔·네트워크 탭의 흔적을 복사해 AI에게 넘기기
2. 흔적이 안 남는 오류는 디버깅 로그(코드가 지나간 자리를 화면에 찍는 기록)를 먼저 심게 해서, 막힌 지점을 좁히기
3. 세팅에서 꼬였을 때 공식 문서를 마크다운으로 바꿔 코드베이스와 비교시키기

다시보기는 https://youtu.be/diQdFJWUYTY 에 있어요. 2025년 7월 31일에 약 3시간 방송했고, 2분부터 본편이에요.

목차

• 오늘 만들 것과 빈 도화지 ▶ 0:02:42
• 만들기 전에 문서부터 ▶ 0:11:52
• 태스크로 쪼개서 커서에 넘기기 ▶ 0:40:17
• 로그인이 끝나지 않는다 ▶ 0:54:42
• 코드베이스를 통째로 다른 AI에게 ▶ 1:21:12
• 흔적이 없으면 흔적을 남기게 하기 ▶ 1:36:21
• 10초를 30초로 늘린 수정 ▶ 1:46:56
• 디자인 가이드는 다시 물려 줘야 한다 ▶ 2:08:16
• 세팅 오류엔 공식 문서를 프롬프트로 ▶ 2:31:59
• 알바생 화면과 다음 기능 기획 ▶ 2:39:38
• 정리: 오류를 AI에게 넘기는 다섯 가지 ▶ 2:47:51
• Q&A ▶ 2:55:21
• 오늘 해볼 것 ▶ 2:52:25

오늘 만들 것과 빈 도화지 ▶ 0:02:42

오늘은 시청자가 제보해 준 아이디어로 SaaS(구독형 웹 서비스)를 만들었어요. 매장 알바생의 시프트(교대 근무)를 조정하고 사내 채팅도 되는 서비스예요. 이름은 WorkEasy로 정했어요. 기능을 좀 말이 되게 완성하는 거, 그게 오늘 보고 싶은 거였어요. ▶ 0:02:44

기능 중에서 스케줄 관리와 근무 변경·교환에 집중했어요. 계정 흐름은 매니저가 먼저 가입하고 알바생 계정을 발급해 나눠 주는 방식이 현실적이라고 봤어요. 알바생이 먼저 이 서비스를 쓰자고 할 리는 없으니까요. ▶ 0:05:46

프로젝트는 제가 만든 EasyNext(Next.js 프로젝트를 명령 한 줄로 만들어 주는 도구)로 시작했어요. 설치하려면 Node.js(자바스크립트 실행 환경)가 먼저 깔려 있어야 해요. node -v로 버전이 나오면 준비된 거예요. ▶ 0:07:28

node -v                 # Node.js 설치 확인
easynext create workeasy  # 프로젝트 생성
npm run dev             # 개발 서버 실행

커서(Cursor)에서 꼭 알아야 할 건 세 가지예요. 왼쪽 파일 목록, 오른쪽 AI 채팅 패널, 그리고 Ctrl+J(맥은 Cmd+J)로 여는 터미널이에요. ▶ 0:10:17

npm run dev는 package.json의 dev 스크립트를 실행하라는 뜻이에요. 이 화면이 흰 도화지예요. ▶ 0:11:32 이제 그림을 그리면 돼요.