강의에서 배운 내용을 복습하는 겸, 로또 6/45 번호 생성기를 하나 제작해서 배포해보려고 합니다.
예전에 파이썬으로 번호만 뽑아내는 코드를 작성한 적이 있는데, 앱으로 만들면 성취감이 더 클 것 같아요.
클로드AI 에 첫번째 프롬프트를 입력하고 PRD를 작성해 달라고 요청했습니다.
목표:
블로그 방문자 유입을 위한
로또 6/45 번호 자동 생성 웹앱을 만들어줘.
조건:
- HTML + CSS + JavaScript 기반
- 서버 없이도 동작 가능한 구조
- 모바일 우선 반응형 UI
- 한국어 UI
- “참고용”임을 명확히 표시 (당첨 보장 표현 금지)
필수 기능 1️⃣ 로또 번호 생성기
- 1~45 중 6개 번호 생성
- 중복 없음
- 결과 정렬
- 결과 복사 버튼
필수 기능 2️⃣ 포함/제외 번호 선택
- 1~45 숫자 버튼 그리드 UI
- 클릭 순환 방식:
1회 클릭 → 포함할 번호
2회 클릭 → 제외할 번호
3회 클릭 → 초기화
- 포함 번호는 반드시 결과에 포함
- 제외 번호는 절대 결과에 포함되지 않음
- 포함 번호 최대 6개 제한
- 포함/제외 충돌 시 제외 우선
필수 기능 3️⃣ 최근 당첨번호 자동 갱신
- 로또 6/45 최근 당첨번호를
공식 API 또는 공개 데이터 소스를 통해 자동으로 불러오기
- 최근 1회 + 최근 5~10회 리스트 표시
- API 호출 실패 시 안내 메시지 표시
- 데이터는 “참고용”으로 명확히 표기
필수 기능 4️⃣ 당첨번호 기반 통계 기능
- 최근 N회(사용자 선택 가능) 기준으로:
- 가장 많이 나온 번호
- 가장 적게 나온 번호
- 최근 한동안 안 나온 번호
- 간단한 막대 차트 또는 리스트 시각화
- 외부 라이브러리 없이 순수 JS 또는
Chart.js 사용 가능 (CDN 방식)
필수 기능 5️⃣ 통계 기반 추천 옵션
- 완전 랜덤
- 최근 많이 나온 번호 가중치 적용
- 최근 적게 나온 번호 가중치 적용
- 통계 기반 추천도 “참고용” 문구 필수
UX / UI 요구사항
- 버튼 클릭 시 부드러운 애니메이션
- 번호 색상 구분 (포함/제외/결과)
- 직관적인 레이아웃
- 한 화면에서 사용 흐름이 끊기지 않도록 구성
SEO / 블로그 연동 고려
- iframe으로 블로그에 삽입 가능하게 구성
- 페이지 상단 또는 하단에
“로또 번호는 확률 게임이며 본 서비스는 참고용입니다” 문구 표시
- 코드에 주석 충분히 포함
출력 형식
1) 전체 HTML 파일
2) CSS 포함 (style 태그 또는 분리 설명)
3) JavaScript 로직 전체
4) API 연동 부분 설명
5) 추후 확장 아이디어 간단 정리PRD를 작성해줘단계별 프롬프트를 요청해서 각 단계의 프롬프트를 순차적으로 터미널으로 연 클로드에 입력해 줄 겁니다.
전 웹 클로드AI에서 프롬프트를 작성해서 앱 개발은 터미널에서 하는 것을 선호합니다.
이 PRD를 클로드 코드에서 사용할 단계별 프롬프트로 변환해 줘.
5개의 핵심 단계로 정리해서 각 단계마다 명확한 지시 사항을 만들어 줘.
VS Code Live Server 설정 방법
- 확장 설치
- VS Code에서 Ctrl + Shift + X (확장 탭)
- “Live Server” 검색
- Ritwick Dey의 “Live Server” 설치
- 실행 방법
- index.html 파일 열기
- 우클릭 → “Open with Live Server” 클릭
- 또는 하단 상태바에서 “Go Live” 클릭
- 자동으로 브라우저 열림
로컬 file:// 사용 시: 내장 데이터로 자동 폴백 (오류 없이 작동) JSON 파일(data/winning-numbers.json)을 업데이트하면 자동으로 최신 당첨번호가 반영됩니다.
http://127.0.0.1:5500 주소로 자동 실행
파일 수정 시 자동 새로고침 변경된 동작
Live Server 사용 시: data/winning-numbers.json 파일에서 데이터 로드 (자동 갱신 가능)
설치 후 VS Code를 완전히 종료했다가 다시 열어주세요.
단일 파일이 아닌 폴더 전체를 열어야 합니다.
왼쪽 탐색기에서 index.html 우클릭
“Open with Live Server” 클릭
잉? 에러가 발생했습니다.
src refspec main does not match any아직 커밋(commit)을 한 번도 안 해서 main 브랜치 자체가 존재하지 않는 상태
위로 올라가서 확인해보니 git add . 부터 에러가 발생했었네요.
warning: LF will be replaced by CRLF- LF: 리눅스/맥 줄바꿈
- CRLF: 윈도우 줄바꿈
- 현재 Windows + Git 환경
다음에 Git이 이 파일을 만질 때 줄바꿈 형식이 바뀔 수 있어요라는 뜻인데 무시 가능입니다.
진짜 문제는 그 다음인데요,
error: invalid path 'nul'
fatal: adding files failedWindows에는 예약된 파일 이름이 있습니다.
nulconprnauxcom1,lpt1등
nul이라는 파일/폴더가 프로젝트 안에 실제로 존재합니다.
Git은 이걸 절대 처리 못합니다.
해결 방법은 nul 파일 삭제가 가장 일반적이고 깔끔합니다.
삭제가 안되네요?
PowerShell 관리자 권한으로 열기(중요)
시작 메뉴 → PowerShell 검색
우클릭 → 관리자 권한으로 실행
cd C:\Users\gogum\Desktop\VibeCoding\lotto-generator프로젝트 폴더로 이동
del \\.\nulnul 강제 삭제
여전히 삭제가 안됩니다.
PowerShell에서는 이미 nul을 “존재하지 않는 경로”로 인식
→ 즉, PowerShell이 파일이 아니라 장치로 해석 중
그래서 PowerShell로는 한계가 있고, CMD + 특수 옵션으로 가야 끝납니다.
CMD를 관리자 권한으로 실행
(절대 PowerShell 아님)
- 시작 메뉴 →
cmd - 우클릭 → 관리자 권한으로 실행
해당 폴더로 이동
cd /d C:\Users\gogum\Desktop\VibeCoding\lotto-generatornul 파일 강제 삭제
del /f "\\?\C:\Users\gogum\Desktop\VibeCoding\lotto-generator\nul"드디어 삭제 완료! 다시 깃허브로 푸시를 진행합니다.
깃허브 푸시까지 성공했습니다!
왜 매번 할때마다 새로운 에러가 뜨고 새롭게 알게되고 그런걸까요?
그런 점이 재밌기도 한데 어렵기도 하고 그렇습니다.
아휴 드디어 성공입니다.
