반응 형 디자인 테스트를위한 10 가지 도구 및 앱
출시 전에 모든 유형의 사용자 및 장치에 맞게 디자인을 준비하는 것이 그 어느 때보 다 중요해졌습니다. 모든 장치에서 물리적으로 테스트하기는 어려울 수 있지만 다양한 반응 형 시나리오를 복제하는 데 도움이되는 몇 가지 도구와 앱이 있습니다.
무료 및 프리미엄 도구 옵션을 사용하면 배포 전에 반응 형 디자인을 테스트하지 않아도됩니다. 그 정보를 필요한 많은 디자인 조정에 사용하십시오! 오늘 우리는 반응 형 디자인을 테스트하기위한 다양한 도구를 제공합니다.
Envato Elements 살펴보기
1. Google 모바일 친화적 테스트
Google Mobile-Friendly Test는 간과되는 도구 중 하나입니다. 검색 가시성을 높이기 위해 Google 표준을 통과하려면 웹 사이트 디자인이 필요합니다. 그렇게 간단합니다.
URL을 입력하고 휴대 기기에서 페이지의 점수를 매기는 방법을 쉽게 사용할 수 있습니다. 이 도구의 가장 큰 장점은 웹 사이트 속도가 느려지거나 모바일에서 제대로 렌더링되지 않는 위치를 찾아 수정을 할 수 있다는 것입니다.
비용 : 무료
2. 응답자
Responsiator를 사용하면 다양한 장치 환경에서 웹 사이트 디자인을 볼 수 있습니다. (이것은 어딘가에 서랍에 전화 더미가 없어도 장치를 복제 할 수있는 좋은 방법입니다.)
이 사이트의 가장 좋은 점은 새로운 장치가 빠르게 추가되고 각각의 장치가 실제로 스크롤 할 수 있도록하여 스크롤 위에 나타나는 것만이 아니라 전체 페이지를 볼 수 있다는 것입니다. 장치는 세로 및 가로 보기로도 제공됩니다. 또한 각 장치 미리보기에는 레이블이 지정되어 있으므로보고있는 내용과 문제가 어디에서 발생할 수 있는지 정확하게 알 수 있습니다.
비용 : 무료이지만 광고 포함 (기부 대상 광고 제거)
3. 반응 형 디자인 검사기
반응 형 디자인 검사기는 웹 사이트를 창에 배치하여 수동으로 크기를 조정할 수 있습니다. 중단 점을 확인하기에 적합하며 다양한 장치 방향을 볼 수 있습니다.
이 도구의 장점은 데스크톱 및 모바일 및 태블릿 장치를 보여주는 것입니다. (다른 도구 중 일부는 실제로 큰 화면이 아닌 모바일에 중점을 둡니다.)
좋은 점은 브라우저의 크기를 변경하지 않고도 다른 크기를 볼 수 있다는 것입니다. 이 도구에 또 다른 멋진 용도가 있습니까? 이것을 사용하여 모형의 스크린 샷을 가져옵니다.
비용 : 무료
4. XRespond
XRespond를 사용하면 서로 다른 장치에서 여러 버전의 사이트를 동시에 비교할 수 있습니다. 이 도구의 장점은 한 장치에서 다른 장치로 제공하는 사용자 경험의 일관성을 파악할 수 있다는 것입니다. (사용자는 웹 사이트에 액세스 할 때마다 웹 사이트가 동일해야합니다.)
가로 또는 세로보기로 디자인을 테스트하고 같은 제조업체 (예 : Apple 또는 Samsung)의 장치를 선택하거나 비슷한 크기의 다양한 장치를 비교하십시오. 이 도구의 단점은 가장 인기있는 모델이 많이 나열되어 있지만 최신 장치가 모두 포함되어 있지 않다는 것입니다.
비용 : 무료
5. 스크린 플라이
Screenfly에는 공유와 같은 멋진 도구가 있으므로 팀으로 작업하여 반응 형 디자인을 테스트하고 볼 수 있습니다. 여기에는 데스크톱 컴퓨터, 전화, 태블릿, 텔레비전 및 원하는 사용자 정의 화면 크기를 추가하는 기능과 같은 다른 도구들보다 더 많은 장치 유형이 포함됩니다.
도구를 사용하면 상단의 간단한 클릭 버튼으로 회전, 스크롤 등을 할 수 있으며 모든 것이 브라우저에서 올바르게 작동합니다.
비용 : 무료
6. LambdaTest
LambdaTest는이 목록에서 가장 강력한 도구 중 하나입니다. 여기에는 2, 000 개가 넘는 실제 브라우저 및 운영 체제에서 테스트 할 수있는 기능이 포함됩니다.
이 도구는 웹 사이트의 모양을 보는 것 이상이며 실제 환경에서 호환성, 사용자 경험, 픽셀 완성도 등을 테스트합니다. 여러 장치, 브라우저 및 브라우저 버전에서 테스트되므로 웹 사이트의 작동 방식을 정확하게 알 수 있습니다.
온라인에서 도구 (및 팀)와 모든 모습을 보여주는 스크린 샷을 얻을 수 있습니다. 또한 이와 같은 프리미엄 툴의 장점은 설계 문제가 발생할 때이를 해결하는 데 도움이되는 디버깅 기능을 포함한다는 것입니다.
비용 : 라이트 버전은 무료입니다. 유료 플랜은 한 달에 $ 15에서 시작합니다
7. 반응 형 디자인
반응 형 디자인 설명은 테스트 도구보다 계획 도구입니다. 이 초보자 옵션을 사용하면 가로 세로 비율을 시각화하고 다양한 장치 및 화면 크기에 대한 디자인 요소를 계획하는 방법을 시각화 할 수 있습니다.
브라우저에서 모든 작업을 수행 할 수 있으므로 다양한 크기의 디자인을 생각하는 방법을 시각적으로 탐색 할 수 있습니다.
비용 : 무료
응답 성이 뛰어난 웹 디자인 테스트 도구
반응 형 웹 디자인 테스트 도구는 간단한 URL 기반 뷰어로 장치를 크기 또는 장치 유형별로 비교할 수 있습니다.
이 도구의 장점은 클릭 한 번으로 다른 방향, 길이 또는 뷰를 볼 수있는 토글 옵션입니다. 자신의 환경에서 테스트하기 위해이 도구를 호스팅하려면 옵션이기도합니다. (따라서 사이트를 시작하기 전에 테스트 할 수 있습니다.)
이 도구의 개발자 인 Matt Kersley는 Github에서 사용할 수있게했습니다.
비용 : 무료
9. Designmodo 응답 테스트
Designmodo Responsive Test는 웹 사이트 디자인을 테스트하는 가장 유용한 도구 중 하나 일 수 있습니다. 여기에는 쉬운 토글, 많은 장치 옵션 및보기 환경과 같은 깔끔한 인터페이스가 포함되어 있습니다.
사용자는 치수를 추가하고 다른 방향으로 볼 수도 있습니다. 새로운 장치로 자주 업데이트되므로 쉽게 테스트 할 수 있습니다.
비용 : 무료
10. CrossBrowserTesting
CrossBrowserTesting은 수동 및 자동 테스트를 제공하는 프리미엄 도구입니다. 사용자는 1, 500 개가 넘는 실제 데스크탑 및 모바일 브라우저에서 클라우드에서 수동, 시각적 및 Selenium 테스트를 실행할 수 있습니다.
이 도구는 엔터프라이즈 급 운영 환경에서도 확장 성이 뛰어납니다. 배포가 간단하고 디버깅 도구가 포함되어 있으며 많은 브라우저, 버전 및 장치에서 작동하며 강력한 테스트 구성을 갖추고있어 큰 문제가되기 전에 테스트에서 문제를 찾을 수 있습니다.
비용 : 계획은 한 달에 29 달러부터 시작합니다
결론
이 목록에없는 즐겨 찾는 도구가 있습니까? 우리와 공유하십시오. 우리는 우리가 몰랐던 도구를보고 싶어합니다.
모든 웹 사이트 디자인 및 개발 도구와 마찬가지로 한 가지만 설정하기 전에 몇 가지 옵션을 사용하는 것이 좋습니다. 이러한 도구의 대부분은 디자인이 제대로 작동하는지 파악하는 데 도움이되지만 모두 약간 다른 방식으로 작동하며 사용자 수준이 다릅니다. 주변에서 놀고 가장 편안한 것을 찾으십시오.
