반응형 디자인 테스터
온라인에서 무료로 반응형 디자인을 테스트할 수 있는 도구입니다. 여러 기기의 화면에서 페이지를 테스트할 수 있습니다. 설치가 필요하지 않습니다.
반응형 디자인 테스터 소개
반응형 디자인 테스터는 웹사이트가 다양한 화면 크기에서 어떻게 보이는지 미리 봅니다. URL을 입력하고 폰, 태블릿, 데스크톱 해상도 같은 기기 프리셋을 고르거나 너비와 높이를 직접 설정하면, 해당 크기의 틀 안에 페이지가 렌더링됩니다. 세로와 가로를 전환하고 즉시 회전할 수 있습니다. 브라우저 창 크기를 바꾸지 않고 일반적인 분기점에서 레이아웃을 빠르게 확인하는 방법입니다.
사용 방법
1. 웹사이트 URL을 입력하고 불러오기를 클릭합니다 2. 기기 프리셋을 고르거나, 사용자 지정을 골라 너비와 높이를 입력합니다 3. 프리셋에서는 세로와 가로를 전환하거나 회전을 씁니다 4. 해당 크기로 미리보기 틀에 렌더링되는 페이지를 봅니다
최상의 결과를 위한 팁
프리셋은 소형 폰부터 풀 HD 데스크톱까지 일반적인 크기를 다루며, 대부분 레이아웃이 겨냥하는 분기점에 맞습니다. 목록에 없는 정확한 픽셀 크기가 필요하면 사용자 지정을 씁니다. 일부 웹사이트는 삽입을 거부해 빈 틀을 보여줍니다. 이는 사이트 자체의 보안 설정이지 도구의 문제가 아닙니다. 삽입을 허용하는 페이지는 완전히 렌더링되고 상호 작용이 유지됩니다.
▶일부 사이트에서 미리보기가 비는 이유는?
많은 사이트가 보안을 위해 다른 페이지의 틀 안에 표시되지 못하게 하는 헤더를 보냅니다. 그러면 미리보기가 비어 있으며, 이는 도구가 아닌 사이트의 제한입니다.
▶어떤 기기 크기가 있나요?
소형 및 대형 폰, 두 가지 태블릿, 데스크톱 HD와 풀 HD 해상도 등 일반적인 프리셋 여러 개가 있습니다. 사용자 지정에서는 임의의 너비와 높이를 입력할 수 있습니다.
▶세로와 가로는 어떻게 동작하나요?
프리셋을 선택하면 세로와 가로를 전환할 수 있으며 너비와 높이가 서로 바뀝니다. 회전 버튼으로 즉시 뒤집을 수 있습니다.
▶미리보기는 상호 작용이 가능한가요?
네. 스크립트와 폼을 허용한 샌드박스 틀 안에서 페이지가 실행되어, 실제 기기 크기처럼 링크를 클릭하고 스크롤하고 입력을 채울 수 있습니다.
▶실제 브라우저 크기를 바꾸나요?
아니요. 도구는 자체 미리보기 틀의 크기만 바꾸고 브라우저 창은 그대로 둡니다.
이 도구가 당신에게 도움이 되었다면, 저에게 커피 한 잔 사주세요.
제게 커피 한 잔 사주세요.