레이아웃 설정

레이어간 거리 측정

서로 간의 거리를 측정할 수 있는 대상：

• 벡터 모양 및 경로
• 텍스트 레이어
• 프레임
• 구성 요소
• 그룹
• 참조선

거리 측정

프레임, 구성 요소, 그룹 등에 중첩된 오브젝트를 쉽게 측정할 수 있습니다.

프레임에서 첫 번째 오브젝트 선택합니다.

단축키:

• Mac OS：⌥ Option    
• Windows：Alt

마우스를 두 번째 오브젝트 위에 놓습니다.

Pixso는 두 오브젝트 사이에 빨간색 선을 표시하고 거리 측정을 표시합니다.

중첩된 레이어 거리 측정

• 프레임에서 첫 번째 오브젝트 선택합니다.
• 단축키 누릅니다.
• Mac OS：⌘ Command+ ⌥ Option     Windows：Ctrl+Alt
• 마우스를 두 번째 오브젝트 위에 놓습니다.

Pixso는 두 오브젝트 사이에 빨간색 선을 표시하고 거리 측정을 표시합니다.

자동 레이아웃

자동 레이아웃은 프레임 및 구성요소에 추가할 수 있는 속성입니다. 내용이 변경됨에 따라 채우기 또는 축소하고 다시 정렬할 수 있는 디자인을 만들 수 있습니다. 이 기능은 새 레이어를 추가하거나 텍스트 문자열을 더 길게 유지해야 할 때 도움이 됩니다.

자동 레이아웃을 사용할 수 있는 시나리오:

• 텍스트 레이블을 편집할 때 증가하거나 감소하는 단추를 작성할 때
• 항목에 따라 추가, 제거 또는 숨기는 리스트를 작성할 때
• 자동 레이아웃 프레임워크와 결합하여 완전한 인터페이스를 구축할 때

자동 레이아웃 추가

프레임만 자동 레이아웃을 지원합니다. 선택한 레이어에 프레임이 없으면 선택한 콘텐츠가 포함된 프레임이 자동으로 생성되고 레이아웃됩니다.

다음 오브젝트를 선택하여 자동 레이아웃을 만들 수 있습니다.

• 새 레이어 또는 빈 레이어
• 기존 내용이 있는 레이어
• 구성요소 및 구성요소 그룹
• 레이어 또는 오브젝트 그룹
• 자동 레이아웃을 추가하는 방법:

1. 단축키 Shift + A를 사용합니다.

2. 오른쪽 사이드바에서 자동 레이아웃 선택에서 "+"를 클릭합니다.

3. 마우스 오른쪽 버튼으로 프레임 또는 오브젝트를 클릭하고 자동 레이아웃 추가를 선택합니다.

자동 레이아웃 속성

자동 레이아웃 기능이 있는 프레임은 일반 프레임와 속성이 다르며 자동 레이아웃을 적용하면 오른쪽 사이드바가 약간 변경됩니다.

자동 레이아웃 프레임으로는 다음 기능을 수행할 수 없습니다.

• 이 프레임에 그리드 레이아웃 추가
• 자동 레이아웃 프레임 내의 모든 오브젝트에 비율 제한 적용
• 프레임의 모든 오브젝트에 대해 지능형 선택 사용

방향

자동 레이아웃은 수평 또는 수직의 한 방향으로만 레이아웃 자동화를 지원합니다. 두 가지 방향이 다 필요한 경우 중첩된 자동 레이아웃을 사용해주시면 됩니다.

간격

다른 자동 레이아웃 방향 설정에 따라 다른 방향의 자동 레이아웃 오브젝트 사이의 간격을 조정할 수 있습니다.

테두리

오브젝트와 자동 레이아웃 프레임 사이의 간격 거리를 조정할 수 있습니다. 네 방향의 거리가 동일하면 절대값이 표시되고 거리가 일치하지 않으면 단독으로 표시됩니다. 정렬 버튼을 클릭하여 네 방향의 값을 단독적으로 조정할 수 있습니다.

여백 조정 후 자동 레이아웃 프레임은 내부 요소가 변경됨에 따라 프레임의 크기를 자동으로 확장합니다.

분포 및 정렬

설정에 따라 배치하기：사용자가 입력한 간격 값에 따라 정렬

균등하게 배분: 자동 간격, 패널 크기에 따라 패널 내에서 물체를 고르게 분배하여 간격을 자동으로 조정합니다.

정렬 위치: 자동 레이아웃 방향에 따라 옵션이 달라집니다.

• 수직 자동 레이아웃: 왼쪽, 가운데, 오른쪽
• 자동 수평 레이아웃: 상단, 중앙, 하단

비율 제한

자동 레이아웃의 비율 제한은 동 레이아웃 프레임의 비율 제한과 자동 레이아웃내 오브젝트의 비율 제한으로 나뉩니다.

