grid. 퍼펙트클론 무엇일까요? 그리고 왜 사용하는 것일까요?레이아웃을 체계적으로 정렬하고 일관성 있게 디자인하기 위한 가이드라인 도구입니다. ​컴포넌트나 프레임에 그리드를 적용해서 디자인을 하면, 균형감 있고 정돈되어 보이게 만들 수 있답니다!그러면 시각적 질서나 흐름이 좋아지기 때문에 가독성이 향상 되겠죠!?그리고 정렬과 간격이 명확해지기에 개발자와 커뮤니케이션이 보다 원할해져욥피그마에서는 퍼펙트클론 3가지 그리드 타입을 설정할 수 있습니다​Grid: 사각형 격자 패턴 → 보통 아이콘, 작은 요소 정렬에 사용 - 격자 간격은 px를 기준Rows(행): 가로 줄로 나눔 → 높이 기준 정렬 또는 타이포그라피에서 활용Columns(열): 세로 줄로 나눔 → 웹, 앱 화면의 레이아웃 설계 시 퍼펙트클론 주로 사용제일 많이 사용하는 것은 columns에요Margin은 프레임의 가장자리 여백을 뜻하고Gutter는 열 사이의 간격을 뜻합니다​그리드를 설정할 때 Type도 설정 가능한데, Left/Right/Center/Stretch로 나눠집니다.Left/Right/Center 는 어디를 기준으로 정렬되는지를 뜻하는 것이구요Stretch는 보통 프레임에 맞춰 열이 늘어나거나 줄어드는 그리드인데, 보통 반응형 웹이나 앱에서 사용돼요!​​그리드 기본 세팅은 퍼펙트클론 보통(?) 이렇게 해요(일단 저는 이렇게 해서 사용중입니다 ㅎ)타입을 센터로 설정하면 마진이 아닌 columns의 넓이를 설정모바일 앱 기준웹 기준속성값속성값Columns4Columns12TypeStretchTypeCenterMargin16pxWidth78pxGutter16pxGutter24pxUse case카드, 리스트 정렬, 반응형 UI 설계Use case메인 레이아웃 설계 및 정렬디자인 시스템에서는 4pt, 8pt 그리드 시스템을 기준으로 합니다​그런데 왜 4pt / 8pt를 기준으로 퍼펙트클론 잡을까요?​1. 대부분의 디지털 스크린은 픽셀 단위로 표시하는데, 4와 8은 픽셀 그리드(화면의 점)와 정렬하기에 딱 좋은 단위라서 픽셀 퍼펙트(정확히 맞는 디테일)를 구현하기에 최적이기 때문이에요오5는 2의 배수 체계에 맞지 않아 불규칙한 계산이 발생할 가능성이 있고, 특히 반응형 UI나 다양한 해상도 대응 시 픽셀 퍼펙트클론 크기 오류를 유발할 수 있답니다​2. 스케일링과 반응형 디자인에서 유리4와 8은 2의 배수 계열이라서 증가/감소가 자연스럽습니다.그래서 작은 버튼부터 큰 카드까지 스케일이 부드럽게 커지고 작아지죠모바일/태블릿/데스크탑 화면에서 스무스하게 크기 전환이 가능하답니다​3. 또한 개발자는 CSS, Android DP, iOS pt 기준으로 작업하기 때문에4나 8pt 단위는 개발자가 퍼펙트클론 크기 계산하기 편하대요. 패딩이나 마진, 폰트 크기를 전부 동일 기준으로 맞출 수 있다는 뜻!4pt는 보다 세밀한 디테일을 다루기가 좋기 때문에 복잡한 UI나 작은 컴포넌트 디자인을 만들 때 사용하고,8pt는 주요 레이아웃을 설계하고 구조를 잡는데 사용해요!​대부분은 8pt를 기본으로 하고, 세밀한 조정이 필요하면 4pt를 퍼펙트클론 사용한달까요그리고 오늘의 과제 클론 디자인!저는 저어어번 시간에 배웠던 컴포넌트를 활용해보고 싶어서 버튼을 컴포넌트화 하고, 오토 레이아웃을 잡아서 만들었답니당그냥 복붙이 아닌, 컴포넌트를 만들어서 클론 디자인을 해보니 퍼즐을 맞추는 것 같기도 해서 너무 재밌었던 과제!그리고 이제 피그마에 조금 익숙해지고 있나-? 라는 생각이 들었던 퍼펙트클론 하루였습니다 :) ​​​​​