모바일 디자인 가이드 요소 2

그리드 Grid

그리드는 '격자'를 의미하는 용어로, 디자인에서는 디자인 영역을 일정하게 구획하는 것을 의미한다. 일종의 지침이라고 생각하면 된다. 그리드 시스템을 구축하면 사진, 그림, 문자, 여백 등의 시각적 효과를 고려해 배열하고 구성하는 데 유용하며, 정보에 질서와 구조를 부여함으로써 사용자가 보고 이해하기 쉽게 일관성을 부여한다. 
그리드 시스템을 만들려면 그리드 간의 간격을 띄우는 기준선이 있어야 한다. 간격을 띄우는 방법으로는 비율, 컨테이너, 터치 대상에 영향을 주는 기준선 그리드, 패딩, 증분 간격을 사용한다. 기본적으로 모바일, 태블릿, 데스크톱에 사용되는 모든 구성 요소는 8dp의 기본 그리드에 맞춰 정렬해야 한다. 이는 iOS에서도 마찬가지이다.

그리드를 구성하고 있는 요소는 컬럼 Column, 거터 Gutter, 마진 Margin이다. 컬럼은 콘텐츠가 포함된 영역을 말한다. 컬럼의 너비는 고정값이 아니며 지정한 마진과 거터를 제외한 나머지 너비를 컬럼의 개수로 나누어 유연하게 적용한다. 거터는 컬럼과 컬럼 사이의 영역을 말한다. 가장 왼쪽에 있는 컬럼의 좌측과 가장 오른쪽에 있는 컬럼의 우측에는 거터가 없으며, 그 공간을 마진 즉 여백이라고 한다. 

①Columns  ②Gutters  ③Margins

실제 각 서비스의 마진 값
10, 12 페이스북, 다음
15, 16 네이버, 인스타그램, 유튜브, 핀터레스트, 구글 지도, 11번가
20 브런치, 네이버 블로그, 네이버 카페, 네이버 지도
25, 26 카카오뱅크, 에어비앤비

그리드 시스템을 만들 때는 먼저 마진 영역부터 설정한다. 머티리얼 가이드에서는 마진의 기본값으로 16dp를 권장하지만, 시각적으로 균형 있는 값을 사용하면 된다. 마진을 설정했으면 컬럼의 개수를 고민할 차례이다. 거터의 개수는 컬럼의 개수에 따라 결정된다. 머티리얼 가이드에서는 4컬럼을 권장하지만, 실제 디자이너들은 6컬럼을 더 많이 사용한다. 6컬럼은 2분할과 3분할이 모두 가능하기 때문이다. 6컬럼으로 결정했다면 거터는 5개가 된다. 이제 거터의 너비를 지정하고 남은 영역을 6으로 나눈 값을 컬럼의 너비로 지정하면 된다. 
그리드 계산기 웹사이트 : http://gridcalculator.dk/

컬러테마

색상은 데이터를 시각화하고 상태 정보를 전달하며 시각적 연속성을 제공하는 것은 물론 사용자와의 상호작용에 대한 피드백을 제공하는 데도 도움을 준다. iOS에서는 Notes의 상호작용 요소는 노란색, 캘린더의 상호작용 요소는 빨간색으로 정의해두고 다른 색상으로 대체하지 않을 것을 권장한다. 

1. 기본 색상과 보조 색상
머티리얼 디자인의 기본 테마에는 기본 색상과 보조 색상이 포함되어 있으며, 배경, 표면, 오류, 타이포그래피, 도해법의 색상과 같이 UI를 정의하는 추가 색상도 포함되어 있다. 
기본 색상은 앱의 화면과 구성 요소에 가장 자주 사용되는 색상으로, 보조 색상 없이 기본 색상만으로도 구성 요소를 강조할 수 있다. 기본 색상과 어둡고 밝은 변형을 사용해 색상 테마를 만들고, 시스템 바에서 최상위 응용프로그램인 상태 바를 구분하는 것과 같이 UI 요소 사이의 대조를 밝게 또는 어둡게 설정할 수 있다. 
기본 색상을 기준으로 어두운 단계와 밝은 단계를 구성한 후 사용 면적의 크기나 포인트 위치에 따라 다른 번호의 색상을 사용하는 것을 권장한다. 
보조 색상은 구성 요소를 구별하거나 강조하는 다양한 용도로 사용한다. 보조 색상을 지정하는 것은 선택 사항이지만, 될 수 있는 대로 UI의 선택 부분을 강조하기 위해 적용한다. 주로 플로팅 버튼, 슬라이더 및 스위치와 같은 선택 컨트롤, 진행률 표시, 링크나 헤드라인 등에 사용할 것을 권장한다.

