코로나19 사태 동안 모든 사용자가 웹사이트를 사용할 수 있도록 지원하세요

웹사이트의 핵심 기능을 항상 사용 가능하고, 액세스 가능하고, 안전하고, 사용 가능하고, 검색 가능하고, 빠르게 유지하는 방법

이 페이지에서는 웹사이트를 항상 모든 사용자가 사용할 수 있고, 액세스 가능하며, 안전하고, 사용하기 쉽게 만드는 데 도움이 되는 안내를 제공합니다.

이 페이지의 안내는 코로나19 상황에서 사용자의 안전을 지키는 데 도움이 되는 웹사이트를 지원하기 위해 단기적인 중점 사항을 전환하고 있는 Google 내 여러 부서의 팀에서 제공합니다. 이러한 Google 직원들은 중요한 정보를 찾는 사람들로부터 전례 없는 수요 증가에 직면한 사이트를 보았으며, 이들 중 다수는 웹을 거의 사용하지 않거나 전혀 사용하지 않았습니다. 이 기간 동안 사이트를 사용할 수 있고 모든 사용자가 액세스할 수 있도록 하는 것은 어려운 일입니다.

가이드

가용성, 안정성, 복원력, 안정성

사이트에 트래픽 급증이 발생하여 실패하거나 실패를 방지하려는 경우 아래 안내를 통해 문제를 신속하게 해결하거나 주요 문제가 되기 전에 감지할 수 있습니다.

  • 과부하된 서버 수정을 읽고 트래픽 급증 문제를 감지, 완화, 방지하는 방법을 알아보세요.
  • 불필요한 이미지, 동영상, 스크립트, 글꼴을 삭제합니다. 각 페이지가 사이트 사용자가 실제로 필요로 하는 기능을 제공하는 데만 집중하도록 합니다.
  • 이미지는 웹에서 비대화의 가장 큰 원인이므로 이미지를 최적화하면 서버 대역폭 사용량을 크게 줄일 수 있습니다.
  • 정적 콘텐츠를 최대한 많이 CDN으로 오프로드합니다. 일반적인 제공업체의 자세한 내용은 AWS, Azure, Cloudflare, Google Cloud, Firebase를 참고하세요.
  • CDN에 동적 이미지 압축, 텍스트 압축, JS 및 CSS 리소스의 자동 축소와 같이 쉽게 사용 설정할 수 있는 최적화가 있는지 확인합니다.
  • HTTP 캐싱을 최적화하면 최소한의 코드 변경으로 서버의 요구사항을 크게 줄일 수 있습니다. 개요는 HTTP 캐시: 첫 번째 방어선을, 구체적인 권장사항은 HTTP 캐싱 및 캐싱 권장사항을 참고하세요. Lighthouse의 효율적인 캐시 정책으로 정적 애셋 제공 감사를 사용하면 캐시되지 않는 리소스를 빠르게 감지할 수 있습니다. 리소스 유형에 따라 최신성 요구사항이 다르므로 캐싱 전략도 달라야 합니다.
  • 서비스 워커는 서버의 요구사항을 크게 줄이는 또 다른 방법이지만 상당한 기술 투자가 필요할 수 있습니다. 또한 웹사이트가 오프라인으로 작동할 수 있도록 하여 연결 없이 재방문자에게 영업시간, 전화번호, 기타 정보를 표시할 수 있습니다. Workbox는 웹사이트에 서비스 워커를 추가하는 데 권장되는 접근 방식입니다. 많은 상용구를 자동화하고 권장사항을 더 쉽게 따를 수 있으며 하위 수준 ServiceWorker API를 직접 사용할 때 흔히 발생하는 미묘한 버그를 방지하기 때문입니다.
  • 사이트 사용량이 크게 증가하는 경우 사이트가 더 매력적인 타겟이 될 수 있으므로 DDoS 공격에 대한 적절한 보호 조치가 있는지 확인하세요. 일반적인 제공업체의 자세한 내용은 AWS, Azure, Cloudflare, Google Cloud를 참고하세요.

자세한 내용은 네트워크 안정성을 참고하세요.

접근성

다양한 요구사항을 가진 더 많은 사용자가 사이트에 액세스할 수 있으므로 접근성에 집중하는 것이 그 어느 때보다 중요합니다. 아래 가이드라인에 따라 웹사이트의 핵심 기능을 모든 사용자가 이용할 수 있도록 하세요.

ID, 보안, 개인 정보 보호

중요한 수정사항을 신속하게 배포하기 위해 지름길을 택하고 싶은 유혹이 있을 수 있지만, 이로 인해 보안 허점이 생기지 않도록 항상 주의해야 합니다. 사용자는 매우 사적인 주제의 콘텐츠에 액세스해야 합니다. 웹사이트는 이 민감한 사용자 데이터를 반드시 보호하고 사용자에게 개인 식별 정보 (PII)가 안전하다는 확신을 주어야 합니다.

자세한 내용은 안전 및 보안을 참고하세요.

사용성, UI, UX

