사이트 감사를 위해 실적 측정항목을 수집하기 전에 몇 가지 검사를 수행하여 간단한 수정사항과 중점 영역을 파악할 수 있습니다.
유효성 검사: 아키텍처 및 코드
가능하면 성능을 측정하기 전에 간단한 버그를 수정하고 불필요한 애셋과 코드를 삭제하세요. 단, 문제와 수정사항의 전후 기록을 보관해야 합니다. 이러한 개선사항은 감사 작업의 일부가 될 수 있습니다.
사이트 아키텍처 및 애셋
사용하지 않는 기존 페이지, 콘텐츠 또는 기타 애셋과 같이 코드 저장소 및 사이트에서 쉽게 삭제할 수 있는 항목이 있나요? 분리된 페이지, 중복 템플릿, 사용되지 않는 이미지, 사용되지 않는 코드 및 라이브러리를 확인합니다.
런타임 오류
브라우저 콘솔에 보고된 오류를 확인합니다. 없어야 합니다. :)
린팅
HTML, CSS 또는 JavaScript 코드에 오류가 있나요? 워크플로에 린트 작업을 빌드하면 코드 품질을 유지하고 회귀를 방지하는 데 도움이 됩니다. 코드 편집기 플러그인으로 사용하거나 Travis와 같은 워크플로 프로세스 및 지속적 통합 도구 내에서 명령줄에서 실행할 수 있는 HTMLHint, StyleLint, ESLint를 사용하는 것이 좋습니다.
깨진 링크 및 이미지
Chrome 확장 프로그램(이 확장 프로그램이 좋음) 및 깨진 링크 검사 도구와 같은 Node 도구를 비롯하여 빌드 시간 및 런타임에 깨진 링크를 테스트하는 도구는 많습니다.
플러그인
Flash 및 Silverlight와 같은 플러그인은 보안 위험이 될 수 있으며, 이에 대한 지원은 지원 중단되었으며 휴대기기에서 작동하지 않습니다. Lighthouse를 사용하여 플러그인 확인
다양한 기기 및 컨텍스트에서 테스트
실제 사용자가 실제 기기, 여러 브라우저, 다양한 연결 환경에서 사이트를 테스트하는 것이 가장 좋습니다.
이러한 검사 중 일부는 비교적 주관적이지만 체감 성능에 영향을 미치는 문제를 식별할 수 있습니다. 예를 들어 깨진 링크는 시간을 낭비하게 하고 '응답하지 않는' 느낌을 줍니다. 읽기 어려운 텍스트는 읽는 데 시간이 오래 걸립니다.
교차 기기 테스트
다양한 표시 영역과 창 크기를 사용해 보세요. 휴대기기 1대 이상과 데스크톱 기기 1대 이상을 사용합니다. 가능하면 화면이 작은 저사양 휴대기기에서 사이트를 사용해 보세요. 텍스트를 읽을 수 있나요? 깨진 이미지가 있나요? 확대할 수 있나요? 터치 영역이 충분히 큰가요? 느린가요?
응답하지 않는 기능이 있나요? 결과를 스크린샷으로 찍거나 동영상으로 녹화합니다.
크로스 플랫폼 테스트
어떤 플랫폼을 타겟팅하나요? 사용자가 현재 사용하고 있으며 앞으로 사용할 브라우저와 운영체제에서 테스트해야 합니다.
연결
여러 타겟 네트워크 유형(연결됨, Wi-Fi, 모바일)에서 테스트합니다. 브라우저 도구를 사용하여 다양한 네트워크 조건을 에뮬레이션할 수 있습니다.
기기
사용자와 동일한 기기에서 사이트를 사용해 보세요. 다음 사진은 두 개의 서로 다른 휴대전화에 표시된 동일한 페이지를 보여줍니다.
큰 화면에서는 텍스트가 작지만 읽을 수 있습니다. 작은 화면에서 브라우저는 레이아웃을 올바르게 렌더링하지만, 확대해도 텍스트를 읽을 수 없습니다. 디스플레이가 흐릿하고 '부적절한 색조'가 있어 흰색이 흰색으로 보이지 않아 콘텐츠를 읽기 어렵습니다.
이와 같은 간단한 발견은 모호한 실적 데이터보다 훨씬 더 중요할 수 있습니다.
UI 및 UX 사용해 보기
접근성, 사용성, 가독성
모든 사용자가 사이트의 콘텐츠와 기능에 액세스할 수 있도록 하려면 사용자의 다양성을 이해해야 합니다.
Lighthouse 및 기타 도구는 특정 접근성 문제를 테스트하지만 실제 테스트보다 나은 것은 없습니다. 다양한 시나리오(예: 야외 햇빛 아래 또는 기차 안)에서 데이터를 읽고 탐색하고 입력해 봅니다. 다양한 친구, 가족, 동료에게 사이트를 사용해 보라고 요청하세요. Mac의 VoiceOver 또는 Windows의 NVDA와 같은 스크린 리더를 통해 콘텐츠를 사용해 보세요.
접근성에 관한 Udacity 과정 및 웹 기초 도움말 접근성 검토 방법에서 접근성 구현 및 검토에 관해 자세히 알아볼 수 있습니다.
접근성 감사 기록을 보관합니다. 모든 사용자에게 도움이 되는 간단한 개선사항을 적용할 수 있을 것입니다.
기본적인 UI 및 UX 문제
제대로 작동하지 않는 상호작용, 작은 창과 표시 영역에서 넘치는 요소, 너무 작은 탭 타겟, 읽을 수 없는 콘텐츠, 버벅거리는 스크롤 등 사이트에서 여러 페이지를 열고 탐색 및 모든 핵심 기능을 사용해 보세요. 기록을 보관합니다.
이미지, 오디오, 동영상
콘텐츠 오버플로, 잘못된 가로세로 비율, 잘못된 자르기, 품질 문제를 테스트합니다.
주관적인 UI 테스트
모두 관련이 있는 것은 아니지만 간단한 변경으로 리팩터링을 더 쉽게 할 수 있습니다.
- 사이트를 열었을 때 '여기서 무엇을 할 수 있는지' 바로 알 수 있나요?
- 콘텐츠를 소비하고 링크를 따라가고 싶어지나요?
- 시각적 계층 구조나 경로가 있나요? 아니면 모든 요소가 동일한 시각적 무게감을 가지고 있나요?
- 레이아웃이 어수선한가요?
- 글꼴이 너무 많나요?
- 삭제할 수 있는 이미지나 다른 콘텐츠가 있나요?
- 콘텐츠 디자인은 인터페이스 디자인만큼 중요합니다. 사이트의 텍스트 및 이미지 콘텐츠가 모바일 및 데스크톱 환경에 적합한가요? 제거할 수 있는 것이 있나요? 모바일에 적합한 글쓰기.