피그마 자동화
–
그리드형 목록 아이템을 디자일할 때 꿀팁!
그리드의 숫자를 유동적으로 조절하는 방법을 알려드립니다.
피그마 자동화 | 그리드형 목록 아이템 설계 시 주의할 점
그리드형 목록 아이템은 웹 페이지나 앱의 목록에서 이미지를 강조하여 표시하는 형태를 말합니다. 이는 사용자들에게 시각적인 인상을 주고, 내용의 시각적인 다양성과 유익성을 높이는 데 도움을 줍니다. 디자이너는 그리드형 목록 아이템을 설계할 때 다양한 그리드 개수를 테스트하며, 각각의 레이아웃이 어떻게 작동하는지 확인합니다. 예를 들어, 1-Column 레이아웃은 하나의 열로 구성되어 있는 간단한 형태이며, 2-Column 레이아웃은 두 개의 열로 이루어져 있어 더 넓은 공간을 활용할 수 있습니다. 또한, 3-Column 레이아웃은 세 개의 열을 가지므로 더 많은 컨텐츠를 한 번에 표시할 수 있습니다.
하지만, 그리드형 목록 아이템을 설계할 때 주의할 점이 있습니다. 이미지의 비율을 유지하면서 그리드의 숫자를 다양하게 조절하는 것은 중요한 과제입니다. 이를 위해 디자이너는 반응형 웹을 고려하여 다양한 화면 크기에서도 일관된 사용자 경험을 제공할 수 있도록 노력해야 합니다. 따라서, 이미지 비율을 유지하면서 그리드 개수를 유동적으로 조절하는 유연한 방법이 필요합니다. 이는 그리드형 디자인의 편리성과 확장성을 높여주며, 웹 디자인 작업을 보다 효율적으로 수행할 수 있게 해줍니다.
그래서, 디자이너들은 그리드형 목록 아이템을 사용할 때 이미지 비율과 그리드의 개수를 조율하는 최적의 방법을 탐색합니다. 이를 통해 웹 페이지나 앱의 사용자 인터페이스를 더욱 멋지고 유연하게 만들 수 있습니다. 따라서, 디자이너들은 이러한 그리드형 목록 아이템을 적절히 활용하여 사용자들에게 흥미로운 시각적 경험을 제공하고, 컨텐츠의 가독성과 효과적인 전달을 도모할 수 있습니다.
피그마 자동화 | 그리드형 목록 아이템 UI 디자인 시 고충
책을 소개하는 웹사이트의 그리드형 목록을 디자인한다고 가정해 봅시다. 이 웹사이트에서는 다양한 책 커버를 강조하기 위해 그리드형 목록 아이템을 사용하려고 합니다. 그러나, 책 커버의 비율은 대략 3:4로 유지되어야 한다는 요구사항이 있습니다. 처음에는 3개의 컬럼으로 그리드를 디자인했는데, 이제 추가적인 아이템을 표시하기 위해 컬럼 수를 늘리려고 하니 이미지의 비율이 깨지는 문제가 발생합니다. 이런 상황에서 디자이너는 적합한 그리드를 찾기 위해 여러 가지 컬럼 수를 시도해 보면서 시안을 제작해야 합니다. 그러나 이는 꽤나 불편한 작업일 수 있습니다.
책 커버의 비율을 유지하면서도 그리드의 숫자를 유동적으로 바꿀 수 있는 방법이 있다면, 디자이너는 더욱 쉽고 빠르게 그리드형 목록 아이템을 디자인할 수 있을 것입니다. 예를 들어, 이미지의 비율을 유지한 채로 컬럼 수를 조절할 수 있는 컴포넌트가 있다면, 디자이너는 실시간으로 다양한 그리드 형태를 시도해 볼 수 있을 것입니다. 이렇게 되면 그리드형 목록 아이템의 디자인 작업이 훨씬 효율적이고 편리해질 것입니다. 따라서, 확장성 있는 컴포넌트를 개발하여 디자인 작업의 어려움을 해결하는 것이 중요합니다.
그래서, 그리드형 목록 아이템을 디자인하는 디자이너들은 이미지 비율과 그리드의 개수를 유연하게 다룰 수 있는 방법을 탐색하고 개발하는 것이 필요합니다. 이를 통해 그리드형 목록 아이템의 디자인 작업을 보다 효율적이고 편리하게 수행할 수 있으며, 사용자에게 뛰어난 시각적 경험을 제공할 수 있습니다.
피그마 자동화 | 그리드형 목록 아이템 자동화 예시
우리가 원하는 상황은 아래 첨부한 이미지처럼 이미지 비율을 유지하면서 아이템의 개수를 유동적으로 늘리고 줄이는 것입니다.
피그마 자동화 | 피그마에서 그리드형 목록 아이템 디자인을 자동화하는 방법
이미지 비율을 유지한 채 그리드를 유동적으로 바꿀 수 있게 디자인하는 방법입니다.
1. 피그마 커뮤니티에서 아래 파일을 검색해서 열어주세요.
2. 파일 내에서 “🎛 Fixed Aspect Ratio Spacer (Variants)” 라는 컴포넌트를 찾으세요.
3. 원하는 이미지 비율의 컴포넌트를 선택해서 내 작업 파일로 가지고 옵니다.
저는 4:3 비율의 이미지 컴포넌트를 선택했습니다.
4:3 비율을 인스턴스를 가지고 온 후, 우측 패널에서 Landscape 를 Portrait로 변경해주면 3:4 비율로 변경할 수 있습니다.
4. 이제 그리드형 목록 아이템을 만들어 주세요.
오토 레이아웃을 활용해서 만들어 주세요. 오토 레이아웃에 대한 설명은 생략하겠습니다.
각 레이어의 가로 세로 너비에 대한 설정값 (Full / Fixed / Hug) 만 유의해서 만들어 주세요.
첨부한 이미지에 연두색 형광색으로 표시해 두었습니다.
5. 그리드형 아이템 컴포넌트를 여러 개 복사하여 컨테이너로 감싸주세요.
그리고 여기서 가장 중요한 점!
- 컨테이너의 너비: Fixed 로 고정된 값을 넣어줍니다.
- 그리드형 아이템(⬦Dialog Box): 가로 너비를 Fixed 에서 Fill 로 변경해줍니다.
아이템을 개수를 늘리거나 줄여보세요.
이제 이미지 비율을 유지하면서도 아이템 개수를 유동적으로 늘리고 줄일 수 있습니다.
참고로 이미지 파일은 Photo 레이어에 등록해주시면 됩니다.
여기까지 따라 오시느라 수고 많으셨습니다.
디자인할 때 시간을 많이 절약할 수 있으니 다들 한번씩 만들어 보세요.
그리고 피그마에 대한 꿀팁을 더 알고 싶다면 이 포스트도 보고 가세요!
이 글이 도움 됐다면 커피 한 잔 사주기! 😘
2 Comments