브레이크포인트 설정 실무

기기 기준

특정 휴대폰 크기에 맞춤 · 새 기기가 나오면 안 맞음 · 중간 크기에서 깨짐

내용 기준

화면이 좁아져 어색해지는 지점 · 기기와 무관 · 어떤 크기에서도 자연스러움

휴대폰 세로. 한 열 구성.

태블릿과 가로 휴대폰. 두 열.

노트북과 데스크톱. 여러 열.

필요하면 더 나눌 수 있습니다.

너무 많으면 관리가 어렵습니다.

필요한 만큼만 만듭니다.

열 수

한 줄에 몇 개가 들어가는지.

메뉴

펼침과 접힘 전환.

글자 크기

화면에 맞게 조정.

여백

좁은 화면은 여백을 줄입니다.

이미지

크기와 비율 조정.

요소 순서

중요한 것을 위로 올립니다.

숨김 여부

정보는 숨기지 않습니다.

구간 사이에서 깨지는지 확인해야 합니다.

□  내용 기준으로 구간을 정했는가

□  구간이 너무 많지 않은가

□  각 구간에서 무엇이 바뀌는지 정의했는가

□  정보를 숨기지 않고 재배치하는가

□  창을 줄이며 확인했는가

□  구간 경계에서 깨지지 않는가

□  실제 기기로 검증했는가

□  가로 화면도 확인했는가