[이슈해결] ZStack 에서 마주할 수 있는 문제점

Background

---

Problems

기존 프로젝트는 NavigationView나 NavigationStack이 없다. 화면 이동을 하고자 할 때는 이동 할 View를 ZStack을 사용해서 기존 뷰 위에 덮어 씌우는 방식을 사용하고 있다. 여기에 navigation push 애니메이션 효과를 주기 위해 오른쪽에서 왼쪽으로 밀고 들어오는 듯한 애니메이션이 들어가 있다. 

 

메인에는 탭뷰가 존재하고 각 탭에는 rootView라고 할 수 있는 View가 존재한다. rootView에서 상세로 이동하면 이 상세 화면은 탭바를 가리면서 화면 전체를 차지해야 한다. 

 

탭뷰가 보이지 않아야 하므로 window에서 UITabBar을 찾고 window 전체 offset을 조정하는 방법을 사용하고 있었는데 탭뷰를 가리고 보이게 하는 과정에서 사이드 이펙트가 발생하면서 유저가 기능을 사용할 수 없는 크리티컬한 이슈와 UI 틀어짐 이슈가 발생하고 있었다.

tabBar.superview?.frame.origin.y = (tabBar.superview?.frame.origin.y)! + 4.5

하단 탭바를 가리는 로직은 UITabBar를 사용하는 것이였는데 이때 함께 실행되는 위 코드로 인해 크리티컬한 이슈가 발생하고 있었다.

이 코드가 없으면 기존 rootView의 크기로 인해 탭바만큼의 공간을 채울 수 없고, 이 코드를 놥두자니 상단에 미세한 패딩이 들어가고 있었다.(실제로는 패딩이 아니라 화면이 4.5만큼 내려갔다고 볼 수 있다.)

왜 이렇게 작업되어 있는지 히스토리가 남아 있지 않았고 상세 화면으로 들어갈 때 필요한 dependency가 많아서 이를 파악할 필요가 있었다.

 

Purpose

UI 깨지는 이슈 수정, 플로우 정상 진행하도록 수정, 탭바 노출/비노출 이슈 수정

---

Solution

---

Tools and Skill

• Xcode v 14.3.1
• iOS 최소 지원 버전 v 15.0

Implementation

ZStack의 경우 Z 축 방향으로 View가 쌓이게 된다. 

ZStack의 크기를 지정하는 경우는 크게 3가지 정도가 있다. frame 수정자를 사용해서 크기를 명시적으로 지정하는 경우 해당 값으로 고정된다. 반면에 ZStack에 frame이 지정되어 있지 않고 자식뷰가 존재한다면 그 자식뷰에 따라 크기가 지정된다. 만약 자식 뷰가 화면을 가득 채워 상단 하단에 위치하게 하고 싶은 경우 중간에 spacer를 사용해서 영역을 전체 영역으로 만들어 주면 된다. 

그리고 자식 뷰에 따라 지정된 ZStack에서 겹쳐지게 쌓이는 뷰는 부모 뷰의 크기에 따라 지정된다. 

탭의 rootView는 탭 영역을 제외한 영역 만큼 채워져 있고 이 뷰에서 ZStack을 사용해 SubView를 쌓게 되면 SubView의 최대 크기는 탭 영역을 제외하고 있는 rootView의 크기를 넘지 못하게 된다.

반면 탭을 지정하고 있는 상위 뷰의 영역에서 SubView를 ZStack으로 쌓아 주면 화면 전체 크기를 사용할 수 있다. 이렇게 하면 탭바를 굳이 가리거나 내려주지 않아도 되며 탭바 영역을 채우기 위해 UITabBar의 상위 뷰 오프셋을 4.5만큼 조정해서 생긴 이슈가 발생하지 않는다.

subView의 frame의 크기를 고정하고 이를 ZStack을로 감싸면 ZStack의 영역은 SubView들의 영역으로 지정된다. 하나의 기기에서 UI가 제대로 동작하는 것을 확인했다 하더라도 해상도가 다른 기기에서 확인하면 고정된 SubView 크기에 의해 ZStack은 화면을 넘어가게 된다. 기대하던 화면 크기(연 분홍) 에서 SubView에 의해 더 커진 View가 ZStack에 쌓이게 되고 이후 SubView와 Spacing을 사용하면서 하단 부분이 잘리게 되었다. 

 

---

 

Result

---

Result

탭의 rootView가 아닌 탭바를 포함하고 있는 탭의 상위 뷰에서 얼럿을 띄워 주듯 상세 화면을 띄웠고 그 이후의 화면에서 뷰가 깨지지 않도록 ZStack의 크기를 관리했다. SwiftUI는 다양한 기기에 대응할 수 있는 UI 컴포넌트를 제공하기 때문에 frame을 지정해 주는 대신 유동적으로 View를 조정할 수 있도록 변경해 주었다. 

 

What to apply

NavigationView와 NavigationStack을 적용 하면 탭바의 탭을 숨길 수 있고, 애니메이션 코드 없이 네비게이션 스택 애니메이션을 사용할 수 있기 때문에 이를 적용하는 방식을 생각해 봐야 할 것 같다. 

 

---

Reference

---