CSS로딩9 크롬 개발자 도구 (F12, Elements탭, Inspect) 티스토리 스킨 CSS 파일을 열었더니 3,000줄이 넘어서 그냥 닫아버린 적 있으신가요? 저는 있습니다. 글 제목 폰트 하나 바꾸려고 Ctrl+F로 "title"을 검색해서 나오는 항목을 전부 열어보던 시절이요. F12 하나로 그 시간이 거의 사라집니다.CSS 위치를 모른다는 건 어떤 느낌인가스킨 편집을 처음 시작하면 가장 먼저 막히는 지점이 있습니다. "수정하고 싶은 부분은 알겠는데, 코드 어디에 있는지 모르겠다"는 것입니다. CSS 파일이 길면 길수록 이 막막함은 커지고, Ctrl+F로 뭘 검색해야 할지도 모른 채 위아래로 코드를 긁어 내리게 됩니다.제가 직접 겪어봤는데, 이 상태에서 잘못된 선택자(selector)를 건드리면 생각지 못한 곳이 무너집니다. 여기서 선택자란 CSS에서 어떤 HTML 요.. 2026. 4. 15. 구글 폰트 설정 (FOIT, preconnect, font-display) 스마트폰으로 내 블로그를 열었을 때, 텍스트가 2초 가까이 사라졌다가 갑자기 나타난 적이 있으신가요? 저는 한동안 그걸 모바일 인터넷 속도 탓으로 돌렸습니다. 그러다 PageSpeed Insights 검사에서 Google Fonts 링크가 "렌더링 차단 리소스"로 잡히는 걸 보고 나서야 원인이 다른 데 있다는 걸 알았습니다. 코드 두 줄을 고치는 것만으로 체감이 완전히 달라졌습니다.FOIT 현상, 왜 생기는 걸까요폰트가 로딩되는 동안 텍스트가 아예 보이지 않는 현상을 FOIT(Flash of Invisible Text)라고 합니다. FOIT란 브라우저가 웹 폰트를 다 받을 때까지 해당 텍스트 자체를 화면에 그리지 않는 방식으로, 특히 모바일 네트워크처럼 응답 속도가 느린 환경에서 눈에 띄게 나타납니다. .. 2026. 4. 15. CSS Minify로 블로그 속도 올리기 (Minify, PageSpeed, 백업) CSS Minify로 블로그 속도 올리기 (Minify, PageSpeed, 백업)티스토리 스킨을 오래 손대다 보면 어느 순간 CSS 파일이 감당하기 어려운 크기로 불어나 있습니다. 저도 반년 넘게 스킨을 수정하다가 파일이 4,000줄을 넘어선 걸 뒤늦게 알았습니다. 공백, 주석, 덮어쓴 속성들이 쌓인 결과였고, 그게 블로그 속도에 직접 영향을 주고 있었습니다.PageSpeed 점수가 낮게 나온 이유구글 PageSpeed Insights로 블로그를 검사해봤더니 모바일 기준 58점이 나왔습니다. "렌더링 차단 리소스 제거"라는 경고도 함께 떴는데, 솔직히 처음엔 무슨 말인지 잘 몰랐습니다. 찾아보니 CSS 파일이 600KB를 넘어서 브라우저가 페이지를 그리기 전에 해당 파일을 전부 내려받느라 지연이 생기는.. 2026. 4. 14. 사파리 브라우저 호환성 (렌더링 엔진, 크로스브라우저, 테스트 도구) 사파리 브라우저 호환성 (렌더링 엔진, 크로스브라우저, 테스트 도구)크롬에서 멀쩡하던 레이아웃이 사파리에서 완전히 무너진 경험, 혹시 있으신가요? 저도 블로그를 몇 달째 크롬으로만 테스트하다가 아이폰을 쓰는 친구한테 "네 블로그 레이아웃 다 깨졌어"라는 말을 들었습니다. 그때 처음으로 브라우저 호환성이 이론이 아닌 현실 문제라는 걸 제대로 실감했습니다.렌더링 엔진이 다르면 CSS가 다르게 보인다브라우저 호환성 문제가 왜 생기는지 한 번이라도 궁금하셨던 분이라면, 렌더링 엔진 차이부터 이해하면 훨씬 빠릅니다. 렌더링 엔진이란 HTML, CSS, JavaScript 코드를 읽어 실제 화면으로 그려내는 핵심 소프트웨어를 말합니다. 크롬과 엣지는 Blink 엔진을, 사파리는 WebKit 엔진을, 파이어폭스는 G.. 2026. 4. 14. CLS 개선 (원인 진단, 이미지 최적화, 애드센스 승인) CLS 개선 (원인 진단, 이미지 최적화, 애드센스 승인)솔직히 저는 애드센스 심사가 반려됐을 때 콘텐츠만 들여다봤습니다. 글이 부족한가, 카테고리가 문제인가, 페이지가 너무 적은가. 그런데 진짜 원인은 전혀 다른 곳에 있었습니다. CLS 점수가 0.4를 넘어 있었고, 저는 그때까지 CLS가 뭔지도 몰랐습니다. 이 글은 그 경험을 바탕으로, CLS를 어떻게 진단하고 실제로 어떻게 고쳤는지를 정리한 것입니다.CLS 원인 진단: PageSpeed Insights보다 DevTools가 정확합니다CLS(Cumulative Layout Shift)란 페이지가 로딩되는 동안 화면 요소가 예기치 않게 움직이는 정도를 수치로 나타낸 지표입니다. 여기서 CLS란 구글이 Core Web Vitals의 하나로 채택한 사용자.. 2026. 4. 14. 티스토리 페이지네이션 (기본 디자인, active 클래스, 모바일 반응형) 티스토리 페이지네이션 (기본 디자인, active 클래스, 모바일 반응형)솔직히 저는 블로그를 처음 시작하고 꽤 오랫동안 페이지네이션을 그냥 방치해뒀습니다. 회색 숫자가 줄지어 있는 티스토리 기본 디자인, 딱히 문제가 있다고 생각하지 않았습니다. 그런데 방문자 데이터를 들여다보다가 뭔가 이상하다는 걸 알아챘습니다. 2페이지로 넘어가는 비율이 생각보다 훨씬 낮았고, 그 원인이 페이지네이션에 있다는 걸 그때 처음 의심하기 시작했습니다.기본 디자인이 독자를 막고 있었다방문자가 1페이지에서 이탈하는 비율을 보면서 처음에는 콘텐츠 문제인 줄만 알았습니다. 그런데 제가 직접 다른 기기로 블로그를 열어보니 문제가 바로 보였습니다. 현재 내가 몇 페이지에 있는지 전혀 알 수가 없었습니다. 숫자들은 비슷한 회색으로 나란.. 2026. 4. 14. 이전 1 2 다음