사람들은 기본적인 요구사항을 충족하기 위해 웹에 더 많이 의존하고 있습니다. 이러한 사람들 중 상당수는 웹을 자주 사용하지 않습니다. 사이트 핵심 기능의 사용성을 감사하고 최대한 간단하고 사용하기 쉬운지 확인하는 것이 좋습니다.

  • 서비스 업데이트를 명확하게 전달하는 눈에 잘 띄는 배너(X 버튼으로 삭제 가능)를 웹사이트 상단에 추가하는 것이 좋습니다. 배너에 클릭 유도 문구를 사용하여 사용자를 더 구체적인 리소스로 안내합니다. 페이지 콘텐츠의 다른 부분과 구별되는 색상과 글꼴을 사용하는 것이 좋습니다. 공감할 수 있는 글을 작성하고, 사람들의 요구에 집중하며, 어떤 서비스를 기대할 수 있는지 투명하게 공개하세요.
  • 중요 사용자 여정 (CUJ)에서 물리적 상호작용을 최소화할 수 있는 기회를 찾아 제품팀에 변경사항을 제안합니다. 예를 들어 배송 서비스에 일반적으로 서명이 필요한 경우 이를 해결할 방법이 있는지 확인하세요.
  • CUJ가 최대한 간단하고 직관적인지 다시 한번 확인하고 개선할 수 있는 부분이 있으면 제품팀에 변경사항을 제안합니다.
  • 좋은 모바일 디자인의 원칙을 검토하고 다양한 휴대기기에서 CUJ를 사용해 보면서 눈에 띄는 문제가 없는지 확인합니다. 웹을 자주 사용하지 않다가 갑자기 웹에 더 많이 의존해야 하는 사람들은 휴대기기에서 사이트에 액세스할 가능성이 높습니다.
  • 가능한 한 반응형 디자인 패턴을 사용하도록 사이트를 리팩터링합니다.
  • 양식이 효율적이고 잘 설계되었는지 확인합니다.

검색엔진 최적화

사람들은 건강 및 직업과 관련된 중요한 정보를 찾고 있습니다. 모든 검색엔진에서 사이트의 검색 가능성을 확보하는 것이 중요합니다. Lighthouse 검색엔진 최적화 감사를 사용하면 기본적인 문제를 감지할 수 있습니다. 검색엔진의 공식 블로그를 팔로우하여 최신 가이드와 업데이트를 확인하세요. Google, Bing, Baidu, DuckDuckGo, Yandex 최근 코로나19 관련 게시물:

자세한 내용은 검색 가능을 참고하세요.

성능

일부 ISP (예: 인도)에서는 가정용 인터넷 사용량이 급증하고 있으며 증가한 수요를 충족할 인프라가 없습니다. 이러한 상황에서는 웹사이트 속도가 느려질 수 있으며 이는 웹사이트 소유자의 잘못이 아닙니다. 로드 성능을 최적화하면 대역폭 감소로 인한 악영향을 상쇄할 수 있습니다. 즉, 페이지를 로드하기 위해 네트워크를 통해 전송해야 하는 바이트 수를 줄이면 대역폭 감소가 성능에 미치는 영향을 상쇄할 수 있습니다.

  • 이미지는 웹에서 비대화의 가장 큰 원인입니다. 이미지를 최적화하여 웹사이트의 대역폭 사용량을 크게 줄일 수 있습니다. Squoosh는 이미지를 빠르게 압축하는 데 도움이 되는 간단한 오픈소스 이미지 압축 도구입니다.
  • WebPageTest 또는 Lighthouse를 실행하여 최고의 성능 개선 기회를 찾습니다.
  • 텍스트 압축을 사용 설정하여 텍스트 리소스의 네트워크 크기를 줄입니다. 이는 최소한의 기술 투자로 성능을 쉽게 개선할 수 있는 방법입니다.
  • 부서 간 협업을 통한 웹사이트 속도 개선을 읽고 다른 부서와 협업하고 동의를 얻는 방법을 알아보세요.
  • 이미지에 표준화된 지연 로드를 사용하여 사용자가 실제로 보지 않을 수 있는 이미지에 대한 요청을 최소화합니다. 브라우저 호환성은 100% 가 아니지만 이 기능은 점진적 개선으로 처리할 수 있습니다. 즉, 특정 브라우저가 표준화된 지연 로드를 지원하지 않는 경우 이미지는 정상적으로 로드되어야 합니다.
  • 사이트에 더 비동기식으로 로드할 수 있는 A/B 테스트 또는 맞춤설정 스크립트가 있는지 또는 스크립트에 사용 중지할 수 있는 중요하지 않은 기능이 있는지 확인합니다. A/B 테스트 및 맞춤설정 스크립트는 페이지 콘텐츠가 로드되기 전에 실행되어야 하므로 일반적으로 완전히 비동기식으로 로드할 수 없지만, 스크립트의 일부를 더 비동기식으로 로드할 수 있는 기회가 있을 수 있습니다. 주요 렌더링 경로를 참고하여 일반적인 동기 스크립트 (렌더링 차단 스크립트라고도 함)와 페이지 로드 시간 간의 기본적인 장단점을 이해한 다음 페이지 로드 시간보다 렌더링 차단 스크립트를 우선시해야 하는지 또는 그 반대인지 결정하세요.
  • 서드 파티 코드는 대부분의 웹사이트에서 모든 요청의 절반 정도를 차지합니다. 사이트를 실행하는 데 필수적이지 않은 서드 파티 코드를 최적화하거나 일시적으로 삭제 또는 사용 중지하는 것이 좋습니다.
  • 기능 출시의 우선순위가 낮아진다면 지금이 정리하기에 완벽한 시기일 수 있습니다. 태그 관리자에서 태그를 삭제하고, 비대해진 CSS 및 JS를 정리하고, 지원 중단된 기능이나 코드를 삭제합니다. Chrome DevTools의 Coverage 탭과 Puppeteer의 Coverage 클래스를 사용하면 사용되지 않는 코드를 감지할 수 있습니다.

자세한 내용은 빠른 로드 시간을 참고하세요.