🎯 전체 요약

  • 다양한 화면 크기에 적응하는 인터페이스를 만드는 핵심 메커니즘 제약조건(Constraints)
  • 프레임과 그룹의 차이점
  • 수평/수직 제약조건
  • 중단점(breakpoint) 테스트를 위한 무료 반응형 플러그인 소개

⌨️ 단축키 정리

단축키 하나씩 모여서 생산성에 큰 영향을 끼친다.

  • Command + Backslash = 전체 화면 모드
  • Shift + 2 = 프레임을 뷰에 맞춤
  • N = 다음 프레임
  • Shift + N = 이전 프레임
  • A 누르면 장치 프리셋(iPhone/Android/Web)이 있는 프레임 옵션

인스타그램용, 링크드인까지 프리셋으로 제공되는 점이 인상적

  • 네비게이션: Tab = 다음 요소
  • Return = 프레임 진입
  • Shift + Return = 프레임 나가기

⚖️ 프레임 vs 그룹

  • 프레임: 크기 조정 시 요소가 일관성 유지(지능적 동작)
  • 그룹: 요소가 무작위로 이동
  • 강좌 카드 예제: 사진 + 라벨 + 제목 + 설명 + CTA 버튼
  • 프레임은 요소 위치 유지 /그룹은 레이아웃 무결성 파괴

무조건 디바이스 크기에 맞춰서 커지고 작아지는 것이 반응형이 아니다. 크기가 고정되어 있는 것이 반응형 일 수 있음

🔧 제약조건 작동 방식

  • 2가지 속성: 수평 제약조건 + 수직 제약조건
  • 좌/우: 프레임 가장자리로부터 동일한 거리 유지(늘어남)
  • 중앙: 요소가 늘어나지 않고 중앙에 머묾
  • 좌측만: 요소가 왼쪽 가장자리에 고정
  • 우측만: 요소가 오른쪽 가장자리에 고정

💡 실용적 예제

  • 회색 프레임에 중앙 배치된 버튼
  • 좌 + 우 제약조건: 버튼이 프레임 너비에 따라 늘어남
  • 중앙 제약조건: 버튼이 늘어나지 않고 중앙에 유지
  • 플로팅 액션 버튼(FAB)
    • iPad 화면에서 Gmail 스타일 FAB 버튼 데모
    • 수평: 우측 | 수직: 하단 = 우측 하단 모서리에 고정
    • 그라데이션 배경: 좌 + 우, 상 + 하 = 전체 가장자리까지 늘어남
    • Material Design FAB는 화면 확장 중에도 고정 위치 유지

🔌 반응형 플러그인

  • 무료 플러그인으로 단일 테스트 프레임에서 여러 중단점 시뮬레이션
  • 3가지 화면 크기(iPhone/iPad/Mac) 입력 → 플러그인이 자동으로 레이아웃 전환
  • 중단점 감지: 적절한 프레임 자동 선택
  • 테스트를 위한 수동 프레임 복제 제거

주요 링크

https://www.youtube.com/watch?v=Lp2cgMZaXKU

이 문서는 튜토리얼 영상을 보고 작성한 학습 기록입니다.