[FE/CSS] 공개 가이드에 학습 스타일이 함께 전달되는 원인 | 개발일지

분야: FE
기술 스택: CSS · React · Vinext · Lighthouse
관련 기술: 전역 스타일 · 중첩 import · 경로별 CSS 소유권

문제와 원인

/guides/sqld, /about, /privacy에도 root layout의 globals.css가 적용된다. 이 파일이 SQL·SW 학습, 계정, 시험, 관리자 스타일을 연결해 공개 페이지에도 학습용 CSS가 함께 전달된다. 현재는 기존 import를 application.css에 모았지만 root가 그 파일과 V7 스타일을 계속 읽고 있다.

재구성 전 코드

globals.css

@import "./styles/global-foundation.css";
@import "./styles/sql-learning.css";
@import "./styles/account-learning.css";
@import "./styles/sw-learning.css";
@import "./styles/accessibility.css";
@import "./styles/audit-remediation.css";

현재 코드

/* globals.css */
@import "./styles/design-system-base.css";
@import "./styles/application.css";
@import "./styles/v7-admin-complete.css";
@import "./styles/v7-learning-complete.css";
@import "./styles/v7-exams.css";

/* application.css */
@import "./sql-learning.css";
@import "./account-learning.css";
@import "./sw-learning.css";

진단 결과

로컬 CSS 소스 크기는 root import를 재귀적으로 따라가 중복 파일을 한 번씩 합산한 UTF-8 바이트다. 외부 패키지 import는 제외했다. Lighthouse 결과는 /guides/sqld의 보관된 원본 3회이며, 저장소 초기화·412×823 모바일 화면·CPU 4배·네트워크 시뮬레이션 조건이다.

소스 집계	감사 당시	현재 원본 스냅샷
연결된 로컬 CSS 파일	12개	29개
CSS 소스 크기 합계	172,793B	396,863B

감사 당시 가이드 Lighthouse	결과
전역 CSS 압축 해제 크기	147,927B
첫 화면 CSS 전송량 추정	27,962B
첫 화면 미사용 규칙의 절감량 추정	20,716B · 74.08%

소스 합계는 번들 크기와 구분하며, 절감량은 첫 화면에서 사용하지 않은 규칙에 대한 추정치다. 보고서 화면에서는 27,962B와 20,716B가 각각 27.3KiB와 20.2KiB로 표시된다.

가이드 첫 화면 CSS 전송 추정 27.3KiB·절감 추정 20.2KiB원본 보기 (새 창)