요약
세 브레이크포인트를 한 번에 비교하는 가장 빠른 방법은?
URL을 Responsive Preview에 붙여넣으면 모바일(390px), 태블릿(820px), 데스크톱(1280px)이 동일 출처일 때 스크롤 동기화와 함께 세 라이브 iframe에 표시됩니다. DevTools 디바이스 모드는 한 뷰포트씩 리사이즈——한 너비 디버깅에는 적합하지만 브레이크포인트 간 회귀를 찾기는 느립니다.
비교
Responsive Preview vs DevTools 디바이스 모드.
| 옵션 | 비용 | 세 너비 동시 | 스크롤 동기화 | 최적 용도 |
|---|---|---|---|---|
| Responsive Preview (TDS) | 무료 | 예 — 390 / 820 / 1280px 열 | 동일 출처일 때 예 | 브레이크포인트 간 레이아웃 드리프트 발견; 미리보기 링크 공유 |
| 브라우저 DevTools 디바이스 모드 | 무료 (내장) | 아니오 — 한 너비씩 | N/A | 한 뷰포트 심층 검사, 네트워크, DOM |
| 유료 멀티 뷰포트 도구 | 유료 요금제 | 예 | 대부분 예 | 클라우드 미리보기와 협업이 필요한 팀 |
| /responsive-preview Cursor 명령 | 무료 | 세 너비 모두 스크린샷 | N/A (채팅 내 감사) | 빌드 중 Cursor 내 AI pass/warn/fail 보고서 |
나란히 보는 이유
세 라이브 iframe이 하나씩 리사이즈보다 나은 이유.
반응형 버그는 종종 브레이크포인트 간 드리프트로 나타납니다——모바일이 아닌 태블릿에서 어색하게 줄바꿈되는 내비, 820px에서만 넘치는 이미지. DevTools 프리셋을 하나씩 바꾸면 그 비교를 놓치기 쉽습니다. 나란히 라이브 iframe은 같은 페이지 상태를 세 너비 모두에서 스크롤하며 불일치를 즉시 발견할 수 있습니다.
Fix in Cursor copies viewport context from the frame where you spotted the issue, so you can paste it into chat and annotate with Design Mode without re-describing the breakpoint.
사용법
1분 안에 사용해 보세요.
- Responsive Preview를 여세요.
- 로컬 개발 URL(예:
http://localhost:8787/)을 붙여넣고 Preview를 클릭하세요. - 한 프레임을 스크롤——동기화가 가능하면 나머지도 따라갑니다.
- 선택: /responsive-preview 명령을 다운로드해 Cursor에서 AI 스크린샷을 받으세요.
전체 안내는 Responsive Preview guide에서 확인하세요.