Gummy Bear Pick (구미베어 뽑기)

포춘쿠키처럼, 선택지들을 입력하고 구미베어 쿠키를 클릭하면 그중 하나를 랜덤으로 뽑아주는 앱입니다. 웹페이지(index.html) 하나로도 동작하고, Electron으로 감싸서 Windows 데스크톱 앱(.exe) 으로도 실행할 수 있습니다.

---

실행 / 빌드

# 브라우저로 열기 (빌드 불필요)
start index.html

# Electron 데스크톱 창으로 실행 (개발용)
npm install   # 최초 1회
npm start

# 배포용 .exe 빌드 → dist/ 폴더에 생성
npm run dist

---

폴더 구조: src(원본) vs dist(결과물)

별도의 src/ 폴더 없이, 저장소 루트 자체가 원본 코드입니다.

구분	위치	의미
원본 코드	index.html, main.js, preload.js, assets/	직접 수정하는 코드. 여기를 고쳐야 앱이 바뀝니다.
빌드 결과물	dist/	npm run dist 실행 시 electron-builder가 자동 생성하는 배포용 .exe. 사람이 직접 손대지 않고, git에도 커밋하지 않습니다.

---

Electron 구조: 프로세스 두 개가 짝을 이룸

• main.js (메인 프로세스) — 진짜 데스크톱 프로그램. Node.js 환경이라 파일/네트워크에 자유롭게 접근 가능. steam:get-top-game 요청이 오면 SteamSpy에 실제로 fetch를 보내 인기 게임 정보를 가져옵니다(fetchSteamTopGame()).
• index.html (렌더러) — 화면 그 자체. 보안상 격리되어 있어 파일/네트워크에 마음대로 접근할 수 없습니다.
• preload.js (다리) — contextBridge.exposeInMainWorld로 렌더러에 window.gummyBearAPI.getTopGame()이라는 좁은 창구 하나만 열어줍니다.

IPC 흐름:

index.html → window.gummyBearAPI.getTopGame()
          → preload.js: ipcRenderer.invoke('steam:get-top-game')
          → main.js: ipcMain.handle(...) → fetchSteamTopGame() → SteamSpy fetch
          → 결과가 IPC로 렌더러에 반환

---

왜 main.js가 API를 대신 호출하는가 (CORS)

브라우저(렌더러)는 CORS 정책 때문에 아무 외부 서버에나 자유롭게 요청을 보낼 수 없습니다. 그래서 실제 API 호출(fetchSteamTopGame())은 항상 Node.js 환경인 main.js에서만 실행합니다. 이렇게 하면:

• 렌더러는 CORS 문제 없이 최신 인기 게임 정보를 받을 수 있고
• API 키가 필요한 방식(Steam 공식 API 등)을 쓰지 않아도 되며, 혹시 쓰더라도 배포된 exe의 화면 쪽 코드에 키가 노출될 위험이 없습니다.

인터넷이 없거나 요청이 실패/타임아웃(8초)되면 main.js는 null을 반환하고, 렌더러는 에러 상태를 보여줍니다. 로컬 대체 데이터는 없으며, 항상 실시간 조회 결과만 표시합니다.

---

기술 스택

• 순수 HTML/CSS/JS (index.html 하나, 빌드 도구·외부 CDN 의존성 없음)
• 시각 요소는 이미지 없이 CSS box-shadow/inline SVG <rect>로 그린 픽셀아트
• 데스크톱 배포: Electron + electron-builder (npm run dist → portable .exe)
• 저장: localStorage (gummyBearPick.choices, gummyBearPick.theme)

---

더 알아보기

• 상세 아키텍처, 픽셀아트 렌더링 규칙, 상태 관리 등은 CLAUDE.md 참고
• 제품 요구사항(PRD)은 PRD.md 참고