기타 효과 적용: 자동 어두운 테마 사용 설정, 포커스 에뮬레이션 등

Sofia Emelianova
Sofia Emelianova
GitHub

렌더링 탭 옵션의 참조 문서를 통해 페이지에 적용할 유용한 효과를 찾아보세요.

광고 프레임 강조표시

프레임이 광고로 태그되었는지 확인하는 방법은 다음과 같습니다.

  1. 이 데모에서 렌더링 탭을 열고 광고 프레임 강조 표시를 선택합니다.
  2. 빨간색으로 강조표시된 광고 프레임을 확인합니다.

빨간색으로 강조표시된 광고

포커스된 페이지 에뮬레이션

페이지에서 DevTools로 포커스를 전환하면 일부 오버레이 요소는 포커스에 의해 트리거되는 경우 자동으로 숨겨집니다. 예를 들어 드롭다운 목록, 메뉴, 날짜 선택 도구가 있습니다. check_box 포커스가 설정된 페이지 에뮬레이션 옵션을 사용하면 이러한 요소를 마치 포커스가 있는 것처럼 디버그할 수 있습니다.

포커스된 페이지를 에뮬레이션하려면 다음 안내를 따르세요.

  1. 디버깅할 요소가 있는 페이지(예: 검색창이 있는 YouTube 웹사이트)를 엽니다.

  2. 페이지에서 렌더링 탭을 열고 포커스가 설정된 페이지 에뮬레이션을 선택하고 선택 해제합니다.

    포커스된 페이지 에뮬레이션

요소 > 스타일의 작업 모음에 있는 :hov 버튼에서도 동일한 옵션을 찾을 수 있습니다.

로컬 글꼴 사용 중지

@font-face 규칙에서 local() 소스를 사용 중지하여 로컬 글꼴 대체가 예상대로 작동하는지 확인합니다.

개발자와 디자이너는 개발 중에 동일한 글꼴의 두 가지 다른 사본을 사용하는 경우가 많습니다.

  • 디자인 도구를 위한 로컬 글꼴
  • 코드용 웹 글꼴

로컬 글꼴을 사용 중지하면 다음 작업을 더 쉽게 수행할 수 있습니다.

  • 웹 글꼴 로드 성능 및 최적화 디버그 및 측정
  • CSS @font-face 규칙이 정확한지 확인
  • 웹 글꼴과 로컬 버전 간의 차이점 알아보기
기기에서 이 글꼴을 찾으면 Chrome은 Courier New로 이 문장을 렌더링합니다.

@font-face 규칙에서 누락된 local() 소스 에뮬레이션:

  1. 위 문장을 검사하고 Elements > Computed를 열고 맨 아래로 스크롤한 후 Rendered Fonts 아래의 Chrome이 로컬 파일에서 Courier New를 찾은 것을 확인합니다.

    렌더링된 글꼴: 로컬

  2. 렌더링 탭을 열고 로컬 글꼴 사용 중지를 선택한 다음 페이지를 새로고침합니다.

  3. 웹에서 찾은 Roboto의 문장을 관찰합니다.

    렌더링된 글꼴: 네트워크 리소스

자동 어두운 모드 사용 설정

어두운 모드를 구현하지 않은 경우에도 사이트가 어떻게 보이는지 확인할 수 있습니다.

Chrome 96에서는 Android의 자동 어두운 테마용 오리진 트라이얼을 도입했습니다. 이 기능을 사용하면 사용자가 운영체제에서 어두운 테마를 선택한 경우 브라우저에서 자동으로 생성된 어두운 테마를 밝은 테마의 사이트에 적용합니다.

자동 어두운 모드를 사용 설정하려면 다음 단계를 따르세요.

  1. 이 페이지에서 렌더링 탭을 열고 자동 어두운 모드 사용을 선택합니다.
  2. 어두운 모드에서 이 페이지를 확인합니다.

자동 어두운 모드 사용 설정됨

색맹 에뮬레이션

누구나 웹에 액세스하고 즐길 수 있어야 합니다. Google에서는 이를 실현하기 위해 최선을 다하고 있습니다.

Chrome DevTools를 사용하면 시각 장애가 있는 사용자가 사이트를 어떻게 보는지 확인할 수 있으므로 더 나은 서비스를 제공할 수 있습니다. 자세한 내용은 색각이상 시뮬레이션을 참고하세요.

색맹을 에뮬레이션하려면 다음 안내를 따르세요.

  1. 렌더링 탭을 엽니다.

  2. 시각 장애 에뮬레이션의 드롭다운 목록에서 다음 중 하나를 선택합니다.

    • 에뮬레이션 없음.
    • 시야 흐림.
    • 대비 감소.
    • 적색맹 (적색맹). 빨간색에 대한 인식이 낮음: 녹색, 빨간색, 노란색을 혼동함
    • 녹색맹 (녹색맹). 녹색에 대한 낮은 인식, 녹색, 빨간색, 노란색에 대한 혼동
    • Tritanopia (파란색 없음). 파란색에 대한 낮은 인식, 녹색과 파란색의 혼동
    • 색맹 (색맹). 부분적 또는 전체적으로 색각이 보이지 않는 증상입니다.

선택된 제3색맹 (청색맹)

AVIF 및 WebP 이미지 형식 사용 중지

이러한 에뮬레이션을 사용하면 개발자는 브라우저를 전환하지 않고도 다양한 이미지 로드 시나리오를 더 쉽게 테스트할 수 있습니다.

다음과 같은 HTML 코드로 최신 브라우저에 AVIF 및 WebP 형식으로 이미지를 게재하고 이전 브라우저의 경우 PNG 이미지를 대체한다고 가정해 보겠습니다.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

페이지의 모든 AVIF 이미지 (또는 마찬가지로 WebP 이미지)를 사용 중지하려면 다음 안내를 따르세요.

  1. 렌더링 탭을 열고 AVIF 이미지 형식 사용 중지를 선택합니다.
  2. 페이지를 새로고침하고 마우스를 img src 위로 가져갑니다. 현재 이미지 src (currentSrc)가 이제 대체 WebP 이미지입니다.

이미지 유형 에뮬레이션

마찬가지로 WebP 이미지를 사용 중지할 수 있습니다.