[UI 디자인 기초] 그리드에 대한 이해
ㅣ플러스 엑스 UI 강의ㅣ
그리드 시스템
그리드을 쓰는 이유와 해상도에 따른 적용 방법, 유의점을 알려줄게
목적
사용자가 시각적으로 이해하는 디자인을 만들어야 한다.
1. 규칙과 기준 세우기
2. 사용자가 가진 해상도에 적용된 유연하면서 정돈된 UI구조를 설계 해야 함.
=> 그리드를 통해 설계한다.
비핸스 / 핀터레스트 / 드리블 / awwwa 참고 벤치마킹 함.
'그리드에 대한 이해 '
[그리드 Grid]
디자인에 규칙을 부여하는데 필요한 가이드
- 심리: 기준에 맞춰 정렬되어 있으면 안점감 아름다움을 느낌.
디자인 작업 전반에 동일한 그리드 시스템을 적용 하여 '그리드 시스템'이라고 부름
그리드 시스템을 따르면 일관성을 가지게 됨.
UI 그리드 시스템 =/= (다름) 인쇄물인 편집 디자인
UI 온라인에서 구현 -> 작업해상도에 따라 달라지는 반응형의 성질을 가지고 있기 때문
UI 디자인에서 그리드는 디자인 시스템 일부이지만, 컨셉과 스타일을 잡을때 가장 먼저 그리드 스타일을 결정한다.
'그리드 시스템 요소'
[마진]
좌우 끝 여백. 컬럼과 거터를 감싸고 있음. 대칭. 비대칭으로 사용함.
[칼럼]
글자, 이미지 콘텐츠 포함
- 단의 갯수 : 해상도와 분기점에 따라 다르게 사용함.
- 단 크기: 픽셀단위로 설정. 가변형일 경우 %로 설정하기도 함. (ex. 메인 기준 해상도를 100%로 하고 가변 크기에 따라 줄었다 커졌다 함)
[거터]
단과 단 사이 크기
컬럼과 양옆 마진 값을 먼저 설정하는 것이 효율적
[컨테이너]
칼럼 + 거터
- 콘텐츠를 담고 있는 가장 큰 것,
좌우 마진을 뺀 영역이 컨테이너
그리드 만드는 순
1. 마진 값 설정 -> 컨테이너 넓이 설정 -> 컬럼 수 나누기
'해상도에 따른 그리드 시스템'
[해상도별 권장 그리드 시스템]
- 1920 해상도: 최소 4개 ~ 12컬럼까지 사용. 최대 16 컬럼 사용. 레이어 구성시 묶어서 사용.
- 1440 해상도(랩탑), 1366 해상도 : 최소 4개 ~ 최대12컬럼까지 사용
- 1280, 1024 해상도 : 최소 2개 최대 8개 12개사용. 가능하지만 화면이 작아 콘텐츠에 방해가 될 수 있음
- 768 , 720, 360 모바일 해상도 : 2개 ~ 최대 6 사용 (보통 4개 사용)
[권장 그리드 시스템을 디바이스 형태로 분류가능]
데스크탑 / 모바일 해상도 기준으로 그리드 변화를 줌. (데스크탑 - 랩탑 - 태블렛 - 모바일)
[반응형 권장 시스템]
해상도 분기점에 따라 적절하게 선택 하기
- 1920~1280 : 12 그리드
- 1279~768: 6 그리드
- 767~360: 4 그리드
사이트 제작시 어떤 서비스인지 사용자 연령대는 어떤지고려하기. 디자인과 잘 맞는 디자인 시스템 만들기.
' 마진 '
마진값에 따라 보여주는 컨테이너 크기가 달라지게 됨.
마진값에따라 반응형시 안정적인 가변형 구축 가능.
정수 단위의 그리드 만들때 참고 웹 사이트
Grid Calculator by Nicolaj Kirkgaard Nielsen
gridcalculator.dk
"Resolition"
권장 그리드 기반으로 디자인 하는 것이 가장 효율적임.
[8포인트 그리드]
8 Point(pt) Grid System
일관성을 위해 여러요소를 배치 할 때도 모든 요소 크기와 간격 8포인트로 사용 8의 배수 사용.
- 이유는? 대부분의 스크린이 8배수를 가지고 있음. 2,4 사이즈 응용 가능함.
- 좋은 점?
디자이너 : 효율성과 안정성
개발자: 효율성, 협업
유저: 가독성, 신뢰성
" 그리드 시스템 사용시 좋은점 "
[디자인에 통일성 부여]
균일적, 정돈
[내부적인 기준 설정]
협업가능
[해상도 대응에 유리]
여러 해상도 고려하여 그리드시스템 만들면 일관적인 사용성 유지 가능
[긍정적인 서비스 경험 유지]
" 그리드 는 절대적인 기준이 아니다. "
프로젝트의 명확한 기준에 따라서 새로운 시도를 위한 노력을 하면 좋음.
[🌰인사이트]
● 해상도에 따른 그리드 시스템
- 가변 레이아웃 사용 시 변곡점을 해상도 기준으로 정하고 이에 맞는 그리드 적용하기
● 효율적인 그리드 8포인트 그리드
- 일관성을 위해 여러요소를 배치 할 때 (모든 요소 크기, 간격 포함) 8포인트로 사용. or 8의 배수 사용(2,4 포인트로 응용)
- 이유는? 대부분의 스크린이 8배수를 가지고 있기 때문.
● 크리에이티브한 그리드 제안
- 모조건 그리드를 맞추기 보다 프로젝트 전략에 기반한 그리드를 제안 가능
- 브랜드 전략에 일치하는 새로운 그리드 시도는 크리에이티브 할 수 있다.
[🥜 추가조사]
UX 디자인의 8포인트 그리드 시스템에 대해 알아야 할 모든 것
https://uxplanet.org/everything-you-should-know-about-8-point-grid-system-in-ux-design-b69cb945b18d
Everything you should know about 8 point grid system in UX design
If you are a product designer or User Experience Designer then maybe you’ve probably heard the term grid system. In this article, I will…
uxplanet.org
더블다이아몬드디자인
[🌞 목표]
▶ 반응형 웹 기획 시 해상도 변곡점을 권장 그리드 시스템에 맞춰 지정할 수 있다.
▶ 브랜드 전략을 극대화 할 수 있는 그리드를 생각해 내고 표현 할 수 있다.
▶ 모바일 기준 8포인트 그리드를 기본으로 서비스를 설계 할 수 있다.