테니스 치는 개발자가 테니스 다이어리앱을 만들기 까지

 

 

최근에 Flutter와 Supabase를 활용해 테니스 다이어리앱 타이브레이크를 개발하고 있습니다. 테니스를 좋아하는 개발자다 보니 관심있는 도메인으로 앱을 하나 만들고 싶었는데, 어느덧 개발과 배포를 넘어 운영을 하고 있네요. 출시한지도 쫌 됐고 사용자가 아주 ?! 없지는 않아, 중간지점으로 삼고 정리를 한번 해보려고 합니다.

 

 

앱의 간략한 소개와 만들게 된 배경, 유저분들 피드백과 운영하며 배운점 등을 주저리 주저리 한번 적어보겠습니다.

 

테니스 다이어리앱을 만들게 된 배경

 

테니스를 치는 많은 분들이 SNS, 주로 인스타그램을 통해 자신의 플레이를 공유하고 있습니다. 저 또한 그날의 플레이와 날씨, 컨디션 등을 스토리를 통해 자주 공유를 했는데요, 한 가지 아쉬운점이 있다면 SNS 공유가 기록보다는 단편적인 소모에 그친다는 부분이었습니다.

 

 

보통 이러고 끗

 

 

 

보통 다음과 같이 사진 혹은 짧은 영상으로 소비되고 있습니다. 사실 테니스도 그날의 컨디션, 단식/복식/랠리, 승패, 테니스 코트 등 세세하게 기록할 부분이 많은데 말이죠. 체계적인 기록이 더해지면 테니스가 좀 더 재밌을 것 같았습니다. 그렇게 테니스 기록에 특화된 다이어리 앱을 개발하게 되었습니다.

 

 

헬스, 런닝은 다양한 앱들이 시중에 나와있는것에 비해 개인화에 특화된 테니스 앱이 없는 점도 개발욕구를 자극했습니다. 테니스도 다른 운동에 못지않게 시장이 큰 것 같은데 IT쪽으로는 아직 갈 길이 먼것 같더군요. 사실 우리나라 스포츠의 문제점이기도 합니다.

 

 

타이브레이크 앱 소개 및 기술스택

 

 

 

 

그렇게 해서 개발한 타이브레이크 앱의 기술 스택에 대해 알아보겠습니다.

 

 

기술 스택

• APP - Flutter
• Backend - Supabase
• Web - React
  

저는 React 프론트엔드 개발자이지만 앱은 RN이 아닌 Flutter를 선택했습니다. 소규모 환경 혹은 MVP 단계에서 크로스플랫폼 앱개발로는 Flutter가 생산성이 더 높다 생각했고, 무엇보다 Flutter를 좋아했기 때문입니다 🥰 예전에 예창패를 하며 잠깐이나마 다뤄본 경험도 있었고요.

 

 

서버로는 요즘에 인기있는 Supabase를 사용했습니다. 클라이언트 개발에 집중하기 위해 Supabase, Firebase와 같은 BaaS를 고려했고, 실제로도 Flutter + Supabase의 조합은 높은 생산성을 보였습니다. 저렴한 가격과 개발 친화적이었으며 대시보드는 어드민 페이지 역할을 하기에 충분했습니다.

 

 

앱의 메인 페이지를 담당하는 렌딩 페이지는 익숙한 React로 개발했습니다. 앱의 자세한 기능과 기술 스택 선정, 개발 과정에서의 이슈 등은 아래 링크를 통해 확인하실 수 있습니다.

 

 

타이브레이크 docs

타이브레이크 | Sihyung.log

 

 

1인 앱 개발을 하며 고려한점

 

선 배포 후 개발하기

많은 사이드 프로젝트 & 프로덕트들이 배포 하지도 못하고 묻히는 것을 자주 목격했습니다. 로컬에서만 돌아가는 프로젝트는 동기부여가 되지 않을거라 생각하여, 최소한의 기능만 넣어 스토어에 배포했습니다.

 

 

이 선택이 옳았던것이, 구글 플레이 스토어의 정책이 바뀌어 신규 개발자의 경우 비공개 테스트를 비롯해 심사 과정이 굉장히 길어졌다는 점이었습니다. 저는 이를 모른채 배포를 하였고, 덕분에 심사 기간 동안 iOS와 주요 기능개발에 집중할 수 있었습니다.

 

아래는 제가 검수과정을 겪으며 적은 포스팅 입니다.

 

 

https://teveloper.tistory.com/71

[1인 앱 개발] 플레이스토어 출시 후기 (feat. 비공개 테스트 20명)

 

 

1인 앱 개발을 하며 배운점

 

