전체 글118 블로그 이미지 정렬 (figure태그, alt텍스트, box-shadow) 끼워 넣는 것과 제대로 다루는 것은 다른 일이다이미지를 열심히 넣었는데 왜 검색에서 아무도 안 올까. 나도 한동안 그 질문을 안고 살았다. 티스토리 에디터의 가운데 정렬 버튼만 수년째 눌러오면서, 이미지를 "끼워 넣는 것"과 "제대로 다루는 것"이 완전히 다른 일이라는 걸 몰랐던 거다. HTML과 CSS로 이미지를 직접 제어하기 시작하면서 구글 이미지 검색 유입이 생겼고, 블로그 전체 디자인도 달라졌다.처음에는 내용이 좋으면 이미지가 어디 있든 상관없지 않나 싶었다. 그런데 어느 날 내 글을 남이 보는 눈으로 처음부터 다시 읽어봤다. 이미지가 본문 한가운데 덩그러니 있고, 그 아래 텍스트가 이어지는데 이미지가 무슨 내용인지 설명이 없었다. 그냥 이미지 하나가 텍스트 사이에 끼어있는 느낌. 마치 책 본문 .. 2026. 4. 13. CSS 로딩 애니메이션 (스피너, 스켈레톤, 체감속도) 속도가 아니라 불안을 해결하는 장치다이미지를 10장 넘게 넣은 리뷰 글을 발행하고 나서, 핸드폰으로 직접 접속해봤을 때 처음 든 생각은 "이건 좀 아닌데"였다. 이미지가 하나씩 뚝뚝 로드될 때마다 레이아웃 전체가 들썩이는 게 눈에 보였다. 이미지 용량을 줄이는 것만으로는 한계가 있었고, 그때부터 CSS 로딩 애니메이션을 직접 파고들기 시작했다.링크를 클릭하고 아무것도 안 나오면 누구나 일단 기다린다. 1초, 2초. 그런데 3초가 넘어가면 손가락이 자동으로 뒤로 가기를 누르게 된다. 이건 의식적인 선택이 아니다. 그냥 반사다. 식당에서 자리에 앉았는데 3분이 지나도 직원이 안 오면 그냥 나가고 싶어지는 것처럼, 뭔가 진행되고 있다는 신호가 없으면 사람은 본능적으로 포기한다. 이 사실을 머리로는 알고 있었지.. 2026. 4. 13. CSS sticky 사이드바 (적용법, 오류해결, 광고수익) - 하나가 광고 노출을 바꾼다 스크롤을 내리면 사이드바가 위에 그대로 멈춰 있고, 독자는 본문만 읽으면서 사이드바는 이미 저 위 어딘가로 사라져 버린다. 티스토리 블로그 기본 레이아웃에서 자주 있는 상황이다. 사이드바에 광고를 넣어뒀는데 독자가 스크롤을 내리는 순간 광고는 안 보이고, 본문만 보이는 구조. 이게 얼마나 비효율적인지 처음엔 몰랐다.낚시로 비유하면 이런 거다. 미끼를 달아서 물속에 내려뒀는데, 물고기가 다가오는 순간 낚싯줄을 올려버리는 것과 같다. 독자가 글을 읽으러 왔는데 광고가 이미 위로 올라가버려서 노출 기회를 날리는 것. sticky는 그 낚싯줄을 물속에 계속 유지하는 방법이다.사이드바에 광고를 달아놨는데 클릭이 거의 없다면, 한 번쯤 직접 내 블로그를 독자 입장에서 읽어봐야 한다. 나도 그랬다. 스크롤을 조금만 .. 2026. 4. 11. 모바일 HTML 표 최적화 (반응형, data-label, 접근성) - 독자의 화면에서 안 깨지면 완성이다 반응형, data-label, 접근성. 내 눈엔 멀쩡했는데 핸드폰에서 깨진 그 날.블로그에 비교표를 올렸을 때 내 눈엔 깔끔하게 보였다. 데스크탑 화면에서 컬럼이 딱딱 맞아 떨어지고, 텍스트도 잘 들어가 있었다. 뿌듯한 마음으로 저장하고 나서 핸드폰으로 확인했는데, 표가 화면 밖으로 반쪽 이상 튀어나와 있었다. 마치 옷장에 양복을 넣으려는데 소매가 문 밖으로 빠져나온 것 같은 기분이었다. 억지로 접어 넣어도 다음날 보면 또 삐져나와 있는 그 느낌.그때 처음 든 생각은 '내가 뭘 잘못한 건가'였다. HTML 태그도 맞게 썼고, 내용도 제대로 들어가 있었다. 문제는 내가 아니라 HTML 표 자체가 모바일 우선 시대 이전에 설계된 요소라는 데 있었다. 기본 동작이 "내 열 너비만큼 공간이 있어야 한다"는 것이.. 2026. 4. 11. 티스토리 목차 만들기 (앵커링크, 체류시간, SEO) - 독자의 행동을 바꾼다 처음 티스토리 블로그를 시작했을 때 나는 목차라는 개념 자체를 별로 심각하게 생각하지 않았다. 글을 쓰면 당연히 읽어야 하는 거 아닌가, 위에서 아래로 죽 내려가면 되는 거 아닌가 하고. 마치 골목 맛집에 처음 갔을 때 메뉴판 없이 주인아주머니가 그냥 "오늘 건 이거예요" 하면 그냥 시키는 것처럼. 선택지가 없으니 고민도 없고, 불편한지도 몰랐다.그런데 어느 날 내 글의 평균 체류 시간이 40초대라는 걸 구글 서치 콘솔에서 확인했다. 분명 2000자가 넘는 글인데 40초면 사람들이 첫 두 단락만 보고 나가는 거다. 처음엔 글이 재미없어서 그런가 싶었다. 글을 다시 읽어봤는데 내용 자체는 나쁘지 않았다. 그렇다면 문제는 구조였다. '왜 안 읽고 나가지?'를 진지하게 고민하기 시작하면서, 목차라는 게 얼마나.. 2026. 4. 11. 애드센스 광고 배치 (광고 위치, 광고 밀도, CSS 구현) - 위치를 바꿨더니 CTR이 달라졌다 광고 위치, 광고 밀도, 모바일 대응까지. 실제로 써보며 정리한 기록.애드센스를 블로그에 달고 나서 처음 한 달 동안 CTR이 0.3%도 안 나왔습니다. 트래픽이 문제인가, 글이 문제인가 싶었는데 알고 보니 광고 위치가 문제였습니다. 광고가 아예 보이지 않는 곳에 처박혀 있거나, 페이지 맨 아래에 혼자 덩그러니 있거나. 글을 다 읽고 나면 이미 독자가 뒤로 가기를 눌러버린 다음입니다. 독자 대부분은 거기까지 스크롤하지 않았습니다.광고를 늘린 게 아니라 위치를 바꿨을 뿐인데 CTR이 달라졌습니다. 이 글은 그 과정에서 직접 써보고 "이게 맞다"고 느낀 광고 배치 전략을 정리한 기록입니다.광고 위치 — 독자 시선이 멈추는 곳에 놓아야 한다광고 수익을 결정하는 가장 큰 변수는 트래픽보다 광고 위치입니다. 광고.. 2026. 4. 10. 이전 1 ··· 15 16 17 18 19 20 다음
