[UIKit / Swift / iOS] 디버깅을 해보자. (TableView가 보이지 않는 문제)

 

개요

UIKit, 즉 코드베이스로 UI를 구현하고 있는데, 문제가 생겼다.

TableView가 보여야 하는데, 아래 사진처럼 TableView가 보이지 않는다.

그리고 TableViewCell에서 MockData가 보여야 하는데 보이지 않는다.

MockData로는 A, B, C, D 등 간단한 알파벳을 넣었다.

따라서 View Hierarchy을 사용해서 디버깅을 진행해보자.

 

 

 

 

 

전개

먼저 좌측 하단(디버그 영역)에서 위와 같은 버튼을 찾아서 클릭해준다.

이 버튼이 View Hierarchy 이고,

View를 계층별로 나눠서 보여주는 기능이다.

 

 

 

그럼 왼쪽 그림과 같이 뷰가 계층별로 나뉘어서 보인다.

오른쪽의 시뮬레이터 상의 화면과 비교해보자.

오른쪽만 봤을 때는 아무것도 없는 백지로 나온다.

하지만 왼쪽화면을 보면 테이블뷰는 정상적으로 구현이 되어있다.

하지만 모종의 문제로 오른쪽 사진처럼 백지로 나온다.

우리는 디버깅을 통해서 이것을 잡을 것이다.

 

+ MockData를 생성해 두었기 때문에, cell에는 A, B, C, D 등이 출력되어야 한다.

 

 

 

그리고 뷰를 살짝 잡고 움직여보면, 이런식로 계층들을 입체적으로 볼 수 있다.

 

 

 

 

그리고 오른쪽 네비게이터 영역에서 디버그 탭을 선택하면, 계층 뷰들을 텍스트로 저런식으로 볼 수 있다.

 

 

해결

 

그럼 문제가 있는 것으로 추정되는 부분을 클릭해보자.

그부분이 파란색으로 변하고 좌측 인스펙터 영역에 정보가 나온다.

현재 선택된 부분을 보면 흰색으로 A라는 글자가 보인다.

그럼 글자 출력까지는 문제가 없다는 뜻이다.

 

 

 

그리고 인스펙터 영역을 확인해보니, text가 흰색으로 되어있다.

따라서 검은색으로 변경하거나, 색을 .label로 설정하여 시스템의 화면모드(다크모드, 라이트모드)에 따라 변경되도록 설정해준다.

 

 

 

 

 

그리고 다시 디버그 영역에서 해당 버튼을 클릭하여 시뮬레이터를 실행시켜본다.

 

 

 

그럼 위의 사진과 같이 제대로 동작하는 모습을 확인할 수 있다.

이제 디버깅을 통해서 문제를 해결했으니 디버거를 꺼줘야한다.

따라서

 

 

 

네비게이터 영역의 정지 버튼(네모 버튼)을 눌러서 시뮬레이션의 동작을 멈추고 디버거를 종료시키면

디버깅은 끝이 난다.

 

 

 

마치며

이번에 발생했던 문제는 생각보다 간단한 문제였고,

오류라기보다는 텍스트의 컬러값을 잘못 설정해서 발생한 아주 간단한 문제였기 때문에,

View Hierarchy를 통한 디버깅으로 간단하게 잡아낼 수 있었다.

더 복잡한 문제가 발생해서 디버깅이 필요한 경우도 있겠지만, 디버깅을 하는 방법은 같다.

View Hierarchy를 사용해서 디버깅을 해보니 확실히 눈으로 보면서 어느 부분이 문제인지 알 수 있어서

Break Point를 사용하는 것보다 좀 더 직관적인 디버깅이 가능했던 경험이었다.