레이아웃 가이드 만들기

레이아웃 가이드는 개체들이 정확하게 정렬되고 다양한 플랫폼 및 장치에서 디자인이 논리적이고 일관성 있게 유지되도록 구조를 제공하기 위해 프레임에 추가된 시각적 보조 도구입니다.

레이아웃 가이드 사용:

• 다양한 플랫폼 전반에서 일관성 유지
• 레이아웃 정의 시 의사결정 횟수 감소
• 모형이나 와이어프레임의 레이아웃 정의에 사용하는 시간 단축
• 갤러리, 아이콘 또는 전체 페이지 레이아웃과 같은 다양한 레이아웃 기법 지원

레이아웃 가이드 유형

레이아웃 가이드는 균일 그리드, 열, 행의 세 가지 유형이 있습니다.

균일 그리드

균일 그리드는 기호나 아이콘 디자인과 같이 정확성이 필요한 경우에 유용한 사각형 그리드입니다.

균일 그리드를 선택하면 색상과 크기를 조정할 수 있습니다.

열과 행

열은 프레임의 높이 전체를 가로지르는 수직 가이드입니다. 행은 프레임의 너비 전체를 가로지르는 가로 가이드입니다. 둘 다 웹 및 모바일을 위한 반응형 인터페이스 설계에 이상적입니다.

열과 행은 모두 유사한 속성 유형을 가지고 있으며 이를 조정할 수 있습니다.

레이아웃 가이드 추가 및 편집

모든 프레임에 레이아웃 가이드를 추가할 수 있습니다. 컴포넌트도 프레임이므로 컴포넌트에도 추가할 수 있다는 점을 기억하세요.

레이아웃 가이드 추가:

1. 프레임을 선택합니다.
2. 오른쪽 사이드바의 레이아웃 가이드 섹션에서 레이아웃 가이드 추가를 클릭합니다. 균일 그리드는 프레임에 기본으로 적용됩니다.

레이아웃 가이드를 편집하려면 레이아웃 가이드 설정 아이콘을 클릭하여 레이아웃 가이드 유형을 변경하고 설정을 조정할 수 있습니다.

레이아웃 가이드 결합

위에서 언급한 것처럼, 하나의 프레임에 여러 레이아웃 가이드를 추가할 수 있습니다. 이는 더 복잡한 레이아웃을 개발할 때 유용합니다.

예를 들어, 세로 및 가로 정렬을 더 잘 제어하기 위해 열과 행 레이아웃 가이드를 모두 추가할 수 있습니다.

1. 다른 레이아웃 가이드를 추가할 프레임을 선택합니다.
2. 오른쪽 사이드바에서 레이아웃 가이드 옆의  아이콘을 클릭합니다.
3. 제공된 드롭다운에서 레이아웃 가이드를 선택합니다.
4. 기타 관련 속성을 정의합니다.
5. 프레임에 더 많은 레이아웃 가이드를 추가하려면 반복합니다.

레이아웃 가이드 표시 또는 숨기기

레이아웃 가이드의 표시를 전환할 수 있습니다. 이는 레이아웃 가이드를 완전히 제거하지 않고 숨겨야 할 상황에 유용합니다. 레이아웃 가이드는 보이지 않더라도 여전히 작동합니다.

파일의 모든 레이아웃 가이드 표시 한 번에 전환:

1. 오른쪽 사이드바 상단의 확대/보기 옵션 드롭다운 메뉴를 엽니다.
2. 레이아웃 가이드를 클릭하여 설정을 선택(활성화)하거나 선택 해제(비활성화)합니다. 또는 키보드에서 Shift G 키를 눌러도 됩니다.

특정 레이아웃 가이드 숨기기 또는 표시: 

1. 해당 레이아웃 가이드가 있는 프레임을 선택합니다.
2. 오른쪽 사이드바의 레이아웃 가이드 섹션에서 전환할 레이아웃 가이드를 찾아 / 아이콘을 클릭하여 표시/숨기기를 설정합니다.

레이아웃 가이드 스타일 만들기 및 적용

