농구 작전판 웹 애플리케이션 소개

제 취미는 농구이고, 주마다 1회를 다니고 있습니다. 

하지만 최근 부상 때문에 한 달 여간 쉬게 되었는데요. 유일한 취미가 잠깐 홀딩되어 따분한 시간을 보냈습니다.

어느 주말, 노트북 들고 카페에 가서 이런 저런 웹서핑을 하다가

간단한 파일럿 프로젝트를 구상하게 되었습니다.

 

이번 포스팅에서는 "농구 작전판" 웹 애플리케이션 개발기를 잠깐 소개하고자 합니다.

 

목차

1. 왜 만듦?

사실 만들게 된 큰 계기는 없습니다.

그냥 요 몇주 따분했고, 집중할 무언가가 필요했습니다.

회사일과 별개로 간단한 프로젝트라도 진행해볼까싶어서

무계획으로 시작하게 되엇습니다. 

 

좋아하는 취미 생활인 농구와 관련된 무언가를 만들어 보고자했습니다.

커뮤니티, 야외농구정보, 프로농구 관련 정보, 전술집 등 몇가지 후보군을 두고

그 중 웹에 없을 법한 전술 보드을 웹 사이트로 구상하게 되었습니다.(찾아보니 어플리케이션을 제법 있더군요.🤔)

몇가지 고민해봤습니다.

• 전술보드 또는 농구 작적은 온라인으로 쉽게 공유 할 수 없을까?
• 농구 3:3 또는 5:5경기에서 몇가지 패턴들을 보기 쉽게 만들 수 없을까?
• 특히 5:5에서 자리 잡는 것이나 기본 패턴들을 손쉽게 확일 할 수 없을까?

고민과 동시에 무계획 토이 프로젝트를 시작했습니다.

 

2. 활용 기술 및 도구

요즘 핫한 AI 코드 어시스트 도구를 사용했습니다. 끝.

 

이라고 마무리 짓기에는 아직 AI가 부족한게 사실이더군요.

처음에 간단한 프로토타입은 AI로 시작했습니다.

ChatGPT나 Claude에서 "html,css,js로 농구 작전판 만들어줘."라고 채팅 한마디면 뚝딱 만들어내긴 했습니다.

 

쌩 html,css,js로 프로젝트를 진행하기는 아무래도 버거운게 사실이었습니다.

하여 간만에 React를 써보기로 했습니다.(4년전 잠깐 써본게 마지막이었던가...😗)

 

이 후, cursor라는 AI 도구와 함께 React 기반에서 프로젝트를 진행해 갔습니다.(무료 기간동안만 썼네요...)

백엔드는 크게 고민할게 없었고, 자주 쓰는 Kotlin + Springboot로 진행했습니다.

 

3. AI 주도 개발?

cursor라는 AI 코드 어시스턴트는 예상보다 훨씬 좋은 경험을 선사했습니다.

초기 보일러 플레이트를 빠르게 생성하는 것을 물론, 핵심 함수들도 뚝딱 만들어 냈습니다.👨‍💻

어쩌면 AI와의 채팅만으로 프로젝트를 완성시킬수도 있을 것 같은 생각이 들었습니다. 초기에만 말이죠...

 

애플리케이션의 기능이 점점 추가되어 가니 날고 기던 AI도 정신을 못차리더군요.(주로 Claude 3.5를 베이스로했습니다.)

어느 순간 AI가 생성하거나 수정한 코드의 디버깅을 사람이 하고 있는 모습을 발견하게 되었습니다.😂

프로젝트 중반 부터는 생성형 AI 40% 손코딩 60%로 진행했던 것 같네요...

 

 

4. 삽질 포인트

어느정도 UI 와꾸는 만들어 졌는데

반응형 지원이 뇌리에 꽂혔습니다.

"손쉬운 공유"를 위해서는 모바일 환경에서도 전술을 쉽게 확인 할 수 있어야 했습니다.

 

여기서 어느정도 삽질이 시작됬습니다.

개인적으로 Frontend 개발을 손놓은지 꽤되었고

반응형 웹 개발에 대한 경험치는 전무했습니다. 어지간히 기능이 들어간 상태에선 생성형 AI도 원하는 결과를 뽑아내지 못했습니다...😅

 

css 쪽을 다시금 살펴보았습니다.

"scale"이 핵심이었네요...!

 

삽질 끝에 결국 반응형으로 지원이 되도록 수정해냈습니다.

 

5. 웹 사이트 소개

이렇게 만들어진 농구전술보드 웹 사이트 주소는 아래와 같습니다.

https://courtboard.kro.kr

CourtBoard

 

1월17일 시작으로 약 한달 정도 걸렸네요.

일주일에 3-4시간 정도 카페 & 코딩 했던 것 같네요.

 

6. 앞으로의 계획

따분함을 달래기 위해 무계획으로 시작했던 프로젝트였는데

어떻게든 마무리는 짓고 싶어 도메인 따고 배포까지 해봤습니다.

 

지금은 우선 사용자 피드백을 받아보고 싶었습니다.

사실 만들고 보니 과연 농구인들이 이를 사용할까? 하는 의구심이 많이 들었습니다.

프로젝트라는게 운영하는 재미가 있어야 동기부여가 될 것 같은데 말입니다.

 

무계획으로 진행했던 것 같은 한번쯤 끊어 가는 것도 좋을 것 같네요.

따분함을 달래줄 다른 무언가를 찾거나...