리스트 아이템: 가로는 Fill로 설정하여 화면 너비에 맞게 늘어나게 하고, 내부 요소는 Hug/Fixed를 섞어 안정적인 구조 유지.
아이콘: 가로·세로를 Fixed로 지정해 어떤 환경에서도 일정한 크기로 보이도록 설정.
❷ Constraints
Constraints는 요소가 프레임의 어떤 위치 혹은 사이즈로 위치할 것인지 정하는 요소이다.
정의
Constraints는 부모 Frame의 크기가 변할 때, 자식 객체가 어떤 방향으로 고정되거나 함께 늘어날지를 정의하는 규칙입니다.
예를 들어, 왼쪽·오른쪽·위·아래에 고정할 것인지, 가운데 정렬로 남길 것인지, 양쪽과 동시에 붙어서 함께 늘어나게 할 것인지 등을 설정할 수 있습니다.
중요성
화면 사이즈가 바뀌는 상황(모바일 → 태블릿, 웹 브라우저 리사이징 등)에서 UI가 어떤 식으로 반응할지 미리 시뮬레이션할 수 있습니다.
제대로 설정하지 않으면 로고가 중앙에 있어야 할 상황에서 구석으로 쏠리거나, 버튼이 화면 밖으로 밀려나는 등 레이아웃 붕괴가 발생합니다.
컴포넌트 단위로도 Constraints를 올바르게 설계해두어야, 여러 환경에서 재사용할 때 수정 없이 그대로 사용할 수 있습니다.
사용례
상단 네비게이션 바에서 로고는 항상 왼쪽, 메뉴는 오른쪽에 고정되도록 설정.
카드 안의 버튼이 가로 폭이 넓어져도 항상 아래쪽 중앙 정렬을 유지하도록 Constraints 설정.
모달 창의 X 버튼을 오른쪽 상단에 고정해서, 모달 크기가 커져도 항상 구석에 위치하도록 구성.
❸ Absolute Position
Absolut Position 기능을 사용하면 오토레이아웃 정렬에서 예외처리된다.
정의
Absolute Position은 Auto Layout이 적용된 Frame 내부에서, 특정 요소만 레이아웃 흐름에서 분리해 “정확한 좌표”에 고정시키는 방식입니다.
일반 요소는 Auto Layout의 방향과 정렬 규칙을 따르지만, Absolute Position으로 설정된 요소는 마치 “떠 있는 레이어”처럼 독립적으로 배치됩니다.
중요성
뱃지, 뱃지 카운트, 장식 아이콘처럼 레이아웃의 흐름에는 포함되지만 시각적으로는 겹쳐서 보여야 하는 요소를 처리할 때 유용합니다.
무조건 Absolute Position을 쓰는 것이 아니라, 레이아웃 규칙과 독립적으로 배치해야 할 때만 사용해야 컴포넌트 유지보수가 용이합니다.
실습하기
간단한 예시로 뱃지가 있는 Dock을 만들어보았습니다.
실습과제: src에 있는 디자인들을 오토레이아웃으로 변경하기
Step 1
Dock 자체는 내부 요소의 크기, 개수에 따라 변화하는 hug로 제작합니다.
Step 2
우측 상단에 있는 Absolute Position 버튼으로 오토레이아웃에서 별개로 독립시킨다.
뱃지는 우측 상단에 있는 Absolute Position 버튼을 클릭해서 auto layout 강제정렬에서 독립시키면 됩니다.
이 뱃지가 항상 우측 상단에 있도록 Constraints를 Right, Top으로 설정해줍니다.
이렇게하면 내부 아이콘 크기에 따라 늘어나고, 뱃지도 아이콘과 같이 움직이는 auto layout 컴포넌트를 하나 만들 수 있게됩니다.
마무리
생각보다 많은 학생들이 기존에는 Frame이나 Group 단위로 UI를 만들고 있었습니다. 실무에서는 디자인 시스템의 컴포넌트를 사용하는 일이 많습니다. 이번 특강을 계기로 학생 때부터 컴포넌트와 오토레이아웃을 제어하는 습관을 들이면 실무 적응에 큰 도움이 될 것이라고 생각합니다.
Resizing의 간격 Auto에 대해서 설명하는 중
Constraints 제어 방법에 대해 설명하는 중
비루하지만 수업을 경청해주신 홍익대학교 학생분들께 감사하다는 인사를 드리고싶습니다. 🙇♂️
이런 좋은 기회가 다시 있었으면 좋겠습니다.
