피키버스
피키버스
피키버스는 사용자들이 자신만의 이상형 월드컵을 쉽게 만들고 공유할 수 있는 플랫폼입니다.
다양한 주제의 이상형 월드컵을 즐길 수 있으며, 친구들과 함께 결과를 공유하며 즐길 수 있습니다.
기존 이상형 월드컵 플랫폼을 개선하여 더 간편하게 동시에 여러 이미지 업로드, 태그 기반 검색, 최근 댓글, 하루 동안 가장 많이 참여한 월드컵 등 다양한 기능을 추가하였습니다.
부드러운 애니메이션과 직관적인 인터페이스로 사용자들이 쉽게 접근하고 이용할 수 있도록 설계했으며, 사용자들의 피드백을 지속적으로 반영하여 기능을 개선하고 있습니다.
기능
- 사용자 커스텀 이상형 월드컵 생성
- 실시간 결과 공유 및 통계
- 크로스 플랫폼 지원 (iOS/Android/Web)
- 소셜 로그인 및 계정 연동
- 국제화 지원
- 최근 댓글, 하루 동안 가장 많이 참여한 월드컵 등 다양한 기능
기술 스택
- Flutter: 크로스 플랫폼 앱 개발
- Fastlane: 앱 배포 자동화
- Bloc: 상태 관리
- Nest.js: 백엔드 API 개발
- Next.js: 웹 프론트엔드 개발
- Cloudflare Images: 이미지 저장 및 최적화
- Mantine UI: UI 컴포넌트
- Supabase: 데이터베이스 및 인증
도전과제 및 해결방안
AWS S3 -> Cloudflare Images 전환
- 기존에 AWS S3를 사용해서 이미지를 저장하고 불러오도록 하였고, 이미지에 대한 제한을 따로 두지 않았습니다. 하지만 어느 유저가 용량이 50MB 이상되는 움짤 이미지를 30개 업로드하여 공유하여, S3 저장소 비용으로 1달에 32$ 이상 부가되었습니다.
- 이런 방식으로 AWS S3 비용을 감당하기 어렵다고 판단하여 이를 해결하기 위해 다른 방안 중, Cloudflare Images를 사용하도록 변경하였고 유저의 이미지 업로드 용량을 10MB로 제한하였습니다.
- 또한 image varient 기능을 활용하여 홈, 탐색 화면처럼 유저들의 고화질 이미지를 사용하는 곳에서는 낮은 해상도, 실제 게임 화면에서는 원본 해상도를 사용하도록 하여 이미지 트래픽 비용을 혁신적으로 줄일 수 있었습니다.
프론트엔드 속도 최적화
- Next.js를 통한 SSR을 적극적으로 사용하여 초기 렌더링 속도를 더 빠르게 하여 유저들의 빠른 게임 진행을 돕고자 하였습니다.
- 스켈레톤 로딩 애니메이션을 사용하여 유저들의 빠른 게임 진행을 돕고자 하였습니다.
국제화
- locale을 위한 middleware를 구현하여, 유저의 선호 언어를 통해 자동으로 리다이렉션 및 언어 설정을 하도록 하였고, i18n을 통해 각 텍스트를 1:1 매핑하여 국제화를 지원하도록 하였습니다.
비용 절감을 위한 노력들
- Frontend는 Vercel, Database는 Supabase를 사용하여 비용을 최소화할 수 있도록 노력하였습니다.
- 이미지 저장소를 Cloudflare Images로 전환하여 1달에 5달러로 절감하였습니다.
- AWS EC2에서 AMD 기반 cpu를 사용하는 서버로 변경하여, 기존 사용 비용에서 10% 이상 절감하였습니다. 또한 ALB를 통한 HTTP가 아닌, certbot과 nginx를 통한 HTTPS 통신을 사용하여 비용을 최소화하였습니다.
Flutter
- 로그인 및 게임 생성 처리를 웹뷰를 활용하여, 이미 만들어진 웹 화면을 사용하여 빠르게 로그인 및 게임 생성하고, 불필요한 개발을 줄이도록 하였습니다.
- Fastlane을 통해 지속적으로 빠르게 앱 배포 및 업데이트를 진행할 수 있도록 하였습니다.
- 전세계 타겟으로 영어, 한국어 스토어 현지화를 진행하였습니다.
서비스 홍보
- 적은 인지도, SEO를 개선하기 위해 최대한 다양한 플랫폼(블라인드, DC, 지식in, 트위터 등)에 백링크 늘리기, 서비스 홍보용 게시글을 작성하였습니다.
- 하루에 1회 이상 이상형 월드컵을 플레이하는 헤비 유저들을 대상으로 설문조사 및 인터뷰를 진행하여 필요한 기능, 개선사항을 지속적으로 검증하고 반영하였습니다.
- PlayStore, AppStore에 있는 다른 앱들을 참고하여 키워드 및 게시글을 지속적으로 개선하고 있습니다.