[개인 Project] RN으로 앱 만들기 - ios, and에 따른 디자인 및 1차 정리

ios, and에 따른 디자인

ios와 and에서 각자 따로 실행해보면 디자인적으로 위치가 맞지 않는 부분이 많았습니다. 그래서 아래 코드와 같이 style을 구분해서 작성해주었습니다.
그리고 각각의 태그에 스타일을

style={
              Platform.OS === 'ios'
                ? styles.terminalModal_ios
                : styles.terminalModal_and
            }

아래와 같이 설정하여 플랫폼에 따라 다르게 나오도록 설정했습니다.

 terminalModal_ios: {
    flex: 0.5,
    position: 'absolute',
    // justifyContent: 'center',
    paddingTop: '15%',
    alignItems: 'center',
    backgroundColor: 'white',
    width: '100%',
    height: '40%',
    marginTop: '150%',
    //ios
    shadowColor: '#000',
    shadowOpacity: 0.1,
    //android
    // elevation: 1,
    borderRadius: 25,
  },
  terminalModal_and: {
    flex: 0.5,
    position: 'absolute',
    // justifyContent: 'center',
    paddingTop: '15%',
    alignItems: 'center',
    backgroundColor: 'white',
    width: '100%',
    height: '40%',
    marginTop: '110%',
    //ios
    shadowColor: '#000',
    shadowOpacity: 0.1,
    //android
    // elevation: 1,
    borderRadius: 25,
  },

style의 예시입니다.

기록

일단 어플에 대한 설명을 기록해놓으려고 합니다. 정리도 할겸..

시작화면

expo-location을 사용하여 현재위치를 확인하는 단계를 거치고 나면 위치정보를 가져오도록 만들었습니다. 현재 gif에서는 확인하는 단계가 표시되지 않습니다. 여기서 원래 위치를 확인 한다는 창이 떴는데 왜 영상에서는 안뜨는지 모르겠네요

터미널 정보 표시 - 빈 보관대수

누비자에서 지원하는 open API를 받아서 정보를 표시해주었습니다. 마커를 클릭하면 마커의 터미널 이름과 함께 빈 보관대수를 볼 수 있도록 표시가 됩니다.

마커 모양도 전체적으로 바꾸었습니다. 마커 디자인은 저작권이 있기 때문에 어디에 저작권을 표시해야하는데 어디에 표시해야할지 생각중입니다..

현재 날씨 확인

openweathermap API를 사용하여 현재위치의 날씨 정보를 가져왔습니다.

누비자 웹사이트 공지사항 확인

현재 누비자 웹사이트에 공지되어있는 공지사항을 크롤링해서 표시해주었습니다.
메인화면 위에 공지사항을 클릭하거나 사이드 drawer 에서 공지사항을 확인할 수 있습니다.

누비자 이용방법 설명

누비자를 등록 및 사용하는 방법을 그림으로 표시했습니다.


한탄..

앱을 이 상태로 출시하면 리뷰에 욕만 올라오지 않을까 생각합니다ㅠㅠ 배포하는 방법도 제대로 공부해야합니다.

광고도 넣을 생각입니다.(이게 주된 목적 일지도)플레이 스토어에 먼저 출시하고 많이 사용한다면 앱스토어에도 등록할 생각입니다.

디자인을 한번도 배우지 않아서 그런지 뭔가 엉성합니다. 그래서 주변에 디자인에 관련된 사람들이 있어서 그쪽으로 자문을 구해볼 생각입니다.

어플이름은 ALGO?

어플 이름을 ALGO_NUBIZA로 할지 그냥 ALGO 로 할지도 못 정하겠습니다. 혼자 하니까 의견을 나눌만한 방법이 마땅히 떠오르지 않네요ㅠ

좋은 웹페이지 즐겨찾기