LottoInsight: 로또 용지 그리기 (개발기 2편)
"1편에서 패턴으로 보기 약속했잖아요? 이번엔 진짜 그립니다."
1. 2편에서 뭐 하냐면
1편에서 「패턴으로 보기」 약속했죠?
2편은 그걸 직접 만들어 보는 편이에요.
2편이 끝나면 이렇게 됩니다:
- 프로그램 깔고 (Node.js, Next.js — 이름 몰라도 됨)
- 화면에 로또 용지(7×7) 가 보이고
- 전체 다시 뽑기 누르면 → A~E 번호 → 용지에 표시 → 선으로 패턴
- 폰 화면 크기에 맞춰서 보여요 (편의점에서 폰으로 보는 느낌)
그게 전부예요. 설치만 하고 끝내지 않습니다.
2. 뭘로 만들까?
먼저, 코드 짤 프로그램
Cursor 또는 VS Code — 둘 중 하나면 됩니다. (저는 Cursor파)
Chrome 열고 검색:
Cursor 설치 또는 VS Code 설치 검색
검색 결과 내용대로 설치하면 끝. 설치하고 오세요. 기다릴께요~~
이번에 등장하는 친구들 또 설치네;;; 이 바닥이 원래 그래요. 개발 2편은 설치가 90%가 될꺼예요.
- Next.js — 웹사이트 뼈대 (이름만 기억)
- Tailwind — 예쁘게 입히기
- SVG — 번호끼리 선 긋기 ← 패턴의 주인공!
어렵게 들리나요? 복사 붙여넣기면 됩니다. 진짜로.
3. Node.js (처음이면)
Node.js가 뭐냐고요? 저도 정확히는 몰라요.
"로또 번호 생성기 돌리는 데 필요한 것" 정도면 충분!
Chrome에서:
node.js 설치 하기
검색 → 나온 글 보면서 설치. (보통 LTS 초록 버튼 누르면 끝)
됐으면 PowerShell 열고:
node -v예: v22.15.1 처럼 버전 숫자 나오면 통과! 🎉 4절 가세요. (전 v22.15.1로 나왔네요.)
숫자 안 나오면?
- PowerShell 닫았다가 새로 열고
node -v다시. - 그래도
'node' … 인식되지 않습니다뜨면 → 위 node.js 설치부터 다시. (LTS 설치 후 1번 반복) - 여기서 막히면 4절 가지 마세요. Node 없으면 Next.js도 안 됩니다.
4. Next.js 프로젝트 만들기
이제 한 방에 Next.js 깔립니다.
근데 설치 전에 두 가지만 체크하세요.
4-1. 폴더 이름 — 소문자
프로젝트 폴더 이름에 대문자가 있으면 npm이 거부해요.
- ❌
git_LottoInsight - ✅
git_lottoinsight
탐색기에서 폴더 이름 바꾼 뒤, Cursor도 새 폴더로 다시 여세요.
(GitHub 주소·원격 저장소 이름은 그대로 둬도 됩니다.)
4-2. 폴더 — 비어 있어야 함 (거의)
.(현재 폴더)에 설치하려면 충돌 파일이 없어야 해요.
1편에서 만든 Docs/, README.md가 있으면 설치가 시작도 전에 막힙니다.
잠깐 빼 두고 설치 → 다시 붙여여넣기:
cd d:\git_lottoinsight
# Docs·README 잠깐 한 단계 위로
잘라내기 하셔서 다른곳으로 이동 Docs, README.md ..\README_lotto.md
# Next.js 설치
npx create-next-app@latest . --typescript --tailwind --eslint --app --import-alias "@/*"
# Docs·README 되돌리기 (우리 README 유지)
다시 원위치 가져오세요. d:\git_lottoinsight\Docs, README.md 
설치하는데 시간 좀 걸리니까, 그동안 ☕ 한 잔 하고 오세요. 킁 2분밖에 안걸리네'' 한잔 할 시간도 안되네요 ^^
5. 화면 띄워 보기
npm run dev브라우저에서 http://localhost:3000 열기.
Next.js 기본 화면 보이면 — 반은 온 거예요!
이제부터가 진짜 재미 🎱
6. 폴더 구조 — 파일 어디에 두나
Cursor 왼쪽 탐색기 보면 대충 이렇게 생겼을 거예요.
(이름 외울 필요 없음. 어디에 뭐가 있는지만 알면 됩니다.)
지금 (Next.js 설치 직후)
git_lottoinsight/
├── Docs/ ← 블로그·계획 글 (1편, 2편)
├── app/ ← 화면 (메인 페이지)
│ ├── page.tsx ← ★ 여기가 첫 화면
│ ├── layout.tsx ← 전체 틀 (폰 크기 설정)
│ └── globals.css ← 꾸미기
├── public/ ← 이미지·아이콘
├── package.json ← 프로젝트 설정
└── README.md
src/폴더 없음 —app/이 프로젝트 바로 아래에 있는 게 정상이에요.
오늘 만들면 이렇게 늘어남 (용지 + 패턴) — 실제 완성본
git_lottoinsight/
├── Docs/
├── app/
│ ├── page.tsx ← LottoApp만 불러오는 입구
│ ├── layout.tsx ← 전체 틀 (폰 크기·폰트)
│ └── globals.css ← ★ 용지·공·그리드 꾸미기 (양 많음)
├── components/ ← ★ 눈에 보이는 UI
│ ├── LottoApp.tsx ← A~E 전체 화면 + 상태 관리
│ ├── LottoSlip.tsx ← 7×7 용지 + 패턴 선 + 하단 버튼 3개
│ ├── NumberResult.tsx ← 상단 당첨번호 6 + 보너스
│ ├── LottoBall.tsx ← 동행복권 색 공 (3D)
│ └── GenerateButton.tsx ← 「전체 다시 뽑기」 버튼
├── lib/ ← ★ 계산 로직 (눈에 안 보임)
│ ├── constants.ts ← 1~45, 7×7, A~E 상수
│ └── lotto/
│ ├── types.ts ← 본번호 6 + 보너스 타입
│ ├── random.ts ← 번호·보너스 랜덤 생성
│ ├── grid.ts ← 번호 → 용지 칸 + SVG 패턴 좌표
│ └── ballColor.ts ← 공 구간별 색 + 3D 그라데이션
└── ...한 줄 요약
| 폴더 | 뭐 넣나 |
|---|---|
app/ |
화면 — 브라우저에 보이는 페이지 |
components/ |
부품 — 용지, 버튼 같은 UI |
lib/ |
두뇌 — 번호 생성, 좌표 계산 |
Docs/ |
글 — 코드 아님, 건드릴 일 거의 없음 |
components/, lib/ 폴더는 아직 없으면 Cursor에서 직접 만들면 됩니다.
(폴더 우클릭 → 새 폴더)
7. 파일 만든 순서 (폴더 구조 잡은 다음)
바닥(lib/)부터 → 부품(components/) → 화면(app/) 순이에요.
위에서 아래로 만들면 에러가 덜 납니다.
(파일 이름은 코드 위치일 뿐 — 「하는 일」 열만 봐도 됩니다.)
| 순서 | 파일 | 하는 일 (한 줄) |
|---|---|---|
| 1 | lib/constants.ts |
고정 규칙 한곳 — 45·6개·7열·A~E (random/grid/UI가 import, 이유는 파일 주석) |
| 2 | lib/lotto/types.ts |
번호 한 세트 형식 정하기 (본번호 6 + 보너스 1) |
| 3 | lib/lotto/random.ts |
무작위로 번호 뽑기 (겹치지 않게, A~E 한꺼번에) |
| 4 | lib/lotto/grid.ts |
몇 번이 용지 몇 번 칸인지 찾기 + 선 긋을 위치 계산 |
| 5 | lib/lotto/ballColor.ts |
TV 로또처럼 번호대별 공 색 (1 |
| 6 | components/LottoBall.tsx |
동그란 공 하나 그리기 (위쪽 당첨번호용) |
| 7 | components/NumberResult.tsx |
뽑힌 번호를 위에 공 6개 + 보너스 로 보여주기 |
| 8 | components/LottoSlip.tsx |
로또 용지 — 칸 표시, 선택 번호 색칠, 패턴 선, 초기화·자동선택 버튼 |
| 9 | components/GenerateButton.tsx |
맨 아래 「전체 다시 뽑기」 버튼 |
| 10 | components/LottoApp.tsx |
화면 전체 조립 — 폰은 A만, PC는 A~E, 버튼들 연결 |
| 11 | app/globals.css |
색·크기·간격 — 용지 코랄색, 공 3D, 숫자칸 모양 등 |
| 12 | app/page.tsx |
브라우저 첫 화면에 LottoInsight 띄우기 |
app/layout.tsx는 Next.js 설치할 때부터 있던 파일. 폰 뷰포트만 손봤어요.
화면에서 뭐가 어디랑 연결되나
page.tsx
└── LottoApp.tsx ← 상태(번호 목록) 여기서 관리
├── NumberResult ← 상단 공
├── LottoSlip × 5 ← 용지 A~E (패턴은 mainNumbers 6개만)
└── GenerateButton ← 전체 다시 뽑기- 초기화 / 자동선택 → 각 용지(
LottoSlip) 안 버튼 →LottoApp이 그 게임만 처리 - 전체 다시 뽑기 → A~E 한 번에 새 번호
8. 로또 용지, 7×7
편의점 로또 용지 기억나죠? 1~45번, 7열:
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 32 33 34 35
36 37 38 39 40 41 42
43 44 45마지막 줄만 3칸. 이걸 화면에 그대로 그려요.
실제 용지처럼 꾸몄어요:
- 상단 코랄 바 + A~E 게임 라벨
- 숫자 칸은 ┌┐└┘ bracket (실선 격자 아님)
- 칸 모양은 세로로 살짝 긴 직사각형 (너비 85%, 세로비 1.06)
- 선택된 번호는 bracket 안쪽만 코랄색 — 패턴 선 아래, 숫자 위
폰 → A 게임 1장만. PC(768px~) → A~E 한 줄 5장.
폰 크기에 맞춰요. PC에서 보면 가운데 작은 카드처럼 보이고, 폰에서는 꽉 차게 — 로또 앱 느낌!
1편 「패턴으로 보기」 — 드디어 등장!
9. 번호 뽑기 + 패턴 (하이라이트!)
여기서 "와" 소리 나와야 해요.
- 화면 열면 A~E 번호가 자동 생성 (처음부터 용지에 표시)
- 상단 동행복권 색 공 — 본번호 6 +
++ 보너스 (3D, 숫자 검정) - 용지에서 본번호 6칸 코랄 마킹 + 순서대로 선 연결 → 패턴! (별자리 같죠?)
- 초기화 — 그 게임만 비우기 / 자동선택 — 그 게임만 다시 뽑기
- 전체 다시 뽑기 — A~E 전부 새 번호
스크린샷 찍어서 자랑하세요.
스마트폰 DevTools 켜서 찍으면 더 그럴싸해요. (Chrome → F12 → 📱 아이콘)
(당첨은… 여전히 보장 없음 😅)
2편 여기까지 — 아직 조건 없이 순수 랜덤. 새로고침·뽑기할 때마다 번호 바뀌고, 용지에 패턴 그리기까지.
앞으로는 차차 생일도 받고, 어처구니 없는 조건도 받고, AI까지 연결할 거예요. 기다려 봐요~~
10. 어디까지 했나 체크
- 프로젝트 시작 (깃허브)
- Next.js 환경 설정
- 로또 용지 UI (7×7, A~E, bracket, 실제 용지 느낌)
- 번호 뽑기 + 패턴 (공, 보너스, SVG 선, 전체/개별 뽑기)
- Vitest 테스트 (
random,grid) - 3편: Vercel + GitHub 자동 배포
- 3편: 회차 데이터 + 다음 주/저번 주 2단 패턴
- 11가지 모드 (4편+)
11. 3편 예고 — Vercel + 진짜 당첨 번호
3편 = Vercel에 GitHub만 연결해 두면, 코드를 올릴 때마다 사이트가 자동으로 갱신됩니다.https://lottoinsight-xxx.vercel.app 같은 공개 주소가 생기니까 폰·PC·친구 — 링크만 있으면 누구나 열 수 있어요.
그다음 진짜 당첨 번호를 동행복권에서 가져와 다음 주 / 저번 주 패턴을 한 화면에서 보는 편.
3편은 더 재밌어집니다. 로또 번호는… 이제 동행복권에서 가져옵니다 🎱
코드 가져 가실분은 GitHub: https://github.com/regline-dev/LottoInsight