디자이너의 네이티브 앱 개발 도전기 #2
디자이너. 네이티브 앱 개발 도전기
매일매일 틈 날 때마다 개발하다 보니 쓸 글도 많아진다.
밀린 숙제 하는 느낌으로 써야 하는 것인가 싶기도 하지만, 결국 이렇게라도 해서 채찍질을 해야 내일도 개발을 할 수 있음을 알고 있다.
3일간 괴롭히던 side menu를 성공했다.
그동안 아마 패키지들이 말썽을 부렸던 듯, 같은 방식으로 똑같이 진행했는데 오늘은 귀신같이 성공.
하여튼.. 똑같은 것도 여러 번 시도하다 보면 노하우가 쌓이듯 그냥 성공하는 듯싶다.
side menu는 아래의 컴포넌트를 이용했다.
프로젝트를 진행할수록 사용한 컴포넌트들은 따로 기록해두었다가 나중에 쏟아내야겠다.
https://github.com/react-native-community/react-native-side-menu
SKetch를 이용해 디자인한 프로토타입지금은 슬라이드 되어 나온 화면.
물론 위 화면은 프로토타입으로 Sketch를 이용해 디자인한 이미지다.
화면 중간쯤 보이는 햄버거 버튼을 누르면 View가 우측으로 슬라이드 되어 밑에 숨어 있던 레프트 메뉴가 나오는 구조이다.
잘 보면 View 좌측에 살짝 shadow도 들어가 있는데 구현하는데 실패했다.
여러 컴포넌트를 동원해 시도해보았는데 화면 밖으로 나간 엘리먼트는 랜더링을 하지 않는 것 같았다.
이건 웹 엘리먼트의 쉐도우와 조금 다른 듯.
시물레이터를 이용해 확인중인 실제 개발중 화면사실 사이드 메뉴와 바텀 탭 바 중 많은 고민을 했다.
오래도록 고민하였으나 디스플레이의 하단에 꽤 중요한 정보를 담을 예정이므로 사이드 메뉴를 선택하였다.
그리고 안드로이드는 바텀 탭 바를 사용하질 않기도 했고.
결정적으로 슬라이드 되어 나오는 레프트 메뉴가 디자인하기에도 편했고, 결과물도 만족스러웠다.
이젠 location을 1개 이상 저장하는 기능으로 들어가 볼 생각이다.
UI는 프로토타입 디자인에서 85% 정도 구현 가능한 것을 확인했다.
현재 가장 어렵게 생각되는 부분이 location을 키워드로 검색해서 accuweather api를 이용해 받아온(autucomplete) 후 유저가 선택한 지역을 차례대로 저장하는 부분이다.
위 기능 구현을 위해 아래의 강좌를 먼저 들어볼 생각이다.
https://academy.nomadcoders.co/courses/enrolled/261376
하루에 3단원~5단원씩 넘어가 볼 생각인데 강좌를 보며 진행할 개발은 없으므로 그동안 날씨 앱을 만들기로 결정한 계기나, 대한민국의 공기 질 데이터 기준에 대한 부분을 조금 작성해볼 생각이다.
