[7편] 스마트폰에서 깨지는 이유: 고무줄처럼 늘어나는 반응형 레이아웃

2026년 10월 13일

한 줄 요약

고정된 숫자 대신 화면 크기에 따라 늘고 줄어드는 단위와 규칙을 쓰면, 한 번 만든 화면이 모든 기기에 맞춰집니다.

비유로 이해하기

고정 사이즈 옷(width: 700px)은 몸이 작은 사람에게 헐렁하고 삐져나옵니다. 고무줄 옷(%, fr, minmax)은 몸에 맞춰 늘고 줄어들죠. 반응형 레이아웃은 화면에 고무줄 옷을 입히는 일입니다.

또 하나의 비유는 식탁입니다. 큰 화면은 여러 명이 앉는 넓은 식탁(3열), 스마트폰은 1인용 트레이(1열)입니다. 같은 음식(콘텐츠)을 그릇 배치만 바꿔 담는 거예요.

고정 단위(px로 폭 지정): 작은 화면에서 가로 스크롤이 생기기 쉽습니다.
유연한 단위(%, fr, max-width): 화면에 맞춰 줄어듭니다.
auto-fit + minmax: “카드 하나는 최소 140px, 들어갈 만큼 한 줄에 넣기” 같은 규칙으로 미디어 쿼리 없이도 칸 수가 바뀝니다.

아래 고정 상자는 결과 창보다 넓어서 잘립니다. width: 700px를 max-width: 700px로 바꿔 보세요. 그리고 minmax(140px, 1fr)의 140px를 220px로 바꾸면 한 줄에 들어가는 카드 수가 달라집니다.

직접 고쳐 보세요 · width를 max-width로 바꿔 보세요

GenerateBlocks에서는 편집 화면 상단의 기기 아이콘(데스크톱·태블릿·모바일)을 바꿔 가며 각 화면 크기에 다른 값을 넣을 수 있습니다. 독립학교 홈의 3열 카드는 태블릿에서 2열, 모바일에서 1열로 설정되어 있어요.