전체 글73 티스토리 페이지네이션 (기본 디자인, active 클래스, 모바일 반응형) 티스토리 페이지네이션 (기본 디자인, active 클래스, 모바일 반응형)솔직히 저는 블로그를 처음 시작하고 꽤 오랫동안 페이지네이션을 그냥 방치해뒀습니다. 회색 숫자가 줄지어 있는 티스토리 기본 디자인, 딱히 문제가 있다고 생각하지 않았습니다. 그런데 방문자 데이터를 들여다보다가 뭔가 이상하다는 걸 알아챘습니다. 2페이지로 넘어가는 비율이 생각보다 훨씬 낮았고, 그 원인이 페이지네이션에 있다는 걸 그때 처음 의심하기 시작했습니다.기본 디자인이 독자를 막고 있었다방문자가 1페이지에서 이탈하는 비율을 보면서 처음에는 콘텐츠 문제인 줄만 알았습니다. 그런데 제가 직접 다른 기기로 블로그를 열어보니 문제가 바로 보였습니다. 현재 내가 몇 페이지에 있는지 전혀 알 수가 없었습니다. 숫자들은 비슷한 회색으로 나란.. 2026. 4. 14. CSS 스크롤바 커스터마이징 (webkit, 브라우저 호환, 사용성) ::-webkit-scrollbar, 생각보다 간단했습니다혹시 스크롤바를 꾸미려면 JavaScript가 필요하다고 생각하셨나요? 저도 처음엔 그렇게 생각했습니다. 알고 보니 CSS 의사 요소(pseudo-element) 몇 줄이면 충분했습니다. 의사 요소란 HTML 태그에 직접 클래스를 붙이지 않고도 특정 부분의 스타일을 제어할 수 있는 CSS 문법입니다.크롬, 엣지, 사파리처럼 웹킷(WebKit) 기반 브라우저에서는 ::-webkit-scrollbar라는 의사 요소로 스크롤바 전체를 제어합니다. 웹킷이란 애플이 개발하고 현재 크롬, 사파리, 엣지 등이 공통으로 사용하는 브라우저 렌더링 엔진입니다. 전 세계 브라우저 점유율 기준으로 크롬 계열이 65% 이상을 차지하기 때문에(출처: StatCounter).. 2026. 4. 13. 기술 블로그 코드 블록 (Highlight.js, 구문 강조, 복사 버튼) 기술 블로그를 쓰면서 코드를 그냥 텍스트로 붙여넣은 적이 있다. 코드인지 본문인지 구분도 안 되고, 들여쓰기도 다 무너지고, 색상도 없이 그냥 흑백 텍스트. 그 글을 나중에 다시 봤을 때 읽고 싶지가 않았다. 내가 쓴 글인데도 눈이 안 가더라.반대로 코드 블록이 잘 정돈된 기술 글은 읽기 전부터 신뢰가 간다. 요리 레시피책에서 재료와 조리법이 명확하게 정리된 것과 그냥 글로 쭉 써놓은 것의 차이라고 할까. 같은 레시피인데 보기 좋게 정리된 쪽이 훨씬 따라 하고 싶어진다. 코드 블록도 마찬가지다. 구문 강조가 있으면 어디가 키워드고 어디가 값인지 한눈에 들어온다.Highlight.js는 코드 블록에 자동으로 구문 강조를 입혀주는 라이브러리다. CSS 몇 줄, JavaScript 몇 줄이면 평범한 코드 블록.. 2026. 4. 13. 블로그 이미지 정렬 (figure태그, alt텍스트, box-shadow) 이미지를 열심히 넣었는데 왜 검색에서 아무도 안 올까요? 저도 한동안 그 질문을 안고 살았습니다. 티스토리 에디터의 가운데 정렬 버튼만 수년째 눌러오면서, 이미지를 "끼워 넣는 것"과 "제대로 다루는 것"이 완전히 다른 일이라는 걸 몰랐던 겁니다. HTML과 CSS로 이미지를 직접 제어하기 시작하면서 구글 이미지 검색 유입이 생겼고, 블로그 전체 디자인도 달라졌습니다.내용이 좋으면 이미지가 어디 있든 상관없지 않나 싶었다. 그런데 어느 날 내 글을 남이 보는 눈으로 처음부터 다시 읽어봤다. 이미지가 본문 한가운데 덩그러니 있고, 그 아래 텍스트가 이어지는데 이미지가 무슨 내용인지 설명이 없었다. 그냥 이미지 하나가 텍스트 사이에 끼어있는 느낌. 마치 책 본문 중간에 아무 설명 없이 사진이 붙어있는 것처럼.. 2026. 4. 13. CSS 로딩 애니메이션 (스피너, 스켈레톤, 체감속도) 흰 화면 앞에서 뒤로 가기를 눌러봤다면이미지를 10장 넘게 넣은 리뷰 글을 발행하고 나서, 핸드폰으로 접속해봤을 때 처음 든 생각은 "이건 좀 아닌데"였습니다. 이미지가 하나씩 뚝뚝 로드될 때마다 레이아웃 전체가 들썩이는 게 보였거든요. 이미지 용량을 줄이는 것만으로는 한계가 있었고, 그때부터 CSS 로딩 애니메이션을 직접 파고들기 시작했습니다.링크를 클릭하고 아무것도 안 나오면 누구나 일단 기다린다. 1초, 2초. 근데 3초가 넘어가면 손가락이 자동으로 뒤로 가기를 누르게 된다. 이건 의식적인 선택이 아니다. 그냥 반사다. 식당에서 자리에 앉았는데 3분이 지나도 직원이 안 오면 그냥 나가고 싶어지는 것처럼. 뭔가 진행되고 있다는 신호가 없으면 사람은 본능적으로 포기한다.내 블로그를 처음 만들었을 때 로.. 2026. 4. 13. CSS sticky 사이드바 (적용법, 오류해결, 광고수익) 스크롤을 내리면 사이드바가 위에 그대로 멈춰 있고, 독자는 본문만 읽으면서 사이드바는 이미 저 위 어딘가로 사라져 버린다. 티스토리 블로그 기본 레이아웃에서 자주 있는 상황이다. 사이드바에 광고를 넣어뒀는데 독자가 스크롤을 내리는 순간 광고는 안 보이고, 본문만 보이는 구조. 이게 얼마나 비효율적인지 처음엔 몰랐다.낚시로 비유하면 이런 거다. 미끼를 달아서 물속에 내려뒀는데, 물고기가 다가오는 순간 낚싯줄을 올려버리는 것과 같다. 독자가 글을 읽으러 왔는데 광고가 이미 위로 올라가버려서 노출 기회를 날리는 것. sticky는 그 낚싯줄을 물속에 계속 유지하는 방법이다.sticky 설정 하나로 사이드바가 독자의 시야에 계속 머무르게 만들 수 있다. 광고 노출 시간이 늘어나고, 관련 글 링크가 눈에 계속 들.. 2026. 4. 11. 이전 1 ··· 7 8 9 10 11 12 13 다음
