Web Guide브레이크포인트반응형 기준화면 크기
반응형 디자인 브레이크포인트 정하기
몇 개의 화면 크기를 기준으로 레이아웃을 바꿀지 정하는 일입니다.
기기 종류가 너무 많아 다 대응할 수 없습니다. 몇 개 지점만 정하면 됩니다.
01기기가 아니라 콘텐츠 기준
'아이폰 기준', '갤럭시 기준'으로 정하면 새 기기가 나올 때마다 대응해야 합니다. 기기는 계속 바뀝니다.
레이아웃이 깨지기 시작하는 지점을 기준으로 삼는 것이 원칙입니다. 콘텐츠가 어색해지는 폭에서 배치를 바꿉니다.
기기 기준
특정 모델의 화면 크기로 설정 · 새 기기가 나오면 대응 필요 · 중간 크기 화면에서 어색 · 태블릿 가로 등 애매한 크기 방치
콘텐츠 기준
레이아웃이 어색해지는 지점에서 변경 · 모든 화면 크기에서 자연스러움 · 새 기기가 나와도 대응 불필요
02보통 세 단계면 충분하다
대부분의 기업 홈페이지는 모바일, 태블릿, PC 세 단계로 충분합니다. 더 세분화하면 검수 부담만 늘어납니다.
큰 화면에서 콘텐츠가 지나치게 늘어나는 것만 막으면 됩니다.
모바일 — 한 열 배치
모든 요소가 세로로 쌓입니다. 가장 중요한 단계
태블릿 — 두 열 배치
일부 요소가 나란히 배치됩니다
PC — 전체 레이아웃
설계한 대로의 배치
대형 화면 — 최대 폭 제한
무한정 늘어나지 않게 폭을 제한합니다
03단계 사이도 확인한다
기준점에서만 확인하면 그 사이 크기에서 어색한 부분을 놓칩니다. 브라우저 창을 천천히 줄여 가며 확인해야 합니다.
특히 글자가 두 줄이 되거나 요소가 겹치는 지점이 문제입니다.
01
창 크기 조절하며 확인
PC에서 브라우저 창을 천천히 줄여 봅니다.
02
글자 줄바꿈
제목이 어색하게 끊기는 지점이 없는지.
03
요소 겹침
여백이 부족해 겹치는 부분이 없는지.
04
가로 스크롤
어떤 크기에서도 가로 스크롤이 생기면 안 됩니다.
05
이미지 왜곡
비율이 깨지는 구간이 없는지.
04모바일부터 설계한다
PC를 먼저 만들고 모바일로 줄이면, 넣을 수 없는 내용을 억지로 우겨넣게 됩니다. 반대로 모바일부터 시작하면 꼭 필요한 것만 남습니다.
화면이 커질 때 여유 공간에 무엇을 더할지 정하는 방식이 결과적으로 더 깔끔합니다.
모바일 먼저가장 제약이 큰 환경에서 시작합니다. 우선순위가 명확해집니다.
필수만 남기기좁은 화면에 들어갈 것만 고르면 불필요한 것이 걸러집니다.
확장화면이 커지면 여유 공간에 보조 정보를 더합니다.
숨기지 않기모바일에서 내용을 숨기면 그 정보는 없는 것과 같습니다.
CHECK POINT
□ 브레이크포인트를 기기가 아닌 콘텐츠 기준으로 정했는가
□ 단계가 세 개 내외로 정리되어 있는가
□ 큰 화면에서 최대 폭이 제한되어 있는가
□ 브라우저 창을 줄여 가며 중간 크기를 확인했는가
□ 어떤 크기에서도 가로 스크롤이 없는가
□ 모바일에서 중요한 정보를 숨기지 않았는가
#브레이크포인트#반응형 기준#화면 크기#모바일 퍼스트#레이아웃#가로 스크롤#검수#홈페이지 디자인#웹비스타#홈페이지 제작