이전 모듈에서는 양식을 만들고, 사용자가 데이터를 다시 입력하지 않도록 지원하며, 양식 데이터의 유효성을 검사하는 방법을 배웠습니다. 이제 양식을 사용할 수 있는지 어떻게 확인할 수 있나요? 양식을 테스트하고 분석하여 이 질문에 답할 수 있습니다.
다른 기기에서도 양식을 사용할 수 있나요?
먼저 내 기기에서 양식이 작동하는지 확인합니다. 하지만 사용자가 사용할 수 있는 기기 유형은 다양합니다. 양식이 다른 기기에서 작동하는지 테스트하려면 어떻게 해야 하나요?
먼저 데스크톱 기기에서 양식을 테스트합니다. 그런 다음 키보드만 사용해 봅니다. 그런 다음 휴대전화에서 테스트합니다. 이제 다양한 입력 방법 (키보드, 터치, 마우스), 다양한 화면 크기, 다양한 브라우저, 다양한 운영체제를 사용하여 양식을 테스트했습니다.
테스트할 수 있는 기기가 더 있나요? 모든 도구에서 양식을 테스트합니다. 테스트할 수 있는 기기, 브라우저, 브라우저 버전, 운영체제가 다양할수록 더 좋습니다.
다양한 브라우저, 브라우저 버전, 기기, 운영체제에서 양식을 테스트하는 데 테스트 서비스를 사용할 수도 있습니다. BrowserStack은 다양한 브라우저, 기기, 운영체제에서 테스트할 수 있도록 오픈소스 프로젝트용 무료 테스트 계정을 제공합니다.
내 양식이 다른 사용자에게 적합한지 테스트하려면 어떻게 해야 하나요?
첫 번째 양식이 준비되었습니다. 제대로 작동하는지 확인하는 데 많은 시간을 할애합니다. 내 양식을 다른 모든 사용자가 사용할 수 있는지 어떻게 확인할 수 있나요? 첫 단계로 친구와 동료에게 양식을 작성해 달라고 요청할 수 있습니다.
나란히 앉거나 화면을 공유하세요. 이렇게 하면 방문자가 양식과 어떻게 상호작용하는지 확인할 수 있습니다. 고객이 양식을 작성하는 과정을 지켜봅니다. 어떤 작업을 하고 있는지, 어떤 문제가 있는지 소리 내 말해 달라고 요청합니다. 작업을 완료한 후 질문합니다. 무엇을 작성해야 하는지 명확하게 알 수 있었나요? 양식을 작성하는 데 문제가 있었나요? 명확하지 않은 부분이 있었나요? 이러한 질문은 더 나은 양식을 만드는 데 도움이 됩니다.
양식의 실적을 어떻게 측정할 수 있나요?
양식을 다른 사용자가 사용할 수 있다고 확인해 주셨습니다. 다음 단계로 양식의 실적을 측정해야 합니다. 이를 위해 사용할 수 있는 무료 도구가 있습니다. 그중 일부를 살펴보겠습니다.
PageSpeed Insights (PSI)
PSI는 사이트의 성능을 측정하고 개선 방법에 대한 힌트를 제공합니다.
직접 해보기: PageSpeed는 실험실 및 필드 데이터를 사용하여 실적 보고서를 제공합니다. 사이트 속도가 빠르다는 것은 양식을 사용할 수 있다는 첫 번째 신호입니다. 사이트가 아직 빠르지 않은가요? PSI에는 실적 개선 방법에 관한 추천이 표시됩니다.
이전에 PSI로 테스트한 사이트의 보고서를 다시 살펴보세요. 코어 웹 바이탈에 관한 정보를 확인해보세요. 사이트가 코어 웹 바이탈 기준을 충족하는 경우의 요약입니다. 코어 웹 바이탈은 사용자의 웹페이지 경험 방식을 이해하는 데 도움이 됩니다.
등대
Lighthouse를 사용하면 성능, 검색엔진 최적화 (SEO), 권장사항, 접근성 문제를 파악할 수 있습니다.
Lighthouse를 사용하는 방법에는 여러 가지가 있습니다. 한 가지 방법은 DevTools에서 직접 앱을 실행하는 것입니다. Chrome에서 양식 URL을 열고 DevTools를 열고 Lighthouse 탭으로 전환한 다음 감사를 실행합니다.
PSI의 성능 측정항목이 표시됩니다. 또한 Lighthouse는 검색엔진 최적화, 권장사항, 접근성 문제를 기준으로 사이트를 확인합니다. 양식 컨트롤에 라벨을 연결하는 것을 잊으셨나요? Lighthouse에서 경고를 표시하고 문제 해결 가이드를 제공합니다.
일반적인 문제를 식별하는 도구
일반적인 문제를 파악할 수 있는 다양한 도구가 있습니다.
한 가지 방법은 양식 문제 해결 도구 확장 프로그램을 사용하는 것입니다.
누락된 autocomplete 속성, 비표준 속성, 누락되었거나 비어 있는 라벨 등에 대해 경고합니다.
WAVE 또는 axe와 같은 접근성 평가 도구를 사용할 수도 있습니다. 이러한 도구는 라벨 누락, 라벨과 양식 컨트롤 간의 연결 누락, 색상 대비 부족, 기타 여러 접근성 문제를 알려줍니다.
양식 환경을 어떻게 모니터링할 수 있나요?
양식의 실제 사용자 경험을 모니터링하면 새로운 문제를 빠르게 식별하는 데 도움이 됩니다. 양식을 모니터링하는 방법을 알아보겠습니다.
PSI
환경을 모니터링하는 한 가지 방법은 PSI를 다시 사용하는 것입니다. PSI API를 사용하여 자체 모니터링 도구를 빌드할 수 있습니다. PageSpeed Insights API에서 방법을 확인할 수 있습니다.
PSI에는 Chrome 사용자 환경 보고서(CrUX) 데이터 세트의 데이터가 포함됩니다(지정된 URL에서 사용 가능한 경우). 이렇게 하면 보고서에서 직접 필드 데이터를 볼 수도 있습니다.
등대
Lighthouse는 명령줄 도구, 노드 모듈 또는 Lighthouse CI 도구와 함께 사용할 수 있습니다. Lighthouse CI를 사용한 성능 모니터링에서는 GitHub Actions와 같은 지속적 통합 시스템에 Lighthouse를 추가하는 방법을 설명합니다.
사이트를 측정하고 모니터링하는 데 사용할 수 있는 tools는 매우 많습니다. 일부는 웹 도구로 사용할 수 있고, 일부는 명령줄에서 감사를 실행할 수 있고, 일부는 도구에 통합할 수 있는 API를 제공합니다.
양식을 분석하는 방법
실제 사용자를 대상으로 양식을 테스트하고 양식을 측정하고 모니터링하는 방법을 알아봤습니다. 사용자에 대한 통계 및 사용자가 양식과 상호작용하는 방식에 대한 통계는 어떻게 수집할 수 있나요? 분석 도구를 사용할 수 있습니다. 그중 하나를 살펴보고 작동 방식을 살펴보겠습니다.
분석
사용할 수 있는 도구 중 하나는 Google 애널리틱스 (GA)입니다. 추적 코드를 설정하고 나면 사이트의 각 페이지에 포함할 자바스크립트 스니펫을 가져옵니다. 여기에서 사람들이 사이트를 어떻게 사용하는지 알 수 있습니다.
내 양식이 있는 페이지를 방문하는 사용자는 몇 명인가요? 몇 명이 양식을 작성하고 다음 페이지로 이동하나요? 분석 도구를 사용하면 이러한 질문에 대한 답을 얻을 수 있습니다.
고급 애널리틱스 보고서를 설정할 수도 있습니다. 제출 버튼을 클릭한 사용자 수를 추적하고 싶으신가요? 이벤트를 정의하고 통합하여 이를 분석할 수 있습니다.
다양한 분석 도구를 사용할 수 있습니다. 미니멀리즘적인 스타일도 있고, 다양한 개별 맞춤형 옵션을 제공하는 곳도 있습니다. 다양한 도구를 사용해 보고 요구사항에 가장 적합한 것을 찾아보세요.
이해도 테스트
테스트 양식에 관한 지식 테스트
필드 데이터란 무엇인가요?
RUM은 다음에서 측정항목을 수집합니다.