이상적인 레이아웃 가이드를 완성한 후에는 이를 디자인에 전반에 걸쳐 재사용할 수 있는 스타일로 만들 수 있습니다.

스타일 만들기에 대해 자세히 알아보세요.

레이아웃 가이드 스타일 만들기

새 레이아웃 가이드 스타일 만들기:

1. 캔버스에서 레이아웃 가이드가 적용된 프레임을 선택합니다.
2. 오른쪽 사이드바에서 레이아웃 가이드 섹션의 스타일 적용을 클릭합니다.
3. 스타일 만들기를 클릭합니다.
4. 레이아웃 가이드 스타일에 이름과 설명을 추가합니다.
5. 스타일 만들기를 클릭합니다.

레이아웃 가이드 스타일 적용

레이아웃 가이드 스타일 적용:

1. 캔버스에서 프레임을 만들거나 선택합니다.
2. 오른쪽 사이드바에서 레이아웃 가이드 섹션의 스타일 적용을 클릭합니다.
3. 목록에서 레이아웃 가이드 스타일을 선택하여 프레임에 적용합니다. 

레이아웃 가이드와 제약조건 사용 작업

더 복잡한 디자인의 경우 크기를 조정할 때 디자인이 잘 작동하도록 하기 위해 정확성과 유연성이 필요합니다.

제약조건은 프레임 내에서 개체가 배치되는 기본 프레임워크를 제공하는 데 적합합니다. 레이아웃 가이드와 결합하면 강력한 레이아웃 시스템을 위한 프레임워크를 제공합니다.

가이드와 제약조건을 결합하는 방법에 대해 자세히 알아보세요.

8 포인트 그리드 시스템

8포인트 그리드 시스템은 UI 레이아웃 디자인에 널리 사용되는 도구입니다. 디자인 내 개체 배치를 정의하기 위해 8의 배수를 사용합니다.

모바일 앱과 같은 고정된 제약조건에 맞춰 디자인할 때 이 시스템을 사용할 수 있습니다. 하지만 반응형 레이아웃을 디자인할 때도 유용한 도구가 될 수 있습니다.

8포인트 시스템을 구현하는 두 가지 일반적인 방법이 있습니다:

• 하드 그리드: 8포인트 단위의 고정 그리드 위에 개체를 배치하는 작업이 포함됩니다. Figma에서는 프레임에 크기가 8인 균일 그리드를 적용하는 것을 의미할 수도 있습니다.
• 소프트 그리드: 개체를 서로 간격이 8로 나누어 떨어지도록 배치하는 것을 포함합니다. 이는 8로 나눌 수 있는 속성을 가진 행 또는 열 레이아웃 가이드를 적용하는 것을 의미할 수도 있습니다.

Spec.fm 게시물에서 8포인트 그리드에 대해 자세히 알아보세요.

자주 묻는 질문

모든 레이아웃 가이드를 한 번에 전환할 수 있나요?

네. Figma의 오른쪽 상단 모서리에 있는 보기 설정 메뉴에서 수행할 수 있습니다.

레이아웃 가이드 전환 섹션에서 자세히 알아보세요.

왜 레이아웃 가이드가 표시되지 않나요?

레이아웃 가이드가 표시되지 않는 이유는 여러 가지가 있습니다.

• 레이아웃 가이드가 오른쪽 사이드바에서 꺼짐으로 전환되어 있습니다.
• 레이아웃 가이드가 전체에서 꺼짐으로 전환되어 있습니다.
• 선택된 레이어가 프레임이 아닙니다. 레이아웃 가이드는 프레임에만 적용할 수 있습니다.
• 프레임이 회전되었습니다. 레이아웃 가이드를 적용하기 전, 개체의 회전이 0º인지 확인하세요.

어떻게 레이아웃 가이드를 복사하나요? 

하나의 레이아웃 가이드를 복사하여 다른 프레임에 적용할 수 있습니다. 또는 디자인 전반에 걸쳐 재사용할 수 있는 레이아웃 가이드 스타일로 만들 수 있습니다.

레이아웃 가이드 스타일 섹션에서 자세히 알아보세요.