블로그최적화12 블로그 PWA 전환 (manifest, 서비스워커, Workbox) 파일 하나만 추가하면 블로그가 앱처럼 바뀐다는 말, 믿으셨나요? 저도 그렇게 믿었습니다. 실제로 해보니 그 파일 하나가 시작이 아니라 끝이었고, 진짜 작업은 그다음부터였습니다. 재방문율을 올려보려고 시작한 PWA 전환이 어디서 막히고, 어떻게 풀렸는지 솔직하게 정리했습니다.manifest.json, 정말 파일 하나로 끝날까요?PWA(Progressive Web App)라는 말을 처음 들었을 때 저는 꽤 단순하게 생각했습니다. 여기서 PWA란 웹사이트를 마치 네이티브 앱처럼 설치하고 사용할 수 있게 만드는 기술 규격으로, 별도의 앱스토어 없이 브라우저 주소창만으로 배포가 가능한 방식입니다. "이거면 블로그 재방문율 올릴 수 있겠다"는 생각으로 시작했는데, 첫 관문인 manifest.json부터 예상보다 손.. 2026. 7. 7. CSS Grid 비교표 (반응형, 접근성, 추천강조) 제품 리뷰 포스팅에 비교표를 처음 넣었을 때, HTML table 태그로 만들었다가 모바일에서 완전히 무너지는 걸 보고 멍했습니다. 열이 세 개를 넘자마자 가로 스크롤이 생겼고, 독자 대부분은 그냥 표를 무시하고 지나쳤습니다. 그때부터 CSS Grid 기반 비교표로 전환했는데, 생각보다 챙겨야 할 게 많았습니다. 반응형만 해결되면 끝인 줄 알았는데, 접근성과 SEO까지 얽혀 있었습니다.HTML table이 모바일에서 무너지는 이유일반적으로 표 형태의 데이터는 HTML table 태그로 만드는 게 정석이라고 알려져 있습니다. 저도 처음엔 그렇게 생각했습니다. 그런데 제가 직접 써봤는데, 열이 세 개를 넘어가는 순간 모바일 화면에서 테이블이 뷰포트(viewport) 바깥으로 밀려나기 시작했습니다. 뷰포트란 .. 2026. 6. 29. CSS 파일 3,000줄에서 원하는 곳 찾는 법, F12 하나면 됩니다 티스토리 스킨 CSS 파일을 열었더니 3,000줄이 넘어서 그냥 닫아버린 적 있으신가요? 저도 있습니다. 제목 폰트를 바꾸려고 Ctrl+F로 "title"을 검색했더니 수십 개가 튀어나왔고, 어느 게 내가 바꾸려는 제목인지 알 수가 없었습니다. 하나씩 바꾸고 저장하고 확인하고 되돌리는 작업을 몇 시간 동안 반복했습니다. F12를 제대로 알고 나서 그 시간이 거의 사라졌습니다.돌이켜보면 그때 제가 했던 방식은 눈을 감고 찾는 것과 다름없었습니다. 원하는 곳이 어딘지 모른 채 전체를 뒤지는 거죠. F12는 그 과정을 완전히 뒤집어놓습니다.코드 위치를 모를 때의 막막함스킨 편집을 처음 시작하면 반드시 막히는 지점이 있습니다. "어디를 고쳐야 하는지는 아는데, 코드가 어디에 있는지 모른다"는 상황입니다. CSS.. 2026. 4. 15. 스마트폰에서 글씨가 사라졌다 나타나는 현상, 원인은 폰트였습니다 스마트폰으로 블로그를 열었을 때 텍스트가 2초 가까이 아예 안 보이다가 갑자기 뜨는 현상을 경험한 적 있으신가요? 저는 한동안 모바일 인터넷 속도 탓을 했습니다. Wi-Fi 연결 상태가 좋을 때도 같은 증상이 반복됐고, 그제야 "이건 네트워크 문제가 아닐 수 있다"는 생각이 들었습니다. PageSpeed Insights에서 구글 폰트 링크가 "렌더링 차단 리소스"로 잡히는 걸 보고 나서야 원인이 다른 곳에 있다는 걸 알았습니다. HTML 설정 두 줄을 바꾸는 것으로 체감이 달라졌습니다.사실 이 문제를 처음 발견했을 때 꽤 허탈했습니다. 폰트 설정 두 줄 문제로 방문자들이 빈 화면을 보고 있었다는 게 믿기지 않았거든요. 하지만 그게 현실이었습니다. 그래서 이 경험을 그냥 지나치지 않고 정리하기로 했습니다... 2026. 4. 15. CSS Minify로 블로그 속도 올리기-Minify, PageSpeed, 백업 티스토리 스킨을 오랫동안 손대다 보면, 어느 순간 CSS 파일이 감당하기 어려운 크기로 불어납니다. 저도 반년 넘게 스킨을 수정하다 파일이 4,000줄을 넘어선 걸 뒤늦게 확인했습니다. 공백, 주석, 이미 덮어쓴 속성들이 쌓인 결과였습니다. 처음엔 그냥 뒀습니다. "언제 한 번 정리해야지"라는 생각이었는데, 그 타이밍은 스스로 오지 않았습니다. 아무도 "블로그 느려요"라고 말해주지 않으니까요. 독자들은 느리다고 느끼면 그냥 닫아버립니다. 그 사실을 나중에야 깨달았습니다.PageSpeed 점수가 58점이 나온 날구글 PageSpeed Insights로 블로그를 검사해봤더니 모바일 기준 58점이 나왔습니다. "렌더링 차단 리소스 제거"라는 항목이 경고로 떴는데, 처음엔 의미를 몰랐습니다. 알아보니 CSS 파.. 2026. 4. 14. 사파리 브라우저 호환성 - 렌더링 엔진, 크로스브라우저, 테스트 도구 크롬에서 멀쩡하던 레이아웃이 사파리에서 완전히 무너진 경험, 혹시 있으신가요? 저도 블로그를 몇 달째 크롬으로만 테스트하다가 아이폰을 쓰는 친구한테 "네 블로그 레이아웃 다 깨졌어"라는 말을 들었습니다. 그날이 아직도 생생합니다. 친구가 그냥 지나치듯 던진 말이었는데, 저는 그 자리에서 바로 아이폰을 빌려서 블로그를 열어봤고 — 진짜로 다 깨져 있었습니다. 이미 몇 달 동안 방문자들이 그 화면을 보고 있었을 거라는 생각에 식은땀이 났습니다. 나름 신경 써서 꾸몄다고 생각했던 블로그가 사실은 절반의 독자에게 부서진 채로 보이고 있었던 겁니다.그 경험을 계기로 브라우저 호환성을 제대로 공부하기 시작했는데, 알면 알수록 "이걸 진작에 알았어야 했는데"라는 생각이 들었습니다. 이 글은 그 과정에서 직접 겪은 것.. 2026. 4. 14. 이전 1 2 다음
