Flex 레이아웃 개요

마지막 업데이트 날짜 2026년 8월 7일

InDesign의 Flex 레이아웃 패널을 사용하여 Flex 레이아웃에서 항목을 만들고, 정렬하고, 방향을 설정하고, 줄을 바꾸고 양쪽 정렬하고 간격을 조정할 수 있습니다.

Flex 레이아웃이란 무엇인가요?

Flex 레이아웃은 콘텐츠가 변경될 때 자동으로 적응하는 컨테이너를 만들 수 있는 기능입니다. 컨테이너의 항목은 방향, 간격, 패딩 및 정렬을 사용하여 배치됩니다. 콘텐츠가 추가, 제거 또는 크기가 조정될 때 레이아웃이 자동으로 조정되므로 수동 조정이 필요하지 않습니다.

Flex 레이아웃 옵션 액세스하기

문서에서 오브젝트/그룹/여러 오브젝트를 선택하고 다음 중 하나를 수행하여 Flex 레이아웃 옵션에 액세스하세요.

  • 오브젝트 > Flex 레이아웃으로 이동합니다.
  • 오브젝트를 마우스 오른쪽 버튼으로 클릭하여 Flex 레이아웃에 액세스하세요.
  • > Flex 레이아웃 패널로 이동합니다.
  • 한 번 클릭하면 상위 Flex로 작업하고, 두 번 클릭하면 하위 Flex를 선택합니다.
  • 직접 선택  도구를 사용하여 하위 항목을 선택합니다.

Flex 레이아웃에 추가

선택한 오브젝트를 Flex 레이아웃에 추가합니다.

Flex 레이아웃으로 변환

오브젝트(직사각형 프레임, 직사각형 모양 또는 그룹)를 Flex 레이아웃으로 변환합니다.

Flex 레이아웃 제거

선택 항목에서 Flex 레이아웃을 제거합니다. Flex 레이아웃에 여러 오브젝트가 있는 경우 그룹이 생성됩니다. 하나의 오브젝트만 있는 경우 해당 오브젝트는 그대로 유지됩니다.

Flex 컨트롤 표시

Flex 레이아웃 패널을 엽니다(속성 패널 대신).

Flex 레이아웃을 통해 InDesign에 CSS Flexbox와 유사한 컨테이너 개념이 도입되었습니다. 이 기능은 하위 오브젝트에 대한 강력한 레이아웃 컨트롤을 제공합니다. Flex 레이아웃을 사용하면 디자인이 체계적이고 더 유연해지며 수동으로 조정할 필요가 적어집니다.

Flex 레이아웃 컨테이너

오브젝트 스타일에서 Flex 레이아웃 속성을 직접 구성할 수 있습니다. Flex 레이아웃 설정이 포함된 수직 컨테이너라는 오브젝트 스타일을 만든 다음 레이아웃의 모든 Flex 레이아웃 컨테이너에 적용할 수 있습니다.

예:

오브젝트 스타일 패널을 사용하여 Flex 레이아웃을 적용하고 방향, 정렬, 간격과 같은 속성을 설정하세요. 저장하면 이 스타일을 다른 컨테이너에 적용하여 레이아웃 동작이 일관되게 할 수 있습니다.

하위 Flex 레이아웃

오브젝트 스타일의 동일한 Flex 레이아웃 섹션에서 Flex 레이아웃 하위 요소와 중첩된 하위 요소의 속성도 정의할 수 있어, 고정 또는 유연한 치수와 같은 동작을 레이아웃 전체에서 표준화할 수 있습니다.

  • 대화형 요소의 직접 만들기: Flex 레이아웃 내의 하위 요소를 별도로 생성하고 Flex 레이아웃에 추가하지 않고도 대화형 요소로 변환할 수 있습니다.
  • 하위 요소 잠금: Flex 레이아웃 내의 하나 이상의 하위 요소를 잠가서 직접 드래그, 크기 조정 또는 프레임 밖으로 이동하지 않도록 하면서 키보드 화살표 키를 사용한 위치 변경은 계속 허용할 수 있습니다.
  • 하위 요소의 키보드 탐색: 가로 레이아웃에서는 왼쪽 또는 오른쪽 화살표 키를, 세로 레이아웃에서는 위쪽 또는 아래쪽 화살표 키를 사용하여 잠긴 요소나 잠기지 않은 요소의 위치를 변경할 수 있습니다.

