반응형 웹, 폰·PC 레이아웃이 다른 이유
같은 웹사이트인데 휴대폰으로 열었을 때와 컴퓨터로 열었을 때 메뉴 위치나 글자 크기, 화면 구성 전체가 완전히 다르게 보인 경험이 있을 것입니다. 이건 사이트가 기기별로 따로 만들어진 게 아니라, 화면 너비를 기준으로 CSS가 스스로 모습을 바꾸도록 미리 규칙을 짜 놓았기 때문입니다. 이 규칙을 '미디어 쿼리 브레이크포인트(중단점)'라고 부르며, 원리를 알면 직접 만들 수도 있습니다.
요약 ① 화면 너비가 특정 기준값(브레이크포인트)을 지나가면 CSS가 다른 스타일을 적용하도록 미리 짜여 있습니다 ② 이 기준값은 @media 규칙 안에 min-width 또는 max-width 조건으로 코드에 직접 적혀 있습니다 ③ 방향(Mobile-First/Desktop-First)과 구간별 기준 너비만 정하면 미디어 쿼리 템플릿은 정해진 패턴대로 작성할 수 있습니다
화면 너비에 따라 레이아웃이 완전히 바뀌는 이유
폰으로 볼 때는 메뉴가 위쪽 아이콘 하나로 접혀 있고 본문도 세로로 길게 이어지는데, 같은 사이트를 컴퓨터로 열면 메뉴가 상단에 가로로 펼쳐지고 본문 옆에 사이드바까지 붙어 있는 경우가 많습니다. 서버가 접속 기기를 보고 완전히 다른 페이지를 보내주는 것이 아니라, 하나의 CSS 파일 안에 "화면이 이 너비보다 좁아지면(또는 넓어지면) 이 스타일로 바꿔라"는 조건이 미리 들어 있기 때문입니다.
이 조건을 CSS에서는 @media 규칙이라고 부르고, 조건을 가르는 기준 너비를 흔히 브레이크포인트라고 부릅니다. 브레이크포인트를 지나는 순간 메뉴 배치, 글자 크기, 칼럼 수 같은 스타일이 한꺼번에 바뀝니다.
그래서 브라우저 창 너비를 천천히 줄여보면 어느 지점에서 레이아웃이 뚝 끊기듯 바뀌는 순간이 보이는데, 그 지점이 바로 그 사이트에 미리 정해둔 브레이크포인트 값입니다.
확인하는 방법 — 미디어 쿼리 브레이크포인트 직접 만들기
브레이크포인트에는 정해진 표준값이 없고, 사이트마다 CSS 코드 안에 직접 숫자로 적어둔 값입니다. 브라우저 개발자 도구를 열고 Elements 탭에서 Styles 영역의 @media 항목을 찾으면, 그 사이트가 몇 px을 기준으로 스타일을 바꾸는지 그대로 확인할 수 있습니다.
직접 만들 때는 방향부터 정해야 합니다. 기본을 데스크톱 스타일로 두고 화면이 좁아질 때 max-width 조건으로 모바일 스타일을 덮어쓰는 Desktop-First 방식과, 기본을 모바일 스타일로 두고 화면이 넓어질 때 min-width 조건으로 스타일을 확장하는 Mobile-First 방식 중 하나를 고르면 됩니다.
방향을 정한 다음에는 모바일·태블릿·노트북·데스크톱 네 구간의 기준 너비(흔히 480/768/1024/1200px 부근)를 정하고, 각 구간마다 @media (min-width: 값px) 또는 @media (max-width: 값px) 블록을 순서대로 겹쳐 쓰면 됩니다. 구간이 늘어날수록 블록 개수와 중첩 순서를 손으로 맞추기가 번거로워집니다.
저희 도구로 확인하기. 방향과 네 구간의 기준 너비만 정하면, 중첩된 @media 블록 전체를 정해진 패턴으로 한 번에 만들어 볼 수 있습니다.
무료 · 가입 불필요 · 브라우저에서 바로 CSS 중단점 생성
자주 막히는 지점
| 상황 | 원인과 확인법 |
|---|---|
| 노트북 화면에서만 레이아웃이 어정쩡하게 깨짐 | 태블릿과 데스크톱 사이 구간이 비어 있어서 생기는 문제 — 노트북 폭 기준을 하나 더 추가해야 합니다 |
| min-width와 max-width를 한 프로젝트에 섞어 씀 | 두 방향이 섞이면 조건이 겹쳐 우선순위가 꼬입니다 — 한 방향으로 통일해야 합니다 |
| 개발자 도구 너비와 실제 기기 너비가 다르게 느껴짐 | 브라우저 창 크기나 화면 배율 설정에 따라 표시 너비가 달라질 수 있어 실기기로도 확인해야 합니다 |
| 기준값을 너무 촘촘하게 나눔 | 구간이 많을수록 코드 유지보수가 어려워집니다 — 보통 3~4단계면 충분합니다 |
정리
같은 사이트인데 폰과 PC에서 다르게 보이는 이유는 화면 너비를 기준으로 스타일을 바꾸는 미디어 쿼리 브레이크포인트가 CSS 안에 미리 정해져 있기 때문입니다. 개발자 도구로 이 값을 직접 확인할 수도 있고, 방향과 구간별 기준 너비만 정하면 같은 원리로 직접 만들 수도 있습니다.
매번 중첩 순서를 손으로 맞추는 대신, 기준값 네 개만 입력해서 정해진 패턴의 CSS를 바로 확인하면 실수를 줄일 수 있습니다.
무료 · 가입 불필요 · 브라우저에서 바로 CSS 중단점 생성
자주 묻는 질문
브레이크포인트 기준값은 꼭 480/768/1024/1200px이어야 하나요?
아닙니다. 이 값들은 흔히 쓰이는 참고값일 뿐입니다. 실제로는 내 콘텐츠가 어느 너비에서 어정쩡해 보이는지 직접 확인한 다음 그 지점을 기준값으로 잡는 것이 더 정확합니다.
Mobile-First와 Desktop-First 중 어느 쪽을 써야 하나요?
정해진 정답은 없습니다. 콘텐츠를 모바일 화면부터 완성해 나간다면 min-width로 확장하는 Mobile-First가, 기존 데스크톱 사이트에 모바일 대응을 추가하는 상황이라면 max-width로 좁혀가는 Desktop-First가 코드 수정 범위가 작은 편입니다.
브레이크포인트를 몇 단계까지 나누는 게 적당한가요?
모바일·태블릿·데스크톱 3단계, 또는 여기에 노트북을 더한 4단계 정도면 대부분의 레이아웃을 충분히 대응할 수 있습니다. 단계를 더 늘리면 관리해야 할 @media 블록이 늘어나 유지보수 부담이 커집니다.