티스토리꾸미기12 티스토리 페이지네이션 - 기본 디자인, active 클래스, 모바일 반응형) 블로그를 시작하고 꽤 오랫동안 페이지네이션을 그냥 방치해뒀습니다. 회색 숫자가 줄지어 있는 티스토리 기본 디자인, 딱히 문제가 있다고 생각하지 않았습니다. 페이지네이션은 그냥 있으면 되는 거지, 뭘 더 신경 쓰나 싶었습니다. 그 판단이 틀렸다는 걸 방문자 데이터를 들여다보다가 알았습니다. 2페이지로 넘어가는 비율이 생각보다 훨씬 낮았고, 그 원인이 페이지네이션에 있다는 걸 그때 처음 의심하기 시작했습니다.페이지네이션은 블로그에서 존재감이 거의 없는 요소입니다. 그래서 오히려 방치하기 쉽습니다. 눈에 잘 띄지 않는 것들이 실은 독자 행동에 꽤 직접적인 영향을 미친다는 걸, 이 경험에서 다시 한번 확인했습니다. -->기본 디자인이 독자를 막고 있었다방문자가 1페이지에서 이탈하는 비율을 보면서 처음에는 콘텐츠.. 2026. 4. 14. CSS 스크롤바 커스터마이징 (webkit, 브라우저 호환, 사용성) - 생각보다 간단했습니다 스크롤바를 꾸미려면 JavaScript 라이브러리가 필요하다고 생각했습니다. 어떤 라이브러리를 써야 하나 검색하다가 시간을 꽤 날렸는데, 알고 보니 CSS 의사 요소 몇 줄이면 충분했습니다. 의사 요소란 HTML 태그에 직접 클래스를 붙이지 않고도 특정 부분의 스타일을 제어할 수 있는 CSS 문법입니다. 돌아보면 괜히 어렵게 생각하고 있었던 겁니다. 그 시간이 아깝기도 하고, 한편으로는 이런 식으로 삽질을 해봐야 오래 기억에 남기도 합니다.크롬, 엣지, 사파리처럼 웹킷(WebKit) 기반 브라우저에서는 ::-webkit-scrollbar라는 의사 요소로 스크롤바 전체를 제어합니다. 웹킷이란 애플이 개발하고 크롬, 사파리, 엣지 등이 공통으로 사용하는 브라우저 렌더링 엔진입니다. 크롬 계열이 전 세계 브라.. 2026. 4. 13. 기술 블로그 코드 블록 - Highlight.js, 구문 강조, 복사 버튼 기술 블로그를 쓰면서 코드를 그냥 텍스트로 붙여넣은 적이 있다. 코드인지 본문인지 구분도 안 되고, 들여쓰기도 다 무너지고, 색상도 없이 그냥 흑백 텍스트. 그 글을 나중에 다시 봤을 때 읽고 싶지가 않았다. 내가 쓴 글인데도 눈이 안 가더라. 처음엔 그게 당연한 건 줄 알았다. 기술 블로그니까 내용이 중요하지 꾸밈이 뭐가 중요하냐고. 그 생각이 얼마나 틀렸는지는 나중에야 알았다.반대로 코드 블록이 잘 정돈된 기술 글은 읽기 전부터 신뢰가 간다. 요리 레시피책에서 재료와 조리법이 명확하게 정리된 것과 그냥 글로 쭉 써놓은 것의 차이라고 할까. 같은 레시피인데 보기 좋게 정리된 쪽이 훨씬 따라 하고 싶어진다. 코드 블록도 마찬가지다. 구문 강조가 있으면 어디가 키워드고 어디가 값인지 한눈에 들어온다. 이건.. 2026. 4. 13. CSS 로딩 애니메이션 (스피너, 스켈레톤, 체감속도) 속도가 아니라 불안을 해결하는 장치다이미지를 10장 넘게 넣은 리뷰 글을 발행하고 나서, 핸드폰으로 직접 접속해봤을 때 처음 든 생각은 "이건 좀 아닌데"였다. 이미지가 하나씩 뚝뚝 로드될 때마다 레이아웃 전체가 들썩이는 게 눈에 보였다. 이미지 용량을 줄이는 것만으로는 한계가 있었고, 그때부터 CSS 로딩 애니메이션을 직접 파고들기 시작했다.링크를 클릭하고 아무것도 안 나오면 누구나 일단 기다린다. 1초, 2초. 그런데 3초가 넘어가면 손가락이 자동으로 뒤로 가기를 누르게 된다. 이건 의식적인 선택이 아니다. 그냥 반사다. 식당에서 자리에 앉았는데 3분이 지나도 직원이 안 오면 그냥 나가고 싶어지는 것처럼, 뭔가 진행되고 있다는 신호가 없으면 사람은 본능적으로 포기한다. 이 사실을 머리로는 알고 있었지.. 2026. 4. 13. CSS 강조 박스 (박스 모델, 박스 유형, 다크모드) - 박스가 독자에게 신호를 보내는 도구가 된 과정 CSS를 시작했을 때, 박스 하나 만드는 데 왜 이렇게 헤매는지 몰랐습니다. 테두리를 넣고, 배경을 바꾸고, 안쪽 여백이 왜 이렇게 튀어나오지 하면서 새로고침만 수십 번 눌렀습니다. 그러다 어느 순간 깨달았습니다. 박스는 그냥 사각형이 아니라 독자에게 신호를 보내는 도구라는 걸. 그 뒤로 박스를 만드는 방식이 달라졌습니다.이 글은 제가 블로그와 토이 프로젝트에서 실제로 써먹으며 "이건 진짜 쓸 만하다"고 느낀 7가지 강조 박스 유형을 정리한 기록입니다. 각각 어떤 상황에서 왜 써야 하는지, 그리고 직접 써보며 발견한 맹점까지 담았습니다.박스 모델 — 수치 뒤에 숨어 있는 구조의 진실CSS에서 강조 박스를 만들 때 가장 먼저 맞닥뜨리는 개념이 박스 모델입니다. 박스 모델이란 HTML 요소 하나가 화면에서 .. 2026. 4. 9. CTA 버튼 디자인 (버튼 유형, 접근성, hover) 설계에서 배운 것들 버튼 하나를 바꿨을 뿐인데 클릭이 생겼습니다. 저도 처음엔 그 차이가 버튼에서 나온다는 걸 몰랐습니다. 배경색에 텍스트만 얹으면 된다고 생각했으니까요. 그런 믿음이 꽤 오래 갔습니다. CTA(Call to Action)란 사용자에게 특정 행동을 유도하는 요소로, "지금 구매하기"나 "더 알아보기" 같은 버튼이 대표적입니다.처음 블로그에 달았던 CTA 버튼은 배경이 연한 파란색이었고 텍스트는 회색이었습니다. 당연히 클릭이 없었습니다. 나중에 보니 버튼이 있는 건지 없는 건지 구분조차 안 될 정도였습니다. 그때 처음으로 버튼 디자인이 단순히 예쁨의 문제가 아니라는 걸 알았습니다. 버튼이라는 요소는 생각보다 훨씬 섬세한 설계가 필요합니다. 어떤 색을 쓰느냐, 크기가 얼마냐, hover 반응이 있느냐 없느냐, .. 2026. 4. 8. 이전 1 2 다음
