Ep3. 플리어리야 무럭무럭 자라라
00. Introduction
안녕하세요 넥스터즈 ‘식후감’ / ‘Pliary’ iOS 개발을 담당했던 한지웅임니다. 첫번째 두번째 에피소드를 쓴 친구들이 너무 고퀄의 글을 남겨서 매우 부담스럽지만 750자만 넘기면 된다고 하여 열심히 써보려함니다.
사실 2개월이라는 짧은 시간동안 기획 + 디자인 + 개발까지 완료하여 앱 스토어에 성공적으로 등록하는 것 자체가 매우 큰 보람이고 좋은 경험이라고 생각합니다.
그런데 디자인 친구들의 홍보 노력 + 운 역시 잘 따라주어 애플 앱 스토어에서 ‘새롭게 추천하는 앱’ + ‘투데이- 이번 주 에디터의 발견 Featured App’으로 선정되는 등 좋은 결과가 있었기에 단순 경험담을 공유하려 합니다.
01. 어….. 뭐 쓰지….
사실 개발 얘기만 잔뜩 늘어놓으려고 했는데 그러면 아무도 안보고 스크롤을 내릴 것 같아 전략을 수정했습니다. 딱히 정해진 주제없이 ‘자라나라 플리어리’ 이야기 이므로 그냥 아무 이야기나 쓰다가 마지막에 어떻게 개발했는지 간단하게 쓰려합니다. (개발했던 코드 내용을 까먹어서 얼버무리는 건 절대 아닙니다.)
플리어리 제작 과정을 생각해보니 먼저 개발 시간 생각이 납니다. 앞서 말했다시피 넥스터즈 2개월 기간은 디자이너 입장에서도 매우 짧은 시간이겠지만 개발자의 입장에서도 매우매우매우매우 짧은 시간입니다. 왜냐면 개발은 기획과 디자인이 어느 정도 이루어지지 않으면 시작하기 어렵기 때문입니다 ㅠㅠ 그래서 사실 두 번의 프로젝트에서 2달의 기간동안 첫 달은 띵까띵가 놀고 두번째달에 미친듯이 개발했던 기억이 납니다. 먼저 첫 1–2주 정도는 분명 대략적으로 기획된 아이디어를 가다듬는 시간을 통해 앱에 넣을 기능들을 정리하고 시간상 하지 못할 기능들을 쳐내야할 것입니다.
이후에는 디자인 팀에서 2–4주 가량 디자인을 지속적으로 뽑아내기 때문에 디자인이 완료된 뒤에 개발을 시작한다면 실제로 개발할 수 있는 기간은 2주..? 정도 밖에 되지 않습니다. 때문에 디자인 팀에서는 기능이 많이 들어간 주요화면부터 디자인을 시작하여 디자인을 전달하여 주고, 개발 팀에서는 디자인 완성을 기다리기 보다는 전체적 아키텍쳐 및 데이터 구조를 빠르게 설계하고 전달받은 디자인부터 빠르게 개발을 시작하는 것이 좋다고 생각합니닿 이번 플리어리에서도 메인화면 -> 식물 상세화면 -> 식물 등록화면 등의 순서로 빠르게 디자인을 전달받고 받는 순서대로 개발을 바로 시작했기 때문에 시간 내에 앱스토어 등록까지 완료할 수 있었다고 생각합니다.
02. Featured App 등록까지
앱 스토어 등록 이후 앱이 무럭무럭 자라고 있지만 개발자로서는 iOS13 대응 외에 딱히 아무것도 하지 않았습니다. 정말 디자이너들의 홍보와 운때문에 선정될 수 있었던 것 같습니다.
먼저 저희 팀 디자이너들이 예쁘게 앱을 디자인 하고 ‘비핸스’라는 사이트에도 글을 올렸슴니다. (사실 저는 개발자기 때문에 해당 사이트를 잘 모르고 관심도 부족하여 욕도 좀 먹었습니다…)
https://www.behance.net/gallery/82393135/Pliary-Plant-Care-Service
이러한 노력 외에도 식물 사이트나 커뮤니티, 인스타 등에 소소하게 홍보글을 올려주었고 이런 홍보가 소문을 타고 타고 건너가 모르는 사람들까지 홍보를 대신해주기도 하였습니다.
https://cafe.naver.com/ulsanfs/579
https://ohlida.blog.me/221762171224
누군진 모르겠지만 고마워요 글쓴이 분 (저희가 작성한거 아닙니다..)
게다가 아마 애플 스토어 에디터가 애니메이션이 들어간 디자인을 굉장히 좋아하는 것 같아요 (단순 추측) 같이 선정된 새롭게 추천하는 앱들을 보니까 이런 디자인이 좀 되는듯 합니다. + 식물도 좀 좋아하는 것 같습니다. 왜인지는 모르겠지만 이런 운에 힘입어서 투데이 피쳐드 앱에도 선정되었어요..!!
다음 넥스터즈 프로젝트 아이디어를 기획하는 분이 있다면 식물관련으로 해보는 것도 좋을 것 같다는 생각이 듭니다..
저렇게 피쳐드 앱으로 선정되니까 확실히 다운로드 수가 미친듯이 증가하는 것을 확인할 수 있었습니다.
고마워 디자이너 친구들 + 애플 에디터!
03. 개발 이야기
딱히 아무도 궁금해하지 않겠지만 그래도 쓰겠습니다 호우
이번 개발으로 가장 어려웠던 부분은 역시 애니메이션이었습니다. (사실 에니메이션 빼고는 어려울게 없는 앱이긴 합니다.)
특히 어려웠던 부분은… gif…
사실 로띠로 하면 가장 편하게 개발할 수 있고 사이즈 역시 json 형태로 매우 가볍기 때문에 로띠 라이브러리만 사용하면 모두가 행복한 개발을 할 수 있습니다.
그러나 저희에게 주어진 시간은 짧고 로띠로 모든 식물의 애니메이션을 추출하는 것은 시간 상 불가능하였기 때문에 식물의 애니메이션은 부득이하게 gif로 진행하게 되었습니다. (추후 업데이트를 통해 lottie로 바꾸려 생각하고 있습니다.)
가장 쉬운 방법은…. 앱에 모든 gif를 넣고 출시하는 것이었습니다.
하지만 그렇게 되면 18개의 gif가 앱에 들어가게 되므로 앱 사이즈가 약 4-50메가 이상이 증가한다는 단점이 있었습니다. 때문에 저희는 서버에 해당 gif를 두고 유저가 디폴트 jpeg 이미지를 기본으로 보되 네트워크 상황에 따라 gif를 서버로부터 다운로드 받고 캐싱된 gif를 볼 수 있도록 정책을 수정하였습니다. 문제는 iOS에서 gif를 구현하는 방법들 각각이 전부 장단점이 매우 뚜렷하다는 것이었습니다.
우선 첫번째로 iOS 기본 UIImageView는 gif를 지원하지 않기 때문에 gif image viewer를 직접 구현하거나 외부 라이브러리를 사용하여야 했습니다. 제한된 시간이 존재하기 때문에 딱히 직접 구현하고 싶은 생각은 없어 저는 외부 라이브러리를 사용하였습니다 껄
첫번째 후보는 다소 생소할 수 있는 SwiftyGif라는 라이브러리 입니다. 해당 라이브러리를 ‘식후감’에서 한번 써보았고, cpu 와 메모리 사용량 limit을 적절히 컨트롤 할 수 있도록 인터페이스를 제공하고 있어 여러 gif를 동시에 보여줄 때에 매우 효율적인 라이브러리였기 때문에 처음에는 이 라이브러리를 쓰고자 하였습니다. 그러나 문제는 서버로부터 다운로드 이후 gif 캐싱을 지원하지 않는다는 점이었습니다. … 물론 제가 구현하는 것이 최선이지만 시간이 너무 부족하여 엄두가 나지 않았습니다…
때문에 찾은 두번째 후보는 iOS 개발자라면 모두 아실 Kingfisher입니다. 킹피셔로 gif를 구현하는 방법은 크게 두가지인 듯합니다. (단순 UIImageView / 킹피셔의 AnimatedImageView) 해당 방법은 CPU와 메모리 사용에 있어 차이를 보입니다.
이에 대한 자세한 비교를 해놓은 글이 있어 공유합니다.(https://rhammer.tistory.com/265)
사실 한 화면에서 적당한 수준의 gif 하나를 보여준다면 어느 쪽을 해도 상관없을 듯합니다. 그러나 Pliary에서는 한 화면에 많게는 3개의 식물 카드를 보여주고 수평 스크롤로 계속 다른 카드를 넘길 수 있기 때문에 gif를 계속 보여준다면 엄청나게 치솟는 메모리와 cpu 사용량을 보실 수 있습니다… 기본적으로 킹피셔는 이미지 캐싱을 지원하기 때문에 이 부분은 고민할 필요가 없었지만 스크롤 시 여러 gif가 보여질 때에 킹피셔는 SwiftyGif에 비해 너무 많은 메모리와 CPU를 사용하는 단점이 있었습니다 ㅜ
메모리 + CPU +이미지 캐싱 모두를 달성하기 위해서 어쩔 수 없이 택한 선택은 Kingfisher 를 이용하되 스크롤 시에는 화면에 보여지는 이미지의 애니메이션을 멈추고 스크롤이 모두 끝나면 화면의 카드 애니메이션을 재개한 것 이었습니다 ㅎㅎ (허무)
고민할 때에는 어떻게 할까 엄청 고민했는데 글을 쓰고 보니 굉장히 허무하네요 핳
워낙 짧은 시간안에 앱을 마무리해야하기 때문에 이러한 고민들이 생겼던 것 같습니다. 이제는 조금 느긋하게 앱을 점차적으로 업데이트 하려 합니다.
또 다른 업데이트를 통해 플리어리를 발전시켜나가겠습니다 여러분 안녕
App Store, Google Play Store 에서 Pliary를 다운 받으실 수 있습니다. 🧚♀️
◆ 버그 및 건의사항은 pliary.kr@gmail.com을 통해 연락해주세요.
