Published on

Chrome 렌더링 깨짐? GPU Rasterize 강제 해제법

Authors

서핑 중 특정 사이트에서만 글자가 깨져 보이거나, 스크롤할 때 텍스트가 떨리고, 이미지가 검게 뭉개지거나, 캔버스가 깜빡이는 현상을 겪는 경우가 있습니다. 이런 문제는 CSS나 웹앱 코드 결함일 수도 있지만, 의외로 **브라우저의 GPU 경로(하드웨어 가속, GPU Rasterization, ANGLE, 드라이버 조합)**에서 발생하는 경우가 많습니다.

이 글에서는 Chrome에서 GPU Rasterize를 “강제로” 꺼서 증상이 GPU 경로 때문인지 빠르게 판별하고, 운영 환경에서 재현/완화하는 실전 절차를 정리합니다.

GPU Rasterization이 뭔데 렌더링이 깨질까

Chrome은 대략 다음 단계로 화면을 그립니다.

  1. 스타일/레이아웃 계산
  2. 페인트(그릴 요소를 레이어로 분해)
  3. 래스터라이즈(벡터/텍스트/이미지를 픽셀로 변환)
  4. 합성(Compositing) 후 화면 출력

여기서 GPU Rasterization은 3번 래스터라이즈를 CPU 대신 GPU에서 처리하도록 하는 최적화입니다. 대부분의 환경에서 성능을 올리지만, 아래 조건에서 문제를 일으킬 수 있습니다.

  • 특정 GPU 드라이버 버그(특히 구형/기업용 이미지)
  • 멀티 모니터, HDR, 고주사율, 스케일링(125%/150%) 조합
  • 원격 데스크톱, 가상화(VDI), GPU 패스스루 환경
  • WebGL, Canvas, 영상 디코딩 가속과의 상호작용
  • Chrome 업데이트로 그래픽 백엔드가 바뀐 경우

증상이 “사이트 버그”처럼 보여도, 실제로는 GPU 렌더링 경로가 깨지는 케이스가 꽤 있습니다.

먼저 확인: 지금 GPU가 어떻게 쓰이고 있는지

원인 분리를 위해 현재 Chrome이 어떤 그래픽 경로를 쓰는지 확인합니다.

chrome://gpu 확인 포인트

주소창에 chrome://gpu를 입력해 다음 항목을 봅니다.

  • Graphics Feature Status
    • GPU rasterization: Enabled인지
    • Hardware accelerated: Enabled인지
    • Compositing: Hardware accelerated인지
  • Problems Detected
    • 드라이버 블랙리스트/폴백 여부

여기서 GPU 관련 기능이 Enabled인데 증상이 있다면, 다음 단계로 GPU Rasterize 강제 해제를 시도합니다.

재현 로그를 남기고 싶다면

같은 화면의 Log Messages 또는 chrome://media-internals(영상 문제일 때)도 참고하면 좋습니다. 문제 재현 시점의 로그를 캡처해두면, 드라이버/정책 담당자와 협업할 때 훨씬 빨라집니다.

방법 1) Chrome 플래그에서 GPU Rasterization 끄기

가장 간단한 방법입니다.

  1. 주소창에 chrome://flags/#enable-gpu-rasterization
  2. GPU rasterizationDisabled로 변경
  3. Chrome 재시작

추가로 함께 꺼보면 분리 진단에 도움이 되는 플래그들:

  • chrome://flags/#enable-zero-copy
  • chrome://flags/#use-angle
  • chrome://flags/#enable-accelerated-video-decode

단, 플래그는 버전마다 이름/동작이 바뀔 수 있고, 조직 정책에 의해 잠길 수도 있습니다.

방법 2) 실행 옵션으로 “강제” 비활성화하기

플래그로 안 되거나, 재현을 자동화해야 할 때는 실행 인자(command-line switch)가 가장 확실합니다.

Windows 바로가기 대상(Target)에 옵션 추가

Chrome 바로가기를 우클릭해 속성에서 대상에 다음을 추가합니다.

"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-gpu-rasterization

증상이 더 광범위하게 GPU 경로 문제로 의심되면 아래도 함께 시도합니다.

  • GPU 자체를 끄는 강한 옵션
    • --disable-gpu
  • 하드웨어 가속을 끄는 옵션(조합에 따라 영향)
    • --disable-accelerated-2d-canvas
    • --disable-accelerated-video-decode

macOS에서 실행

터미널에서:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-gpu-rasterization

Linux에서 실행

배포판에 따라 실행 파일이 다를 수 있지만 보통:

google-chrome --disable-gpu-rasterization

이 방식의 장점은 “사용자 환경”을 고정해서 재현할 수 있다는 점입니다. QA나 고객 지원에서 특히 유용합니다.

방법 3) 정책(Enterprise)로 고정하기

회사 PC에서 사용자마다 설정이 제각각이면 원인 분석이 어렵습니다. 조직 환경에서는 Chrome 정책으로 하드웨어 가속을 통제하는 편이 낫습니다.

다만 정책은 OS와 배포 방식(ADMX, MDM 등)에 따라 다르고, GPU rasterization만 딱 집어서 끄는 정책이 항상 제공되지는 않습니다. 실무적으로는 다음 중 하나로 접근합니다.

  • 하드웨어 가속 자체를 끄는 정책을 검토
  • 특정 GPU/드라이버 조합에서만 문제가 재현된다면 드라이버 업데이트 또는 해당 조합을 블랙리스트 처리
  • 실행 옵션을 래핑한 사내 런처(바로가기/스크립트) 배포

