[iOS/UIKit] View Hierarchy 디버깅 팁

영화 프로젝트를 만들던 도중 예상치 못한 오류가 발생했다.

메인 뷰에서 다른 뷰로 갔다가 다시 돌아올 때 다음과 같은 오류가 떴다.

현재 메인뷰는 3개의 tableView cell안에 각각 collectionView 가 있는 형태로 구성되어있다.

 

에러메세지를 번역기에 돌려보니 다음과 같았다.

한 번만 경고: UITableView가 뷰 계층에 포함되지 않은 상태에서(테이블 뷰 또는 그 하위 뷰 중 하나가 아직 창에 추가되지 않음) 가시적인 셀 및 기타 내용을 레이아웃하도록 요청받았습니다. 이는 테이블 뷰 내부의 뷰가 올바른 정보를 알지 못한 상태에서 로드 및 레이아웃을 수행하도록 강제할 수 있으며(예: 테이블 뷰 경계, 기기 방향 모음, 레이아웃 마진, 안전 영역 인셋 등), 불필요한 레이아웃 연산이 추가로 발생하여 성능 저하를 초래할 수 있습니다.
디버거에서 이를 감지할 수 있도록 UITableViewAlertForLayoutOutsideViewHierarchy에 기호적 중단점을 설정하고, 해당 동작이 발생한 원인을 확인하여 가능하면 이를 완전히 방지하거나, 테이블 뷰가 창에 추가된 후까지 지연시키십시오.

흠.. 뭔가 tableView가 window에 추가되지 않은 상태에서 무언가 동작을 해서 발생하는 문제같다.

결국 tableView의 reloadData의 시점 문제였었다.

 

그러나, 오늘 알아볼건 이 오류의 해결법이 아니다.

 

사실 GPT를 쓰면 해결될 문제일지 몰라도, 당시엔 구글링으로만 문제를 해결하고 싶어서 이것 저것 찾아보던 도중,

이 문제의 해결법이라기보다, 뷰 계층구조 디버깅에 대한 팁에 관련한 문서가 있어서 살펴보게 되었다.

 

오늘은 간단히 뷰 계층구조 디버깅시 팁에 대해서만 알아보도록 하겠다.

---

View Hierarchy 디버깅

View Hierarchy 디버깅은 종종 사용곤 했다.

뭔가 보여야 할 뷰가 안보인다거나, 안 보여야 할 뷰가 안보인다거나 할때 쫙 펼쳐두고 보기 편했다.

 

이번엔 이렇게 View Hierarchy를 디버깅할 때 도움이 되는 팁을 알아보겠다.

 

1. 시뮬레이터에서 뷰의 프레임 확인

xcode에서 시뮬레이터로 앱을 빌드한 이후, 다시 xcode로 돌아와서

Debug > View Debugging > Show View Frames

를 체크하면 다음과 같이 시뮬레이터에서 직접 뷰의 경계를 확인할 수 있다

 

 

View Hierarchy 디버깅과의 차이점은 직접 움직이면서도  각 뷰가 차지하고 있는 영역을 볼 수 있다는 장점이 있다.

 

2. 잘린 콘텐츠 표시

xcode에서 View Hierarchy 디버깅에 들어가서 다음 아이콘을 누르면 

화면에 보이는 컨텐츠 외의, 잘린 컨텐츠를 표시할 수 있다.

 

잘린 콘텐츠 표시를 누르면 다음과 같이 화면 밖에 있는 콘텐츠들도 확인 할 수 있다.

 

 

3. 제약 조건 표시

xcode에서 View Hierarchy 디버깅에 들어가서 다음 아이콘을 누르면 

각 컴포넌트들의 제약조건을 확인할 수 있다.

 

 

이렇게 하면 코드로 보는것보다, 한눈에 어느곳의 제약조건이 걸려있고, 어떤 제약조건이 문제인지 확인할 수 있다는 장점이 있다.

---

 

※참고자료

https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/DebuggingTricksandTips.html

Auto Layout Guide: Debugging Tricks and Tips