오브젝트 스타일을 사용하여 잠긴 Flex 프레임 내에서 Flex 속성을 정의할 수 있습니다.

Flex 레이아웃 패널

패널에 액세스하려면 > Flex 레이아웃으로 이동하세요. Flex 레이아웃 패널이 열립니다. 이제 요구 사항에 따라 Flex 레이아웃을 만들거나 추가하거나 기존 레이아웃을 사용자 지정할 수 있습니다. 선택 항목이 없어도 패널을 사용하여 기본값을 변경할 수 있습니다(자동 감지가 꺼져 있는 경우). 환경 설정 > 일반 > Flex 레이아웃 설정 자동 감지 및 적용으로 이동하여 자동 감지 설정을 확인하세요.

Flex 레이아웃을 만들기 위한 다양한 옵션을 보여주는 Flex 레이아웃 패널

A. Flex 컨테이너의 너비 B. Flex 컨테이너의 높이 C. 감싸기 D. Flex 레이아웃에서 오브젝트의 방향 E. 수직 간격 F. 가로 간격 G. 여백  H. 균등 배치 I. Flex 레이아웃에서 오브젝트의 정렬 

높이

Flex 레이아웃 컨테이너와 그 하위 요소의 크기를 모두 독립적으로 제어할 수 있습니다. Flex 레이아웃 컨테이너의 폭과 높이는 다음과 같이 설정할 수 있습니다.

  • 고정: 컨테이너 크기가 콘텐츠와 관계없이 일정하게 유지됩니다.
  • 자동: 컨테이너 크기가 하위 요소의 크기에 따라 커지거나 작아집니다.

하위 Flex 레이아웃의 경우(중첩된 Flex 레이아웃 포함):

  • 고정: 하위 요소의 크기가 자체 콘텐츠와 관계없이 일정하게 유지됩니다.
  • 자동: 하위 요소의 크기가 자체 콘텐츠나 하위 요소에 맞게 조정됩니다.
  • 공백 채우기: 하위 요소가 해당 크기에서 사용할 수 있는 나머지 공간을 차지할 수 있도록 확장되어 필요에 따라 다른 공백 채우기 동일 수준 항목과 공간을 공유합니다.

감싸기

컨테이너에서 포장되는 오브젝트를 켜거나 드래그합니다.

방향

컨테이너 내 항목의 흐름 방향을 선택합니다(행, 행 역순, 열, 열 역순).

간격

패딩과 간격을 제어합니다.

  • 패딩: 컨테이너 내부의 모든 면(위, 아래, 왼쪽, 오른쪽)의 간격을 정의합니다.
  • 수평 간격 : 항목 간의 가로 간격을 일관되게 설정합니다.
  • 수직 간격 : 항목 간의 세로 간격을 일관되게 설정합니다.

균등 배치

주축을 따라 항목의 분포를 제어합니다.

행을 Flex 레이아웃의 시작 부분에 맞추고 항목을 행의 시작 부분에 맞춥니다.

행을 Flex 레이아웃의 중앙에 맞추고 항목을 행의 중앙에 맞춥니다.

행을 Flex 레이아웃의 끝 부분에 맞추고 항목을 행의 끝 부분에 맞춥니다.

다음과 같이 행의 항목을 정렬합니다 -

  • 각 항목의 양쪽에 동일한 간격을 둡니다.
  • 엣지 항목은 한 쪽만 노출되며, 엣지의 간격은 항목 사이 간격의 절반입니다.

다음과 같이 행의 항목을 정렬합니다 -

  • 첫 번째 항목은 시작 가장자리에 맞추고 마지막 항목은 끝 가장자리에 맞춥니다.
  • 나머지 항목들은 그 사이에만 균등하게 배치됩니다.
  • 주축을 따라 항목을 균등하게 분배하며, 첫 번째 항목은 시작 부분에, 마지막 항목은 끝 부분에 배치됩니다.
  • 바깥쪽 엣지에는 간격이 없습니다.

