새 웹사이트에서 품질 보증(QA) 테스트를 실행하는 방법

소프트웨어 제품 및 비디오 게임과 같은 웹사이트는 많은 테스트가 필요합니다. 오류, 버그 및 깨진 비트는 잠재 고객을 실행하도록 보장합니다. 그래서 오늘은 새 웹사이트를 시작할 때 이러한 문제를 방지하는 방법을 살펴보고 있습니다.

웨비나 보기

이 기사는 OnPath Testing의 설립자이자 CEO인 QA 전문가인 Brian Borg와 함께 진행한 웨비나를 기반으로 합니다. OnPath Testing은 우리의 클라이언트이자 새로운 웹사이트를 시작할 때 QA 테스트를 실행하는 데 도움을 주는 파트너입니다. Brian은 소프트웨어 테스팅 전문가이자 좋은 에그입니다.

여기에서 원본 녹음을 볼 수 있습니다.

품질보증이란 무엇입니까?

QA 테스트는 웹사이트(또는 기타 소프트웨어)의 기능을 확인합니다.

웹사이트의 경우 QA 테스터는 먼저 기능에 중점을 두지만 디자인, 성능, 보안 및 규정 준수의 유용성에도 중점을 둡니다.

무엇을 테스트할지 결정하는 방법

테스트에는 웹사이트와 사용자에 대한 매우 사려 깊고 체계적인 이해가 필요합니다. 한 발 물러서서 10,000피트 관점에서 생각해야 합니다.

다양한 각도에서 스스로에게 질문하십시오. 우리 웹사이트에 누가 올 가능성이 있습니까? 그들은 어디에서 오는가? 어떤 지리학? 그들은 어떤 장치에서 이것을 볼 수 있습니까? 어떤 브라우저? 어떤 운영 체제? 누군가가 귀하의 웹사이트와 상호작용할 때 귀하의 웹사이트는 무엇을 합니까? 양식을 작성하면 어떻게 되나요? 받은 편지함에 이메일이 오길 기대합니까? 페이지에 감사 메시지가 표시되나요?

테스트 계획 세우기

이러한 테스트를 실행하려면 기본적으로 영광스러운 체크리스트인 세부적인 테스트 사례로 테스트 계획을 작성하십시오. 중요한 것을 놓치지 않도록 정직하게 유지합니다. 이상적으로는 SDLC(소프트웨어 개발 수명 주기) 도구에 포함됩니다. 그러나 Excel과 같은 항목에서 테스트를 추적할 수 있습니다.

위의 예에서 우리는 도메인과 기능을 보고 있음을 알 수 있습니다. 왼쪽에는 테스트 사례가 있고 위쪽에는 브라우저, 운영 체제 및 장치가 있습니다. 테스트를 추적하는 이 방법은 수정 사항(회귀 테스트)을 다시 확인하고 주요 이해 관계자에게 테스트 메트릭에 대해 보고할 수 있음을 의미합니다.

요점은 의사 소통이 명확하고 모호하지 않다는 것입니다. 그렇게 하면 수정 사항이 효과적일 수 있습니다.

QA 테스트 도구

테스트 추적 및 관리를 위해 이러한 도구 중 일부를 사용해 보십시오(우리는 Articulate에서 Notion을 사용하지만 마일리지는 다를 수 있음).

• 지라
• 테스트 레일
• 버그질라
• 트렐로
• 테스트 링크
• 개념

이 블로그의 절반 이상에 대한 모든 크레딧은 Brian에게 있습니다. 이제 고객을 위한 웹사이트 구축에 대한 Articulate의 경험에서 얻은 몇 가지 통찰력이 있습니다.

웹사이트에서 테스트해야 하는 8가지 일반적인 사항

1. 로렘 입숨

작가와 디자이너는 일반적으로 웹사이트를 구축할 때 'Lorem ipsum' 자리 표시자 사본을 사용합니다. 그런 다음 교체하는 것을 잊습니다. 철저한 검색을 실행하여 lorem ipsum이 남아 있는지 확인하십시오.

2. 누락된 페이지

이미지에 대한 GitHub의 모자 팁.

페이지 URL을 매핑하여 이전 사이트에서 새 사이트로 제대로 리디렉션하지 않으면 링크가 끊어지고 페이지가 누락됩니다. URL 리디렉션은 새로운 웹사이트를 시작하는 데 있어 정말 중요한 부분입니다. 메뉴에서 깨진 링크의 여러 사례를 보았습니다. 매우 자주 메뉴 링크는 하드 코딩된 방식 때문에 개발 테스트 페이지에 연결됩니다.

