Responsive Viewer는 현재 웹 페이지를 여러 디바이스 뷰포트 크기로 동시에 나란히 보여줍니다. iPhone, iPad, Android 폰, 노트북, 데스크톱에서 디자인이 어떻게 보이는지 한 화면에서 확인할 수 있습니다. 하나의 뷰포트를 스크롤하면 나머지 모든 뷰포트도 동일한 위치로 따라 움직여 같은 콘텐츠 섹션을 모든 디바이스 크기에서 쉽게 비교할 수 있습니다.
반응형 디자인을 테스트할 때는 보통 브라우저 창 크기를 조정하거나 DevTools의 디바이스 툴바를 사용하여 뷰포트 크기를 하나씩 전환해야 합니다. 하지만 한 번에 하나의 크기만 볼 수 있어 모바일과 데스크톱에서 특정 섹션이 어떻게 다르게 보이는지 동시에 비교하기 어렵습니다. Responsive Viewer는 이 문제를 해결합니다. 페이지를 여러 뷰포트 크기로 동시에 렌더링하여 화면에 나란히 표시합니다. 인기 디바이스 프리셋(iPhone 15, iPad Pro, Pixel 8, MacBook, 1440p 데스크톱)이나 직접 사용자 정의 크기를 선택할 수 있습니다. 각 뷰포트는 정적 스크린샷이 아닌 실제로 렌더링된 페이지입니다. 하나의 뷰포트를 스크롤하면 모든 뷰포트가 같은 위치로 동기화되어 이동합니다. 이 동기화된 스크롤 덕분에 같은 콘텐츠 영역을 모든 디바이스 크기에서 한 번에 비교할 수 있습니다. 내비게이션이 잘못 줄바꿈되는지, 이미지가 컨테이너를 벗어나는지, 작은 화면에서 텍스트가 읽기 어려워지는지, 간격이 어색하게 collapse되는지 등 반응형 문제를 가장 빠르게 발견할 수 있습니다.
현재 페이지를 여러 뷰포트 크기로 동시에 렌더링하여 화면에 나란히 보여줍니다. 모바일, 태블릿, 데스크톱 레이아웃을 한 번에 비교할 수 있으며 뷰를 전환할 필요가 없습니다. 각 뷰포트는 페이지의 완전한 기능 렌더링입니다.
인기 디바이스 프리셋 라이브러리에서 선택할 수 있습니다: iPhone 15 (393×852), iPhone SE (375×667), iPad (820×1180), iPad Pro (1024×1366), Pixel 8 (412×915), MacBook Pro (1440×900), Full HD 데스크톱 (1920×1080). 최신 디바이스 크기로 업데이트되어 있습니다.
임의의 너비와 높이를 직접 입력하여 비표준 뷰포트 크기를 테스트할 수 있습니다. 정확히 768px 너비(일반 태블릿 브레이크포인트)에서 어떻게 보이는지 확인하고 싶다면 숫자만 입력하면 됩니다. 프리셋과 함께 여러 사용자 정의 뷰포트를 추가할 수 있습니다.
하나의 뷰포트를 스크롤하면 모든 다른 뷰포트가 동일한 수직 위치로 따라 움직입니다. 같은 콘텐츠 섹션을 모든 디바이스 크기에서 동시에 비교할 수 있어 히어로 영역, 가격 테이블, 푸터 등이 각 크기에서 어떻게 렌더링되는지 한눈에 확인할 수 있습니다.
각 뷰포트가 실제 디바이스 프레임(폰 베젤, 태블릿 테두리, 노트북 chrome) 안에 표시됩니다. 이해관계자 리뷰나 프레젠테이션에서 어느 뷰포트가 어떤 디바이스를 의미하는지 직관적으로 전달할 수 있습니다.
개별 디바이스를 켜고 끌 수 있어 특정 크기 비교에 집중할 수 있습니다. 모바일과 데스크톱만 비교하고 싶다면 태블릿 프리셋을 해제하세요. iPhone만 보고 싶다면 나머지를 모두 해제할 수 있습니다. 표시할 뷰포트를 완전히 제어할 수 있습니다.
반응형 디자인을 구현한 후 Responsive Viewer를 사용하여 모든 대상 디바이스 크기에서 각 섹션이 올바르게 보이는지 검증하세요. 텍스트 오버플로우, 이미지 스케일링 문제, 내비게이션 collapse 문제, 간격 불일치 등을 한 화면에서 모두 발견할 수 있습니다.
클라이언트 리뷰 미팅에서 웹사이트가 디바이스별로 어떻게 보이는지 보여주세요. 나란히 보는 방식은 직관적이어서 뷰포트 개념을 설명할 필요가 없습니다. 클라이언트가 모바일, 태블릿, 데스크톱을 동시에 볼 수 있습니다.
특정 너비에서 레이아웃이 깨지나요? 정확한 픽셀 너비에 사용자 정의 뷰포트를 추가하고 문제가 발생하는 지점을 바로 확인하세요.
버그 리포트에 정확한 측정값을 포함하세요. "내비게이션과 히어로 사이 간격이 47px인데 디자인 스펙상 32px이어야 합니다." 정보 바의 값을 Jira 티켓이나 GitHub 이슈에 바로 복사할 수 있습니다.
수평으로 정렬되어야 하는 두 요소를 클릭하세요. Y 거리가 0px이면 완벽하게 정렬된 것입니다. 0이 아닌 값이 나오면 수직 정렬이 어긋난 것이며, 정확한 픽셀 차이를 알려줍니다.
DevSuite Pro 플로팅 독을 열고 Responsive Viewer 아이콘을 클릭하세요. 페이지가 다중 뷰포트 모드로 전환되며 디바이스 프레임이 나란히 표시됩니다.
상단 디바이스 바에 사용 가능한 프리셋(iPhone, iPad, Pixel, MacBook, Desktop)이 표시됩니다. 디바이스를 클릭하여 켜고 끌 수 있습니다. 선택된 디바이스가 아래에 뷰포트로 나타납니다.
"Custom" 버튼을 클릭하고 특정 너비 × 높이 값을 입력하여 사용자 정의 뷰포트를 추가하세요. 정확한 브레이크포인트 값(768px, 1024px, 1280px 등)을 테스트할 때 유용합니다.
어떤 뷰포트든 스크롤하세요. 나머지 모든 뷰포트가 동일한 위치로 따라 움직입니다. 선택한 모든 디바이스 크기에서 같은 섹션이 어떻게 보이는지 동시에 비교할 수 있습니다.
Responsive Viewer 아이콘을 다시 클릭하거나 닫기 버튼을 눌러 다중 뷰포트 모드를 종료하고 정상 단일 페이지 뷰로 돌아갑니다.
DevSuite Pro를 무료로 설치하고 브라우저용 39개 이상의 개발자 도구를 사용해보세요.
