생전 처음 만들어본 점수판앱

📝 제작 동기

제 주변에 도장을 운영하는 친구가 있는데, 매번 시합이나 연습 때 점수를 기록할 마땅한 앱이 없다고 하더군요. 시중에 있는 다른 앱을 사용했는데, 자동 회전이나 광고 때문에 불편함이 컸다고 합니다. 그래서 친구를 위해 직접 점수판앱을 만들어보기로 결심했습니다. 안드로이드는 생전 처음이었지만, 제가 익숙한 React 환경과 Framework7을 조합하면 해볼 만하겠다 싶어서 도전했습니다.

---

⚙️ 개발 환경 & 사용 기술

앱을 처음 만들다 보니, 최대한 진입장벽이 낮은 도구들을 선택했습니다.

• React + Framework7 모바일 UI에 특화된 컴포넌트를 빠르게 활용할 수 있어, 점수판 UI를 단시간에 구현할 수 있었습니다.
• Capacitor 웹 프로젝트를 안드로이드 APK 파일로 변환해 실제 기기에서 실행 가능하도록 패키징했습니다.
• Vercel 웹 버전(PWA)도 함께 운영할 수 있도록 배포.
• Android Studio Capacitor 프로젝트를 열고 APK 빌드 및 설치 파일 생성.

---

📱 주요 기능

1. 점수 기록
   • 팀 A, 팀 B 각각 점수를 올리거나 줄이는 버튼 제공
   • 배드민턴/태권도/각종 스포츠에 활용 가능
2. 세트(Set) 표시
   • 세트 단위 경기를 고려해 UI에 라운드 표시
3. 상태 유지
   • LocalStorage 기반으로 앱을 껐다 켜도 점수 기록 유지
4. 웹 + 앱 동시 제공
   • 웹에서는 PWA처럼 동작
   • 안드로이드에서는 APK 설치 후 네이티브 앱처럼 실행

---

🚀 제작 과정

1. Framework7 프로젝트 생성

   bash framework7 create --ui UI 마법사를 통해 React 기반 프로젝트를 손쉽게 만들 수 있었습니다.

2. 점수판 UI 구현

   React 컴포넌트로 버튼, 점수 표시부, 세트 UI를 구성.

3. 상태 관리

   단순한 구조라 Redux 같은 툴 대신 React의 useState, LocalStorage를 활용.

4. Capacitor 연동

   bash npx cap add android npx cap open android Android Studio에서 APK를 빌드하고, 실제 스마트폰에 설치해 테스트.

5. Firebase Hosting 배포

   웹/PWA 버전을 배포해 브라우저에서도 접근 가능하게 구현.

---

📸 스크린샷 (예시)

• 홈 화면 (팀 A, 팀 B 점수판)
• 세트 기록 표시 화면
• 실제 기기 실행 모습

(이 부분은 나중에 이미지 업로드 기능을 통해 추가 예정)

---

🤔 느낀 점

• 첫 안드로이드 개발 경험 처음엔 낯설었지만, React와 Framework7 덕분에 빠르게 앱을 만들 수 있었습니다.
• Capacitor의 강점 웹 프로젝트를 그대로 앱으로 변환할 수 있다는 점이 정말 편리했습니다.
• 친구의 만족도 실제 도장에서 사용해보니, "딱 원하던 기능"이라며 매우 만족해했습니다.

---

앞으로의 계획

• UI 개선: 점수판 디자인을 더 직관적으로 업그레이드
• 기능 추가: 경기 시간 타이머, 세트 자동 계산
• 수익화: AdMob 광고 연동 → 플레이스토어 배포

---

🎉 생전 처음 만들어본 점수판앱.

작은 시도였지만, 실제로 친구의 현장에서 쓰이면서 "내가 만든 앱이 누군가에게 도움이 된다"는 성취감을 크게 느꼈습니다. 앞으로도 꾸준히 개선해 나갈 예정입니다.