• 자동 레이아웃 프레임의 비율 제한
• 너비/높이 고정: 사용자가 지정한 프레임의 너비/높이
• 내용 에워싸기：프레임의 오브젝트에 따라 프레임의 너비와 높이를 자동으로 조정합니다.
• 자동 레이아웃의 오브젝트에 비율 제한
• 너비/높이 고정: 사용자가 지정한 프레임의 너비/높이
• 내용 에워싸기：오브젝트의 높이와 너비를 수평 또는 수직으로 채워 자동 레이아웃 프레임을 채웁니다.

오브젝트 추가, 편집 및 삭제

오브젝트를 자동 레이아웃에 추가

모든 레이어 또는 오브젝트를 자동 레이아웃 프레임에 추가할 수 있습니다.

• 자동 레이아웃 프레임에서 오브젝트를 클릭하고 드래그합니다.
• 파란색 표시기를 사용하여 오브젝트를 배치할 위치를 선택합니다.

자동 레이아웃 중첩

자동 레이아웃의 수평 및 수직 중첩을 통해 복잡한 레이아웃 인터페이스 디자인을 달성할 수 있습니다. 중첩된 자동 레이아웃은 서로 영향을 미치지 않으며 동시에 자동 레이아웃 오브젝트 및 자동 레이아웃 프레임과 같은 설정 속성을 가집니다.

복제된 대상 추가

자동 레이아웃 프레임에서 단축키 Ctrl + D(Command + D)를 통해 동일한 콘텐츠의 빠른 복사하여 추가를 지원합니다.

오브젝트 위치 정렬

자동 레이아웃에서 화살표 키를 통해 오브젝트 위치를 빠르게 교환하여 순서를 조정하도로 하겠습니다.

오브젝트 제거

자동 레이아웃의 오브젝트를 프레임에서 이동하거나 제거하여 삭제할 수 있습니다.

자동 레이아웃 취소

오른쪽 패널에서 "-" 기호를 클릭하여 자동 레이아웃을 취소할 수 있습나다. 자동 레이아웃이 생성될 때 프레임이 따라 생성되면  이미 생성된 프레임이 사라지지 않습니다.

지능형 선택 및 정렬

지능형 선택을 사용하면 두 개 이상의 레이어 사이의 정열 방식 또는 간격을 빠르게 조정할 수 있습니다. 지능형 선택을 사용하여 다음을 수행하십시오.

• 레이어 사이의 수직 및 수평 간격을 균일하게 조정할 수 있습니다.
• 선택한 레이어에서 균일하거나 균일하지 않은 메시 작성할 수 있습니다.
• 행, 열 또는 그리드 레이아웃의 레이어 재정렬 또는 재정렬 가능합니다.
• 선택한 것에서 레이어를 복사하거나 제거하고 다른 레이어를 재정렬합니다.
• 지능형 선택은 지루하고 반복적인 작업을 줄여 시간을 절약하고 레이아웃을 더 빨리 만들고 정렬할 수 있도록 합니다.

지능형 선택

지능형 선택을 위해서는 모든 레이어가 동일한 간격으로 배치되어야 하며 x 또는 y 축 또는 둘 다에 겹쳐야 합니다. 레이어의 간격이 동일하지 않은 경우 도구를 사용하여 레이어를 재정렬하고 지능형 선택을 만들 수 있습니다.

지능형 선택은 1D 및 2D 방향 설정을 지원하며, 1D는 열 또는 행으로 둘 중의 하나를  배열할 수 있습니다. 2D는 그리드 또는 테이블 형태로 배열된 레이어와 같은 행과 열로 배열할 수 있습니다.

1. 지능형 선택에 포함할 모든 레이어를 선택하십시오. 레이어는 크기나 모양이 달라도 됩니다. 개별 레이어, 그룹, 프레임 또는 구성요소를 선택할 수 있습니다.
2. Pixso는 캔버스 선택에 스마트 핸들을 추가하여 캔버스 중앙에 분홍색 링이 나옵니다.
3. 지능형 선택 위에 마우스를 놓으면 각 레이어 사이에 분홍색 핸들이 나타납니다.이 핸들을 사용하면 레이어 사이의 수직 또는 수평 간격을 조정할 수 있습니다.

지능형 선택에서 레이어 조정

선택한 후 선정된 레이어를 변경할 수 있습니다.직접 이동, 추가 또는 삭제할 수 있습니다

• 간격 조정
• 이동 또는 재정렬
• 레이어 복제
• 레이어 크기 조정
• 레이어 삭제
• 조정할 선택 영역의 레이어를 선택할 수 있습니다.

간격 조정

조정 방법:

• 캔버스에서 핸들을 사용하여 간격을 조정합니다.
• 오른쪽 패널에서 속성 값 조정합니다.

