문제 풀이 끝나고 나오는 화면이다. 오랫만에 figma로 디자인좀 해봤다. 저 노랑과 짙은 파랑의 조화는 언제 봐도 참 잘 어울린다. 이제 백엔드만 하면 완성이다. 진짜로!

별 탈이 없었습니다만 중간에 퀴즈화면 디자인 수정이 있었습니다. 기존의 디자인: 신규 디자인: 훨씬 안정되어보입니다.특히 4지선다는 훨씬 그렇다. 이제는 문제 채점 시스템?알고리즘?만 만들면 될 것 같다. 서버도 해야 하는데 앞이 멀었다.

ViewPager는 setState => Re-render로 이어지는 사이클에서 딜레이가 발생한 듯 했다. 그래서 이번에는 딜레이가 (거의?) 발생하지 않는 Animated.event를 활용해서 Interpolate를 사용했다. 기존의 ViewPager Indicator를 살펴보자면 이정도의 딜레이를 가지고있었다. Native Driver를 사용했다면 좋을것같았지만 Color 속성이 지원하지 않아서 아쉬웠다. 퀴즈 화면 개발에 들어갔다. 아직은 많이 남은 것 같아. 서버까지 완성하려면 시간이 촉박하지 않을까 싶다. 시간은 약 4달정도 남았다. 빨리 해치워야겠다.

대략적으로 구성은 마쳤다. 스크랩, 작성한 글 아래쪽의 ViewPager를 이용해서 Flo의 내 정보같은 UI를 구성하려 한다. 그렇지만 ScrollView 안의 ViewPager는 고정적인 Height를 줘야 작동이 잘 되기에 어떤 형식으로 구성할지 고민이다. 더 불러오기같은 UI를 사용해야할것같다.

react-native-shadow 패키지에는 엄청난 단점이 하나가 있었다. 가로-세로 길이가 고정이라는 것이였다. 그래서 이번에 구글도 다 새 머티리얼 디자인에서는 그림자를 많이 배제하는것같은데라는 핑계로 디자인 갈아엎는 작업을 시작했다. 대략 이게 원본이였다면 이 정도로 수정하였다. 기존에 만든 다크테마스러운 물건은 어떻게 내가 수용해낼 수 없어서 여러 핑계를 대어가며 구글스러운(이라고 말하기는 부끄러운) new-material(내 맘대로 부른다)디자인으로 변경하였다. 모든 그림자를 변경하여서 앞으로 가변적인 길이를 생각할 때 좀 더 쉽게 구현할 수 있겠다. 다만 걱정되는 부분은 제목(질문) 글자 모양이다. 어떻게 할지 고민이다.

새 컴포넌트에는 React-hook을 적용해보고싶어서 새 리액트 버전과 RN 버전으로 올리니 엄청난 Gradle, React Native, Git 에러의 쓰나미가 쏟아져서 이틀밤을 꼬박 지새운것 같다. 이번에 티스토리도 업데이트되고 해서 마크다운으로 글도 써보고싶고 해서.. 그냥 올려봤습니다! 근황: 아 그리고 앱 기획 단에서 앱에 대한 이름으로 Quiztory와 Quistory중에 고민이였는데, 며칠 전 구글에 검색해보니까 Quiztory라는 상표권이 등록되어있는 모양이다 ㄷㄷ 아무래도 이름도 잘 봐가면서 지어야 할 것 같다.

며칠간의 디자인과 싸움끝에 더이상은 못해먹겠어서 처음부터 재셜계하려고 했었는데, https://npmjs.org에서 이런 라이브러리를 발견했다. https://www.npmjs.com/package/react-native-shadow 이 라이브러리를 쓰면 안드로이드에서도 자유로운 그림자를 사용할 수 있다. 다만 하나 어색한게 있다면 그림자가 '경쟁' 글자를 가린다는것이다. 저거만 어떻게 한다면 완벽할것같다. z-index가 rn에 있던가.. 맘에 안드는 부분은 저 위에 헤더 텍스트이다. 저걸 어떻게 고쳐야 예쁘게 될지 고민이다. 이것도 나쁘지 않은것같았는데... 그림자를 쓸 수 있게되었으니 이건 보류해야겠다. 아니면 신규 안드로이드에는 다크모드가 추가된다니까 그 용도로 만들어도 될것같다.

홈화면을 만들어야 하는데... 전 글에서 말한 바와 같이 안드로이드에서는 그림자의 적용이 그렇게 자유롭지 못하다. 그래서 위와 같이 적용해야 하는 부분을 수정해야할것같다. 그림자를 빼고 어떻게 해야 한담....

왠지 모르겠지만 react-native는 안드로이드에서 box-shadow를 지원하지 않는듯 합니다. 기존의 밝은 푸른색이 도는 흰 배경 + 카드에는 그림자를 넓게 퍼지게 주었지만 안드로이드에서 넓게 퍼지는 그림자를 주기 어려운것같습니다. 위와같은 어두운 배경에 그림자를 제거한 형태로 진행하기로 했습니다. 기존의 카드 스택은 구현하기 난해할것같기도 해서 옆으로 넘어가는 형태로 변경했습니다.

온보딩을 만들었습니다. 사용 라이브러리는 react-native-onboarding-swipe입니다. 아래쪽의 건너뛰기, 다음 버튼은 index.js를 수정했습니다. 처음에 아래 텍스트가 출력이 안되는 이슈가 있었지만 이미지의 width를 screen에 맞춰서 넣어주고, height를 적당히 작게 주니 잘 출력이 되었습니다. 제 컴퓨터가 문제인 부분인지 라이브 리로딩을 할때 리로딩은 되지만 변경된 사항이 적용되지 않습니다. 한번 생기면 react-native run-android를 다시 해야해서 라이브 리로딩의 이점이 굉장히 떨어지는것 같습니다... 핫 리로딩도 마찬가지더라구요.