
CHROME EXTENSION · v1.3.0
한 화면에서,
모든 화면.
BLUE_Responsive는 지금 보고 있는 페이지를 모바일·태블릿·PC 뷰포트로 동시에 띄워 주는 무료 크롬 확장입니다. 실제 기기 폭으로 렌더링하기 때문에 미디어쿼리가 그대로 동작합니다.
- 평생 무료
- Manifest V3
- 회원가입 불필요
01스크롤 동기화
한 번 내리면,
모든 화면이 함께 내려갑니다.
한 기기를 스크롤하면 나머지 기기도 비율에 맞춰 같이 움직입니다. 같은 섹션이 화면마다 어떻게 보이는지 한눈에 비교할 수 있습니다.
제품 동작을 설명하기 위한 시연 화면입니다.
02멀티 뷰포트
대표 기기는 클릭 한 번,
원하는 해상도는 직접 입력.
휴대폰·태블릿·데스크탑 프리셋을 눌러 추가하고, 필요한 W×H는 커스텀으로 입력하면 됩니다. 각 프레임은 실제 기기 px 폭 그대로 그려집니다.
03동시 비교
기기를 바꿔 가며
다시 확인하지 않아도 됩니다.
DevTools 기기 모드는 한 번에 한 기기만 보여 줍니다. BLUE_Responsive는 같은 페이지를 여러 기기로 동시에 펼쳐 놓습니다.
04모바일 User-Agent
서버가 나눠 주는
모바일 화면까지.
모바일 프레임은 요청의 User-Agent를 해당 기기로 바꿔서 보냅니다. User-Agent로 HTML을 나누는 사이트도 실제 모바일 응답을 확인할 수 있습니다.
05기능
실무 점검에 필요한 기능을
한 오버레이에 담았습니다.
01 / 07
프리셋 & 내 구성 저장
반응형 3종·모바일 집중·전체 보기 등 기본 프리셋을 칩으로 제공합니다. 현재 구성을 ★ 저장해 나만의 프리셋으로 추가하고 칩의 ✕로 삭제합니다.
커스텀 기기
대표 휴대폰·태블릿·데스크탑을 추가하거나, 커스텀 W×H를 직접 입력해 원하는 해상도를 즉석에서 만들어 확인할 수 있습니다.
가로/세로 회전
각 기기 프레임을 ⟲ 버튼으로 가로·세로 전환합니다. 랜드스케이프 레이아웃과 포트레이트 레이아웃을 즉시 오갈 수 있습니다.
배율 슬라이더 & 맞춤
전체 배율을 슬라이더로 조절하거나 화면 높이에 자동으로 맞춰, 여러 기기를 한 화면에 모두 담아 비교합니다. 가로 한 줄 ↔ 그리드 줄바꿈도 전환됩니다.
스크린샷 & 스크롤 캡처
기기 프레임의 보이는 영역(📷)부터 페이지 전체를 스크롤하며 이어붙인 긴 스크린샷(📜), 모든 기기를 담은 전체 창(🖼)까지 PNG로 즉시 저장합니다. 반복되는 고정 헤더는 자동으로 정리됩니다.
임베드 차단 사이트 우회
X-Frame-Options·CSP frame-ancestors로 임베드를 막는 사이트도, 뷰어가 켜진 탭에서 미리보기 대상 사이트의 응답에 한해 해당 헤더를 일시 제거해 정상적으로 미리보기합니다. 페이지 안에 포함된 다른 사이트의 프레임은 건드리지 않습니다.
단축키 토글
툴바 아이콘 클릭 또는 Alt+R·Alt+Shift+R로 어느 페이지에서든 켜고 끕니다. 오버레이 안에서는 ESC로 종료, F5·Ctrl+R은 기기 프레임만 새로고침합니다.
06단축키
손에 익으면,
키보드만으로 충분합니다.
- AltR뷰어 토글
오버레이 켜기 / 끄기 (툴바 아이콘과 동일)
- AltShiftR뷰어 토글 (보조)
Alt+R이 다른 프로그램과 겹칠 때 사용
- ESC빠른 종료
오버레이를 즉시 닫고 일반 페이지로
- F5/ Ctrl + R프레임만 새로고침
일반 페이지로 빠지지 않고 기기 프레임만 다시 로드
기본 키는 chrome://extensions/shortcuts에서 바꿀 수 있습니다.
07설치
설치는 1분이면
끝납니다.
크롬 웹 스토어에서 클릭 한 번으로 설치하면 바로 사용할 수 있습니다.
- 01
크롬 웹 스토어에서 추가
Chrome 웹 스토어 BLUE_Responsive 페이지를 열고 Chrome에 추가 버튼을 클릭하세요. 툴바에 고정해두면 설치 완료입니다.
- 02
아무 페이지에서 토글
점검할 웹페이지에서
Alt+R(또는Alt+Shift+R)을 누르거나 툴바 아이콘을 클릭하면 오버레이가 뜹니다. 기기를 추가하고 스크롤해 보세요.
file:// 페이지도 보려면
로컬 HTML 파일(file://)을 점검하려면, 크롬 확장 상세 화면에서 파일 URL에 대한 액세스 허용을 켜주세요. 일반 http(s) 페이지는 별도 설정 없이 바로 동작합니다.
반응형 점검, 한 화면에서 끝내세요.
크롬 웹 스토어에서 설치하고, 어떤 페이지에서든 Alt+R을 눌러보세요.
모바일·태블릿·PC가 한 번에 펼쳐집니다.
08설치 전 확인
자주 묻는 질문
설치 전에 궁금해하시는 질문들을 모았습니다.
BLUE_Responsive는 정말 무료인가요?+
네, 완전 무료입니다. 광고·결제·구독·회원가입이 모두 없으며, 모든 기능을 설치 즉시 제한 없이 사용할 수 있습니다.
DevTools 기기 모드와 무엇이 다른가요?+
DevTools는 한 번에 한 기기만 보여줍니다. BLUE_Responsive는 여러 기기를 한 화면에 동시에 띄우고 스크롤을 동기화해, 같은 섹션이 기기마다 어떻게 보이는지 한눈에 비교할 수 있습니다.
서버가 모바일 페이지를 따로 주는 사이트도 보이나요?+
네. 모바일 프레임은 요청의 User-Agent를 해당 기기 UA로 교체하고, 최신 크롬이 함께 보내는 UA Client Hints(Sec-CH-UA*)까지 모바일 값으로 맞춥니다. 페이지 로드 직전 navigator.userAgent·터치·해상도 값도 모바일로 덮어써, 서버 분기(UA·CH)와 JS 기반 모바일 감지 모두 모바일로 인식합니다.
임베드를 막는 사이트도 미리볼 수 있나요?+
대부분 가능합니다. 뷰어가 켜진 탭에서 미리보기 대상 도메인의 iframe 응답에 한해 X-Frame-Options·CSP frame-ancestors 헤더를 임시로 제거합니다. 페이지에 포함된 다른 사이트의 중첩 프레임은 벗기지 않으며, 뷰어를 끄거나 탭을 이동·종료하면 규칙이 바로 해제됩니다.
확장 프로그램은 어떤 권한이 필요한가요?+
확장 프로그램이 요청하는 권한은 다섯 가지입니다. 모든 사이트 접근(all_urls)은 어느 페이지에서든 단축키로 뷰어를 열고 그 페이지를 기기별 프레임으로 불러오는 데 필요합니다. scripting은 설치 전부터 열려 있던 탭에 뷰어를 넣을 때, storage는 기기 구성·배율·내 프리셋을 이 브라우저에 저장할 때, declarativeNetRequest는 미리보기 프레임의 응답 헤더와 모바일 User-Agent를 바꿀 때, downloads는 스크린샷 PNG를 다운로드 폴더에 저장할 때 씁니다. 확장 프로그램의 코드는 화면 내용을 외부 서버로 보내는 요청을 하지 않습니다.
뷰어를 닫으면 임시로 바꾼 내용이 원래대로 돌아오나요?+
뷰어가 켜져 있는 동안 해당 탭에는 임시 변경이 생깁니다. 화면 위에 오버레이가 얹히고, 뒤쪽 페이지의 스크롤이 잠기며, 탭 아이콘이 BLUE_Responsive 아이콘으로 바뀌고, 미리보기 프레임에 쓰는 헤더·User-Agent 규칙이 등록됩니다. Alt+R을 다시 누르거나 ESC 또는 닫기 버튼으로 뷰어를 닫으면 오버레이를 지우고 스크롤 잠금과 원래 탭 아이콘, 포커스를 되돌리며 규칙도 해제합니다. 탭을 닫거나 다른 주소로 이동해 오버레이가 사라질 때, 브라우저를 시작할 때도 규칙을 정리합니다. 모바일 기기 값은 미리보기 프레임 안에서만 바뀌며 원래 페이지에는 적용되지 않습니다. 저장해 둔 설정과 프리셋, 내려받은 스크린샷 파일은 뷰어를 닫아도 그대로 남습니다.
토글 단축키를 Ctrl+Alt+R 등으로 바꿀 수 있나요?+
네. 크롬은 manifest 기본값으로 Ctrl+Alt 조합을 허용하지 않아 기본을 Alt+R·Alt+Shift+R 두 가지로 두었습니다. chrome://extensions/shortcuts에서 원하는 키로 직접 변경할 수 있습니다.
알아두면 좋은 한계가 있나요?+
CSS @media (hover:none)·(pointer:coarse) 같은 입력 기반 미디어쿼리는 데스크탑 입력값으로 평가됩니다(완전 에뮬은 DevTools 단일 기기 모드 필요). 또한 프레임 안에서 링크를 눌러 다른 페이지로 이동하면 모바일 마커가 빠질 수 있어, 단일 페이지 점검용 도구로 설계되었습니다.
어떤 브라우저에서 사용할 수 있나요?+
Manifest V3 기반으로, 최신 크로미움 계열 브라우저 — 구글 크롬, 마이크로소프트 엣지, 브레이브, Arc 등 — 에서 동작합니다.



느리게 사는 집