FastAPI 프론트엔드 최적화: 모바일 스압 게시글의 스크롤 렉(Lag)과 CLS(누적 레이아웃 이동) 해결하기

👤 인스피

조회 수 11

1. 스크롤 렉(Lag)의 주범: 브라우저를 괴롭히는 '무식한 줄바꿈'

모바일 기기에서 텍스트가 꽉 찬 긴 글을 스크롤할 때 프레임이 뚝뚝 끊기는 가장 큰 이유는 브라우저의 렌더링 엔진(CPU)이 '단어 줄바꿈'을 실시간으로 계산하느라 과부하가 걸리기 때문입니다.

기존에는 텍스트가 화면 밖으로 삐져나가는 것을 막기 위해 무작정 break-all 속성을 썼습니다. 하지만 한국어 텍스트에 이 속성을 남용하면 단어의 중간이 뚝뚝 끊기면서 가독성이 떨어질 뿐만 아니라, 렌더링 연산 비용이 폭증합니다. 저는 이 브라우저 과부하를 막기 위해 CSS 마스터 파일에 한국어 표준 줄바꿈 규격을 전역으로 적용했습니다.

이 간단한 속성 변경(keep-all)만으로도 모바일 관성 스크롤이 놀라울 정도로 부드러워졌고, 텍스트가 단어 단위로 예쁘게 끊어지며 '깔끔한 디자인(Clean design)'을 완성할 수 있었습니다.

2. 크롤러가 만든 '투명 테이블 감옥'에서 동영상 구출하기

다른 사이트(디시인사이드, 에펨코리아 등)에서 수집된 게시글이나 과거의 에디터로 작성된 글들을 보면, 영상(video)을 감싸기 위해 겉으로 보이지 않는 투명한 <table> 태그를 사용하는 경우가 매우 많습니다. 문제는 이 구형 테이블 구조가 모바일 화면(360px)에 들어오면 표 크기가 고정되어 동영상이 화면 우측을 뚫고 나가버린다는 것입니다.

이 모바일 레이아웃 붕괴를 막기 위해, 최신 CSS의 강력한 무기인 :has() 가상 클래스를 도입했습니다. 자바스크립트로 DOM을 일일이 조작할 필요 없이, CSS만으로 "내부에 영상을 품고 있는 테이블"을 정확히 찾아내어 족쇄를 풀어버렸습니다.

이 마법 같은 :has() 코드를 통해 정상적인 정보성 표(Data Table)의 레이아웃은 그대로 유지하면서, 오직 동영상을 가두고 있던 비정상적인 테이블 껍데기만 display: block으로 해체하여 모바일 화면에 100% 꽉 차는 쾌적한 뷰를 만들어냈습니다.

3. FOUC (하얀 눈뽕) 방지와 CLS 최적화

마지막으로, 사용자가 사이트에 들어올 때 화면이 잠깐 하얗게 번쩍였다가 다크 모드로 변하는 FOUC(Flash of Unstyled Content) 현상을 완벽하게 잡았습니다. 이 현상은 구글 애드센스 심사 봇이 사이트의 품질(UX)을 깎아내리는 대표적인 요인 중 하나입니다.

이를 해결하기 위해 <head> 태그 가장 위쪽에 외부 CSS가 로드되기 전에 즉각적으로 실행되는 짧은 차단형 자바스크립트를 삽입했습니다.

이렇게 하면 브라우저가 HTML을 읽기 시작하는 0.001초의 순간에 로컬 스토리지(localStorage)를 확인하여 다크 모드 클래스(dark-theme)를 즉시 덮어씌우므로, 유저의 눈을 피곤하게 하는 눈뽕 현상이 100% 사라집니다.

여기에 더해, 스크롤을 내릴 때 이미지 로딩으로 인해 화면이 덜컹거리는 유격(Layout Shift)을 막기 위해 이미지와 iframe의 터치 액션을 분리하여 CSS에 명시해 주었습니다.

맺으며: '눈에 보이는 것'이 결국 SEO의 완성이다

서버 봇 방어와 백엔드 트래픽 튜닝이 웹사이트의 '뼈대'를 지키는 일이라면, 오늘 진행한 프론트엔드 CSS 최적화와 모바일 레이아웃 대응은 유저와 구글 심사관에게 내보이는 사이트의 '피부'를 가꾸는 일입니다.

2026년 이후의 구글 애드센스와 검색 엔진은 "모바일에서 유저가 글을 읽기 편한가?(Mobile-friendly)", 그리고 "화면이 덜컹거리지 않는가?(CLS 0점)"를 매우 엄격하게 평가합니다. 백엔드에서 내려준 데이터를 단순히 화면에 뿌리는 데 그치지 않고, 외부 크롤러의 비정상적인 테이블 구조까지 CSS로 우아하게 해체하는 집요한 UX 최적화 과정이야말로 1인 개발자가 애드고시를 가장 확실하게 통과할 수 있는 필승 전략일 것입니다.

❓ 자주 묻는 질문 (FAQ)

Q1. :has() 가상 클래스는 오래된 구형 브라우저에서는 작동하지 않지 않나요?

A. 맞습니다. :has()는 CSS의 혁명이지만 구형 사파리나 구형 크롬에서는 지원되지 않을 수 있습니다. 하지만 현재 글로벌 모바일 브라우저 점유율의 90% 이상이 이미 :has()를 완벽하게 지원하고 있습니다. 따라서 자바스크립트(JS)로 무겁게 DOM을 스캔하며 레이아웃 이동(CLS)을 유발하는 것보다, CSS :has()를 사용하여 네이티브 렌더링 속도로 즉시 해결하는 것이 '모바일 최적화' 관점에서는 압도적으로 유리합니다.

Q2. FOUC를 막는 스크립트를 <head>에 넣으면 페이지 로딩이 느려지지 않나요?

A. 외부 스크립트 파일(<script src="...">)을 불러온다면 네트워크 비용이 발생해 로딩이 느려질 수 있습니다. 하지만 위 예시처럼 <head> 내부에 인라인(Inline)으로 작성된 극도로 짧은 자바스크립트는 지연 시간(Latency)이 0에 가까우며, 오히려 브라우저가 화면을 두 번 그리는 리페인트(Repaint) 과정을 생략하게 만들어 주기 때문에 최종적인 체감 로딩 속도는 훨씬 빨라집니다.

Q3. 모바일에서 스크롤을 막는 overflow-x: hidden은 무조건 좋은 건가요?

A. 양날의 검입니다. 사이트 전체 래퍼(Wrapper)에 overflow-x: hidden을 남용하면, 스마트폰의 네이티브 관성 스크롤(부드럽게 밀려 내려가는 느낌)이 깨지거나 iOS 사파리에서 스크롤이 아예 멈추는 버그가 자주 발생합니다. 저는 이를 해결하기 위해 최상단 body, html { width: 100%; }로 네이티브 스크롤을 복구하고, 가로 여백 차단용 클래스(.site-wrapper)에만 overflow-x 속성을 제한적으로 격리하여 적용했습니다.