2. 색상 선택 방법
색상 단계를 만들기 어렵다면 색상 선택 도구를 사용해 생성할 수 있다. 선택 색상 도구를 사용하면 접근성 표준을 준수하면서 색조, 채도, 밝기를 자동으로 조절해 밝고 어두운 단계를 조절할 수 있다. 
머티리얼 디자인에서 색상을 적용하는 방법은 색상을 클릭하는 것이다. 적용 색상을 알려주는 컬러 툴을 이용하는 것도 좋다. 기본 색상과 보조 색상을 선택하면 해당 컬러가 실제 어디에 적용되는지 미리보기를 통해 확인할 수 있다.
색상 선택 도구 https://material.io/design/color/the-color-system.html#tools-for-picking-colors
머티리얼 디자인 컬러 툴 https://material.io/tools/color

타이포그래피 시스템

폰트는 크게 세리프 Serif 폰트와 산세리프 Sans-serif 폰트로 나눌 수 있다. 문자의 시작이나 끝부분에 작은 모양의 삐침이나 장식이 있는 서체를 세리프 폰트라고 한다. 웹이나 모바일에서는 가장자리 부분의 번짐 현상 때문에 세리프 폰트를 사용하지 않는 것이 좋지만, 웹사이트의 콘셉트에 따라 사용해야 하는 예도 있다. 그런 경우에는 폰트 자체로 사용하기보다는 주로 이미지 처리를 한다. 
산세리프란 '없음'을 뜻하는 프랑스어 'sans'를 앞에 붙여 '세리프가 없음'을 의미하는 용어이다. 웹이나 모바일에서는 가독성을 위해 산세리프 폰트를 사용할 것을 권장한다. 
iOS의 시스템 폰트는 San Francisco Pro이며, SF UI Display와 SF Compact Display로 구분해 사용된다. SF UI Display는 iOS, macOS, tvOS의 시스템 글꼴로 사용되며, SF Compact Display는 watchOS의 시스템 폰트이다.
안드로이드의 시스템 폰트는 Robot이며, Google Meteral Design Resource 메뉴에서 별도로 내려받아 설치할 수 있다. 그런데 일부 국가의 언어를 혼용해 사용할 때 이상한 형태로 문자가 깨져 보이는 경우가 있다. 이러한 형태의 깨진 폰트를 두부 모양과 닮았다고 하여 'tofu' 라고 부르는데, 어도비와 구글은 이런 현상을 없애기 위해 'No more Tofu'라는 주제 의식을 가지고 Noto라는 폰트를 개발했다. 어도비에서는 이 폰트를 Bon Font라 하고 구글에서는 Noto Font라고 한다. 다양한 국가의 언어를 사용할 때에는 Noto 폰트를 사용하는 것이 좋다. 

San Francisco Pro 다운로드 https://developer.apple.com/fonts
San Francisco Pro 윈도 호환 폰트 다운로드 https://www.dropbox.com/s/dyw7kl0mtrftjix/San-Francisco-UI-and-COMPACT.zip?dl=0
Roboto 다운로드 https://fonts.google.com
Noto 다운로드 https://www.google.com/get/noto

2023.04.10 - [UXUI 디자인] - iOS 가이드라인 1

iOS 가이드라인 1

2023.04.09 - [UXUI 디자인] - 모바일 디자인 가이드 요소 1

모바일 디자인 가이드 요소 1