ChatGPT와 함께 만든 웹 기반 로또 추첨기 (티스토리 + GitHub 연동)

로또추첨기 사용해보기

이번 글에서는 ChatGPT와 함께 만든 로또 번호 추첨기를 소개하고, 직접 만든 웹페이지를 티스토리에 삽입하는 방법까지 정리해봤습니다. 프로그래밍에 익숙하지 않아도 충분히 따라할 수 있어요!

---

💡 어떤 걸 만들었나요?

• 동그란 로또 추첨기 통 안에서 45개의 공이 자연스럽게 굴러다니고
• 추첨하기 버튼을 누르면 하나씩 공이 추첨돼 확대되고
• 결과가 아래에 순서대로 정렬되는 인터랙티브한 로또 추첨기
• 효과음까지 포함되어 더욱 생생한 경험 제공
• GitHub Pages를 통해 웹에 업로드 후 티스토리 블로그에 임베드

---

반응형

🧠 사용한 기술

• HTML / CSS / JavaScript: 웹 페이지 기본 구성
• ChatGPT: 전체 코드 구현, 애니메이션, 이벤트 처리까지 도와줌
• GitHub Pages: 웹사이트 무료 호스팅
• 티스토리 iframe: 블로그에 삽입

---

📦 로또 추첨기 주요 기능

🎡 공 움직임

• 통 안에서 공들이 자연스럽게 움직이며 서로 부딪히지 않음
• 벽에 닿으면 반대 방향으로 튕기되, 각도가 살짝 랜덤하게 바뀜

🟢 추첨하기 버튼

• 통 안에서 무작위로 공 1개 선택
• 공이 통 크기만큼 확대되며 강조
• 결과 영역에 순서대로 추가

🔁 다시하기 버튼

• 추첨 통과 결과 초기화
• 공을 다시 섞고 처음부터 추첨 가능

---

🌐 GitHub Pages에 배포하기

1️⃣ GitHub 리포지토리 만들기

• GitHub 접속 → New Repository
• 이름 예: lottodraw
• 공개(Public) 설정

2️⃣ 코드 업로드

• index.html, style.css, script.js, draw.mp3 업로드
• 업로드 안 보이면 README.md 하나 먼저 만들기

3️⃣ GitHub Pages 설정

• Settings → Pages → Deploy from branch
• Branch: main, Folder: / (root)
• URL 생성됨: "https://yourname.github.io/lottodot/"

---

✍️ 티스토리에 삽입하기

1. 티스토리 글쓰기 → HTML 모드
2. 아래 코드 삽입

<iframe src="https://yourname.github.io/lottodot/"
        width="100%" height="600" frameborder="0" scrolling="no"></iframe>

✔️ 모바일에서도 잘 보이고, 방문자 누구나 추첨 가능!

---

📝 마무리 후기

이번 작업은 전부 ChatGPT와의 대화로 구현했어요.
처음엔 단순한 번호 뽑기만 하려 했는데,
공 움직임, 추첨 애니메이션, 효과음까지 GPT가 단계별로 도와줘서
완성도 있는 프로젝트가 됐습니다.

HTML, CSS, 자바스크립트를 몰라도
아이디어만 있다면 누구나 GPT와 함께 멋진 웹앱을 만들 수 있어요!

---

📮 다음 목표

• 당첨번호 자동 비교 기능
• 회차별 결과 저장
• 룰렛 스타일 추첨기

궁금한 점이나 질문은 댓글로 남겨주세요!
GPT가 도와주는 또 다른 창작도 소개할게요 😊