본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

레이아웃 그리드를 사용하는 이유는 무엇일까요?

디자인할 때 요소들이 제자리에 정돈되어 있지 않으면 화면이 어수선해 보일 수 있습니다. 이런 경우에는 ‘그리드’를 활용해 보세요.
그리드는 캔버스 안의 요소들을 정렬하고 구성할 수 있도록 도와주는 보조 도구이기 때문에, 그리드를 활성화한 뒤 요소를 배치하면 디자인이 훨씬 더 균형 잡히고 정돈된 느낌을 줄 수 있어요. 전체적으로도 일관성 있는 인상을 주는 데 큰 도움이 됩니다.

그리드 추가 방법

1. 좌측 상단에 있는 Framer 로고 클릭

2. View 열기

3. 메뉴에서 Show Guides(가이드 표시) 선택

Note : 메뉴를 거치지 않고 ^G단축키를 활용해 더 빠르게 가이드를 켜고 끌 수도 있습니다. 기능 탭이나 메뉴 옆에 단축키가 함께 표시되니 참고하세요.

그리드 속성 설정 방법

그리드 설정을 바꿔야 할 때에는 요소(프레임)를 선택한 후에 오른쪽 패널의 그리드 설정 메뉴 Guides에서 프로젝트에 맞게 설정을 바꿀 수 있습니다.

• Type(그리드 유형): 열(column) 또는 행(row) 그리드 중에서 선택

• Count(그리드 수): 그리드의 수를 설정

• Align(그리드 정렬 방식): 좌측, 중앙, 우측, 양 끝 맞춤의 형태로 그리드를 정렬

• Width(그리드 너비): 그리드의 너비를 설정

• Gap(간격): 그리드 사이의 여백을 설정

• Margins(그리드 정렬 면 여백): 그리드 정렬 면의 여백을 설정(예를 들어 좌측정렬이면 왼쪽의 여백을 설정)

• Color(그리드 색상): 그리드 면의 색상을 설정

레이아웃 그리드 해제 방법

캔버스에 표시된 그리드가 더 이상 필요 없을 때는 아래의 방법으로 그리드를 해제할 수 있습니다.

1. 좌측 상단에 있는 Framer 로고 클릭

2. View 열기

3. 메뉴에서 Show Guides(가이드 표시) 선택 해제

Note : 앞서 사용했던 단축키^G를 한 번 더 누르면 빠르게 가이드를 끌 수 있습니다.

본 글은 Framer 공식 블로그의 ‘Adding a layout grid’ 를 번역·각색한 콘텐츠입니다.