Web Guide그리드레이아웃웹 정렬
레이아웃 그리드 이해하기: 화면이 정돈되어 보이는 이유
잘 정돈된 화면에는 눈에 보이지 않는 선이 있습니다.
요소들이 같은 선에 맞춰져 있을 때 화면이 안정적으로 보입니다. 이것이 그리드입니다.
01그리드가 무엇인가
화면을 일정한 간격의 세로 칸으로 나눈 가상의 격자입니다. 모든 요소를 이 칸에 맞춰 배치하면 자연스럽게 정렬이 맞습니다.
신문이나 잡지의 단 구성과 같은 원리입니다. 보이지 않지만 질서를 만듭니다.
01
칸(컬럼)
화면을 나눈 세로 영역. 웹에서는 12칸이 널리 쓰입니다.
02
간격(거터)
칸과 칸 사이의 여백. 일정하게 유지합니다.
03
여백(마진)
화면 좌우 가장자리의 공간.
04
최대 폭
콘텐츠가 늘어나는 최대 너비. 너무 넓으면 읽기 어렵습니다.
02왜 12칸인가
12는 2, 3, 4, 6으로 나누어떨어집니다. 그래서 2등분, 3등분, 4등분, 6등분 배치를 모두 깔끔하게 만들 수 있습니다.
제품을 3개씩 보여주다가 4개씩으로 바꿔도 같은 그리드 안에서 처리됩니다.
2등분
6칸 + 6칸. 좌우 대칭 배치.
3등분
4칸 × 3. 제품이나 서비스 3개 나열.
4등분
3칸 × 4. 목록이나 카드 배치.
비대칭
8칸 + 4칸. 본문과 사이드바 구조.
전체 폭
12칸. 배너나 큰 이미지.
03정렬이 인상을 만든다
요소들의 왼쪽 끝이 같은 선에 맞춰져 있으면 정돈되어 보이고, 조금씩 어긋나면 어수선해 보입니다. 이 차이는 의식하지 못해도 느껴집니다.
시안을 검토할 때 세로선을 그어 보면 정렬이 맞는지 바로 알 수 있습니다.
정렬이 맞을 때
요소들이 같은 선에서 시작 · 안정적이고 신뢰감 · 정보가 구조적으로 읽힘 · 전문적인 인상
정렬이 어긋날 때
미세하게 다른 위치 · 어수선한 느낌 · 무엇이 무엇에 속하는지 불분명 · 아마추어 같은 인상
04반응형에서의 그리드
화면이 좁아지면 칸 수를 줄입니다. PC에서 4개씩 보이던 카드가 태블릿에서 2개씩, 모바일에서 1개씩 되는 식입니다.
이때 어떤 순서로 쌓이는지가 중요합니다. 중요한 것이 위로 오게 설계해야 합니다.
STEP 01
PC
4열 배치
STEP 02
태블릿
2열로 축소
STEP 03
모바일
1열로 쌓임
STEP 04
순서 확인
중요한 것이 위로
CHECK POINT
□ 시안에 일관된 그리드가 적용되어 있는가
□ 요소들의 왼쪽 끝이 같은 선에 맞춰져 있는가
□ 칸 사이 간격이 일정한가
□ 콘텐츠 최대 폭이 적절한가
□ 화면이 좁아질 때 칸 수가 줄어드는가
□ 모바일에서 쌓이는 순서가 중요도 순인가
#그리드#레이아웃#웹 정렬#12칸 그리드#반응형#여백#시안 검토#홈페이지 디자인#웹비스타#홈페이지 제작