티스토리5 AMP 적용기 (규격 제약, 유지보수, Core Web Vitals) AMP만 적용하면 구글 검색 상단에 올라갈 수 있다고 믿었습니다. 그래서 며칠 밤을 새워 블로그 주요 글들을 AMP 버전으로 다시 짰는데, 결과는 기대와 꽤 달랐습니다. 이 글은 그 경험을 바탕으로 AMP가 실제로 어떤 기술이고, 왜 많은 개발자들이 지금 AMP를 걷어내고 있는지를 담았습니다.AMP 규격, 실제로 얼마나 까다로울까?AMP(Accelerated Mobile Pages)란 구글이 주도해 만든 모바일 최적화 HTML 프레임워크입니다. 여기서 AMP란 단순히 "빠른 페이지"가 아니라, 구글이 정한 특정 HTML 규격을 완전히 준수해야만 인정받는 별도의 기술 표준입니다. 일반 HTML을 조금 손보는 수준이 아니라, 사실상 페이지를 처음부터 다시 짜야 하는 수준이라는 게 제가 직접 써봤을 때 가장 .. 2026. 7. 6. 블로그 계산기 만들기 (이벤트 처리, AI 프롬프팅, 유지보수) 블로그에 인터랙티브 계산기를 넣었더니 포스팅 체류 시간이 두 배 이상 늘었습니다. 처음엔 반신반의했는데, 독자들이 값을 바꿔가며 직접 계산해보는 경험 자체가 콘텐츠가 된다는 걸 그때 처음 실감했습니다.이벤트 처리, 생각보다 어렵지 않았습니다계산기를 블로그에 처음 넣어보려 했을 때, 가장 막막했던 부분이 바로 이벤트 처리(Event Handling)였습니다. 여기서 이벤트 처리란 사용자가 버튼을 클릭하거나 값을 입력하는 행동에 반응해 JavaScript가 특정 함수를 실행하도록 연결하는 구조를 말합니다. 요즘 워드프레스나 티스토리 블로그에서 "버튼을 눌렀을 때 뭔가 일어나는" 동작은 거의 다 이 구조로 작동한다고 보면 됩니다.제가 직접 써봤는데, onclick 속성을 HTML 태그에 직접 써서 함수를 호출.. 2026. 6. 30. CSS Grid 비교표 (반응형, 접근성, 추천강조) 제품 리뷰 포스팅에 비교표를 처음 넣었을 때, HTML table 태그로 만들었다가 모바일에서 완전히 무너지는 걸 보고 멍했습니다. 열이 세 개를 넘자마자 가로 스크롤이 생겼고, 독자 대부분은 그냥 표를 무시하고 지나쳤습니다. 그때부터 CSS Grid 기반 비교표로 전환했는데, 생각보다 챙겨야 할 게 많았습니다. 반응형만 해결되면 끝인 줄 알았는데, 접근성과 SEO까지 얽혀 있었습니다.HTML table이 모바일에서 무너지는 이유일반적으로 표 형태의 데이터는 HTML table 태그로 만드는 게 정석이라고 알려져 있습니다. 저도 처음엔 그렇게 생각했습니다. 그런데 제가 직접 써봤는데, 열이 세 개를 넘어가는 순간 모바일 화면에서 테이블이 뷰포트(viewport) 바깥으로 밀려나기 시작했습니다. 뷰포트란 .. 2026. 6. 29. 블로그 프로그레스 바 - scroll 이벤트, requestAnimationFrame, 완독률 방문자 대부분이 글의 30% 지점에서 이탈하고 있었다. 오랜 시간 공들여 쓴 글인데 스크롤 깊이 지표가 그걸 보여줬을 때 솔직히 좀 허탈했다. 숫자가 나를 판단하는 것 같은 느낌이랄까. 그런데 동시에 글이 문제인지 구조가 문제인지 알 수 없어서, 일단 독자가 어디까지 읽었는지 눈으로라도 보여주는 장치를 달아보고 싶었다.프로그레스 바가 완독률을 높인다는 보장은 어디에도 없었지만, 달기 전에 효과를 따지는 건 써보지도 않고 리뷰를 쓰는 것과 마찬가지라 일단 만들어보기로 했다. 상단에 얇은 바 하나 올리는 게 뭐가 어렵겠냐 싶었는데, 실제로 해보니 생각보다 손이 꽤 많이 갔다.scroll 이벤트와 requestAnimationFrame 사이에서 배운 것처음 구현할 때 scroll 이벤트 핸들러 안에서 바로 D.. 2026. 4. 28. CSS 폰트 가독성 - 콘텐츠가 아니라 설정이 문제였다 제 글이 재미없어서 독자가 안 읽는다고 생각했습니다. 통계가 나빠도 그냥 글을 더 잘 써야겠다는 방향으로만 생각했고, 설정 자체를 의심해본 적이 없었습니다. 그러다 어느 날 직접 스마트폰으로 제 블로그를 열어봤는데, 두 문단도 채 읽기 전에 눈이 불편해졌습니다. 내용이 문제가 아니었습니다. 화면이 문제였습니다. 티스토리 기본 스킨의 글자 크기가 14픽셀로 설정되어 있다는 걸 그때 처음 알았습니다.사소해 보이는 숫자 하나가 독자를 머물게도 하고 떠나게도 한다는 걸, 그 경험으로 처음 실감했습니다. 이 글은 그 이후 제가 직접 바꿔보고, 틀리기도 하고, 다시 조정하면서 정착한 CSS 설정들에 대한 기록입니다. 완벽한 답이 아니라 제가 부딪힌 과정을 솔직하게 담았습니다.독자 이탈의 원인을 콘텐츠로만 돌리는 함.. 2026. 4. 8. 이전 1 다음
