Figma Grid의 개념

KUKJIN LEE • 9개월 전 작성

Figma에서의 Grid는 세밀하고 체계적인 디자인 작업을 지원하는 도구입니다. 이는 디자이너가 웹 또는 앱 인터페이스를 구축할 때 일관성과 정밀함을 유지할 수 있도록 돕습니다. 웹 디자인에서는 특히 컬럼 그리드 방식을 많이 사용하여, 정보와 요소들을 체계적으로 배열하는 데 중요한 역할을 합니다.

피그마의 그리드 장점

피그마의 그리드 시스템의 가장 큰 장점 중 하나는 그리드를 레이어처럼 자유롭게 사용할 수 있다는 것입니다. 이를 통해 디자이너는 레이아웃을 빠르고 정확하게 조정할 수 있으며, 복잡한 디자인 요소들 사이의 관계를 명확하게 정의할 수 있습니다.

그리드 설계를 위한 기본 용어

그리드 디자인을 시작하기 전에, 몇 가지 기본 용어를 알아두는 것이 중요합니다.

Margin: 이는 프레임의 가장자리와 컬럼 사이의 여백을 말합니다. 마진은 디자인의 '통풍'을 돕고, 요소들이 화면 가장자리에 붙지 않도록 합니다.

Gutter: 컬럼과 컬럼 사이의 공간을 지칭합니다. 일반적으로 디자이너들은 4, 12, 또는 24의 단위로 Gutter를 설정하여 요소들 사이의 적절한 간격을 유지합니다.

실제 예시

Uritabi 사례에서 보듯이, 일반적으로 사용되는 12컬럼 그리드 시스템은 디자인에 필요한 유연성과 구조를 제공합니다. 이러한 시스템을 통해 디자이너는 다양한 화면 크기에 맞춰 콘텐츠를 적절히 조정할 수 있으며, 사용자 경험을 향상시키는 데 중요한 역할을 합니다.

Figma Grid의 개념

New Tech Posts

추천 도서

Our Channels