React Native ( expo )를 이용한 사이드 프로젝트 만들기 -1. 계획수립 & 기술검증

유튜브를 보다가 그림일기 보는 영상을 보았는데, 옛날 생각도 나고 해서 재미있게 보았다.

 

그런던중 이걸로 사이드 프로젝트를 하게 되면, 재미있을거 같아서 그림일기를 만드는 앱을 하나 만들어 볼까 한다.

---

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

1. YOUKAMI

https://apps.apple.com/kr/app/youkami/id1207147864

‎YOUKAMI

장점 :  
1. 이쁘고 깔끔한 ui다.

2. 개발 기간이 좀 짧을거 같다.

 

단점: 

1. 제목이 따로 없고 tag 형태로 누가, 어디서, 어떻게 ... 이런식으로 제목을 두는데, 내 개인적으론 불편하다고 느낌.

2. 확인이 그냥 dot형태 or 간단한 icon 모양인데, 이게 디자인적으로는 이쁜데 조금만 더 눈에 띄면 좋겠다고 생각함.

---

2. 그림일기 - 감성 일기장

https://apps.apple.com/kr/app/%EA%B7%B8%EB%A6%BC%EC%9D%BC%EA%B8%B0-%EA%B0%90%EC%84%B1-%EC%9D%BC%EA%B8%B0%EC%9E%A5/id1542012632

‎그림일기 - 감성 일기장

장점:

1. 깔끔하고 목적에 딱 맞는 앱임.

2. 내가 생각했던 그림일기에 딱 맞는 ui임. ( ㄹㅇ 안보고 아이패드로 앱 형태 그린거 있는데, 똑같음..아오 )

 

단점:

1. 솔직히 없음. 굳이 찾으라고 한다면 너무 기능이 없는거? 정도인듯

---

기능 나열 

우선순위 1, 2, 3, 4 별로 release 단위임

 

--- 우선순위 1 

1. 내 일기 리스트 ( 일기 리스트 보여주는 기능 )

2. 그림일기 만들기, 수정, 지우기

3. 그림일기 상세보기

4. 앱 사용법 (carousel 형식으로)

 

--- 우선순위 2

5. 로그인

6. 자랑하기 기능

7. 자랑한거 볼수 있는 게시판 

8. 좋아요 기능

9. 최신순, 좋아요 기능

 

--- 우선순위 3 ( 블록체인에 요즘 관심이 있어 생각난 거라 여기서 부터는 할지 안할지 모름, 이게 가능한지도 잘 모름 ㅋㅋ)

10. 블록체인 연결

11. 그림일기 만들었을때, 만든 일기를 자랑했을시, reward 개념으로 코인을 발행시킴

 

--- 우선순위 4 

12. 코인으로 뭘할수있게 할건지에 대해서.. ( 이건 우선순위 2까지 끝났을때, 그때가서 생각해볼 예정 )

---

기술 검증

1. React Native ( expo ) + ts

기능이 별다를게 없기 때문에, 모두다 지원하는걸 확인했다.
다만, 로그인 쪽에서 kakao sns 로그인을 넣을때, expo만으로 하면 문제가 있다는 글을 보았다. 
그때, eject 해서 native 라이브러리를 쓰면 되지 않을까?? ㅋㅋㅋ 일단 통과

 

2. NativeBase

bootstrap, antd 같이 ui 컴포넌트를 지원하는 라이브러리다.

간단히 시험해봤는데, 이 프로젝트에는 문제 없다.

 

3. react-native-modal-datetime-picker

 1) 한글로 바꿀수 있는가? O, 하지만 automatically하게는 안되는듯, 그건 native의 영역
 2) confirm & cancel button 커스텀 가능? O

 

4. react-native-signature-canvas

 1) 그림이 정상적으로 그려지는가? O
 2) base64 img로 변경이 가능한가? O
 3) base64 img를 다시 불러올수 있는가? O

 4) 펜의 색 변경이 가능한가? O

 5) 펜의 두께 변경이 가능한가? O 

 6) undo, redo 기능 O 

 

5. react-native-color-picker

 1) 이전 색을 볼수 있는가? O
 2) 선택 색 데이터가 잘 들어오는가? O

 

6. Carousel 시험해보기 O

carousel은 앱 사용법 쓸때 쓰는게 나을듯, png 이미지를 보여주는 식으로

---

앱 플로우

생각한 앱 플로우

---

남은일

1. 세부 계획 세우기 (page 별로) 

2. 순서대로 만들기