Inflearn brand logo image

인프런 커뮤니티 질문&답변

shnchjy77님의 프로필 이미지
shnchjy77

작성한 질문수

앱 개발 기초부터 실전까지 하나로 끝내는 Swift & iOS 마스터 클래스

계산기 #1 - UI 구현

수업 중 궁금한 부분이 있습니다.

작성

·

35

·

수정됨

0

Ui 설정에서 Text. Label에서 add new constrain을 설정하는데, top, leading, height 등을 설정할 때 어떤 거는 top, leading만 설정하고 다른 것은 top, leading, trailing 등을 설정하는데 이유가 무엇이고 그러한 설정을 하는 기준이 무엇인지 궁금합니다!

답변 2

0

KxCoding님의 프로필 이미지
KxCoding
지식공유자

Auto Layout은 “뷰의 위치(x · y)와 크기(width · height)를 계산하기에 충분한 정보만 있으면 된다”는 규칙으로 작동합니다. 그래서 어떤 뷰에선 top·leading만 걸고, 또 다른 뷰에선 top·leading·trailing을 추가로 거는 식으로 설정이 달라집니다. 그 기준은 크게 두 가지입니다.


1. 뷰를 어떻게 배치할지에 따라 다릅니다

예를 들어, “왼쪽 상단에 달라붙어만 있으면 되고, 폭은 글자 길이에 맞춰 자연스럽게 늘어나도 된다”면 top·leading만으로 충분합니다. 반면 “왼쪽에서 시작하되, 오른쪽 여백(trailing)까지 꽉 차게 늘어나야 한다”거나 “부모 뷰 양쪽에 딱 붙어야 한다”면 trailing 제약도 추가해 폭을 확정해 줘야 합니다.

2. 그 뷰가 ‘고유 콘텐츠 크기(intrinsic content size)’를 갖고 있는지도 중요합니다

UILabel·UIImageView처럼 콘텐츠 자체로 너비·높이를 추정할 수 있는 뷰라면, 위치만 고정해 줘도 나머지 한 변(너비 또는 높이)은 시스템이 알아서 계산합니다. 그래서 height를 따로 주지 않아도 되는 경우가 많습니다. 반대로, 고유 크기가 없는 UIView나 “정확히 44 pt 높이여야 한다” 같은 요구 조건이 있을 때는 heightwidth 제약을 반드시 명시해야 레이아웃이 모호해지지 않습니다.


3. Auto Layout 챕터를 공부하시면 분명해집니다

지금은 “필요한 만큼만 제약을 건다”는 감각이 다소 추상적으로 느껴질 수 있습니다. Auto Layout 챕터를 공부하시면 ‘충분한 제약 조건’이 무엇을 의미하는지, 그리고 Hugging/Compression Resistance처럼 시스템이 여백을 배분·압축하는 방식이 어떻게 결정되는지 알게 됩니다.

4. 초반에는 실습을 그대로 따라 해도 충분합니다

처음부터 모든 원리를 이해하고 시작하기란 쉽지 않습니다. 실습을 그대로 따라 하며 “어떤 경우에 제약을 더 걸고, 어떤 경우에 생략해도 되는지” 몸으로 익히는 편이 훨씬 빠릅니다. 경험이 쌓이면, 레이블 하나를 추가할 때도 “여기서는 trailing이 필요하겠네” 하고 자연스럽게 판단하게 되실 겁니다.

0

안녕하세요, 인프런 AI 인턴입니다. shnchjy77님.

UI 배치에서 사용되는 제약조건은 뷰가 화면 내에서 어떻게 레이아웃되어야 하는지를 정의하는 중요한 역할을 합니다. 각 제약조건은 뷰의 특정한 위치와 크기를 제어하며, 여러 제약 조건을 조합하여 원하는 뷰의 레이아웃을 설정할 수 있습니다.

  • Top, Leading 제약조건: 일반적으로 화면 또는 다른 뷰와의 상단 및 좌측 경계를 맞추기 위해 사용됩니다. 최소한 이 두 제약 조건만으로도 뷰의 위치는 비율에 맞게 설정할 수 있습니다.

  • Trailing 제약조건: 이 제약조건은 우측 경계를 설정하여 뷰의 전체 너비를 고정하는 데 도움이 됩니다. 뷰가 컨테이너의 전체 너비에 걸쳐야 하거나 특정 너비를 유지해야 할 때 사용됩니다.

  • Height 제약조건: 뷰의 높이를 고정하거나 비율을 정할 때 사용됩니다. 고정된 높이를 원하는 경우 명시적으로 설정합니다.

위 제약조건들을 선택하는 기준은 화면 디자인이나 레이아웃 요구사항에 따라 달라질 수 있습니다. 예를 들어, 특정 너비를 유지해야 하는 경우에는 Trailing을 추가로 설정하고, 전체 높이를 일정하게 유지하고자 한다면 Height를 설정합니다.

기존에 올라온 관련 질문 중에서 더 많은 정보를 확인하실 수 있는 링크를 추천드립니다:

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

shnchjy77님의 프로필 이미지
shnchjy77

작성한 질문수

질문하기