UIKit) TIL #30 키오스크 팀프로젝트 마무리 - 아키텍처 , 오토레이아웃 충돌 intrinsicContentSize

팀프로젝트 제출과 발표가 잘 끝났지만 

팀 프로젝트를 마무리 하고 

팀에 많은 기여를 하지 못해 팀원들에 대한 미안함과 스스로에 대한 아쉬움이 많이 느껴졌다.

아직 배워야 할 것이 많은데 앞으로 적응을 하려면 열심히 나아가는 것만이 살 수 있는 길이다.

 

키오스크 앱을 만들며 , 다른 팀들의 발표를 보며 궁금했던 가장 대표적인 것들을 뽑아 정리해보고자 한다.

 

디자인 패턴이란? 

• 공통의 문제에 검증된, 정형화된 해결책 - 개발패턴
• 건축으로 비유하자면 건축 공법
• 지속적이고 효율적인 유지보수와 개발효율성을 위한 템플릿
• 앱의 아키텍처

아키텍처란?

• 개발에서 의미하는 소프트웨어 아키텍처는 개발 프로그램의 구조와 뼈대를 의미한다.
• 싱글톤, 델리게이트패턴, MVC, MVVM, MVP 등등

MVC 

Model - View - Controller  디자인 패턴

• Model - 비즈니스 로직 ( 데이터 구조 표현 및 데이터 저장 )
• View - UI 관련 ( 뷰컨트롤러의 명령을 받아 화면 표시 )
• Controller - 모델과 뷰의 중재자역할, 모델의 정보를 뷰에 어떻게 표시할지

추가적인 내용

https://solby.tistory.com/100

[강의노트👩🏻‍💻] 스위프트 아키텍처 - MVC와 MVVM

---

 

오토레이아웃 충돌

과제를 진행하며 스택뷰 안의 레이블 오토레이아웃을 조정하다보니 콘솔창에 이런 내용이 떴다.

 

iOS 앱 개발에서 흔히 발생하는 Auto Layout 제약 조건 충돌 경고라고 한다.

- UIView 계층 구조에서 제약 조건이 충돌하거나 불충분할 때 나타나는 일반적인 문제

 

런타임 동안 UIKit의 Auto Layout 엔진이 설정된 제약 조건을 동시에 만족시킬 수 없을 때 발생한다고 한다.

이 경고 메시지를 부르는 용어

• Constraint Conflict (제약 조건 충돌): Auto Layout 제약 조건 간 충돌을 설명하는 일반적인 용어입니다.
• Auto Layout Warnings (오토레이아웃 경고): Xcode에서 출력되는 경고의 한 유형입니다.
• Ambiguous Layout (모호한 레이아웃): 제약 조건이 충분하지 않아 요소의 위치나 크기를 결정할 수 없는 상태.
• Overconstrained Layout (과도한 제약 레이아웃): 너무 많은 제약 조건이 추가되어 충돌이 발생하는 상태.

---

경고가 발생하는 이유

이 경고 메시지가 발생하는 이유는 Auto Layout 제약 조건이 충돌하거나, UIKit이 제약 조건을 만족할 수 없는 경우입니다. 주요 원인은 다음과 같습니다

 

1. 모순된 제약 조건

• 상충하는 제약: 동일한 요소에 대해 상충되는 제약 조건이 설정된 경우.
  • 예: 스택뷰 내부의 레이블이 고정된 높이(80)와 intrinsicContentSize에 따라 크기가 결정되도록 설정된 경우.

2.  제약 조건 불충분

• Auto Layout 엔진이 요소의 위치와 크기를 계산하는 데 필요한 모든 제약 조건이 제공되지 않은 경우.

3. 스택뷰와 하위 뷰 간의 충돌

• 스택뷰는 내부에서 하위 뷰를 자동으로 배치하며, 하위 뷰의 고정된 크기 제약 조건이 스택뷰의 분배 방식(distribution)과 충돌할 수 있습니다.

4. 런타임 동적 변경

• 런타임 동안 특정 제약 조건을 추가하거나 제거하면서 이전 제약 조건과 충돌이 발생.

---

문제를 해결하는 방법

1. 충돌 원인 찾기

• 경고 메시지를 읽고 어떤 제약 조건이 충돌하는지 확인합니다.
• Xcode의 Debug View Hierarchy를 사용해 UI의 레이아웃 구조를 시각적으로 분석합니다.

2. 제약 조건을 수정

• 스택뷰 내부의 뷰는 보통 intrinsicContentSize를 사용하므로, 고정된 크기 제약 조건을 피하는 것이 좋습니다.
• priority를 설정해 충돌을 방지할 수 있습니다.

label.heightAnchor.constraint(equalToConstant: 80).priority = .defaultLow

3. 충분한 제약 조건 제공

• 모든 뷰의 위치와 크기를 정의하는 데 필요한 제약 조건을 추가합니다.

4. 스택뷰 속성 조정

• 스택뷰의 alignment와 distribution 속성이 하위 뷰와 충돌하지 않도록 설정합니다.
  • 예: distribution = .fillEqually로 설정하면 하위 뷰의 고정된 크기 제약 조건과 충돌할 가능성이 있습니다.

---

 

Auto Layout 경고가 발생할 수 있는 일반적인 상황

1. 상충하는 제약 조건

- 동일한 뷰에 서로 모순되는 제약 조건을 추가한 경우 발생합니다

- 한 뷰의 넓이를 서로 다른 값으로 설정하면 충돌이 발생합니다.

 

2. 충분하지 않은 제약 조건

- Auto Layout은 위치와 크기를 계산하기 위해 모든 방향에서 필요한 제약 조건이 있어야 합니다. 부족하면 경고가 나타납니다.

- 예: 뷰가 고정된 위치 없이 크기만 정의된 경우

 

3. 애니메이션과 Auto Layout의 충돌

- UIView 애니메이션 블록 내부에서 Auto Layout 제약 조건을 조정하면서 기존 제약 조건과 충돌이 생길 수 있습니다.

UIView.animate(withDuration: 0.5) {
    view.frame = CGRect(x: 50, y: 50, width: 200, height: 200) // 프레임 조정
}

Auto Layout 제약 조건을 사용하는 뷰에서 frame을 직접 조정하면 경고가 발생할 수 있습니다.

 

4. 제약 조건의 우선순위(priority) 문제

- 동일한 뷰에 여러 제약 조건을 설정하고, 우선순위(priority)를 명시하지 않으면 Auto Layout 엔진이 충돌을 일으킬 수 있습니다.

view.widthAnchor.constraint(equalToConstant: 100).priority = .defaultLow
view.widthAnchor.constraint(equalToConstant: 200).priority = .defaultHigh

 

5. 동적 콘텐츠와 제약 조건의 불일치

- 레이블, 버튼 등의 intrinsicContentSize와 고정된 크기 제약 조건이 충돌할 때 발생합니다

label.text = "Dynamic Text Here"
label.widthAnchor.constraint(equalToConstant: 50).isActive = true

• 레이블 텍스트가 길어져 intrinsicContentSize가 고정된 너비 제약 조건과 충돌하면 경고가 발생합니다.

6. 잘못된 크기와 부모 뷰의 관계

- 부모 뷰보다 자식 뷰가 더 큰 크기를 요구하는 제약 조건을 설정하면 충돌이 발생합니다