티스토리 뷰

UI_UX Design/UI Design 개론

Ch04_4_3_모바일 디자인 가이드 요소_grid

jsBae 2024. 11. 7. 17:43
728x90

1. Z축과 그림자
2. 해상도와 밀도
3. 그리드
4. 컬러테마
5. 타이포그래피 시스템

 

3. 그리드

앱 디자인 시 기준과 규칙은 매우 중요합니다. 각 화면별로 통일 된 레이아웃과 정돈된 화면을 디자인 할 때 바로 그리드 시스템을 사용합니다.

 
  •  그리드(Grid): ‘격자’를 의미하는 용어로 디자인에서는 디자인 영역을 일정하게 구획 하는 것을 의미.
  • 일관성을 부여
    - 사진, 그림, 문자, 여백 등의 시각적 효과를 고려해 배열하고 구성하는데 유용
    - 정보에 질서와 구조를 부여함으로써 사용자가 보고 이해하기 쉽게 일관성을 부여
  • 그리드를 구성하고 있는 요소는 컬럼(Column), 거터(Gutter), 마진(Margin)이다

 

그리드 설정

그리스 시스템 제작

  • 그리드 간의 간격을 띄우는 기준선 필요
  • 간격을 띄우는 방법으로는 비율, 컨테이너, 터치 대상에 영향을 주는 기준선 그리드, 패딩, 증분 간격을 사용.
  • 기본적으로 모바일, 태블릿, 데스크톱에 사용되는 모든 구성 요소는 8dp의 기본 그리드 사용

8dp 기준의 필요성

8dp를 기준으로 하는 이유는 해상도 밀도에 따른 배수 계산 때문이다. 안드로이드 UI에서 다양한 디스플레이 밀도 (ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi)를 지원하기 위해 배수 개념이 필요하다. 특히, hdpi(1.5배수)와 같은 해상도 밀도에서는 0.5와 같은 소수점 수치를 반올림하지 않고 표현할 수 없다. 8dp를 기준으로 사용하면 배수 계산 시 정수 단위로 맞춰지기 때문에 해상도 간의 불일치나 왜곡을 최소화할 수 있다.

예를 들어, xxxdpi에서 4px의 선을 그리면 hdpi에서는 1.5배로 계산되어 6px이 되어야 하지만, 4px을 1.5배로 확대할 경우 6px을 정확하게 맞추지 못할 수도 있다. 반면, 8dp는 모든 밀도에서 정수 배수로 계산되기 때문에 이러한 문제가 발생하지 않는다.

정해진 룰이 있는 것이 아니고.

하지만 도형, 타이포그래 피 및 일부 요소는 4dp 그리드에 맞출 수도 있다. [그림 4-36]과 같이 아래쪽 내비게이션의 막대 요소는 4dp 그리드에 정렬되며, 타이포그래피는 버튼이나 리스트 항목과 같은 구성 요소의 가운데에 있을 때 4dp 그리드 외부에 배치할 수 있다.

그리드 간의 간격을 띄우는 기준과 방법

  1. 비율에 따른 간격: 그리드 간의 간격을 설정할 때 비율을 고려하여 간격을 띄우는 경우가 많다. 이렇게 하면 화면 크기가 다른 디바이스에서도 비슷한 시각적 비율을 유지할 수 있다.
  2. 컨테이너 사용: 모든 UI 요소를 담는 기본 컨테이너를 설정하고, 그 안에 요소들을 8dp 기준으로 간격을 맞춰 배치하는 방식이다. 이를 통해 레이아웃 전체의 일관성을 확보할 수 있다.
  3. 터치 대상 기준 그리드: 터치할 수 있는 UI 요소는 터치 영역이 넉넉하게 제공되어야 한다. 터치 대상의 간격과 크기를 8dp 배수로 설정하여 터치 영역이 적절하게 확보되도록 한다. 이는 모바일과 같은 터치 디바이스에서 특히 중요하다.
  4. 패딩(Padding): 콘텐츠와 그리드 사이의 간격을 유지하기 위해 패딩을 사용한다. UI 요소 주위에 8dp의 패딩을 두어 요소 간격이 고르게 분포되도록 한다.
  5. 증분 간격: UI 요소 간격을 설정할 때 8dp 단위로 증가시키는 방식을 사용한다. 예를 들어, 텍스트와 이미지 사이의 간격을 8dp, 16dp, 24dp와 같은 증분으로 설정하여 일관성을 유지한다.

이러한 원칙을 지키면, 다양한 해상도와 화면 크기에서 디자인이 고르게 유지되며 사용자 경험을 최적화할 수 있다. 특히, 8dp의 기준 그리드는 다양한 디바이스에서 크기나 비율의 왜곡 없이 시각적으로 안정적이고 일관된 레이아웃을 구성하는 데 매우 유용하다.

머티리얼 디자인(Material Design)의 권장사항에 따른 그리드 시스템을 사용 방식

기본적으로 360dp 기준 모바일 화면에서는 4컬럼(열)을,

