프런트엔드 개발자
DevTools를 전환하거나 창 크기를 씨름하지 않고, 실제 기기 너비에서 살아 있는 DOM으로 브레이크포인트를 검증합니다.
신규워크스페이스 보드 - 기기 10대를 한 번에
당신의 웹사이트를, 완벽하게모든 iPhone에서.
Viewport는 지금 보고 있는 사이트 위에 사양 그대로의 기기 프레임을 겹쳐 보여줍니다. 브레이크포인트를 나란히 비교하고, QA보다 먼저 레이아웃 문제를 잡고, 프레임이 들어간 스크린샷이나 4K 녹화를 내보내세요. 전부 내 컴퓨터 안에서 끝납니다.
모든 사이트 · 38종 기기 · 탭 간 설정 동기화 · 계정 없음, 텔레메트리 없음, 업로드 없음
Chrome 웹 스토어★ 5.0·사용자 5,000명 이상
추천Chrome 추천 확장 프로그램
yourstore.com
누구를 위한 도구인가
하나의 확장 프로그램, 세 가지 작업 방식
반응형 화면을 만드는 사람, 그것을 설계하는 사람, 그리고 잘 작동한다는 것을 증명해야 하는 사람을 위해.
프로덕트 디자이너
정확한 프레임 안에서 여백, 타입 스케일, 세이프 에어리어를 확인하고, 프레임이 들어간 캡처를 스펙 문서나 발표 자료로 바로 내보냅니다.
에이전시와 프리랜서
통화 중에 반응형 품질을 실시간으로 보여줍니다. 화면 공유 한 번으로 데스크톱과 모바일이 함께 동작하는 모습을 전달할 수 있고, 창을 나눌 필요가 없습니다.
핵심 기능
유난히 잘하는 네 가지
기능을 잔뜩 쌓아 올리지 않았습니다. 확장 프로그램 전체가 이 네 가지를 중심으로 만들어졌습니다.
라이브 데모
바로 여기서 직접 다뤄보세요
이것이 실제 작업 흐름입니다. 툴바에서 기기를 고르고, 회전하고, 스크린샷을 찍고, 녹화를 시작하세요. 그 뒤에 있는 페이지가 바로 당신의 사이트입니다.
yourpage.com
402 x 874/34%
빌드에서 승인까지
묻기 전에 먼저 증명하세요
반응형 품질은 설명하는 것보다 보여주는 편이 훨씬 쉽습니다. Viewport는 내부 점검을 고객에게 그대로 건넬 수 있는 결과물로 바꿔줍니다.
시작하기
클릭 세 번이면 됩니다
설정 파일도, 계정도, 프로젝트 준비도 필요 없습니다.
01
아무 페이지나 여세요
툴바 아이콘을 클릭하세요. 실제 사이트 위에 기기가 나타나며, 이미 로드되어 완전히 조작할 수 있습니다.
02
화면을 구성하세요
기기를 고르고 회전하고 크기를 바꾸고 원하는 곳으로 끌어다 놓으세요. 휴대폰, 태블릿, 모니터를 늘어놓은 보드를 만들 수도 있습니다.
03
비교하고 담아내세요
모든 프레임을 함께 스크롤한 다음, 프레임이 들어간 스크린샷을 내보내거나 전체 과정을 녹화하세요.
주장이 아니라 측정
Viewport가 앞서는 지점
Chrome 웹 스토어에서 설치 수가 가장 많은 반응형 미리보기 확장 프로그램들과 항목별로 대조했습니다.
로컬 우선 설계
아무것도 기기 밖으로 나가지 않으며, 그 과정을 공개합니다
Viewport에는 당신의 데이터를 다루는 백엔드가 없습니다. 분석도, 텔레메트리도, 원격으로 불러오는 코드도 없습니다. 설정은 chrome.storage.local에 저장되고, 캡처한 파일은 곧바로 디스크로 내려받습니다.
프레임 안에서 페이지를 렌더링하려면 브라우저가 미리보기 요청에 대해 X-Frame-Options와 Content-Security-Policy의 완화를 요구합니다. 이 완화는 미리보는 출처에만 한정하고(페이지의 서드파티 프레임은 보호를 그대로 유지합니다), 활성화된 동안에는 안내 배너를 표시합니다. 미리보기를 닫는 즉시 해제됩니다.
대부분의 도구는 이를 조용히, 그것도 탭 전체에 적용합니다. 우리는 당신이 아는 편이 낫다고 생각합니다.
요금제
언제까지나 무료. 필요할 때 Pro로.
무료 요금제는 기간 제한이 없는 실제 도구이지, 체험판이 아닙니다.
Pro
가장 인기$4.17/ 월, 연 $50 청구
- 무료의 모든 기능에 더해:
- 기기 10대 보드와 저장된 장면
- 무제한 4K MP4, 트림과 배속
- 빌드 비교와 레이아웃 감사
- 네트워크 제한, 위치 정보, 로케일
무료 요금제, 계정 불필요언제든 해지 가능Lemon Squeezy의 안전한 결제
자주 묻는 질문
묻기 전에 드리는 답
설치 전 모든 개발자가 던지는 다섯 가지 질문.
아닙니다. 브라우저 안에서 도는 어떤 것도 대체하지 못합니다. Viewport는 각 기기의 실제 뷰포트 너비와 그에 맞는 client hints로 진짜 페이지를 렌더링하므로 레이아웃과 브레이크포인트 문제의 대다수를 잡아냅니다. 릴리스에 결정적인 확인은 여전히 실제 기기의 몫입니다.
한 번도 본 적 없는 브레이크포인트를 그대로 내보내지 마세요.
Viewport를 Chrome에 추가하고, 지금 보고 있는 그 페이지에서 모든 기기를 확인하세요. 무료, 계정 불필요, 업로드 없음.