3. SSL 오류

Google은 SSL 오류가 있는 사이트를 처벌합니다. 테스트하지 않는 한 이것을 눈치채지 못할 가능성이 큽니다.

HubSpot 사이트의 문제 중 하나는 대부분의 경우 기본 apex 도메인에서 HubSpot 웹 사이트를 호스팅할 수 없다는 것입니다. 즉, articulatemarketing.com에는 HTTPS 코드가 있을 수 없습니다. www.articulatemarketing.com이어야 합니다. 이 경우 apex 도메인에서 www 하위 도메인으로 리디렉션을 수행해야 합니다. 리디렉션을 올바르게 설정하지 않으면 암호화되지 않고 SSL 오류가 발생합니다.

4. 뚱뚱한 이미지

디자이너가 16MB 그래픽 파일을 업로드합니다. 광고판에 올릴 수 있습니다. 귀하의 웹사이트에는 자리가 없습니다. 대신 이미지가 300KB 미만인지 확인하고 JPEG 또는 더 나은 SVG를 사용하십시오.

HubSpot에 있다면 Fizz+Ginger 앱을 사용하여 이미지를 압축할 수 있습니다.

5. Google에서 숨김

사이트를 Google에 게시하지 않는 것은 의외로 흔한 일입니다. 우리가 고객의 웹사이트를 인수하여 이미 Google Search Console 목록을 갖고 있는 경우는 매우 드뭅니다. 귀가 먹먹해진다면 여기로 이동하여 사이트 맵에 대해 알아보세요.

또한 검색 엔진에서 중요한 페이지를 차단하는 robots.txt가 있는 사이트를 인수하기도 합니다. 특정 페이지에서 가시성을 제거 하고 싶을 수 있습니다. 그러나 잘못 구성된 경우 사람들이 Google에서 찾을 수 있기를 바라는 페이지를 숨기는 것 입니다.

주요 팁: WordPress 사이트를 개발하는 경우 시작 후 '검색 엔진이 이 사이트를 인덱싱하지 못하도록 차단'을 체크하지 않도록 주의하십시오.

6. 브라우저 호환성

이것은 오늘날보다 더 큰 문제였습니다. Internet Explorer는 종종 산업 표준과 호환되지 않는 원인입니다. 일반적으로 최신 버전의 Chrome 또는 Safari에서 편안하게 실행하고 있다면 다른 브라우저에서도 문제가 없을 수 있지만 여전히 테스트할 가치가 있습니다. 매우 오래된 브라우저를 수용하려고 하지 마십시오. 노력할 가치가 없습니다.

7. 모바일 응답성

트래픽의 약 1/3이 모바일에서 발생합니다. 웹에서 인터넷 트래픽의 절반 이상이 모바일입니다. Google은 모바일 우선 인덱싱을 수행합니다. 모바일은 한마디로 미래입니다.

Google의 모바일 친화적 테스트를 실행하여 시작하되 여기서 멈추지 마십시오. 드롭다운 메뉴 및 팝업과 같은 항목에 대해 다양한 장치 및 화면 크기를 확인합니다.

주요 팁: AMP(Accelerated Mobile Pages)는 모바일에서 페이지를 번개처럼 빠르게 만드는 방법이지만 가시성, 서식, 디자인 및 레이아웃에 대한 제어권을 많이 잃게 됩니다. 하지만 구글의 최근 알고리즘 업데이트로 인해 트래픽이 급감한다면 켜두는 것이 좋을 것 같습니다.

8. 어디에도 가지 않는 양식

모든 양식, 특히 연락처 페이지 양식이 누군가에게 전달되었는지 확인하십시오. HubSpot의 CRM 소프트웨어는 양식 작성을 기록하지만 비즈니스 사람들이 누군가 연락을 시도하고 있음을 알 수 있도록 알림 시스템을 설정하는 것은 귀하에게 달려 있습니다.

마지막 메모

우리는 데이터 중심의 세부 지향적인 마케팅 대행사이므로 QA 테스트의 엄격한 원칙을 선호합니다.

테스트 서비스에 대해서는 OnPath Testing에 문의하거나 새 웹사이트가 필요한 경우 당사 컨설턴트에게 문의하십시오.

우리는 당신에게 다음과 같은 생각을 남길 것입니다.

'테스트는 익명에게 상상할 수 없는 일이 일어나지 않도록 하기 위해 보이지 않는 것과 모호한 것을 비교하는 무한한 과정입니다.'

— 제임스 바흐