일곱 번째 프로젝트. Tinder UI Clone

설명:

https://reactnativeexample.com/a-tinder-clone-app-with-react-native/

위의 프로젝트를 참고해서 만들었다. 사실 위의 프로젝트를 리팩토링한 게 전부다. 내부를 들여다보면 Swiper 라이브러리를 사용한 걸 제외하고는 FlatList, ScrollView, View, Text, Image 등을 사용한 게 전부다. 그럼에도 그럴듯한 앱 UI를 만들었다는 점이 신기하다. 스크린은 Explore, Match, Chat, Profile 이렇게 네 개로 나누어져 있고 그래서 당연히 Tab Navigation을 사용한다. Explore 화면에서는 카드를 넘길 수 있게 되어 있고, Match 화면에서는 매칭된 유저를 보여준다. Chat 스크린에서는 유저와의 채팅 목록을 보여주고, Profile에서는 유저의 상세 정보를 보여준다.

github 주소: https://github.com/adler0311/awesome-tinder-clone-ui

 

스택:

- react

- react-native

- typescript(사용하였지만 거의 사용하지 않았다.)

 

새로 익힌 혹은 더 연습한 기술/기능:

- UI 디자인:

이번에 주로 사용한 기술이다. 디자인도 기술이라고 할 수 있다면. 일단 react-native랑 native-base가 둘 다 View를 가지고 있다. 지금까지는 react-native의 View를 사용했는데 큰 차이는 없는 듯 하다. 다만 native-base는 UI 라이브러리로 주로 vector-icon 가져올 때 사용하고 있다. UI라이브러리는 이거 말고도 react-native-elements라는 것도 있다. 아직까진 지금처럼 사용해도 됄 거 같다.

 또한 shadow에 대해 알게 됬다. shdowOpacity, shadowRadius, shadowOffset, shadowColor를 사용해서 그림자 효과를 적용할 수 있다.

- react navigation: 탭 네비게이션을 사용했다. screen을 설정하는 부분에서 icon을 같이 설정했는데 이렇게 하는 게 더 나은 것 같다.

후기:

Image 컴포넌트는 여전히 헤깔린다. 일단 style을 적용하지 않으면 View를 오버해서 너무 크게 나온다. resizeMode를 contain으로 설정해도 특정 상황에서 제대로 동작하지 않는다. 가령 ScrollView안에서 이미지가 사라져 버린다. 단순한 컴포넌들로 상용 앱 수준의 디자인이 나오는 게 신기했다. 물론 진짜 디자인을 입혔다고 할 정도는 아니지만 그렇다고 개발자가 만들었다고 생각할 정도의 허접한 디자인도 아니다. 깔끔하다.

이 UI를 기반으로 기능을 하나씩 넣어봐도 좋을 거 같다. 가령 채팅 기능이라든가, 실제로 서로 좋아요를 눌렀을 때 MATCH가 되는 이벤트를 보여준다든가 이걸 알림으로 띄워준다든가 하는 것들. 

조금 아쉬운 점:

이번 프로젝트는 너무 단순해서 딱히 없다.