동시 멀티 뷰포트
같은 URL을 휴대폰·태블릿·데스크탑 프레임으로 동시에 렌더합니다. 각 프레임은 실제 기기 px 폭이라 CSS 브레이크포인트가 그대로 작동합니다.
Chrome Extension · v1.0.0
반응형 점검을, 모바일·태블릿·PC
반응형 점검을, 모바일·태블릿·PC
한 화면에서 동시에.
BLUE_Responsive는 지금 보고 있는 페이지를 여러 기기 뷰포트로 동시에 띄워주는 무료 크롬 확장입니다. 실제 기기 폭으로 미디어쿼리가 그대로 작동하고, 스크롤까지 동기화되며, 모바일 UA로 렌더해 서버가 분기하는 모바일 HTML도 그대로 확인할 수 있습니다.
Why BLUE_Responsive
기기를 바꿔가며 새로고침할 필요가 없습니다
DevTools 단일 기기 모드를 껐다 켰다 하지 마세요. 한 오버레이 안에서 여러 뷰포트를 나란히 두고, 한 번의 스크롤로 모든 기기를 동시에 확인합니다.
스크롤 동기화
한 기기를 스크롤하면 나머지 기기가 비율 기준으로 함께 이동합니다. 같은 섹션을 모든 화면에서 한눈에 비교할 수 있고, 동기화는 언제든 끌 수 있습니다.
실제 모바일 UA 렌더
모바일 프레임은 User-Agent를 해당 기기로 교체해 요청합니다. 서버가 UA로 모바일 HTML을 분기하는 사이트도 실제 폰과 같은 화면을 받아옵니다.
Device Picker
대표 기기 한 번에, 커스텀 해상도까지
자주 쓰는 휴대폰·태블릿·데스크탑을 클릭 한 번으로 추가하거나, 원하는 W×H를 직접 입력해 점검할 수 있습니다.
프리셋 칩(반응형 3종 · 모바일 집중 · 전체 보기)으로 자주 쓰는 구성을 즉시 불러오고, ★ 저장으로 나만의 프리셋을 만들 수 있습니다.
Key Features
반응형 디버깅을 빠르게 끝내는 기능
프리셋부터 회전·배율·줄바꿈, 임베드를 막는 사이트 우회까지. 실무 점검에 필요한 것들을 한 오버레이에 담았습니다.
프리셋 & 내 구성 저장
반응형 3종·모바일 집중·전체 보기 등 기본 프리셋을 칩으로 제공합니다. 현재 구성을 ★ 저장해 나만의 프리셋으로 추가하고 칩의 ✕로 삭제합니다.
커스텀 기기
대표 휴대폰·태블릿·데스크탑을 추가하거나, 커스텀 W×H를 직접 입력해 원하는 해상도를 즉석에서 만들어 확인할 수 있습니다.
가로/세로 회전
각 기기 프레임을 ⟲ 버튼으로 가로·세로 전환합니다. 랜드스케이프 레이아웃과 포트레이트 레이아웃을 즉시 오갈 수 있습니다.
배율 슬라이더 & 맞춤
전체 배율을 슬라이더로 조절하거나 화면 높이에 자동으로 맞춰, 여러 기기를 한 화면에 모두 담아 비교합니다. 가로 한 줄 ↔ 그리드 줄바꿈도 전환됩니다.
임베드 차단 사이트 우회
X-Frame-Options·CSP frame-ancestors로 임베드를 막는 사이트도, 뷰어가 켜진 탭의 응답에 한해 해당 헤더를 일시 제거해 정상적으로 미리보기합니다.
단축키 토글
툴바 아이콘 클릭 또는 Alt+Shift+R로 켜고 끕니다. 오버레이 안에서는 Alt+R·ESC로 종료, F5로 기기 프레임만 새로고침합니다.
Shortcuts
단축키로 더 빠르게
기본 토글은 Alt+Shift+R 입니다. 원하는 키는 chrome://extensions/shortcuts에서 직접 바꿀 수 있습니다.
Alt + Shift + R
뷰어 토글
오버레이 켜기 / 끄기 (툴바 아이콘과 동일)
Alt + R
뷰어 닫기
오버레이가 떠 있을 때 종료
ESC
빠른 종료
오버레이를 즉시 닫고 일반 페이지로
F5 / Ctrl + R
프레임만 새로고침
일반 페이지로 빠지지 않고 기기 프레임만 다시 로드
Installation
1분 안에 끝나는 설치
아래 ZIP을 받아 크롬 개발자 모드에서 로드하면 바로 사용할 수 있습니다. 크롬 웹 스토어 정식 등록은 곧 제공될 예정입니다.
ZIP 다운로드 후 압축 해제
BLUE_Responsive_v1.0.0.zip 파일을 내려받아 원하는 폴더에 압축을 풀어주세요.
크롬 확장 프로그램 페이지 열기
주소창에 chrome://extensions를 입력하고 이동한 뒤, 오른쪽 상단의 개발자 모드를 켭니다.
압축 해제된 확장 프로그램 로드
압축해제된 확장 프로그램을 로드합니다 버튼을 클릭해 방금 압축을 푼 폴더를 선택합니다. 툴바에 고정해두면 설치 완료입니다.
아무 페이지에서 토글
점검할 웹페이지에서 Alt+Shift+R을 누르거나 툴바 아이콘을 클릭하면 오버레이가 뜹니다. 기기를 추가하고 스크롤해 보세요.
file:// 페이지도 보려면
로컬 HTML 파일(file://)을 점검하려면, 크롬 확장 상세 화면에서 파일 URL에 대한 액세스 허용을 켜주세요. 일반 http(s) 페이지는 별도 설정 없이 바로 동작합니다.
FAQ
자주 묻는 질문
설치 전에 궁금해하시는 질문들을 모았습니다.
BLUE_Responsive는 정말 무료인가요?
네, 완전 무료입니다. 광고·결제·구독·회원가입이 모두 없으며, 모든 기능을 설치 즉시 제한 없이 사용할 수 있습니다.
DevTools 기기 모드와 무엇이 다른가요?
DevTools는 한 번에 한 기기만 보여줍니다. BLUE_Responsive는 여러 기기를 한 화면에 동시에 띄우고 스크롤을 동기화해, 같은 섹션이 기기마다 어떻게 보이는지 한눈에 비교할 수 있습니다.
서버가 모바일 페이지를 따로 주는 사이트도 보이나요?
네. 모바일 프레임은 요청의 User-Agent를 해당 기기 UA로 교체하고, 페이지 로드 직전 navigator.userAgent·터치·해상도 값도 모바일로 덮어씁니다. 서버 분기(UA)와 JS 기반 모바일 감지 모두 모바일로 인식합니다.
임베드를 막는 사이트도 미리볼 수 있나요?
대부분 가능합니다. 뷰어가 켜진 탭의 iframe 응답에 한해 X-Frame-Options·CSP frame-ancestors 헤더를 임시로 제거합니다. 뷰어를 끄거나 탭을 이동·종료하면 규칙이 바로 해제됩니다.
토글 단축키를 Ctrl+Alt+R 등으로 바꿀 수 있나요?
네. 크롬은 manifest 기본값으로 Ctrl+Alt 조합을 허용하지 않아 기본을 Alt+Shift+R로 두었습니다. chrome://extensions/shortcuts에서 원하는 키로 직접 변경할 수 있습니다.
알아두면 좋은 한계가 있나요?
CSS @media (hover:none)·(pointer:coarse) 같은 입력 기반 미디어쿼리는 데스크탑 입력값으로 평가됩니다(완전 에뮬은 DevTools 단일 기기 모드 필요). 또한 프레임 안에서 링크를 눌러 다른 페이지로 이동하면 모바일 마커가 빠질 수 있어, 단일 페이지 점검용 도구로 설계되었습니다.
어떤 브라우저에서 사용할 수 있나요?
Manifest V3 기반으로, 최신 크로미움 계열 브라우저 — 구글 크롬, 마이크로소프트 엣지, 브레이브, Arc 등 — 에서 동작합니다.
반응형 점검, 한 화면에서 끝내세요.
ZIP을 내려받아 크롬에 로드하고, 어떤 페이지에서든 Alt+Shift+R을 눌러보세요.
모바일·태블릿·PC가 한 번에 펼쳐집니다.
Contact
프로젝트 제안과
협업 문의를 기다립니다
요구사항을 알려주시면
24시간 이내에 맞춤 솔루션과 견적을 드립니다.