이동 또는 재정렬

지능형 선택에서 레이어가 나타나는 순서나 위치를 변경할 수도 있습니다.

• 레이어 중앙에 있는 분홍색 링을 클릭하여 표시합니다.
• 선택한 다른 위치로 끕니다.
• 레이어의 새로운 위치를 확인하기 위해 릴리스 합니다. 조정 후 보증합니다.정렬 상태를 유지합니다.

레이어 복제

지능형 선택에서 레이어의 복제본을 만들 수 있습니다.

• 레이어 중앙에 있는 분홍색 핸들을 클릭하여 표시합니다.
• 단축키：MacOS：Command+D Windows：Ctrl+D；
• 레이어를 복사해 원래 레이어 옆에 붙여 넣으면 지능형 선택에서 다른 레이어가 이동해 적응합니다.

레이어 크기 조정

지능형 선택을 사용하면 선택한 범위 내의 레이어 크기를 조정하면서 레이어간 거리를 동일하게 유지할 수 있습니다.

레이어 삭제

지능형 선택에서 개별 레이어를 삭제할 수도 있습니다.

• 레이어 중앙에 있는 분홍색 핸들을 클릭하여 표시합니다.
• 키보드에서 Delete 또는 Backspace 키를 눌러 표시된 레이어를 삭제합니다.
• 선택한 다른 레이어는 생성된 간격을 채우기 위해 재배열됩니다.

눈금자

디자인에서 레이어나 오브젝트를 정확히 찾아내려고 할 때 눈금자를 사용하여 위치를 지정할 수 있습니다.

눈금자 추가

먼저  "열림" 상태인지 확인해야 합니다. 눈금자가 캔버스에 표시되지 않으면 Shift+R로 빠르게 열거나 메뉴에서 눈금자를 선택할 수 있습니다.

왼쪽 또는 상단의 눈금자에서 마우스 왼쪽 버튼을 누르고 캔버스 방향으로 드래그한 다음 지정된 위치에서 놓으면 캔버스 또는 프레임에 눈금자를 만들 수 있습니다.

눈금자를 프레임에서 추가할 수 있습니다.

눈금자 삭제

마우스 오른쪽 단추를 사용하여 눈금자를 다시 끌어오는 것 외에도 눈금자를 선택하고 Delete 키나 Backspace 키를 누를 수 있습니다.

레이아웃 그리드

레이아웃 그리드란 무엇입니까?

레이아웃 그리드는 프레임 내에서 오브젝트를 정렬하는 데 도움이 되며, 디자인에 시각적 구조를 확정하며, 플랫폼과 장치 간에 디자인 일관성이있게 유지하는 데 도움이 됩니다.

레이아웃 그리드는 픽셀 그리드와 독립적입니다. 즉, 특정 해상도 또는 크기에 의존하지 않습니다.

레이아웃 그리드는 최상위 프레임 또는 다른 프레임 내에 중첩된 프레임에 적용할 수 있습니다.단지 다른 요소 빼고 프레임에만 적용할 수 있습니다.

레이아웃 그리드를 사용하면 다음과 같습니다.

• 여러 플랫폼에 걸쳐 디자인 일관성을 구축합니다.
• 레이아웃을 정의할 때 반복적인 결정을 내리는 시간을 절약할 수 있습니다.
• 모델 또는 와이어프레임의 레이아웃을 만드는 데 걸리는 시간을 줄입니다.
• 갤러리, 아이콘 또는 전체 페이지 레이아웃과 같은 다양한 레이아웃 방법을 지원하여 전체 페이지를 풍부하게 만듭니다.

레이아웃 그리드 사용 방법: 프레임 또는 구성요소를 선택하고 오른쪽 패널의 레이아웃 그리드에서 "+" 를 클릭한 다음 바로 작성할 수 있습니다.

다차원 구조 디자인을 위해 다중 레이아웃 형식을 만들 수 있습니다.

레이아웃 그리드 속성

그리드, 행, 열의 세 가지 레이아웃 그리드 속성 설정을 지원합니다.

• 그리드를 사용할 때 그리드의 간격과 색상을 설정할 수 있습니다.

• 열 또는 행을 사용할 때 수량, 유형, 너비, 테부리, 간격을 설정할 수 있습니다.
• 설정할 수 있는 유형: 왼쪽, 오른쪽, 중간, 스트레칭 등 입니다. 스트레칭을 사용할 때 테두리 및 간격 규칙에 따라 프레임을 자동으로 덮을 수 있습니다.  유형 설정은 일반적으로 프레임의 오브젝트가 구속되는 방식과 함께 사용됩니다.

레이아웃 그리드 가시성 설정

단축키를 사용하여 레이아웃 그리드의 가시성을 설정할 수 있습니다.

Mac OS：Command+G

Windows：Ctrl+Shift+4