<aside> 📎

참고 출처

1. Create dynamic designs with auto layout — Figma Learn — 이 실습에서 만드는 반응형 컴포넌트의 오토레이아웃 설정 근거가 되는 공식 가이드입니다. </aside>

앞 이론 레슨에서 오토레이아웃의 방향·간격·리사이징 옵션을 배웠습니다. 개념은 눈으로 볼 때는 쉬워 보이지만, 실제로 손을 움직여 보면 Hug와 Fill을 언제 써야 하는지 헷갈리기 쉬운 개념입니다. 이번 실습에서는 실무에서 자주 쓰는 UI 구조를 직접 오토레이아웃으로 만들어 보며 반응형 디자인의 원리를 체득합니다. 여기서 만든 구조는 다음 레슨의 컴포넌트 제작에 그대로 이어집니다.

실습: 오토레이아웃으로 반응형 UI 만들기

실습 목표와 산출물

• 실습 목표
  • 오토레이아웃의 방향·Gap·Padding·리사이징 옵션을 직접 적용해 반응형으로 동작하는 UI 요소를 만듭니다.
  • 중첩 오토레이아웃으로 카드·리스트 같은 복합 구조를 구성합니다.
• 최종 산출물
  • 반응형 버튼 3종 (Hug / Fixed / Fill)
  • 중첩 오토레이아웃을 적용한 리스트 아이템 1종
  • 네비게이션 바 1종

Step 1. 반응형 버튼 3종 만들기

• 리사이징 세 옵션의 차이를 직접 비교합니다.
  • 버튼 A: '확인' 텍스트에 오토레이아웃 적용, Padding 좌우 24/상하 12, Width와 Height 모두 Hug
  • 버튼 B: '다음으로 계속하기' 텍스트에 같은 Padding, Width는 320px Fixed, Height는 Hug
  • 버튼 C: '제출' 텍스트에 같은 Padding, Width는 Fill, Height는 48px Fixed
  • 3개 버튼을 360px 너비의 프레임 안에 배치하고 차이를 비교합니다.
• 점검 질문: 텍스트를 길게 바꿨을 때 각 버튼이 어떻게 반응하는가? Hug·Fixed·Fill의 차이가 눈으로 확인되는가?

Step 2. 리스트 아이템 만들기 (중첩 오토레이아웃)

• 아이콘 + 텍스트 영역으로 구성된 리스트 아이템을 중첩 구조로 만듭니다.
  • 전체 아이템을 Horizontal 오토레이아웃으로 설정해 아이콘과 텍스트 영역을 가로로 배치합니다.
  • 텍스트 영역 내부를 Vertical 오토레이아웃으로 설정해 제목과 설명을 세로로 쌓습니다.
  • 아이콘은 Fixed로 고정하고, 텍스트 영역은 Fill로 설정해 남는 공간을 채웁니다.
• 점검 질문: 아이템 너비를 늘렸을 때 아이콘은 고정되고 텍스트 영역만 늘어나는가?

Step 3. 네비게이션 바 만들기

• 로고, 메뉴 아이템, 액션 버튼을 포함한 네비게이션 바를 만듭니다.
  • 전체 네비게이션 바를 Horizontal 오토레이아웃으로 설정합니다.
  • 로고는 Fixed로 고정하고, 메뉴 영역은 별도 Horizontal 오토레이아웃으로 그룹화합니다.
  • 로고와 메뉴 사이 빈 공간을 채우는 Spacer를 Fill로 설정해 메뉴가 우측으로 밀리게 합니다.

산출물 작성 틀