개발보다 디자인이 어렵다

디자이너분이 뚝딱 제공해주는 피그마로 편히 개발하다가, 디자인 리소스가 없는 상태로 앱 개발을 하려니 정말 힘들었습니다. 수많은 앱 설치와 dribble, behance 등 디자인 레퍼런스 사이트들을 돌아다니며 디자인을 참고했습니다.

 

 

대AI의 시대에 걸맞게 아이콘 생성 시 인공지능의 도움을 받았습니다. 표정이 들어간 테니스 공 모양의 아이콘이 필요했는데 Bing AI를 통해 원하는 아이콘을 생성할 수 있었습니다.

 

 

 

디자인보다 마케팅이 어렵다

개발, 디자인보다 더 어려운 것은 마케팅이었습니다. 손수 제작한 프로덕트를 글과 이미지 등 컨텐츠로 풀어내는것이 이렇게 힘든줄은 몰랐습니다. 개발이야 어떻게든 코드를 통해 구현을 하겠지만 마케팅은 어느 채널에서 어떠한 방식으로 할지 시작조차 어려웠습니다.

 

 

프로덕트 초기부터 돈을 들여 광고를 돌릴 필요는 없다 생각했고, 최소한의 비용으로 프로덕트를 자주 노출하기 위해 스레드와 인스타그램을 활용했습니다. 마침 테니스 인구 풀이 넓은 스레드에는 매번 개발할 때마다 메이커 로그를 올렸고 인스타그램은 업데이트와 앱 활용 방법 등을 노출했습니다.

 

 

 

체감상 노출과 관심은 스레드가 더 높았으나, 실질적인 유저 유입은 인스타그램을 통해 들어오는 것 같았습니다 🧐 스레드가 블루오션처럼 느껴지나 아직까지 국내에서는 인스타그램이 압도적인 것 같네요. 그래도 적은 힘을 들여 마케팅하기에 스레드 만한 플랫폼은 없는 것 같습니다.

 

 

초기 유저들과의 소통 및 피드백

프로덕트 초기 단계에서의 유저분들은 굉장히 소중합니다. 이 분들의 피드백을 통해 앱의 부족한 점을 개선시켜 나가고 입소문과 바이럴은 앱의 홍보효과를 극대화시킬 수 있기때문입니다.

 

 

커뮤니티 탭과 1:1문의 및 SNS를 통해 기능 요구사항이 가끔씩 들어오고 있는데, 다른건 제쳐두더라도 최대한 빨리 처리하려 노력하고 있습니다 🥰

 

 

문서화

이전까지 문서화를 기피했다면, 1인 개발을 하며 문서화의 중요성을 몸소 느끼게 되었습니다. 아이디어와 레퍼런스가 중요한 상황에서 기억력으로 모두 커버할 수 없기에, 저는 노션을 통해 레퍼런스와 TODO 및 개선할 점 등을 정리하고 있습니다.

 

 

 

 

접근성에서는 최고인 노션 덕분에 아이디어가 생각날 때마다 혹은 좋은 레퍼런스를 발견하면 노션에 기록하곤 했습니다.

 

 

글을 마치며, 앞으로의 목표

 

개발/디자인/마케팅/운영, 어느것 하나 쉬운게 없음에도 지속적으로 작업을 할 수 있는 원동력은 앱을 사용해주시는 유저분들 덕분이었던 것 같습니다. 게다가 테니스는 제가 제일 좋아하는 도메인이기도 합니다. 🥰 확실히 사이드 프로젝트는 본인이 좋아하는 분야에서 조금이나마 원동력이 생기는 것 같아요.

 

 

 

 

최근에는 백엔드를 Supabase에서 Nest.js로 전환하는 작업을 하고 있습니다. 애초에 Supabase가 PostgreSQL 기반이기도 하고, 신규 기능의 확장성을 비롯해 추후 작업할 때에도 백엔드 지식이 있으면 좋겠다고 느꼈습니다. 최종적으로 아래와 같은 기술스택으로 앱의 Tech Stack을 구성하려 합니다.

 

• APP - Flutter
• Backend - Nest.js (TypeORM + PostgreSQL)
• Frontend(Web) - React

 

내년쯤에는 광고를 붙여 서비스 수익화도 진행해보고 싶네요. 커피값 혹은 치킨값 정도만 벌어도 서비스 개발, 신규 기능 추가 및 기능 확장등에 큰 원동력이 될 것 같습니다.

 

 

IOS

‎타이브레이크

 

AOS

타이브레이크 - Google Play 앱

 

 

WEB

타이브레이크

 

타이브레이크 Docs

타이브레이크 | Sihyung.log