Day 31 - TIL

📘 Day 31 - Today I Learned

🔍 Today’s Error or Issue

Lv2 단계 진행 중, 책정보 영역의 제약조건을 safeArea로부터 leading, trailing 각각 5pt만큼 떨어지도록 설정하라는 요구사항이 있었다. 하지만 그렇게만 설정하면 너무 왼쪽으로 붙는 문제가 발생했다.

🛠️ Troubleshooting

책정보 영역에 패딩을 주기 위해, UIView를 하나 만들고 그 안에 책정보 뷰를 넣었다.
바깥쪽 infoView는 safeArea 기준으로 leading/trailing을 5pt 떨어뜨리고,
안쪽의 infoStackView는 infoView 기준으로 inset 15를 주었다.

그런데 여기서도 문제가 생겼다.

배경색이 black인 infoView가 기대한 대로 15pt의 검은 여백을 보여줘야 했는데 보이지 않았다. leading/trailing 모두 정상적으로 설정했는데 왜 여백이 생기지 않을까?

왜 그럴까 하고 혼자서 생각해봤다…

이게 아닌가? 하고 그래서 파란색 영역이 우선순위를 바꿔보기도 하고 이리 저리 해봤는데 해결이 되지 않았다…

여러 시도를 해봤지만 해결되지 않아, 결국 튜터님께 질문했고 그 결과 bottom 제약조건이 빠져 있었던 것이 원인이었다!

✅ bottom 제약조건을 추가하니 해결!

📝 Learning Summary

나는 지금까지 leading, trailing, top만 설정하면 bottom도 자동으로 잡힌다고 착각했다.
왜냐하면 title 같은 요소에서 top만 잡고, 그 아래에 다른 뷰를 붙였을 때 문제가 없었기 때문이다.

하지만 이는 정적인 뷰였기 때문에 문제가 없던 것이고,
동적인 뷰에서는 height 또는 bottom 제약조건을 반드시 명시해야 한다는 점을 알게 되었다.

📘 Lesson Learned

유지보수를 생각하면 UIView로 섹션을 잘 나누는 것이 좋고,
문제 발생 시 뷰 디버깅 도구를 활용해 원인을 분석하는 습관도 중요하다는 걸 다시 느꼈다.