정책 적용 후에는 chrome://policy에서 실제로 적용됐는지 확인하세요.

“GPU Rasterize만 끄면” 해결되는 대표 증상

다음 증상은 GPU Rasterization을 끄는 것만으로도 개선되는 경우가 종종 있습니다.

  • 폰트가 두껍게 번지거나, 특정 크기에서만 깨짐
  • 스크롤 시 텍스트가 떨림/잔상
  • 요소 경계가 1px씩 흔들리는 듯한 현상
  • 이미지가 간헐적으로 검정/초록색으로 깨짐
  • 캔버스/WebGL 오브젝트가 깜빡임

반대로 아래는 GPU Rasterize를 꺼도 개선이 없을 수 있습니다.

  • CSS 레이아웃 버그(특히 서브픽셀 계산, 폰트 로딩 타이밍)
  • 사이트의 애니메이션 과다로 인한 메인 스레드 병목
  • iFrame 격리/확장 프로그램 충돌

원인 분리 체크리스트(재현을 빨리 끝내는 순서)

현장에서 시간을 아끼려면 “바로 바꿔서 확인 가능한 것”부터 합니다.

  1. 확장 프로그램 전부 끄기
  2. 시크릿 모드에서 동일 증상 확인
  3. chrome://gpu에서 GPU rasterization 상태 확인
  4. --disable-gpu-rasterization 적용 후 재현 여부 비교
  5. 여전히 문제면 --disable-gpu로 한 번 더 분리
  6. 모니터 스케일링(100%/125%/150%) 바꿔보기
  7. 드라이버 업데이트 또는 Chrome 버전 롤백/업데이트

이 순서의 핵심은 “GPU 경로 문제인지”를 5분 안에 판별하는 것입니다.

자동화/원격 진단을 위한 스크립트 예시

사내 헬프데스크나 QA에서 반복 재현이 필요하면 스크립트로 고정 실행하는 게 좋습니다.

Windows PowerShell 예시

$chrome = "C:\Program Files\Google\Chrome\Application\chrome.exe"
$arg = "--disable-gpu-rasterization --user-data-dir=$env:TEMP\chrome-gpu-test"
Start-Process -FilePath $chrome -ArgumentList $arg
  • --user-data-dir를 별도로 주면 기존 사용자 프로필(확장, 캐시) 영향 없이 깨끗한 환경에서 테스트할 수 있습니다.

macOS zsh 예시

CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
"$CHROME" --disable-gpu-rasterization --user-data-dir=/tmp/chrome-gpu-test

성능/부작용: 꺼도 괜찮을까

GPU Rasterization을 끄면 다음 변화가 있을 수 있습니다.

  • 스크롤/애니메이션이 무거워질 수 있음(특히 고해상도 디스플레이)
  • CPU 사용량 증가
  • 배터리 소모 증가(노트북)

즉, **영구 해결책이라기보다 “원인 분리 + 임시 완화책”**으로 쓰는 게 일반적입니다. 근본적으로는 드라이버 업데이트, Chrome 버전 호환성 확인, 특정 그래픽 백엔드(ANGLE) 조정 등이 필요할 수 있습니다.

개발자 관점: 내 사이트가 GPU 경로에서 깨지는지 확인하는 팁

사이트를 운영하는 입장이라면, 사용자에게 “GPU 끄세요”만 안내하기는 어렵습니다. 대신 다음을 점검하세요.

  • 텍스트/아이콘이 합성 레이어로 과도하게 승격되는지(불필요한 will-change, transform 남용)
  • 캔버스/WebGL을 쓸 때 컨텍스트 손실 처리(webglcontextlost)가 있는지
  • 고정 헤더/패럴랙스/필터(filter: blur)가 많은 페이지에서만 발생하는지

특히 모바일 Safari의 스크롤/합성 이슈는 별도의 접근이 필요합니다. iOS에서 스크롤 끊김을 겪는다면 Safari iOS 17 스크롤 끊김, CSS contain으로 해결하기도 함께 참고하면 원인 분리에 도움이 됩니다.

마무리

Chrome 렌더링 깨짐은 “웹앱 버그”처럼 보이지만, 실제로는 GPU Rasterization과 드라이버/디스플레이 조합에서 터지는 경우가 많습니다. 가장 빠른 진단은 다음 한 줄입니다.

  • --disable-gpu-rasterization

이 옵션으로 증상이 사라지면, 문제는 사이트 로직보다는 그래픽 경로에 있을 가능성이 큽니다. 그 다음 단계로는 드라이버 업데이트, Chrome 버전 교차 테스트, ANGLE 설정 조정, 조직 정책 적용 등을 통해 재발을 줄이는 방향으로 접근하세요.

추가로, 운영 환경에서 재현/원인 분리를 체계화하는 방법론은 인프라 트러블슈팅과도 결이 비슷합니다. 예를 들어 로그로 빠르게 원인을 좁히는 방식은 EKS ALB Ingress WAF 403 차단 로그로 푸는 법 같은 글에서 다루는 접근과도 통합니다.