[디자인부트캠프] Grid & Component

서론

어제 배웠던 Component 수업 내용 다음으로 UI Design을 할 때 필수적이라고 할 수 있는 Grid 기능을 다시 한 번 복습하고 Grid, Component 기능을 활용해 WEB, Mobile 화면구성을 해보는 시간을 가졌다.

Grid

'Grid'란 격자를 말하며, 페이지나 화면의 Layoutd를 구성하는 보이지 않는 Guide Line으로, 화면을 체계적으로 구성하기 위한 규칙을 말하며 일반적으로 수평과 수직의 선들이 교차하여 네트워크를 형성

Layout & Gird System

> Layout

화면 크기, Text, Image, 여백 등의 다양한 구성요소를 고려하여 앱 내에 정보를 시각적으로 배치하는 것

> Grid System

여러 종류의 요소를 질서 있게 배치하기 위한 Grid 규칙 (Grid를 활용하면 시각적 통일성을 줄 수 있음)

> Layout Grid 활용

※ 작은 요소를 배치하는 경우 Grid, 전체 Layout의 경우 Column을 사용

그리드 계산기를 사용하면 조금 더 편하게 Grid 배치를 할 수 있다.
그리드 계산기

Layout 요소

• Column : 실제로 Contents를 포함하는 부분이며 넓이는 고정된 값으로 제공, 1개 이상의 Column이 조합하여 Contents의 크기를 결정
• Gutter : Page나 Grid에서 채우는 요소들 사이의 간격을 의미, 특히 Grid Layout에서 각 Column 간의 공간을 가리킴
• Margin : 요소의 경계와 그 주변 요소 간의 공간을 의미, 요소와 요소 간의 외부 여백

> Figma Layout

WEB, App의 해상도 차이

※ Foldable Phone의 시장이 계속 커지고 있어 대응이 필요

※ 모두가 같은 해상도로 보고 있는 것이 아니기 때문에 최소 해상도에 맞추어 Design 할 것

> 사용자 경험을 고려한 설계 차이

스마트폰과 PC는 사용자들이 화면과 상호작용하는 방식이 다르며 이러한 차이는 Design과 Contents 배치에도 영향을 미침

• 스마트폰 : 손가락 터치 기반의 Interfacef로, 큰 버튼과 간단한 Navigation이 필요
• PC : 마우스와 키보드로 세밀한 조작이 가능하므로 더 많은 정보를 한 번에 제공

> 기술적 차이

스마트폰과 PC에서의 차이는 단순히 화면 크기나 Design의 문제를 넘어, 기술적인 차이에서도 발생

• Browser Engine 차이 : PC와 스마트폰의 WEB Browser는 HTML, CSS, JAVA Script를 처리하는 방식에서 약간은 차이가 있을 수 있으며, 같은 코드를 Rendering하더라도 디바이스별로 약간 다르게 보임
• 네트워크 환경 : 스마트폰 사용자는 주로 Mobile Data나 Wi-Fi를 사용하며, PC는 고속 인터넷 연결을 사용하는 경우가 많고, 이런 차이를 고려해 스마트폰에서는 이미지 크기를 줄이거나 데이터 사용량을 최적화하는 기술이 적용

> Responsive Web Design, RWD ( 반응형 웹디자인)

웹사이트를 여러 디바이스의 화면 크기와 해상도에 자동으로 적응하도록 만드는 웹디자인 접근 방식
모든 디바이스에서 일관된 사용자 경험을 제공하며, 사용자가 스마트폰, 태블릿, 노트북, 데스크톱 등 다양한 환경에서 웹사이트를 이용할 수 있도록 돕습니다.

구상해보기

앞서 배운 Component 기능들과 Grid기능을 활용하여 여러 Grid 형태를 배치해보고 내가 좋아하는 것을 소개하는 WEB화면과 Mobile화면을 구상해보고 제작해보는 시간을 가졌다.

▼ 아래는 내가 'Figma'를 통해 작성한 '고양이 소개' WEB화면과 Mobile화면구상이다.
<'고양이 소개' WEB, Mobile화면구상>

백지상태에서 내가 Grid를 잡고 처음부터 구상하는 건 처음이라 생각하는데도 시간이 많이 필요했고 Grid 배치에서도 시간을 많이 잡아먹었는데 평소에 보면 화면들이 다 대단하게 느껴졌다. 아직은 화면 Design에 대한 미감이 잡혀있지 않은 상태인 것 같아서 여러 WEB Site들을 접하고 참고하며 Design에 대한 시야를 넓혀나가야겠다는 생각이 들었다.