[iOS] 화면이 깨진다? 원인을 파악해보자

화면을 만들다 보면 아래와 같은 로그가 찍히는 경우가 있다.

 

[LayoutConstraints] Unable to simultaneously satisfy constraints.

 

 

해석

Unable to simultaneously satisfy constraints.

동시에 constraints를 만족시킬 수 없어

Probably at least one of the constraints in the following list is one you don't want.

아래 constraints 리스트에 나와있는 것들 중에 최소한 하나는 니가 필요한게 아닐거야

 

Try this:

(1) look at each constraint and try to figure out which you don't expect;

  각 constraint를 확인하고 니가 생각했던게 아닌 부분을 찾아봐

(2) find the code that added the unwanted constraint or constraints and fix it.

  니가 원한게 아닌 constraints 가 추가됐을 건데 찾아서 고쳐

(Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints)

  NSAutoresizingMashLayoutcontraints를 보는데 이해가 안가면

  the UIView property translatesAutoresizingMaskIntoConstraints 도큐먼트를 참조해봐

 

 

 

결국은 니가 화면을 잘 못 만들었으니까 다시 만들어. 라는 뜻이다.

 

이런 경우는 뚜렷한 에러가 있는게 아니기 때문에 찾기가 힘들다.

 

이 로그가 하나만 찍히면 다행이지만 여러개 반복해서 나오는 경우도 있다.

 

찾아도 도무지 뭐가 문제인지 모르겠을 때 내가 참조하는 방법 2가지가 있다.

 

 

 

 

 

1. Debug View Hierarchy

 

그럼 일단 Xcode가 말하는 문제가 뭔지 검토라도 한 번 해봐야 할 것 같다.

 

위 로그 이미지에서 빨간 밑줄이 쳐진 부분을 봐두자.

 

UIImageView:0x7fab73409130 이라고 적혀있다.

 

여기에 뭔가 문제가 있나보다.

 

 

 

로그창 위 툴바에 있는 버튼 중에 Debug View Hierarchy 버튼을 클릭하면

 

Debug View Hierarchy

 

 

돌아가고 있는 앱의 현재 화면과 화면의 Depth, 이름, 주소 등 여러 정보들을 보여준다.

 

Debuging View Hierarchy

 

 

왼쪽 탭에 뷰들을 클릭하다보니 로그창에서 본 것 같은 익숙한 문자열을 Address로 가진 View가 있다.

 

Storyboard에서 해당 View와 관련된 constraint를 하나하나 찾아보면 뭐가 문제인지 파악할 수도 있을 것이다.

 

Debuging View Hierarchy 상태에서는 앱이 멈춰있는 상태이므로 Continue Program Execution 버튼을 눌러 앱을 재개한다.

 

Continue Program Execution

 

 

근데 한 가지 고민을 해보자.

 

로그창에 찍힌 constraints 리스트에 수정해야할 View가 한 두 개정도면 괜찮겠지만

 

대충봐도 많아 보이거나 로그에 뭉탱이로 여러개가 나오면 하나하나 다 찾아서 수정해야한다.

 

그 많은 constraint 리스트에 있는 View의 Address를 대조하고 문제가 있는 View를 찾아서 뭐가 문제인지 파악하고

 

그럴 생각에 머리가 지끈거릴 때 그나마 도움이 되는 곳이 있다.

 

 

 

 

 

2. WTF Auto Layout

 

WTF Auto Layout

 

왓더F억이 아니라 Why The Failure이다.

 

WTF Auto Layout (1)

접속해서 Past your constraint error log here: 에 아까 로그에서

 

"Try This:" 문단 아래에 있는 괄호 안의 리스트를 여기에 복붙하고 Go!를 클릭하면

 

각 항목이 무슨 뜻인지 대략적으로 보여준다.

 

WTF Auto Layout (2)

 

이 사이트의 장점은 얼핏 보기에 난해하고 복잡해보이는 로그를

 

보기 쉽게 그림으로 보여주고 대략적인 설명을 해준다는 점이다.

 

하지만 대략적이라고 말한 이유는

 

나는 Storyboard 또는 xib에서 각 View에 내가 알아 볼 수 있는 이름을 지정하는데,

(UILabel 같은 경우는 입력한 Text가 이름으로 지정이 된다.)

 

로그상에서는 UIView, UIImageView 처럼 Type으로 표기되기 때문에 WTF Auto Layout에서도 똑같이 표기가 된다.

 

내가 정한 View의 이름

 

 

 

나의 경우에는

 

소스상에서 화면에 View를 추가하거나 constraint를 추가했을 때와 같이

 

소스에서 View를 조작한 경우에 많이 발생했던 것 같다.

 

그렇기 때문에 특별한 경우를 제외하고는

 

Storyboard 또는 xib파일에서 화면을 최대한 그리는 편이다.

 

물론 Storyboard 또는 xib파일에서 화면을 그릴 때도 문제가 발생한 경우가 있었다.

 

그럴 땐 어쩔 수 없이 하나씩 차근차근 원인을 파악한다.

 

 

 

이쯤되면 그래서 어떻게하면 빠르고 정확하게 저 로그를 없애버릴 수 있는건데? 라는 생각이 들텐데

 

내가 아는 한 그런 방법은 없다.

 

Debug View Hierarchy든 WTF Auto Layout이든

 

우리가 추가한 constraints 중에 무엇이 잘 못된 것인지 찾을 수 있도록 도와줄 뿐이다.

 

결국 어쩔 수 없이 우리가 수작업으로 찾아내야 한다.

 

 

 

한 가지 팁 아닌 팁이 있다면,

 

내가 수작업으로 Auto Layout의 잘 못된 constraint를 찾는 방법 중 하나는

 

화면의 가장 바깥부분부터 안쪽으로 들어가면서 잘 못된 부분을 찾는 방법이다.

 

'내가 정한 View의 이름' 사진처럼 나는 Storyboard에서 화면을 그릴 때

 

UIView를 화면 전체 크기로 추가한 다음에(Container로 사용할 View) 이 UIView안에 화면을 그린다.

 

내부에 복잡한 View를 그릴 때도 UIView로 영역을 지정한 후에 그 안에 그린다.

 

이렇게하면 초반에 화면을 그리는게 복합해지지만

 

constraint들이 꼬인다해도 그게 어느 부분인지 파악하기가 쉬워진다.

 

 

 

이건 어디까지나 실전에서 독학으로 앱 개발을 공부한 내가 참고하는 방법이고 나만의 방법이기 때문에

 

또 다른, 아니 더 유용한 방법이 있을지도 모른다.

 

그러니까 그런 방법이 있으면 알려주세요!