2014년 겨울로 기억합니다. 처음으로 클라이언트에게 반응형 홈페이지를 납품하던 날이었죠. 자신만만하게 링크를 보냈는데, 3분 뒤 전화가 왔습니다. “코드캠 님, 사장님 폰에서 메뉴가 화면 밖으로 튀어나가는데요?” 식은땀이 흘렀습니다. 알고 보니 저는 뷰포트(Viewport) 설정도 없이 픽셀만 맞추고 있었던 겁니다.
반응형 웹이 어렵게 느껴지는 이유는 ‘어디서 화면을 잘라야 할지’ 기준이 없기 때문입니다. 오늘 이 글을 끝까지 읽으시면, 더 이상 구글링 없이 ‘복사해서 바로 쓰는 황금 분기점 코드’를 당신의 CSS 파일에 심게 되실 겁니다.
1. 미디어 쿼리, 쉽게 말해 ‘조건부 스위치’
미디어 쿼리(Media Query)를 어렵게 생각하지 마세요. 이건 프로그래밍의 if 문과 똑같습니다. “만약 화면 크기가 768px보다 작다면? → 폰트 크기를 줄여라!”라고 브라우저에게 명령하는 것이죠.
“솔직히 고백하자면, 저도 처음엔 모바일용 HTML 파일과 PC용 HTML 파일을 따로 만들었습니다. (`m.naver.com` 처럼요). 하지만 유지보수가 지옥이더군요. 미디어 쿼리는 하나의 HTML로 모든 기기를 커버하는 마법입니다. 이 원리를 깨닫고 나니 야근이 절반으로 줄었습니다.”
핵심은 ‘분기점(Breakpoint)’입니다. 옷 사이즈가 S, M, L로 나뉘듯 웹사이트도 특정 픽셀을 기준으로 디자인을 바꿔야 합니다.
2. 실무에서 바로 쓰는 ‘표준 분기점’ 3단계
너무 많은 기기를 다 맞추려다간 코드가 누더기가 됩니다. 15년 경험상, 가장 효율적이고 보편적인 기준은 딱 3가지입니다. 모바일, 태블릿, 데스크탑. 이 셋만 기억하세요.
- ✅ 모바일 (Mobile): ~ 767px (스마트폰 세로 모드 기준)
- ✅ 태블릿 (Tablet): 768px ~ 1023px (아이패드 등 태블릿 세로/가로)
- ✅ 데스크탑 (PC): 1024px ~ (노트북 및 대형 모니터)
💡 코드캠의 실전 TIP: 뷰포트(Viewport)
많은 분들이 CSS는 완벽하게 짰는데 모바일에서 작동 안 한다고 질문을 주십니다. 99%는 HTML <head> 태그 안에 아래 코드가 빠져서 그렇습니다. 이게 없으면 스마트폰은 웹페이지를 PC 화면처럼 인식해서 아주 작게 축소해버립니다.<meta name="viewport" content="width=device-width, initial-scale=1.0">
3. 절대 하지 말아야 할 실수: ‘과도한 쪼개기’
“아이폰 14 Pro Max랑 갤럭시 폴드 해상도가 다르니 따로 짜야 하지 않나요?”
절대 아닙니다. 기기별로 픽셀을 맞추는 건 불가능합니다. 우리는 ‘범위(Range)’를 대응하는 것입니다. 320px부터 4000px까지 모든 기기에 대응하려 하지 마세요. 콘텐츠가 깨지지 않고 읽을 수만 있다면 충분합니다. 과도한 미디어 쿼리는 사이트 로딩 속도만 늦출 뿐입니다.
4. 복사해서 바로 쓰는 CSS 템플릿
이론은 충분합니다. 아래 코드를 당신의 CSS 파일 맨 아래에 붙여넣으세요. 기본적으로 PC 스타일을 먼저 작성하고, 화면이 작아질 때 스타일을 덮어쓰는 방식(Desktop First)이 초보자가 이해하기 쉽습니다.
/* 기본(PC) 스타일은 여기에 작성 */
body { font-size: 18px; }
/* 태블릿 구간 (1023px 이하) */
@media (max-width: 1023px) {
body { font-size: 16px; }
}
/* 모바일 구간 (767px 이하) */
@media (max-width: 767px) {
body { font-size: 14px; }
.menu { display: none; } /* 모바일에서 메뉴 숨기기 등 */
}
혹시 적용하다가 레이아웃이 어긋나거나 막히는 부분이 있으신가요? 댓글로 상황을 남겨주시면 제가 아는 선에서 최대한 도와드리겠습니다!
