반응형과 적응형
반응형 (Responsive Web)
: 사용자가 이용하는 화면의 크기(=디바이스 해상도)에 따라 웹사이트가 변경되는 것을 의미한다.
적응형 (Adaptive Web)
: 사용자의 디바이스에 맞춰 서비스와 기능을 맞춤형으로 보여준다.
그리드 시스템
그리드 개념
: 화면에 디자인을 배치하는 가이드라인
그리드 시스템 구성요소
: Column, Margin, Gutter
Screen margin
- Desktop, Tablet, Mobile 각 스크린 마진을 지정하여 사용한다.
- Screen margin 값은 모바일 최소 16px, PC 최소 24px 이상 사용한다.
Column
- PC, Tablet, Mobile 각 디바이스에 최적화된 Column을 사용한다.
- Column의 너비는 고정값이 아닌 백분율을 사용하며, 콘텐츠가 연속적인 화면 크기에 유연하게 적응할 수 있도록 한다.
- Desktop은 12column을 기본으로 하며 16까지 적용할 수 있다.
- Tablet은 8column을 기본으로 하며 12까지 적용할 수 있다.
- Mobile은 4column을 기본으로 하며 6까지 적용할 수 있다.
Unit
- culumns의 사이즈
Gutter
- 칼럼과 칼럼 사이의 간격이며, 디바이스별 최소 크기를 정의한다.
Responsive layout grid
Breakpoint
: 반응형 웹에서 레이아웃이 변화되는 해상도 지점.
| Device | Breakpoint | 대표화면 사이즈 | Column 수 | 최적화된 Column 수 |
|---|---|---|---|---|
| PC/Desktop | 1025-1920px | 1920(1440) | 12 or 16 | 12 |
| Tablet | 601-1024px | 768 | 8 or 12 | 8 |
| Mobile | 360-600px | 390 | 4 or 8 | 4 |
8-point grid
: 간격이나 크기등을 8의 배수(8,16,24.. )로 맞춰 그리는 방법
8인 이유?
: 8은 1.5배,2배,3배로 하더라도 픽셀이 깨지지않고 깔끔하게 떨어진다. (0.75배를 해도 정수, 1.25배를 해도 정수!)
: 크기나 여백에 8같은 짝수를 사용하면 다양한 장치를 일관되게 조정하기 쉽다.
6이나 10이 아닌 이유는
8씩 증분하여 6pt 시스템과 같은 변수로 바꿀 수도 있고, 10pt 시스템보다 많은 선택지가 있음
px이 아니라 pt(dP)인 이유 ⇒ px은 화소의밀도에 따라 달라지는데, pt(dp)는 같은 비율로 보여지는 독립적인 수치이기 때문이다.
8-point grid 적용 가능한 디자인요소
- font-size
- line heights
- padding
- margins
- radius
- fixed width
- fixed heigths(잘 사용하지 않음)
레이아웃
PC 그리드 시스템
1. Container 형 : 기본 컨테이너 안에서 모든 요소를 배치하는 그리드시스템
가운데 컨테이너 사이즈를 1350/1440 등의 기본사이즈로 정하고 그 안에 배치하는 형태인데, 각기 다른 사용자의 화면에 대응하기 좋은 방법이다.
2. FullScreen 형 : 모니터의 전체 스크린에 꽉 차게 요소를 배치하는 그리드시스템
비주얼적인 이미지가 중요하거나 컨셉적인 전달을 더 강렬하게 해주고 싶을 때 주로 사용하는 브랜드 아이덴티티를 강조하고 사용자들에게 각인시키는 이미지형 사이트에 적합하다.
콘텐츠 작성 참고
디지털 정부서비스 UI/UX 가이드라인
8-point 그리드로 디자인하기
8 Point Grid, 더 적은 결정 = 더 적은 시간
UIUX : 디자인에서 그리드 시스템의 중요성