다음과 같이 행의 항목을 정렬합니다 -

  • 모든 곳에서 균일한 간격: 항목과 가장자리 사이에서
  • 모든 것이 완벽하게 균일합니다.

정렬

교차축을 따라 다음과 같이 항목을 정렬합니다. 상위, 중앙, 하위, 또는 왼쪽, 중앙, 오른쪽.

상단 왼쪽: 행을 Flex 레이아웃 컨테이너의 상단 왼쪽에 맞추고 행의 항목을 행의 상단 왼쪽에 맞춥니다.

중앙 왼쪽: 행을 Flex 레이아웃 컨테이너의 중앙 왼쪽에 맞추고 행의 항목을 행의 중앙 왼쪽에 맞춥니다.

하단 왼쪽: 행을 Flex 레이아웃 컨테이너의 하단 왼쪽에 맞추고 행의 항목을 행의 하단 왼쪽에 맞춥니다.

상단 중앙: 행을 Flex 레이아웃 컨테이너의 상단 중앙에 맞추고 행의 항목을 행의 상단 중앙에 맞춥니다.

중앙: 행을 Flex 레이아웃 컨테이너의 중앙에 맞추고 행의 항목을 행의 중앙에 맞춥니다.

하단 중앙: 행을 Flex 레이아웃 컨테이너의 하단 중앙에 맞추고 행의 항목을 행의 하단 중앙에 맞춥니다.

상단 오른쪽: 행을 Flex 레이아웃 컨테이너의 상단 오른쪽에 맞추고 행의 항목을 행의 상단 오른쪽에 맞춥니다.

중앙 오른쪽: 행을 Flex 레이아웃 컨테이너의 중앙 오른쪽에 맞추고 행의 항목을 행의 중앙 오른쪽에 맞춥니다.

하단 오른쪽: 행을 Flex 레이아웃 컨테이너의 하단 오른쪽에 맞추고 행의 항목을 행의 하단 오른쪽에 맞춥니다.

Flex 레이아웃의 선택 표시기

InDesign은 Flex 레이아웃에서 선택 상태를 이해하는 데 도움이 되는 시각적 단서를 사용합니다.

  • 점선 윤곽선은 기본이 아닌 레이아웃 레벨을 나타냅니다.
  • 실선 윤곽선은 선택 가능한 형제 프레임을 나타냅니다.
  • 직접 선택 도구를 사용하면 반복적인 클릭 없이 중첩된 프레임을 직접 선택할 수 있습니다.

이러한 표시기는 중첩된 레이아웃으로 작업할 때 계층과 선택 초점을 명확히 하는 데 도움이 됩니다.

캔버스 내 패딩 및 간격 컨트롤

Flex 레이아웃은 패딩과 간격을 조정하기 위한 대화형 캔버스 내 컨트롤을 제공합니다.

  • 연결된 패딩: 네 개의 패딩 값을 모두 함께 조정합니다.
  • 연결되지 않은 패딩: 각 면을 독립적으로 조정합니다.
  • 가로 및 세로 간격: 줄바꿈된 행이나 열을 포함하여 항목 간의 간격을 직접 수정합니다.

캔버스의 시각적 표시기는 현재 값을 반영하며 Flex 레이아웃 패널에서 실시간으로 업데이트됩니다.

Flex 레이아웃 프레임 변환 및 기울이기

이제 Flex 레이아웃의 동작을 방해하지 않고 회전, 미러링, 크기 조절 또는 기울이기를 할 수 있습니다. 변환은 상위 및 중첩된 Flex 프레임 모두에 적용되며, 오브젝트를 변환하는 동안 Flex 레이아웃 패널이 활성 상태로 유지됩니다. 이를 통해 Flex 구조를 손상시키지 않고 레이아웃을 변환하면서 정렬, 간격, 줄 바꿈 및 방향을 조정할 수 있습니다.