본문으로 건너뛰기

그룹/오토 레이아웃

여러 요소를 하나처럼 다루는 그룹과, 묶은 것들의 간격을 알아서 지켜 주는 오토 레이아웃 사용법입니다.

사진과 글자를 여러 개 묶어 하나처럼 다루고, 그 안의 간격을 자동으로 지키게 하는 기능입니다.

  • 언제 쓰나요? 같이 움직여야 하는 것들이 있을 때, 그리고 간격을 매번 손으로 맞추기 번거로울 때입니다.
  • 어디서 하나요? 두 개 이상을 고르면 위에 뜨는 [그룹화], 왼쪽 창의 [오토 레이아웃] 입니다.

묶기와 간격 자동 맞춤이란?​

  • 그룹(묶기) ㅣ 사진과 글자 여러 개를 하나처럼 다루는 것입니다. 묶어 두면 같이 움직이고 같이 커집니다.
  • 오토 레이아웃(간격 자동 맞춤) ㅣ 묶은 것들의 사이 간격을 알아서 지켜 주는 기능입니다.

예를 들어 사진 넉 장을 나란히 놓고 손으로 간격을 맞췄다고 해 보겠습니다. 그중 한 장을 지우면 그 자리만 뻥 뚫려서 다시 다 옮겨야 합니다. 간격 자동 맞춤을 켜 두면 남은 셋이 알아서 다시 줄을 섭니다.


여러 개를 하나로 묶으려면​

묶으면 아이콘이 [그룹 해제] 로 바뀌고, 간격 자동 맞춤을 쓸 수 있게 됩니다
묶으면 아이콘이 [그룹 해제] 로 바뀌고, 간격 자동 맞춤을 쓸 수 있게 됩니다
  1. 두 개 이상을 고르세요
    • 하나만으로는 묶을 수 없습니다.
  2. [그룹화] 를 누르거나 ⌘G
    • 묶이면 아이콘이 [그룹 해제] 로 바뀝니다. 풀 때는 ⌘⇧G 입니다.
  3. 묶음 안의 하나만 고치고 싶으면 더블클릭
    • 묶음을 두 번 클릭하면 안으로 들어가서 하나씩 고를 수 있습니다. 바깥을 클릭하거나 Esc 로 빠져나옵니다.

종류가 달라도 상관없습니다. 사진끼리, 글자끼리 묶어도 되고 사진과 글자를 섞어도 됩니다. 묶음끼리 다시 묶는 것도 됩니다.


간격을 자동으로 맞추려면​

글자 다섯 개를 묶고 오토 레이아웃을 켠 뒤 간격 숫자를 바꾸면 한꺼번에 정리된다
간격 숫자를 바꾸면 묶음 안의 간격이 한꺼번에 정리됩니다
  1. 먼저 묶은 다음 [오토 레이아웃] 을 켜세요
    • 묶지 않으면 켤 수 없습니다.
  2. 어느 방향으로 늘어놓을지 고르세요
    • 가로 방향(옆으로) 또는 세로 방향(아래로)
  3. 간격 과 여백 을 숫자로 정하세요
    • 간격 — 안에 든 것들 사이의 거리입니다. 숫자 하나만 바꾸면 전부 같이 바뀝니다.
    • 여백 — 묶음 테두리와 안쪽 내용 사이의 거리입니다.

켜 두면 안에 있는 것을 끌어서 순서를 바꿀 수도 있습니다. 옮긴 자리에 맞춰 나머지가 다시 줄을 섭니다.

경고

끄더라도 마지막으로 정리된 자리 그대로 남습니다. 켜기 전 자리로 돌아가지 않습니다. 원래대로 되돌리고 싶으면 ⌘Z 를 누르세요.


안에 든 것을 어느 쪽에 붙일지 정하려면​

오토 레이아웃을 켜면 왼쪽 창에 내부 정렬 아홉 칸이 나옵니다
오토 레이아웃을 켜면 왼쪽 창 크기 / 정렬 에 내부 정렬 아홉 칸이 나옵니다

크기가 다른 사진과 글자를 묶으면 어디를 기준으로 줄을 세울지가 생깁니다. [오토 레이아웃] 을 켠 묶음에서 왼쪽 창의 내부 정렬 아홉 칸 중 하나를 고르세요.

  • 위 · 가운데 · 아래와 왼쪽 · 가운데 · 오른쪽을 조합한 아홉 자리입니다. 지금 고른 자리에는 줄 세 개 표시가 붙습니다. 예를 들어 가로 방향 으로 늘어놓은 글자 두 개를 오른쪽 아래 로 두면 키가 작은 글자가 아래로 내려가 바닥이 맞춰집니다.
  • 묶음은 기본으로 내용에 딱 맞는 크기입니다. 그래서 늘어놓는 방향으로는 빈 공간이 없어, 그쪽 정렬을 바꿔도 자리가 달라지지 않습니다. 창에 내용에 맞춘 크기에서는 일부 정렬의 위치 변화가 없습니다. 라고 안내되는 이유입니다.
  • 정렬 결과를 보려면 위의 너비 나 높이 에 숫자를 넣어 묶음을 내용보다 크게 잡으세요. 빈 공간이 생기면서 고른 자리로 붙습니다.
  • 간격을 균등 분배하거나 늘이기로 채워 둔 묶음에서는 아홉 칸 중 어느 것도 선택돼 있지 않습니다. 칸을 고르면 일반 정렬로 바뀝니다.
  • 안에 든 요소 하나에 따로 정해 둔 크기·정렬은 그대로 남습니다.