태블릿에서는 600dp 8컬럼을, 데스크 톱의 웹 화면에서는 1280dp 12컬럼을 사용할 것을 권장한다.

 

특히 머티리얼 디자인에서는 화면의 크기와 방향에

일관성을 유지하는 반응형 레이아웃 그리드를 사용 하는 것이 좋다.

이러한 반응형 서비스를 지원하는 모바일 웹과 같은 서비스는 화면에 맞게 1분할 2분할 3분한을 포함할 수 있는 6칼럼도 많이 사용합니니다.

스마트폰처럼 가로 폭이 작은 화면에서는 화면 정렬 및 배치가 중요하므로 정확하게 분활해야 합니다.

권장 그리드 설정

  1. 모바일(360dp 기준): 4컬럼 그리드를 사용
    • 모바일 기기에서는 화면이 좁기 때문에 4개의 컬럼으로 구성하여 정보를 간결하게 전달한다.
  2. 태블릿(600dp 기준): 8컬럼 그리드를 사용
    • 태블릿은 모바일보다는 큰 화면을 가지므로 더 많은 콘텐츠를 배치할 수 있으며, 8컬럼 그리드를 통해 콘텐츠의 배치에 유연성을 부여한다.
  3. 데스크톱 웹 화면(1280dp 기준): 12컬럼 그리드를 사용
    • 데스크톱은 넓은 화면을 가지고 있어 12개의 컬럼을 사용할 수 있다. 이렇게 하면 다양한 요소를 정렬할 때 더욱 세밀하게 배치할 수 있으며, 페이지의 복잡한 레이아웃을 효과적으로 구성할 수 있다.

반응형 레이아웃 그리드의 중요성

머티리얼 디자인은 반응형 레이아웃을 강조하여 화면의 크기와 방향에 맞게 자동으로 레이아웃이 적응되도록 한다. 이를 통해 다음과 같은 장점을 얻을 수 있다:

  • 일관성 유지: 다양한 디바이스 간의 화면 크기 차이에 관계없이 동일한 사용 경험을 제공할 수 있다.
  • 적응성 향상: 사용자가 화면을 가로 또는 세로로 전환할 때 레이아웃이 적절히 재배치되므로 가독성과 편의성이 높아진다.
  • 효율적인 공간 활용: 화면 크기에 따라 그리드의 컬럼 수가 변화하면서 정보를 효과적으로 배치할 수 있다.

 

컬럼Column, 거터Gutter, 마진Margin이다.

  • 컬럼은 분홍색 영역으로, 콘텐츠가 포함된 영역을 말한다. 컬럼의 너비는 고정값이 아니며 지정한 마 진과 거터를 제외한 나머지 너비를 컬럼의 개수로 나누어 유연하게 적용한다.
  • 거터는 컬럼과 컬럼 사이의 영역을 말한다. 가장 왼쪽에 있는 컬럼의 좌측과 가장 오른쪽그림에는 녹색 영역으로 표시되어 있는 컬럼의 우측에는 거터가 없으며, 그 공간을 마진 즉 여백이라고 한다.
그렇다면 실제 디자이너는 머티리얼 디자인 가이드에 맞추어 그리드를 작성할까?

사실 가이드를 잘 따르지 않기도 한고 그리드를 만들지 않고 기준선을 그어 통일감을 주는 경우가 많고,

마진은 프로젝트의 디자인 스타일 가이드를 만들기 위해 지정하지만, 8의 배수보다는 4, 5의 배수를 많이 사용한다. 구글 서비스 디자인에 참여하는 것이 아니라며 마진은 디자이너의 감각에 의해 결정하는 것이 맞다.

하지만 초보 디자이너라면 전체 레이아웃의 시각적 요소를 통일성 있게 정돈하기 위해 가이드를 충실하게 지키는 것이 바람직하다.

설정법

  • 그리드 시스템을 만들 때는 먼저 마진 영역부터 설정한다.
  • 머티리얼 가이드에서는 마진의 기본값으로 16dp를 권장하지만 [그림 4-38]에서 볼 수 있는 것처럼 시각적으로 균형 있는 값을 사용하면 된다.
  • 마진을 설정했으면 컬럼의 개수를 고민할 차례이다.
  • 거터의 개수는 컬럼의 개수에 따라 결정된다.

머티리얼 가이드에서는 4컬럼을 권장하지만 실제 디자이너들은 . 6컬럼은 2분할과 3분할이 모두 가능한 6컬럼을 더 많이 사용 한다하기 때문이다.

6컬럼으로 결정했다면 거터는 5개가 된다. 이제 거터의 너비를 지정하고 남은 영역을 6으로 나눈 값을 컬럼의 너비로 지정하면 된다.

나중에 개발자에게 그리드 수치를 전달할 때는 마진 값, 거터 값을 정확하게 알리고, 컬럼 값은 화면 크기에 따라 유동적으로 변하므로 N이라고 하면 된다.

AI와 데이터 기반 그리드 최적화

