React Native를 이용한 사이드 프로젝트 만들기 2 - 1. 새로운 프로젝트를 기획하다!

그림일기 프로젝트의 캔버스의 퍼포먼스 향상작업을 하던 도중에 react native skia에 대해서 접하게 되었다.

 

이 모듈은 rn의 퍼포먼스의 한계상 못했던 다양한 앱을 만들수 있을거 같아 이 모듈을 적극적으로 사용한 앱을 하나 기획하고 만들게 되었다. 

(앱의 1차버전은 이미 만들기는 다 만들었고 play store는 통과, app store는 아직 미제출 상태이다!) 심사 통과 완료~ 

https://play.google.com/store/apps/details?id=com.kwonkunkun.whiteboard&pli=1 

모션드로우 - Google Play 앱

https://apps.apple.com/us/app/%EB%AA%A8%EC%85%98%EB%93%9C%EB%A1%9C%EC%9A%B0/id6459881540

‎MotionDraw

---

아이템 서칭

새로운 프로젝트의 아이템은 두가지의 조건으로 찾아보았다.

 

1. 그림을 그릴수있으면 좋겠다.

2. 초기 mvp앱에는 따로 백앤드가 필요없었으면 좋겠다.

 

그러던중 어릴시절 수업시간에 책에 그림을 한장한장 그리고 빠르게 넘겨서 움직이는 그림을 만들었던게 기억이 났고 이 아이템으로 정했다! (이걸 flipbook animation이라고 하는것 같다.)

https://www.youtube.com/watch?v=Un-BdBSOGKY 

---

현재 시중에 있는 앱 서칭 및 사용

1. Folioscope

https://apps.apple.com/us/app/folioscope-animation-network/id1084331400

‎Folioscope: Animation Network

장점:

1. 그림그리는 모듈을 정말 잘만듬!.. (native가 아니면 불가능할것 같은 느낌이었다)

2. 있을 기능은 다있다.

 

단점:

1. 그림을 그리는 화면에 힘을 다주고 나머지는 심플하게 기능만 있는 느낌이었다.

2. 기능적 단점은 아닌데... 풀스크린 광고가 너무 많다.

 

그 외의 앱들은 그렇게 괜찮은 느낌의 앱들은 없었다.

---

 

앱에 넣을 기능 

조금 생각해봤는데 그림일기랑 거의 비슷한 플로우로 진행하면 될거 같고 일단은 크게 4가지 기능만 만들어서 배포할 생각이었다.

 

1. 내 작업 리스트

2. flipbook animation 만들기, 수정, 지우기

3. 작업중 그림 zoom in out gesture

4. 만든 animation 비디오 파일로 다운로드 하기

5. 내 작업 상세보기

---

디자인

기존 사이드 프로젝트들은 따로 디자인을 하고 들어가지 않아서 수정이 잦고 코드가 더러워져서 figma 쓰는법을 익혀와서 디자인을 하였다.

이런식으로?

---

이제는 차차 1차로는 뭘 구현했고 어떻게 구현했는지에 대한 기술적인 글을 쓸 예정이다! 생각보다 기능구현자체가 어려웠고 잔잔바리 버그들때문에 스트레스 받았다 ㅋㅋ 대충 앱의 플로우는 아래의 영상을 참고하면 좋을것 같다!

https://www.youtube.com/watch?v=EGMEEbLpCvo 

앱의 데모영상