서론
10일차에 접어든 이번 수업은 'Figma'의 'Grid' 기능을 활용하여 일관성있는 화면 디자인을 하는 방법에 대해 알아보고 3일간 진행하던 과제의 마지막인 'Coupang' 화면 Clone Design을 진행하는 시간을 가졌다.
Grid
'Grid'란 격자를 말하며, 페이지나 화면의 Layout을 구성하는 보이지 않는 Guide line으로, 화면을 체계적으로 구성하기 위한 규칙을 말하며 일반적으로 수평과 수직의 선들이 교차하여 네트워크를 형성한다.
> Grid
'Grid'는 요소들을 일정하게 정렬하고, 균형잡힌 Layout에 도움을 준다.
(Web Design, Print Design, UX/UI Design에서 많이 사용)
> Offset
요소가 본래 위치에서 얼마나 떨어져 있는지를 나타내는 용어
일반적으로 'Margin'이나 'Padding'의 위치 조정을 통해 사용되는 개념이다.
(개체를 다른 요소와 구분되게 하거나, 나아가 원하는 시각적 효과를 줄 때 사용)
> 'Grid'의 구성
Column : 실제로 Contents를 포함하는 부분이며 넓이는 고정된 값으로 제공, 1개 이상의 Column이 조합하여 Contents의 크기를 결정
Gutter : Page나 Grid에서 채우는 요소들 사이의 간격을 의미, 특히 Grid Layout에서 각 Column 간의 공간을 가리킴
(요소들 간의 구분을 명확히 하고, 디자인이 혼잡해보이지 않도록 도와줌)
Margin : 요소의 경계와 그 주변 요소 간의 공간을 의미, 요소와 요소 간의 외부 여백
(Design의 시각적 여백을 편안하게 하기 위해 사용하며, 균형을 맞추고 읽기 쉽도록 함)
> 'Grid'의 활용
※ 일반적으로 Web Design은 12 Column을 사용하며 요즘은 15 Column도 사용하는 추세
※ 위와 같이 Design System에 따라 Rows(가로열)의 비율이 규칙적이지 않고 다양하게 배열이 가능하다.
'Grid System'은 UI 유형에 따라 달라지게 된다.
일반적인 'Grid System' 구성은 아래와 같다.
Desktop : Layout : Center / Columns : 12단 / Margin : 40px / Gutter : 24px
Tablet : Layout : Stretch / Columns : 6단 / Margin : 24px / Gutter : 16px
Mobile : Layout : Stretch / Columns : 4~6단 / Margin : 16px / Gutter : 16px
※ 위의 'Column System' 백분율 너비를 고려하여 내가 사용해야 할 'Grid System'을 생각해볼 수 있다.
> Grid : 4pt / 8pt
※ 위 사진의 왼쪽과 같이 8pt로 시작되어 규칙성이 발견된다면 이는 8pt Grid라고 할 수 있지만
오른쪽과 같이 규칙성이 없다면 Grid가 없다고 판단함
활용해보기
수업내용을 토대로 3일동안 진행했던 내가 정한 'Coupang' 화면 System분석과정을 'Grid'를 활용해 정확하게 Clone Design해보고, 화면의 'Grid System'을 알아보는 시간을 가졌다.
▼ 아래는 내가 'Figma'를 통해 분석, Clone Design을 진행한 'Coupang My page' 화면이다.
<'Coupang My Page' Clone Design>
대학교 시절 디자인을 배우며 Grid에 대해 많이 배웠다고 생각했는데 UX/UI를 디자인 할 때 고려해야하는 Grid System이 생각보다 많다고 생각했고 한 번에 머리에 들어오지않아 혼란스럽기도 했다. 그래도 실습을 하며 직접 사용해보고 Clone Design을 통해 이해하는 과정이 편해져서 다행이었다. 디자이너는 이러한 Design System과 통일성을 많이 생각하고 개발자는 기능, User Case를 주로 고려한다는 점에서 충돌이 많이 생긴다고 하는데 내 Design을 설득하는 힘을 키워 Design System을 지켜내고 싶다! 다음수업부터는 실무를 배우게 되는데 너무 기대된다!
