BLUE_Responsive 는 점검할 페이지에서 Alt+R 을 누르면 모바일, 태블릿, PC 폭으로 한 화면에 동시에 펼쳐지는 무료 크롬 확장입니다. 한 기기를 스크롤하면 모든 화면이 함께 움직여 같은 구간을 기기별로 비교할 수 있고, 기기별 화면과 페이지 전체를 PNG 로 저장할 수 있습니다.
핵심 요약
더블루캔버스 BLUE_Responsive는 점검할 페이지에서 Alt+R 을 누르면 모바일, 태블릿, PC 폭으로 한 화면에 동시에 펼쳐지는 무료 크롬 확장입니다.
한 기기를 스크롤하면 모든 화면이 함께 움직이므로 같은 구간이 기기마다 어떻게 달라지는지 바로 비교할 수 있습니다.
원하는 크기를 입력해 내 구성으로 저장하고, 기기별 화면과 페이지 전체는 PNG 로 저장합니다.
영상에서 보여 드린 장면
영상은 같은 페이지가 화면 폭에 따라 PC, 태블릿, 모바일 모양으로 바뀌는 장면으로 시작합니다. 같은 페이지도 화면마다 다르게 보이므로, 그 차이를 한 화면에서 비교하는 도구를 소개합니다.
영상 속 장면
하는 일
Alt+R 로 켜기
점검할 페이지에서 Alt+R 을 누르면 여러 미리보기 화면이 펼쳐집니다
동시에 비교
모바일, 태블릿, PC 를 한 화면에서 동시에 확인하고, 모바일과 태블릿은 차례로 크게 봅니다
함께 스크롤
한 번 스크롤하면 모든 화면이 함께 움직여 같은 섹션을 비교합니다
내 구성 저장
원하는 크기를 입력하고 기기 구성을 저장합니다
PNG 로 저장
기기별 화면과 긴 페이지 전체를 PNG 로 저장합니다
각 화면은 실제 기기의 px 폭으로 그려지므로 CSS 미디어쿼리가 그대로 동작합니다. 영상의 마지막 장면은 Chrome 웹 스토어에서 BLUE_Responsive 를 검색하도록 안내합니다.
어떤 상황에 쓰는지
화면을 만들고 나면 모바일과 태블릿에서도 어긋나지 않는지 확인해야 합니다. 이 도구는 그 확인을 기기를 바꿔 가며 하는 대신 한 번에 하도록 돕습니다.
새로 만든 페이지가 모바일에서 어긋나지 않는지 볼 때
휴대폰과 태블릿, PC에서 같은 섹션이 어떻게 달라지는지 나란히 볼 때
서버가 모바일용 HTML 을 따로 내려 주는 사이트의 모바일 응답을 확인할 때
점검한 화면을 이미지로 남겨 두어야 할 때
모바일 프레임은 요청의 User-Agent 를 해당 기기로 바꿔 보내므로, 서버가 모바일 화면을 따로 나눠 주는 사이트도 확인할 수 있습니다.
시작하는 방법
더블루캔버스 홈페이지의 PROGRAM 메뉴에서 RESPONSIVE CHECKER 소개 페이지로 들어가실 수 있습니다. 설치는 크롬 웹 스토어에서 합니다.
설치: 크롬 웹 스토어에서 BLUE_Responsive 를 검색해 Chrome 에 추가합니다
켜기: 점검할 페이지에서 Alt+R 을 누르면 오버레이가 열립니다. Alt+Shift+R 도 같은 역할을 합니다
기기 추가: 휴대폰, 태블릿, 데스크탑을 클릭 한 번으로 추가하고 스크롤해 비교합니다
저장: 필요한 해상도를 입력하고, 자주 쓰는 구성은 저장하며, 기기별 화면이나 페이지 전체를 PNG 로 저장합니다
사용 방법과 환경
무료이고 회원가입이 필요하지 않습니다. 크롬을 포함해 Manifest V3 를 지원하는 크로미움 계열 브라우저에서 동작합니다.
터치 여부를 따지는 입력 기반 미디어쿼리는 데스크탑 입력값으로 평가됩니다. 또한 프레임 안에서 링크를 눌러 다른 페이지로 이동하면 모바일 표시가 빠질 수 있으므로, 단일 페이지를 점검하는 도구로 설계되었습니다.
영상 자막 전문 (6개 장면)
같은 페이지, 다른 화면
같은 페이지도 화면마다 다르게 보입니다. 화면 폭이 바뀌면 레이아웃이 어떻게 달라지는지 보여 드립니다.
Alt+R 로 켜기
점검할 페이지에서 Alt+R을 누르고 더블루캔버스 BLUE_Responsive를 켭니다. 여러 미리보기 화면이 펼쳐집니다.
모바일·태블릿·PC 동시 확인
모바일, 태블릿, PC를 한 화면에서 동시에 확인합니다. 모바일과 태블릿은 차례로 크게 보며 레이아웃 차이를 비교합니다.
함께 스크롤
한 번 스크롤하면 모든 화면이 함께 움직입니다. 같은 섹션을 기기별로 나란히 비교합니다.
크기 입력과 내 구성 저장
원하는 크기를 직접 입력하고, 자주 쓰는 기기 구성은 저장해 둡니다.
PNG 저장과 설치 안내
기기별 화면도, 페이지 전체도 PNG로 저장합니다. 무료 크롬 확장 BLUE_Responsive는 Chrome 웹 스토어에서 검색해 설치합니다.
자주 묻는 질문
BLUE_Responsive 는 무료인가요?
네. 소개 페이지에 광고, 결제, 구독, 회원가입이 모두 없고 모든 기능을 설치한 뒤 제한 없이 쓸 수 있다고 안내되어 있습니다.
브라우저의 개발자 도구 기기 모드와 무엇이 다른가요?
개발자 도구의 기기 모드는 한 번에 한 기기만 보여 줍니다. BLUE_Responsive 는 여러 기기를 한 화면에 동시에 띄우고 스크롤을 동기화해서, 같은 섹션이 기기마다 어떻게 보이는지 한눈에 비교할 수 있습니다.
서버가 모바일 페이지를 따로 내려 주는 사이트도 확인할 수 있나요?
네. 모바일 프레임은 요청의 User-Agent 를 해당 기기 값으로 바꿔 보냅니다. 그래서 서버가 User-Agent 로 모바일용 HTML 을 나누는 사이트도 모바일 응답을 확인할 수 있습니다.
알아 둘 한계가 있나요?
터치 여부를 따지는 입력 기반 미디어쿼리는 데스크탑 입력값으로 평가됩니다. 프레임 안에서 다른 페이지로 이동하면 모바일 표시가 빠질 수 있어, 단일 페이지를 점검하는 용도로 만들어진 도구입니다.
점검할 페이지를 모바일·태블릿·PC로 한 번에 펼쳐 보십시오
더블루캔버스 BLUE_Responsive 는 무료 크롬 확장이며 회원가입이 필요하지 않습니다. 크롬 웹 스토어에서 설치한 뒤 점검할 페이지에서 Alt+R 을 눌러 시작하십시오.
