디자이너의 네이티브 앱 개발 도전기 #10

네이티브앱, Response Layout

여태껏 소제목을 디자이너. 네이티브 앱 개발 도전기로 통일해 작성하다보니 게시물마다 뭘 고쳤는지, 뭘 진행했는지 모르겠어서 소제목을 따로 의미를 부여하기로 하였다.

어제 밤, React Navigation의 버전 업에 실패하고 off-canvas패키지 적용도 실패해서 프론트 레이아웃을 전부 잡기로 했다.

flex 레이아웃이 생소하기도 했고, 아이폰x기준으로 설계하던게 아이폰8 이하로 떨어지면 좀 문제가 생길거라 확신했기 때문이다.

포지션을 left나 top 등으로 픽셀 정렬을 했기에 더욱 확신.

시물레이터를 아이폰8로 바꾸고 expo를 띄우니 역시나.. 확신이 확실로 바뀌었다.

아이폰x와 아이폰8의 디스플레이 영역의 구분도 꽤나 상이하기도 하고, 아이폰x의 세이프영역 설정도 없었으니 당연한 결과.

이걸 바로잡겠노라 재플린을 동원 해보았으나 레이아웃까지 확인할 수 있지 않을까 싶은 내 희망은 처참히 무너졌다.

아이폰8(좌), 아이폰XS(우) 하.. 이건 옛날에 익스와 크롬 맞추는 느낌.

재플린은 그저 디자인 엘리먼트의 스펙을 확인하기 위한 수준이었던것.

커뮤니티에선 안드로이드에서 레이아웃 엉킴이 더 심할거라는데 걱정이다.

일단,

safearea 설정부터 하고, view를 모두 재설계 해야할것 같다.

그러기 위해 스타일을 모두 개별 파일에서 import하는 방식으로 바꿔야 할것 같고.

화면 전체는 flex로 블럭을 쌓아 response하게 바꿔야겠다.