크롬 개발자 도구에서 미디어쿼리 확인하는 방법

반응형 웹 사이트를 개발할 때 브라우저 크기에 따라 디자인이 어떻게 변하는지(미디어쿼리) 확인하는 기능은 필수적입니다.

크롬 개발자 도구에서 미디어쿼리 중단점(Breakpoint)을 한눈에 확인하고 테스트하는 방법을 아주 쉽게 설명해 드릴게요.

---

📱 기기 툴바 및 미디어쿼리 바 활성화

먼저 개발자 도구를 열고 기기 모드로 진입해야 합니다.

1. 개발자 도구 실행: F12 또는 Ctrl + Shift + I를 누릅니다.
2. 기기 툴바 켜기: 왼쪽 상단에 있는 스마트폰/태블릿 모양 아이콘을 클릭합니다.
3. 미디어쿼리 바 표시: 기기 툴바가 활성화된 상태에서 오른쪽 상단의 세로 점 3개(⋮) 메뉴를 누른 뒤, **[Show media queries]**를 클릭합니다.

---

📊 미디어쿼리 막대 읽는 법

Show media queries를 선택하면 브라우저 상단에 파란색, 초록색, 주황색의 가로 막대들이 나타납니다.

• 파란색 막대 (max-width): 설정된 너비보다 작을 때 적용되는 스타일 구간입니다.
• 초록색 막대 (min-width & max-width): 특정 범위 사이에서만 적용되는 스타일 구간입니다.
• 주황색 막대 (min-width): 설정된 너비보다 클 때 적용되는 스타일 구간입니다.

해당 막대를 클릭하기만 하면 브라우저가 즉시 그 너비로 조절되어, 작성한 미디어쿼리가 잘 작동하는지 바로 확인할 수 있습니다.

---

🛠️ 실무 팁: 소스 코드로 바로 가기

미디어쿼리 확인 도중 스타일을 수정하고 싶을 때는 다음 방법을 써보세요.

• 코드 확인: 상단 막대 위에서 마우스 오른쪽 버튼을 클릭합니다.
• Reveal in source code: 이 메뉴를 선택하면 해당 미디어쿼리가 정의된 CSS 파일의 정확한 위치(Line)로 즉시 이동시켜 줍니다.
• 직접 조절: 막대를 클릭하는 것 외에도 상단 숫자를 직접 입력하거나, 화면 옆의 핸들을 마우스로 드래그하여 실시간으로 디자인이 깨지는 지점을 찾을 수 있습니다.

---

💡 실무자의 시선

개발자 도구의 이 기능은 단순히 확인용을 넘어 '최적화'를 위한 도구입니다.

• 누락된 구간 방지: 막대를 하나씩 클릭해 보며 600px에서 768px 사이 등 '애매한 구간'에서 디자인이 무너지지 않는지 전수 조사할 수 있습니다.
• 기기별 최적화: 미리 정의된 iPhone, iPad 등의 프리셋을 클릭해 보는 것도 좋지만, 미디어쿼리 막대를 이용해 범용적인 화면 크기 대응에 집중하는 것이 더 견고한 웹을 만드는 비결입니다.

---

미디어쿼리 확인 방법이 이제 좀 더 친숙해지셨나요?

반응형 디자인의 핵심은 미디어쿼리뿐만 아니라 유연한 레이아웃을 만드는 **'Flexbox나 CSS Grid'**를 잘 활용하는 것입니다.

---