5장. 로그인과 프로필
이번 장에서 할 일
가입과 로그인(회원이 누구인지 확인하는 기능)을 실제로 동작하게 해요. 로그인하면 프로필 고르기 화면이 나오고, 계정마다 프로필을 5개까지 만들 수 있어요. 4장의 예시 프로필 대신 DB에 저장한 내 프로필이 나와요.
이어서 어린이 프로필과 PIN 잠금, 계정 화면의 비밀번호 바꾸기와 디바이스, 프로필 이전을 차례로 붙여요. 결제, 추가 회원, 이용 가구는 끝까지 4장의 예시 화면으로 둬요.
참고
5장부터는 기능을 하나씩 만들어요. 에이전트는 4장처럼 라운드(기능 하나를 만들거나 요청한 것을 고치고 확인까지 마치는 작업 묶음)로 일하고, 기능 하나가 라운드 하나예요. 라운드마다 끝에서 내가 직접 써 보고 확인해야 그 라운드가 닫히고, 마지막 라운드까지 닫아야 다음 장으로 갈 수 있어요.
1. 프로젝트 폴더에서 에이전트 열기
4장 대화창을 그대로 써도 돼요. 대화가 길어졌거나 에이전트를 닫았다면 터미널에 입력하세요.
터미널터미널에 입력
cd ~/projects/nextflixclaude --dangerously-skip-permissions # Codex는 codex --yolo
하던 일은 프로젝트에 기록돼 있어서 새로 열어도 이어 갈 수 있어요. DB는 Docker Desktop(또는 Podman)이 켜져 있어야 동작해요. 컴퓨터를 다시 켰다면 앱부터 켜 두세요.
2. 가입, 로그인, 프로필 만들기
에이전트에 붙여 넣으세요.
프롬프트에이전트 대화창에 붙여 넣기
이제 실제로 가입하고 로그인하게 만들어줘. 로그인하면 프로필 고르기 화면으로 가. 프로필은 프리셋 팩 features.md "계정과 프로필"의 규칙대로 만들어줘. 고른 프로필은 다음에 들어와도 기억해줘. 어린이 프로필, PIN, 계정 보안, 프로필 이전은 다음에 따로 할 거야. 지금은 프로필 고르기, 추가, 관리까지만 해줘.
에이전트는 이런 순서로 일해요.
프로필 표를 만드는 마이그레이션(DB의 표를 만들거나 바꾸는 기록)을 만들어 내 컴퓨터의 DB에 적용해요. 명령은 에이전트가 실행해요.
가입, 로그인, 프로필 화면과 서버 기능을 만들어요. 처음 한 번은 자동 테스트 도구를 설치하고 테스트용 DB를 따로 만들어요.
두 계정을 만들어 서로의 프로필을 보거나 고칠 수 없는지 자동 테스트로 확인해요.
리뷰를 받아요. 로그인 정보를 읽는 파일을 고치면 보안 리뷰(전문 에이전트가 로그인과 권한에 빈틈이 없는지 보는 단계)가 저절로 붙어요.
검사를 마치면 개발 서버를 켜 두고, 내가 써 볼 순서를 알려 줘요.
3. 직접 써 보고 확인하기
에이전트가 알려 준 주소(보통 http://localhost:3001)를 브라우저로 열고 가입해 보세요. 가입할 때 적은 이름이 메인 프로필 이름이 돼요. 다른 계정은 프로필 메뉴에서 로그아웃한 뒤 연습용 이메일 주소(예: [email protected])로 하나 더 만들면 돼요.
이렇게 되면 성공
가입하고 로그인하면 프로필 고르기가 나와요.
프로필이 5개가 되면 "프로필 추가"가 사라져요.
메인 프로필은 지울 수 없어요.
다른 계정으로 로그인하면 내 프로필이 보이지 않아요.
프리셋 사이트의 프로필 고르기 화면이에요. 민호 프로필의 자물쇠는 4절에서 만드는 PIN 잠금 표시예요. 이 장을 마치면 이 화면이 실제로 동작해요.
괜찮으면 확인했어라고 보내세요. 고칠 곳이 있으면 이렇게 말하세요.
프롬프트에이전트 대화창에 붙여 넣기
프로필 관리에서 아바타를 바꿔도 저장이 안 돼. 고쳐줘.
확인하면 에이전트가 라운드를 닫고 이번 작업을 기록(커밋)해요.
막히면
DB에 연결할 수 없대요: Docker Desktop이 켜져 있는지 보고
DB가 켜져 있는지 확인하고 안 켜져 있으면 켜줘라고 보내세요.프리셋 팩을 못 찾는대요:
프리셋 팩은 옆 폴더 pro-kit의 packs/nextflix에 있어. 없으면 pro-kit 폴더에서 node scripts/pack.mjs nextflix 명령으로 받아줘라고 보내세요. pro-kit 폴더가 2026-10-08 전에 받은 것이라 팩 받기가 멈추면그 폴더 이름을 pro-kit-old로 바꾸고 새로 받아줘라고 보내세요.에이전트가 앞 장 작업을 이어서 하려고 해요: 앞 장 라운드가 아직 닫히지 않았을 때예요. 앞 장 결과를 확인해
확인했어라고 보내고, 마무리가 끝나면 이 장 프롬프트를 다시 보내세요.중간에 멈췄어요:
이어서 만들어줘라고 보내세요. 사용량 한도에 걸렸으면 안내된 시간이 지난 뒤~/projects/nextflix에서claude --continue --dangerously-skip-permissions(Codex는codex resume --last --yolo)로 다시 열고이어서 해줘라고 보내세요. 기다리는 법은 5시간 한도에 걸리면에 있어요.로그인했는데 다시 로그인 화면으로 가요:
로그인한 뒤에도 로그인 화면으로 돌아가. 세션과 고른 프로필을 확인하는 곳을 살펴보고 고쳐줘라고 보내세요.스펙이 길어서 다 못 읽겠어요:
스펙에서 내가 정해야 할 것만 짧게 알려줘라고 보내세요.그 밖의 문제는 막혔을 때를 보세요.
4. 어린이 프로필과 프로필 잠금
3절의 확인을 마친 에이전트에 보내요. 프로필마다 관람 등급(볼 수 있는 나이 기준)의 상한을 정하고, 숫자 PIN으로 프로필을 잠그게 해요. 에이전트는 이 기능으로 라운드를 새로 열어요.
프롬프트에이전트 대화창에 붙여 넣기
프리셋 팩 features.md "계정과 프로필"의 어린이 프로필, 관람 등급 상한, PIN 규칙대로 프로필 기능을 더해줘. 상한을 넘는 작품은 지금 화면이 작품을 읽는 모든 곳에서 빼고, 직접 주소로 열어도 서버에서 막아줘. PIN은 해시로만 저장하고, 확인과 잠금 해제는 서버에서 해줘.
이렇게 되면 성공
어린이 프로필로 바꾸면 헤더에 "키즈" 표시가 나오고, 상한보다 높은 등급의 작품이 줄과 검색에서 사라져요.
잠근 프로필을 고르면 PIN 입력 칸이 나오고, 맞혀야 들어가요.
메인 프로필은 어린이 프로필로 바꿀 수 없어요.
6~10장에서 작품을 DB로 옮기고 검색, 찜, 재생을 만들 때도 이 상한을 지켜야 해요. 장마다 프롬프트에 그 조건을 넣어 두었어요. 괜찮으면 확인했어라고 보내세요.
5. 계정 보안, 디바이스, 프로필 이전
4절의 확인을 마친 에이전트에 보내요. 계정 화면의 보안과 디바이스, 프로필 메뉴의 프로필 이전을 실제로 동작하게 해요.
프롬프트에이전트 대화창에 붙여 넣기
프리셋 팩 features.md "계정과 프로필"의 규칙대로 계정 화면의 비밀번호 바꾸기, 디바이스 목록과 로그아웃을 실제로 동작하게 해줘. Better Auth 기능을 써. 프로필 이전도 같은 규칙대로 새 계정으로 옮기게 해줘. 메일은 보내지 마. 계정 화면의 자막 언어와 자막 모양도 프로필마다 저장해줘. 결제, 추가 회원, 이용 가구는 4장의 예시 화면 그대로 둬.
이렇게 되면 성공
디바이스 목록에 지금 쓰는 브라우저가 "이 디바이스"로 나와요.
비밀번호를 바꿀 때 "다른 디바이스에서 로그아웃"을 고르면 다른 브라우저에서 연 세션이 끝나요.
프로필을 옮기면 원래 계정에서 사라지고, 새 계정으로 로그인했을 때 보여요. 메인 프로필은 옮길 수 없어요.
괜찮으면 확인했어라고 보내세요.
에이전트가 물어보면
이 장부터는 프로젝트 폴더에서 연 에이전트가 기능마다 라운드 하나로 진행해요. 라운드 끝에는 늘 직접 써 보고 확인해 달라고 해요. 선택지 창이 뜨면 아래 답과 같은 선택지를 고르고, 없으면 직접 입력하는 칸에 붙여 넣으세요(질문에 답하는 법).
| 질문 | 답 |
|---|---|
| 외부 스킬의 새 판이 있다며 업데이트할지(하루에 한 번까지) | 나중에. 지금 업데이트를 고르면 업데이트 라운드를 먼저 따로 열어 확인과 커밋까지 마친 뒤 이 장으로 돌아와요. 장을 마친 뒤 스킬 업데이트해줘라고 보내면 그때 따로 해요 |
| 스펙을 정하기 전에 고를 것 | 모르겠으면 추천대로 해줘 |
| 스펙을 확인해 달라 | 읽어 보고 좋아, 진행해줘 또는 고칠 곳 |
| 계획을 확인하고 구현 방식을 골라 달라 | 추천대로 해줘 |
| 보안 리뷰에서 나온 지적을 어떻게 할지 | 추천대로 해줘 |
| 직접 써 보고 확인해 달라 | 알려 준 순서대로 써 본 뒤 확인했어 또는 고칠 곳 |
화면을 고치는 라운드에서는 4장 표의 디자인 점수 질문도 나올 수 있어요.
이 쪽을 다 했나요?