what is mobile responsive test
모바일 반응 형 테스트의 중요성 :
오늘날의 기계화 된 세상에서 웹 사이트는 노트북이나 데스크톱뿐만 아니라 태블릿과 스마트 폰에서도 볼 수 있습니다.
쇼핑이나 인터넷 서핑, 이메일을 보내기 위해 데스크탑이나 노트북 앞에 앉아 있던 시절은 지났습니다. 이제는 모바일 시대이며 사람들은 거리를 걷거나 공원에 앉아 편안하게 원하는 곳 어디에서나 인터넷에 액세스합니다.
데스크톱, 노트북, 태블릿, 스마트 폰을 관찰하면 OS, CPU 등이 아니라 화면 크기도 다릅니다.
따라서 앱뿐만 아니라 웹 사이트도 신뢰하는 비즈니스의 경우 웹 사이트가 이러한 다양한 크기에 잘 맞는 것이 매우 중요합니다. 웹 사이트의 콘텐츠를 더 잘보기 위해 휴대 전화를 조정해야하는 경우 고객이나 사용자가 좋아하지 않을 것입니다.
우리 모두는 거의 매일 Amazon, Agoda, ZDNet 등 웹 사이트를 사용합니다. 다음 페이지 나 이미지에 액세스해야하는데 링크가 화면에 맞지 않거나 클릭하기에 너무 작 으면 얼마나 지루할까요? 이러한 행위는 사용자의 관심을 잃게됩니다.
여기에서 모바일 반응 형 또는 모바일 친화적 인 동작이 등장합니다.
반응 형이거나 친숙한 웹 디자인은 기본적으로 웹 사이트와 관련이 있습니다. 모바일 반응 형 웹 디자인은 사용자가보고있는 모든 장치에서 적절한보기 경험을 제공하기 위해 웹 사이트 개발에서 따르는 접근 방식입니다.
Google은 검색 결과에서 모바일 친화적 인 사이트를 우선시하므로이를 염두에두고 웹 사이트를 디자인하는 것이 중요해집니다.
먼저이 '모바일 반응 형 웹 디자인'이 무엇인지 이해하겠습니다.
학습 내용 :
모바일 응답 성 또는 친근한 디자인의 의미
반응 형 웹 디자인은 RWD라고도하며 웹 페이지를 다양한 장치와 화면 크기로 해석 할 수 있도록 웹 사이트를 디자인하는 접근 방식입니다.
다음과 같은 세 가지 개발 원칙이 있습니다.
- 유동 격자 : 이 접근 방식은 과거 픽셀 기반 접근 방식이 아니라 백분율을 기반으로합니다.
- 미디어 쿼리 : 기기 화면 크기에 따라 다양한 스타일을 적용 할 때 사용합니다.
- 유연한 이미지 및 미디어 : 스케일링 또는 CSS를 사용하여 이미지와 미디어를 다양한 크기로 다르게 표시 할 수 있습니다.
개발 접근 방식에서는 반응 형 웹 사이트의 테스트도 중요합니다.
모바일 친화적 인 웹 사이트는 노트북이나 데스크톱에서와 동일한 경험을 모바일 사용자에게 제공해야합니다. 다양한 브라우저, 다양한 화면 크기, 모드 (가로 또는 세로 등)에 대해 테스트해야합니다.
권장 도구
# 1) LambdaTest LT 브라우저
사용자에게 다양한 기기의 뷰포트에서 웹 사이트의 응답 성을 테스트 할 수있는 개발 작업 공간을 제공하는 개발자 지향 브라우저입니다. 반응 형 테스트에 걸리는 시간을 줄이기 위해 개발 된이 제품은 웹 테스터 및 개발자의 일상적인 테스트 작업을 단순화하기 위해 구축되었습니다.
주요 특징들:
- 다른 장치 뷰포트에서 즉시 테스트합니다.
- 나만의 사용자 지정 장치를 만듭니다.
- 다른 뷰포트에서 나란히 디버그합니다.
- 로컬 웹 사이트 테스트가 그 어느 때보 다 쉬워졌습니다.
- 더 빠른 디버깅을위한 내장 된 개발자 도구.
- 스크린 샷 및 비디오를 촬영하여 팀과 공유하십시오.
모바일 반응 형 테스트와 그 과제
반응 형 웹 디자인을 통합한다고해서 이야기가 끝나는 것은 아닙니다. 웹 사이트가 모든 기기에서 예상대로 표시되는지 확인하기 위해 구현을 테스트하는 것도 똑같이 중요합니다.
콘텐츠, 비디오, 이미지, 링크 등은 모두 웹 사이트를 출시하기 전에 외관 테스트를 거쳐야합니다. 장치 전체 에서뿐만 아니라 다른 브라우저와 운영 체제에서도 테스트를 수행해야합니다.
JSON 파일을 어떻게 열 수 있습니까?
예를 들어 , 웹 사이트는 iOS 또는 Windows와 비교할 때 Android에서 약간 다르게 보일 수 있습니다.
(영상 출처)
그러나 QA가 응답 성을 테스트하기 위해 직면하는 큰 과제도 있습니다. 가장 큰 문제는 화면 크기, OS 버전, 휴대폰 모드, 브라우저 및 해상도의 조합입니다. 따라서 전략을 결정하기가 어렵습니다. 다른 과제에는 테스트 시간 프레임, 도구, 테스트 우선 순위 지정 등이 있습니다.
다음은 테스트 방법을 결정하기위한 몇 가지 지침입니다.
# 1) 테스트 베드
휴대폰 크기, 브라우저, 운영 체제 및 버전의 다양한 조합에 대한 매트릭스를 만드는 것은 매우 지루하고 복잡한 작업입니다. 따라서 QA로서 BA와 제품 소유자 또는 관리자로부터 의견을받는 것이 좋습니다.
테스트 베드의 복잡성을 고려하기 때문에 테스트해야하는 버전, 크기 등을 결정하도록하는 것이 좋습니다. 관리자 또는 SCRUM 마스터가 승인하지 않은 테스트 베드를 조사하고 전략화하는 데 많은 시간을 할애 할 수 있습니다. 웹 사이트는 데스크톱, 전화 등에서 액세스 할 수 있습니다.
따라서 테스트 베드는 이러한 모든 장치에 공통되는 버전의 브라우저를 포함해야합니다. 이렇게하면 버전 변형의 복잡성을 피하고 모두에서 동일한 버전을 테스트 할 수 있습니다.
# 2) 시간 할당
반응 형 웹 사이트의 테스트에는 시간이 많이 걸리므로 테스트에 필요한 시간과 할당되는 시간에 대해 논의하고 마무리해야합니다.
이를 바탕으로 테스트 방법과 대상에 대한 계획을 준비해야합니다. 중요한 테스트 베드 조합의 범위를 테스트 할 수 있도록 테스트에 충분한 시간이 할당되었는지 확인하십시오.
# 3) 실제 장치 및 에뮬레이터
너무 많은 조합을 테스트하기 위해 실제 장치를 모두 구입하는 것은 불가능하므로 에뮬레이터와 시뮬레이터를 사용할 수 있습니다.
내 경험에 따르면 가장 중요한 것은 버전, 크기 등이며 실제 장치에서 테스트해야하지만 다소 오래된 버전과 휴대폰 크기는 에뮬레이터와 시뮬레이터에서 테스트 할 수 있습니다.
# 4) 수동 또는 자동화
테스트는 수동 및 자동화 방식을 모두 사용하여 수행 할 수 있습니다. 때로는 도구가 눈으로 볼 수있는 것을 볼 수 없기 때문에 때때로 수동 테스트도 수행해야합니다. 이러한 노력은 자동화 65 %와 수동 작업 35 %로 나눌 수 있으며 그 반대의 경우도 마찬가지입니다.
예를 들어 ,작은 링크를 클릭하는 도구는 페이지를 축소하는 도구가 아니라 손가락으로 클릭하거나 웹 페이지를 수동으로 축소하는 것과 매우 다릅니다.
# 5) 테스트 우선 순위 지정
테스트 할 항목이 많고 모든 항목을 테스트 할 수있는 것은 아니므로 테스트의 우선 순위를 올바르게 지정해야합니다. 따라서 전체 팀은 테스트 계획과 우선 순위에 동의해야합니다. 테스트 우선 순위는 BA와 제품 소유자에게 미리 전달하여 제안 사항이 있으면 검토 할 수 있도록해야합니다.
일반적으로 사용되는 운영 체제, 브라우저 및 화면 크기의 조합은 철저하고 우선 순위에 따라 테스트해야합니다. . 내 경험에 따르면 최신 모바일 OS에서 전체 테스트를 수행해야하지만 모든 사람이 최신 모바일 OS를 사용하는 것은 아니기 때문에 모든 문제가 수정되고 확인 된 후에야합니다.
웹 사이트의 반응성 테스트의 중요성
웹 사이트의 콘텐츠는 비즈니스를 홍보하는 것이며 콘텐츠가 고객의 관심을 끌지 않으면 비즈니스가 잘 번성 할 수 없습니다. 따라서 반응 형 웹 사이트를 개발한다고해서 이야기가 끝나는 것이 아니라 확인하고 확인해야합니다.
테스트는 우리가 고객에게 품질, 견고하고 사용자 친화적 인 애플리케이션을 제공하고 있는지 확인하는 데 중요한 역할을합니다. 모바일 반응 형 웹 사이트도 마찬가지입니다.
다음은 모바일 반응 형 웹 사이트 테스트의 중요성을 나타내는 몇 가지 요소입니다.
# 1) 다양한 장치, OS 및 브라우저 : 다양한 화면 크기의 모바일, 운영 체제 및 브라우저에 대해 콘텐츠 확인을 수행해야합니다. 내용이 완벽하다면 다른 사람에게도 완벽하다는 의미는 아닙니다.
# 2) 견고성 : 웹 사이트에서 콘텐츠를로드하는 데 걸리는 시간은 여러 플랫폼에서 동일해야하며 '지원되는'기기 또는 브라우저에서 느리거나 시간 초과되어서는 안됩니다. 따라서 웹 사이트의 성능 테스트는 모바일 반응 형 웹 사이트에 중요합니다.
# 3) 탐색 : 모바일 웹 사이트 또는 앱을 테스트하는 동안 발견되는 매우 일반적인 결함으로 웹 사이트의 다른 링크 사이를 탐색 할 때 페이지가 예상대로로드되지 않습니다. 때때로 링크가 누락되거나 내비게이션을 재생하는 동안 이미지가로드되지 않거나 시간 초과되는 경우가 있습니다.
# 4) 다양한 이미지 및 동영상 : 모든 유형의 이미지와 동영상이 다른 휴대 전화, 브라우저 등에서 예상대로 표시되는지 확인하려면 적절한 테스트가 필요합니다.
때때로 일부 동영상은 Android에서 잘 재생되지만 iOS에서는로드되지 않거나 일부 이미지는 모바일 운영 체제의 일부 버전에서는 깨져서 다른 버전에서는 완벽하게 표시됩니다.
이러한 문제는 테스트가 수행되지 않으면 매우 나쁜 인상을 줄 수 있습니다. 따라서 모바일 반응 형 웹 사이트 테스트는 기능, 보안 등과 같은 다른 테스트와 함께 중요합니다.
모바일 응답 성을 테스트하기위한 몇 가지 샘플 테스트 사례
일반적으로 테스터는 모바일, 브라우저, 태블릿, 랩톱 등의 창 크기를 조정하여 테스트를 시작하지만 테스트해야 할 항목이 훨씬 더 많습니다.
다음은 모바일 반응 형 웹 사이트를 테스트하는 동안 다룰 수있는 몇 가지 예제 테스트 케이스입니다. 테스트 케이스가 모든 테스트 베드 매트릭스에 대해 테스트되었는지 확인하세요.
- 콘텐츠가 화면에 맞고 잘 리거나 왜곡되지 않았는지 확인합니다.
- 비디오가로드되고 있고 깨진 링크가 없는지 확인하십시오.
- 텍스트 색상, 글꼴 등이 동일하게 유지되는지 확인합니다.
- 축소해도 웹 페이지 콘텐츠, 이미지 및 비디오가 왜곡되지 않는지 확인합니다.
- 빠른 스크롤이 콘텐츠를 왜곡하지 않는지 확인합니다.
- 링크가 제대로 작동하는지 그리고 사용자가 적절한 페이지로 이동하는지 확인하십시오.
- 웹 페이지가 시간 초과되지 않았는지 또는로드하는 데 너무 오래 걸리는지 확인하십시오.
- 가로 모드에서 세로 모드로 변경하거나 그 반대로 변경하면 그에 따라 콘텐츠가 조정되는지 확인합니다.
- .jpg, .png, .gif 등 다양한 유형의 이미지가 예상대로 표시되는지 확인합니다.
- 작은 화면 전화에서 확대 할 때 링크를 클릭 할 수 있는지 확인합니다.
- 웹 페이지 간 탐색이 콘텐츠 등을 왜곡하지 않는지 확인합니다.
모바일 반응 형 테스트 도구
모바일의 응답 성을 테스트하는 데 사용할 수있는 도구는 무료 및 유료 모두입니다.
내 경험에 따르면이 특정 유형의 테스트에서는 다양한 휴대폰, 운영 체제, 브라우저 등에 사용할 수있는 도구를 사용하는 것이 좋습니다. 다른 장치, 브라우저에 대해 다른 도구를 사용하는 것은 불가능합니다. 등
따라서 도구를 선택할 때 테스트 베드의 최대 값을 커버 할 수있는 도구를 선택하십시오.
추가 오픈 소스 모바일 반응 형 테스트 도구 :
# 1) Websiteresponsivetest.com : 이 도구는 모든 주요 웹 브라우저를 지원하며 실제 웹 사이트가 어떻게 보이는지 미리보기를 제공합니다. 웹 사이트의 응답 성 결과를 얻으려면 웹 사이트의 URL을 입력해야합니다.
# 2) Screenfly : 또한 모바일 반응 형 테스트 도구이며 Galaxy 탭, iPad 등에서 테스트하는 데 사용할 수 있습니다. 웹 사이트의 모바일 사이트를 자동으로 감지하여 동일한 사이트로 이동합니다.
# 3) VeiwPort 리사이 저 : 구성 가능한 도구이며 브라우저의 화면 크기를 사용자 정의하는 데 사용할 수 있습니다.
# 4) 응답자 : 이것은 테스트를 위해 하위 도메인을 구입할 수있는 유료 버전으로 제공됩니다. 웹 사이트의 URL을 제공함으로써이 도구는 웹 사이트의 모습을 보여줍니다.
결론
모바일 반응 형 테스트는 모든 사용자가 랩톱, 데스크톱, 태블릿 또는 스마트 폰과 같은 장치에서 최적의보기 경험을 얻을 수 있는지 확인하는 데 매우 중요합니다.
앞서 논의했듯이 콘텐츠가 사용자에게 좋게 보일 때만 더 나아가고 자 할 것이므로 다른 유형의 기능 테스트와 함께, 보안, 스트레스 등 반응 형 테스트도 매우 중요하며 가볍게 다루지 않아야합니다.
모바일 반응 형 테스트는 간단하지만 테스트 베드는 가장 복잡하고 도전적입니다. 따라서 QA는 현명하게 대처해야합니다.
다음 기사에서는 클라우드 기반 모바일 앱 테스트 서비스 제공 업체 .