AI를 활용하여 사용자의 행동 데이터를 분석하고, 그에 맞는 최적화된 그리드 레이아웃을 자동으로 제공하는 기술이 주목받고 있다. 예를 들어, AI가 사용자 경험 데이터를 바탕으로 특정 사용자가 자주 사용하는 기능을 상단에 배치하거나, 선호하는 콘텐츠를 더 큰 그리드로 배치하는 식이다.

예시:

  • e커머스 웹사이트에서 자주 클릭하는 상품 카테고리나 정보를 AI가 분석하여 해당 섹션을 강조하여 배치한다.
  • 대시보드에서 사용자의 행동에 맞춰 자주 사용하는 위젯을 상단이나 쉽게 접근할 수 있는 위치로 자동으로 이동시킨다.

그리드 계산기

http://gridcalculator.dk/

 

Grid Calculator by Nicolaj Kirkgaard Nielsen

 

gridcalculator.dk

시스템을 만들기 위해 그리드를 일일이 계산해도 되지만 그리드 계산기 웹사이트에서 계산한 후 포토샵이나 일러스트 레이터로 다운로드해 사용하면 편리하다

  • Max-width란에 전체너비를 입력합니다.
  • 저는 1024기준의 화면에 세로3단 컨텐츠를 계산하고 싶으니 가로 1000px를 입력해보겠습니다.
  • 그리고 Columns 란에는 출력할 컨텐츠의 갯수를 입력합니다.
  • 3단을 만드려고 하니 3을 입력합니다.
  • 그리고 Gutter width를 입력합니다.
  • 이것은 컨텐츠 (단) 사이의 간격을 의미합니다.
  • 하나의 컨텐츠당 320이라는 가로너비를 가지면 적절히 배치가 가능하단 계산이 나오네요.
  • 포토샵에서 바로 적용을 시켜봐야겠네요. 여기서 하나 더 편리한점이있는데
  • 하단의 버튼을 이용하면 그리드를 바로 포토샵으로 가져갈 수 있는 기능이 있습니다.

그리드 CSS

display 속성에 grid 값을 사용해 그리드를 규정한다.

  • display를 그리드 레이아웃으로 전환하며, 컨테이너의 직계 자식 전체가 그리드 아이템이 됩니다.
  • 길이와 백분율을 사용하여 그리드를 생성하는 것 외에도 fr (fraction 분수단위)를 사용하여 그리드 행과 열을 가변적으로 조정할 수 있다. 동 단위는 그리드 컨테이너 내부에 사용 가능한 공간에서 한 개의 분할 부분과 같다.

>>>>

모바일 UI에서는 좌우 여백을 16으로 설정(컬럼 4개)하고, 테블릿 UI는 상대적으로 모바일 화면보다 크므로 좌우 여백을 32 설정 (컬럼 8개) 사용

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style type="text/css">
		* {box-sizing: border-box;}
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
	</style>
	<title>test of grid</title>
</head>
<body>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
</body>
</html>

참고 : Material Design3 layout system

구성 요소 설명

  1. Column (컬럼):
    • 화면을 수직으로 나누는 기본적인 레이아웃 단위로, 콘텐츠가 배치될 공간을 정의한다. 컬럼을 활용하여 콘텐츠가 균형 잡히고 정돈된 레이아웃을 유지할 수 있다.
  2. Fold (폴드):
    • 폴더블 기기에서 화면이 접히는 중간 부분을 의미한다. 폴드 구역은 두 화면을 연결하지만 사용이 어려운 부분이기 때문에 UI 요소를 배치하지 않거나, 사용자가 터치하지 않도록 디자인할 필요가 있다.
  3. Margin (마진):
    • 화면 가장자리와 콘텐츠 사이에 여백을 두어 디자인의 일관성을 유지하고, 사용자가 터치하기 편리하도록 하는 공간이다. 마진은 요소 간의 시각적 구분을 돕는다.
  4. Pane (패널):
    • 여러 개의 콘텐츠 영역을 나누는 구획을 의미한다. 예시에서는 왼쪽 패널과 오른쪽 패널이 나뉘어 있으며, 각 패널에 다른 종류의 콘텐츠를 배치하여 사용자 경험을 확장할 수 있다.
  5. Drag Handle (드래그 핸들):
    • 두 패널 사이에서 사용자가 패널 크기를 조정할 수 있도록 돕는 드래그 영역이다. 사용자는 이 핸들을 이용해 패널의 크기를 자유롭게 조정할 수 있다.
  6. Spacer (스페이서):
    • 패널 사이 또는 콘텐츠 요소 간의 간격을 확보하는 용도로 사용된다. 스페이서는 시각적 균형을 유지하는 데 도움을 주며, 레이아웃이 밀집되지 않도록 한다.
  7. Window (윈도우):
    • 전체 화면을 의미하며, 폴더블 기기의 경우 좌우로 나뉜 화면이 윈도우의 일부가 된다. 각각의 윈도우는 독립적인 콘텐츠를 보여주거나, 하나의 전체 화면을 공유하여 콘텐츠를 표시할 수 있다.

실습 : 피그마에서 그리드 설정

layout grid > grid, columns , rows

728x90
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
반응형