겜린더 1.2.7 개발 스토리
안녕하세요 겜린더 개발자입니다.
이번에 드디어 겜린더 두 번째 업데이트가 나왔습니다! (오예!!!)
이번 글은 어떤 기능을 추가했고 어떻게 개발했는지 개발 스토리를 살짝 적어볼까 합니다.
0. 계획
<이미지를 누르시면 원본으로 확인이 가능합니다 :D>
일단 전체적으로 어떻게 구현할지 디자인과 계획을 세웠습니다.
그리고 구현할 수 있는지를 따지고 제가 구현 할 수 있는 방향으로 잡은 것 같습니다.
세 번째 이미지 Admob 부분은 저의 스킬 부족으로 인해 그냥 배너 형식으로 구현되었네요
1. Expo에서 RN-CLI로 변경
- 전체적인 퍼포먼스 및 기능 개선
이번에 드디어 Expo로 작업한 걸 React-Native CLI로 변경했습니다.
역시 네이티브로 하니깐 퍼포먼스가 상당히 빨라졌습니다. 앱 용량도 상당히 줄어들었구요
사실 옮기게 된 이유가 제가 원하는 기능을 구현하고 싶은데
Expo에서는 상당히 한계가 많았습니다.
유튜브 비디오 미리 보기 기능, 네이티브 광고 같은 라이브러리가
Expo에선 지원하지 않았습니다.
다만 앱의 요구사양이 높아져서 안드로이드 9.0부터 실행이 가능하더라구요..
9.0이하는 실행이 불가능하게 되었습니다... (으아 죄송합니다 ㅠㅠ)
2. 메인 페이지 좌측 상단 메뉴 버튼 추가
- Drawer Navigator를 추가 겜린더와 공지사항 분리
Drawer Navigator를 추가해 드디어 각종 페이지를 분류했습니다.
사실 Bottom Navigator를 고려했지만, 그냥 여러 페이지가 들어갈 것 같아서 Drawer로 결정했습니다.
- 메인 페이지 하단은 "Live Event"를 추가 (예정)
Live Event는 각종 할인 이벤트나 무료게임 배포가 있을 때 여러분께 실시간으로 알려드릴 수 있는 서비스입니다.
기존 겜린더에선 앱을 실행하면 바로 하단에 공지사항이 나왔지만, Live-Event로 대체되었습니다.
아직은 소개만 해드리고 당장은 서비스를 할 수가 없어 최대한 빠르게 구현 후 여러분께 좋은 소식으로 찾아뵙겠습니다.
3. 상세정보 페이지에 게임 트레일러 영상 출력
이번 업데이트 중 가장 넣고 싶었던 기능입니다.
사실 youtube 라이브러리를 사용해 영상을 가져올까 했으나
제가 원하는 대로 디자인이 안 될 것 같아
React-Naitve-Video와 React-Native-ytdl을 사용해 영상을 링크로 받아온 후 React-Native-Video에 재생하도록 해두었습니다.
React-Naitve-Video는 디자인할 때 크게 제약이 없었고 제가 원하는 느낌인 배경화면처럼
백그라운드에 비디오를 재생할 수 있게 할 수 있어 채택했습니다.
사실 ytdl 때문에 상당히 고생 좀 했습니다... 3주 정도 걸린 거 같네요 ^^...
이 기능 넣으려고 스택오버플로우 막 들어가서 질문도 하고 별 짓을 다했습니다..ㅋㅋㅋㅋ
흔적들..
<나름 열심히 질문해서 답변도 잘 받았습니다!>
근데 이 기능을 구현하면서 상당히 리액트 네이티브를 더 알 수 있었달까...
아무튼 많이 배웠습니다.
하면서 재밌는 사실을 알아냈는데...
영상 화질이 240p와 720p가 있는데 720p 화질이 로딩 속도가 더 빨랐습니다...(?)
240p는 mp4 파일이고
720p는 webm이라 코덱의 차이인지는 몰라도 webm의 퍼포먼스가 좋았습니다.
스크린샷
사실 이렇게 글로 적는 것보다 눈으로 확인하시는 게 빠르실 것 같아 직접 스크린샷을 가져왔습니다.
이전 버전하고 비교해보시죠!
<이미지를 누르시면 원본으로 확인이 가능합니다 :D>
차이가 느껴지시나요?
보시면 상단에 헤더가 추가되었고 헤더 좌측에 메뉴 버튼이 생겼습니다.
광고 표시도 기존 겜린더 UI에 맞게 거부감 없이 넣으려고 Native Ads를 적용했습니다.
신버전
서버에 유튜브 링크가 있으면 신버전처럼 영상이 재생됩니다. (소리 X)
없으면 구버전처럼 썸네일이 나오도록 설정했습니다.
광고는 스크롤 내리면 하단에 있습니다
이번에 추가한 Drawer Navigator 입니다.
현재는 겜린더, 공지사항, 설정 세 가지로 분류했고 추후 새로운 기능이 나오면 추가될 예정입니다!
겜린더 게임등록 신청을 편하게 바로 하실 수 있도록 설정에 바로 추가했습니다.
그러니 맘 편하게 신청해주세요 ㅠㅠ
영상 화질은 240p 720p 이렇게 두 가지로 바꿀 수 있게 했습니다.
알림 설정은 아직 서비스가 제공되지 않으니 참고만 해주세요!
여담...
iOS 출시는 여전히 맥을 살 돈이 없어서 작업을 못 하고 있습니다...저도 최대한 빨리 맥을 마련해서 하고 싶은데... 돈이 없네요... ㅠㅠ..
들어오는 돈은 없고 빠르게 서버 비용만 나가는 적자 사업입니다...ㅋㅋㅋ
마무리
이렇게 얼추 개발 내용을 적었는데
약 2달의 시간이 걸렸네요
나름 뿌듯하게 이번에 작업한 것 같고
다만 구형 기기들과의 호환성이 조금 떨어진게 좀 아쉬운데
그래도 기능을 위해서 어쩔 수 없이 선택한 것이라고 생각해...
구형 기기를 이용하시는 유저분들께는 정말 송구스러운 마음입니다...ㅠ
이번 업데이트를 보시면서 또 피드백이 있으시다면
설정에 있는 개발자의 이메일로 남겨주시면 정말 감사하겠습니다. :D
지금까지 GRIT의 겜린더 개발자였습니다.
긴 글 읽어주셔서 정말 감사합니다.
댓글
댓글 쓰기