기본 콘텐츠로 건너뛰기

추천 가젯

리액트 + 비트(Vite)로 모바일 청첩장 만들기 — 1편

모바일 청첩장 시리즈 1편 · 기획/스택/배포 리액트 + 비트(Vite)로 모바일 청첩장 만들기 — 1편 안녕하세요, 이번에 결혼 준비를 하면서 여자친구와 같이 모바일 청첩장 을 만들고 있어요. 여자친구가 디자인을 해서 전달해주면 제가 개발을 진행하고 있어요. 이 글은 구현기 1편 으로, 전체 흐름과 스택, 배포 구성까지 “부담 없이” 훑어봅니다. (코드는 여러 버전 테스트 중!) 이 글에서 보는 것 왜 SPA 모바일 청첩장인가? 기본 스택 & 폴더 구조 라우팅 선택: HashRouter가 편한 이유 Cloudflare Pages로 자동 배포 현재 진행 중인 UI 버전들(테스트 기록) 1) 왜 SPA 모바일 청첩장인가? 모바일 청첩장은 핵심이 명확해요. 가볍고 빠르고 끊김이 없어야 하고, 사진/지도/일정이 터치에 친화적 이어야 합니다. 그래서 React + Vite 로 싱글 페이지 앱(SPA)을 구성했고, 정적 호스팅(CDN)인 Cloudflare Pages 에 올려 GitHub 푸시 → 자동 배포 까지 한 번에 묶었습니다. UX 팁 · 이미지 WebP, loading="lazy" 기본 · 큰 터치 타깃 · BGM은 “사용자 탭 후” 재생(모바일 정책) 2) 기본 스택 & 폴더 구조 서버는 따로 두지 않았고, 정적 빌드 결과물( dist/ )만 올립니다. 현재 의존성은 아래와 같아요. package.json(요약) { "name": ...

[개발 일지] 중장년층 퍼즐 게임 ‘샘퍼즐’ 개발기 🎮

샘퍼즐 아이콘

🧠 왜 퍼즐 게임일까?

2025년 초, 부모님께 추천할 만한 간단하고 재밌는 게임을 찾다가 직접 만들기로 결심했다.
단순한 규칙, 빠른 몰입감, 그리고 짧은 플레이 타임.
그 결과, ‘샘퍼즐’이라는 하나빼기 퍼즐 게임이 탄생했다.

💡 기획: 핵심은 ‘합산’

게임 방식은 간단하다. 제한된 시간 안에 주어진 숫자 중 합이 10 또는 100이 되도록 선택하는 것!
- : 2개 합이 10
- : 3개 합이 10
- : 4개 합이 100

단순하면서도 은근히 머리를 써야 하는 구조가 중장년층에게도 적당하다고 판단했다.

🛠 개발 도구

  • 프레임워크: Flutter (빠른 UI 개발과 크로스 플랫폼 지원)
  • IDE: Visual Studio Code
  • 광고 수익화: Google AdMob (전면 광고 + 보상형 광고)
  • 플랫폼: Android (Google Play Console 배포)

🎯 핵심 기능

  • 난이도 선택 (하 / 중 / 상)
  • 제한 시간 시스템
  • 오답 시 -3초 애니메이션
  • 게임 종료 시 보상형 광고로 30초 부활
  • 전면광고로 자연스러운 수익화

🚀 배포 & 수익화

Google Play Console을 통해 내부 테스트 및 배포를 진행했고,
AdMob을 활용해 초기 수익화도 연동 완료했다.
간단하지만 집중력 있는 플레이가 가능해 누구나 쉽게 즐길 수 있다.

📌 마무리

개발은 어렵지만, 이렇게 작은 아이디어가 실제 앱으로 탄생하는 과정은 정말 뿌듯하다.
‘샘퍼즐’은 이제 시작일 뿐! 앞으로도 꾸준히 업데이트해나갈 예정 :)

👉 지금 샘퍼즐 플레이 해보기

댓글

가장 많이 본 글

Icons by Flaticon