전체 글118 CSS Minify로 블로그 속도 올리기-Minify, PageSpeed, 백업 티스토리 스킨을 오랫동안 손대다 보면, 어느 순간 CSS 파일이 감당하기 어려운 크기로 불어납니다. 저도 반년 넘게 스킨을 수정하다 파일이 4,000줄을 넘어선 걸 뒤늦게 확인했습니다. 공백, 주석, 이미 덮어쓴 속성들이 쌓인 결과였습니다. 처음엔 그냥 뒀습니다. "언제 한 번 정리해야지"라는 생각이었는데, 그 타이밍은 스스로 오지 않았습니다. 아무도 "블로그 느려요"라고 말해주지 않으니까요. 독자들은 느리다고 느끼면 그냥 닫아버립니다. 그 사실을 나중에야 깨달았습니다.PageSpeed 점수가 58점이 나온 날구글 PageSpeed Insights로 블로그를 검사해봤더니 모바일 기준 58점이 나왔습니다. "렌더링 차단 리소스 제거"라는 항목이 경고로 떴는데, 처음엔 의미를 몰랐습니다. 알아보니 CSS 파.. 2026. 4. 14. 사파리 브라우저 호환성 - 렌더링 엔진, 크로스브라우저, 테스트 도구 크롬에서 멀쩡하던 레이아웃이 사파리에서 완전히 무너진 경험, 혹시 있으신가요? 저도 블로그를 몇 달째 크롬으로만 테스트하다가 아이폰을 쓰는 친구한테 "네 블로그 레이아웃 다 깨졌어"라는 말을 들었습니다. 그날이 아직도 생생합니다. 친구가 그냥 지나치듯 던진 말이었는데, 저는 그 자리에서 바로 아이폰을 빌려서 블로그를 열어봤고 — 진짜로 다 깨져 있었습니다. 이미 몇 달 동안 방문자들이 그 화면을 보고 있었을 거라는 생각에 식은땀이 났습니다. 나름 신경 써서 꾸몄다고 생각했던 블로그가 사실은 절반의 독자에게 부서진 채로 보이고 있었던 겁니다.그 경험을 계기로 브라우저 호환성을 제대로 공부하기 시작했는데, 알면 알수록 "이걸 진작에 알았어야 했는데"라는 생각이 들었습니다. 이 글은 그 과정에서 직접 겪은 것.. 2026. 4. 14. CLS 개선 - 원인 진단, 이미지 최적화, 애드센스 승인 애드센스 심사가 반려됐을 때 콘텐츠만 들여다봤습니다. 글이 부족한가, 카테고리가 문제인가, 페이지가 너무 적은가. 원인을 찾겠다고 글을 추가하고 카테고리를 정리하면서 몇 주를 보냈습니다. 그런데 진짜 원인은 전혀 다른 곳에 있었습니다. CLS 점수가 0.4를 넘어 있었고, 저는 그때까지 CLS가 뭔지도 몰랐습니다. 방향을 잘못 잡으면 열심히 할수록 더 멀어집니다. 이 글은 그 경험을 바탕으로, CLS를 어떻게 진단하고 실제로 어떻게 고쳤는지를 정리한 것입니다. -->CLS 원인 진단: PageSpeed Insights보다 DevTools가 정확합니다CLS(Cumulative Layout Shift)란 페이지가 로딩되는 동안 화면 요소가 예기치 않게 움직이는 정도를 수치로 나타낸 지표입니다. 구글이 Cor.. 2026. 4. 14. 티스토리 페이지네이션 - 기본 디자인, active 클래스, 모바일 반응형) 블로그를 시작하고 꽤 오랫동안 페이지네이션을 그냥 방치해뒀습니다. 회색 숫자가 줄지어 있는 티스토리 기본 디자인, 딱히 문제가 있다고 생각하지 않았습니다. 페이지네이션은 그냥 있으면 되는 거지, 뭘 더 신경 쓰나 싶었습니다. 그 판단이 틀렸다는 걸 방문자 데이터를 들여다보다가 알았습니다. 2페이지로 넘어가는 비율이 생각보다 훨씬 낮았고, 그 원인이 페이지네이션에 있다는 걸 그때 처음 의심하기 시작했습니다.페이지네이션은 블로그에서 존재감이 거의 없는 요소입니다. 그래서 오히려 방치하기 쉽습니다. 눈에 잘 띄지 않는 것들이 실은 독자 행동에 꽤 직접적인 영향을 미친다는 걸, 이 경험에서 다시 한번 확인했습니다. -->기본 디자인이 독자를 막고 있었다방문자가 1페이지에서 이탈하는 비율을 보면서 처음에는 콘텐츠.. 2026. 4. 14. CSS 스크롤바 커스터마이징 (webkit, 브라우저 호환, 사용성) - 생각보다 간단했습니다 스크롤바를 꾸미려면 JavaScript 라이브러리가 필요하다고 생각했습니다. 어떤 라이브러리를 써야 하나 검색하다가 시간을 꽤 날렸는데, 알고 보니 CSS 의사 요소 몇 줄이면 충분했습니다. 의사 요소란 HTML 태그에 직접 클래스를 붙이지 않고도 특정 부분의 스타일을 제어할 수 있는 CSS 문법입니다. 돌아보면 괜히 어렵게 생각하고 있었던 겁니다. 그 시간이 아깝기도 하고, 한편으로는 이런 식으로 삽질을 해봐야 오래 기억에 남기도 합니다.크롬, 엣지, 사파리처럼 웹킷(WebKit) 기반 브라우저에서는 ::-webkit-scrollbar라는 의사 요소로 스크롤바 전체를 제어합니다. 웹킷이란 애플이 개발하고 크롬, 사파리, 엣지 등이 공통으로 사용하는 브라우저 렌더링 엔진입니다. 크롬 계열이 전 세계 브라.. 2026. 4. 13. 기술 블로그 코드 블록 - Highlight.js, 구문 강조, 복사 버튼 기술 블로그를 쓰면서 코드를 그냥 텍스트로 붙여넣은 적이 있다. 코드인지 본문인지 구분도 안 되고, 들여쓰기도 다 무너지고, 색상도 없이 그냥 흑백 텍스트. 그 글을 나중에 다시 봤을 때 읽고 싶지가 않았다. 내가 쓴 글인데도 눈이 안 가더라. 처음엔 그게 당연한 건 줄 알았다. 기술 블로그니까 내용이 중요하지 꾸밈이 뭐가 중요하냐고. 그 생각이 얼마나 틀렸는지는 나중에야 알았다.반대로 코드 블록이 잘 정돈된 기술 글은 읽기 전부터 신뢰가 간다. 요리 레시피책에서 재료와 조리법이 명확하게 정리된 것과 그냥 글로 쭉 써놓은 것의 차이라고 할까. 같은 레시피인데 보기 좋게 정리된 쪽이 훨씬 따라 하고 싶어진다. 코드 블록도 마찬가지다. 구문 강조가 있으면 어디가 키워드고 어디가 값인지 한눈에 들어온다. 이건.. 2026. 4. 13. 이전 1 ··· 14 15 16 17 18 19 20 다음
