테이블뷰 셀에서 의도치 않게 뷰가 늘어나는 문제 해결 과정

UITableViewCell의 특정 요소가 의도치 않게 크기가 늘어나며 레이아웃이 깨지는 문제가 발생했다.

레이아웃을 유지하려고 했던 요소들이 밀려나고, 전체적인 UI가 어긋나는 현상이 나타났다.

 

1️⃣ 문제 정의: 늘어나서는 안 되는 뷰가 늘어나는 상황

테이블뷰 셀 내부의 주요 요소는 다음과 같은 구조로 배치

• titleLabel → 왼쪽 상단에서 텍스트를 표시
• optionLabel → 왼쪽 하단에서 추가 정보를 표시
• countLabel → 오른쪽에서 개수를 나타냄
• forwardImageView → 오른쪽 끝에서 이동을 의미하는 화살표 아이콘 표시

 

💥 문제 발생:

• countLabel이 의도치 않게 늘어나면서 titleLabel과 optionLabel의 레이아웃이 깨짐
• forwardImageView와 countLabel 사이의 간격이 유지되지 않음
• 사용자가 보기에 시각적으로 불안정한 UI가 표시됨

 

🖥️ 문제 발생 시 레이아웃 (Before)

📌 countLabel 크기 증가 → forwardImageView 위치 변경 → 전체 레이아웃 깨짐

 

2️⃣ 문제 원인 분석: Hugging Priority와 IntrinsicContentSize

UILabel의 크기는 intrinsicContentSize를 기반으로 자동 조정된다.

기본적으로 UILabel은 자신의 크기를 유지하려는 성질이 있으며, 이를 Hugging Priority 값이 제어한다다.

 

⚠️ 이번 문제의 원인:

• countLabel이 intrinsicContentSize를 유지하려 하면서, forwardImageView가 밀려남
• titleLabel과 optionLabel이 countLabel에 의해 영향을 받으며 레이아웃이 뒤틀림
• Hugging Priority 충돌로 인해 countLabel이 불필요하게 늘어나는 현상 발생

 

📌 UILabel 기본 속성

속성	설명	기본값
Intrinsic Content Size	UILabel이 기본적으로 유지하려는 크기	텍스트 크기 기반
Content Hugging Priority	자신이 최대한 줄어들려고 하는 우선순위	251
Content Compression Priority	자신이 최대한 커지려고 하는 우선순위	750

 

3️⃣ 해결 접근 방식: Hugging Priority 조정

✅ 초기 시도: 기본적인 오토레이아웃 설정

아래와 같이 각 요소 간의 간격을 설정했지만, countLabel과 forwardImageView의 충돌로 인해 문제가 해결되지 않았다.

 

🚀 예시코드

titleLabel.snp.makeConstraints { make in
    make.bottom.equalTo(contentView.snp.centerY)
    make.leading.equalToSuperview().offset(20)
    make.trailing.equalTo(countLabel.snp.leading).offset(-20)
}

optionLabel.snp.makeConstraints { make in
    make.top.equalTo(contentView.snp.centerY)
    make.leading.equalToSuperview().offset(20)
    make.trailing.equalTo(countLabel.snp.leading).offset(-20)
}

countLabel.snp.makeConstraints { make in
    make.centerY.equalToSuperview()
    make.trailing.equalTo(forwardImageView.snp.leading).offset(-4)
}

forwardImageView.snp.makeConstraints { make in
    make.centerY.equalToSuperview()
    make.trailing.equalToSuperview().offset(-20)
}

💥 결과: countLabel이 여전히 늘어나면서 forwardImageView를 밀어내는 현상이 지속됨

 

4️⃣ 최종 해결: Hugging Priority 조정

💡 countLabel과 forwardImageView의 Hugging Priority를 252로 설정하여 intrinsicContentSize보다 간격 제약조건을
우선시 하도록 조정

 

🚀 예시코드

countLabel.setContentHuggingPriority(.init(252), for: .horizontal)

countLabel.snp.makeConstraints { make in
    make.centerY.equalToSuperview()
    make.trailing.equalTo(forwardImageView.snp.leading).offset(-4)
}

forwardImageView.setContentHuggingPriority(.init(252), for: .horizontal)

forwardImageView.snp.makeConstraints { make in
    make.centerY.equalToSuperview()
    make.trailing.equalToSuperview().offset(-20)
}

5️⃣ 결과: 레이아웃 안정성 확보

✅ countLabel과 forwardImageView의 크기가 의도한 대로 유지됨

✅ titleLabel과 optionLabel의 위치가 고정됨

✅ 사용자 입장에서 시각적으로 안정적인 UI 제공

 

🔄 해결 후 레이아웃 (After)

 

📌 countLabel과 forwardImageView 간격 유지, 전체 레이아웃 안정화

 

6️⃣ 결론 및 배운 점

📌 배운 점

• Hugging Priority와 IntrinsicContentSize는 Auto Layout에서 중요한 역할을 함
• 제약 조건만으로 해결되지 않는 문제는 우선순위 충돌을 고려해야 함
• Hugging Priority 조정을 통해 뷰 간 간격 유지 및 크기 변형을 방지 가능

 

📌 향후 개선 방향

• 다양한 데이터 입력 시에도 레이아웃이 안정적으로 유지되는지 추가 테스트
• Compression Resistance Priority도 활용하여 더 유연한 레이아웃 구현 고려

 

🎯 마무리: 이런 문제가 다시 발생한다면?

Hugging Priority와 IntrinsicContentSize를 조정했음에도 불구하고 레이아웃이 깨진다면,
해당 요소가 다른 요소와 어떤 관계를 갖고 있는지 파악하는 것이 중요하다.

레이아웃이 무너지는 이유를 정확히 분석하고, 우선순위를 조정하는 방식으로 문제를 해결하는 것이 핵심이다.