ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [3] React native 일정관리 앱(오늘의 목표), 대 격변(?)
    개발 프로젝트/react native 일정관리 앱 2021. 12. 5. 20:49
    728x90

    그동안 회사일이 바빠 잠시 개인 프로젝트를 하지 못했다.
    2~3달 동안 React native 에 익숙해져 가는 시간이 조금 있었고 세부적으로 다음 기술들을 사용 및 적용 하였다.

    1. Redux
    2. axios
    3. secure storage, tabs, navigator 등
    4. 기타 UI 제작을 위한 여러가지 라이브러리
    캘린더, 헤더스크롤 애니메이션 뷰, 모달, 간략한 차트

    아직도 javascript는 나에게 조금 힘든 언어같다. c++, java 컴파일러형 언어에 익숙해져 있어서 그런가보다.
    아마 다시 프로젝트를 시작한다면 typescript로 하지 않을까 생각이 된다.

    얻게된 것은 모바일 OS 에 대해 기존보다 조금은 이해를 하게 됐다.
    대부분의 RN 라이브러리들이 래핑이 잘 되어있어 Platform분기 처리를 많이 하지 않아도 됐지만
    좀 더 잘 만들어진 앱을 위해서는 안쪽까지 봐야하는 경우가 종종 있었다.

    Redux를 적용하면서 많은 것들을 해결할 수 있었다.
    디버거 연결, action - reducer 이해, 유지해야 할 데이터와 그렇지 않은 데이터를 분기처리 (whitelist, blacklist)

    현재 구현중인 화면은 다음과 같다.

    시작 화면

    RN에 익숙해지는 시간이라 다른 앱들의 기본적인 구현만 흉내내봤다.
    텍스트나 이미지등은 출시전에 나만의 앱에 더 잘 맞게 손을 봐야 함



    일정 요약 화면

     

    일정 요약을 어떻게 하면 보다 더 잘 할 수 있을지 고민이 많았다.
    상단에 헤더스크롤 애니메이션 뷰를 삽입하여 조금 심심함을 없앴고
    간략한 메시지를 넣어봤다.

    간략한 그래프 요약도 넣어놨는데, 개발을 하다보니 일정 + 습관 정리 까지 범위가 조금 커저버려서 넣게 됐다.
    아마 출시전에 가장 많은 고민을 할 뷰가 될 것 같다.
    애니메이션은 넣지 않았는데 일정 요약에서 붉은색으로 강조된 일정 말고, 조금 더 시각적으로 잘 표현될 수 있게
    할 계획이다.


    일정 화면


    알람은 서버에서 전송은 하지 않고 로컬 스케쥴 notification을 사용해 구현했다.
    보다 더 정확하게, 여러 예외상황에서도 잘 알리려면 서버의 개입이 필요하겠지만 개인 개발에서 서버까지 붙게되면 조금 부담 스러워 아직 연동은 하지 않았음.

    아이템 스와이프를 넣어 삭제하거나, 완료 할 수 있도록 했다.
    해당 UX 는 전체 UX 에 동일한 방법으로 통일성을 주었다.

    일정 생성하는 뷰 하단에는 간략한 명언도 넣어줌으로써 일정을 지키거나 앱을 사용할때 동기부여가 되도록 해봤음.

    그 외 여러 일정앱에서 갖는 기본 기능을 구현했다.
    하루에 일정이 많으면 몇개나 될까를 고민해봤는데 아마 대부분은 5개 미만일것 같았다.
    하지만 더 많을경우 한눈에 잘 보이지 않을수 있으므로 캘린더 자체를 접었다 폈다 하도록 구현했다.

    접은 경우 위와같이 표현된다.
    그리고 일정을 추가하거나 습관을 추가 하기 위해 플로팅 버튼을 구현해 오른쪽 하단에 고정해두었다.


    습관 화면

       


    여러가지 앱을 분석하고 괜찮아 보이는 것들을 가져와 봤다.
    아직 통계까지 구현이 완벽하게 되지 않았음
    여러 뷰를 구현하면서 RN 과 javascript에 익숙해 지는 시간이었음

    자신만의 커스텀 습관, 그리고 커스텀 이미지등을 등록 할 수 있도록 개발하고 마무리를 지을 생각이다.



    마이 페이지 & 통계 화면

       


    습관 분석 통계를 넣어 사용자가 어떤 이유로 하지 못햇는지 인지 시켜 주었다
    구매하기나 의견 건의는 UI 만 넣어두었고 아직 구현은 못했다.

    회사에서는 백엔드 서버 개발을 하고 있지만
    여러가지 사정으로 RN 을 이용해 앱 제작까지 풀 스택으로 맞게 되었다.
    그 와중에 좀 더 잘 해보려는 욕심이 생겨 개인프로젝트로 스터디를하고 알게된점을 회사 프로젝트에 적용하려고 노력하였다.

    앞으로

    사실 난 자바스크립트에 대한 이해도가 매우 떨어진다. 그래서 부끄럽게 코딩하며 개발했다는 생각이 든다.

    좋은 앱을 만들기 위해서, 자바스크립트를 좀 더 깊이있게 공부해야 할 것 같다.

    두번째로는 RN으로 개발하더라도 모바일에 대한 이해가 필수라는 생각이 들었다.

    마지막으로는 RN 오픈소스 진영이 잘 되어있지만 조금 깊게 보면 자잘인 버그들이 꽤 많다는 것을 알게됐다

    다음글은 출시 후기가 될 듯!

    728x90
Designed by Tistory.