최근 티스토리 블로그를 운영하면서 가장 고민했던 부분이 바로 ‘방문자가 어떻게 하면 더 편하게 다른 글을 읽게 할까?’였습니다. 저도 여러 디자인을 시도해 봤지만, 화면 크기에 따라 버튼이 가려지거나 클릭하기 불편한 경우가 많더라고요.
요즘은 모바일 접속자가 대부분인 만큼, PC에서는 깔끔한 사이드바로 보이고 모바일에서는 하단에 착 붙는 반응형 디자인이 필수입니다. 제가 직접 적용해 보고 효과를 본 자동 배열 플로팅 버튼의 제작 노하우를 상세히 공유해 드릴게요.
이 코드는 누구나 자유롭게 수정해서 사용하실 수 있지만, 제 정성이 담긴 코드를 그대로 복사해서 자신의 블로그에 포스팅하는 것만은 정중히 사양하겠습니다. 지금부터 저와 함께 스마트한 블로그 환경을 만들어 보시죠.
플로팅 반응형 버튼 핵심 요약 ✨
- 데스크톱: 본문 옆 사이드바 형태로 우아하게 고정
- 모바일: 하단 바 형태로 배치되어 엄지손가락 클릭 최적화
- 애니메이션: 방문자의 시선을 끄는 부드러운 효과 적용
- 간편 적용: CSS와 HTML 코드 복사만으로 즉시 구현
티스토리 플로팅 반응형 CSS 버튼 사용 방법
이 버튼의 가장 큰 매력은 사용자의 환경을 스스로 감지한다는 점입니다. 노트북이나 데스크톱처럼 넓은 화면에서는 본문을 가리지 않도록 사이드바 위치에 고정되어 전문적인 느낌을 줍니다.
반면 갤럭시나 아이폰 같은 모바일 기기에서는 화면 하단에 고정되어 독자가 언제든 손쉽게 클릭할 수 있습니다. 제가 직접 테스트해 보니 특히 모바일에서의 클릭률 상승이 눈에 띄게 좋아졌습니다.
버튼이 구현하는 주요 특징을 정리하면 다음과 같습니다.
- 화면폭 감지: 1300px 기준으로 레이아웃 자동 전환
- 시각적 강조: 버튼에 은은한 애니메이션을 더해 주목도 향상
- 범용성: 아이패드 등 태블릿 PC에서도 안정적인 출력 확인
Step 1. 티스토리 스킨에 CSS 코드 등록
디자인의 뼈대를 만드는 첫 번째 단계는 CSS 코드를 적용하는 것입니다. 티스토리 관리자 페이지에서 [꾸미기] > [스킨 편집] > [html 편집] 메뉴로 이동해 주세요.
CSS 탭의 가장 아래쪽에 다운로드한 코드 중 CSS 부분을 복사해서 붙여넣기만 하면 됩니다. 저도 처음엔 코드가 복잡해 보였지만, 주석 처리가 잘 되어 있어 생각보다 간단하더라고요.
적용 과정에서 꼭 확인해야 할 체크리스트입니다.
- 코드 위치: 반드시 기존 CSS 내용의 맨 하단에 추가
- 주석 확인: 시작과 끝을 알리는 주석 처리까지 포함하여 복사
- 저장 필수: 붙여넣은 후 우측 상단의 ‘적용’ 버튼 클릭 잊지 말기
사이드바 위치 커스텀 팁
제 기본 설정은 본문 오른쪽에 버튼이 위치하도록 되어 있습니다. 만약 블로그 레이아웃상 왼쪽이 더 어울린다고 판단되신다면 간단한 코드 수정으로 위치를 바꿀 수 있습니다.
CSS 코드 내 button-grid 섹션에서 left라고 되어 있는 부분을 right로 바꾸거나 그 반대로 조절해 보세요. 저도 제 블로그 스킨에 맞춰 여러 번 수치를 조정하며 최적의 위치를 찾았습니다.
또한 스킨마다 본문 폭이 다르므로 calc(50% + 450px) 부분의 숫자(450px)를 조절하여 본문과의 간격을 세밀하게 맞추는 것이 좋습니다.
- X축 조절:
calc(50% + 000px)의 수치 변경 - Y축 조절:
top: 100px의 수치를 조절하여 상하 위치 선정
Step 2. HTML 코드 등록
이제 버튼이 실제로 작동하게 할 HTML 코드를 넣을 차례입니다. 다시 [html 편집]의 HTML 탭으로 돌아와서 코드의 가장 아래쪽을 확인해 보세요.
</body> 태그 바로 윗줄에 다운로드한 HTML 코드를 붙여넣으시면 됩니다. 이 위치에 코드를 넣어야 페이지 로딩 속도에 영향을 주지 않으면서 안정적으로 버튼이 출력됩니다.
HTML 등록 시 주의사항을 요약해 드릴게요.
- 태그 확인: 반드시
</body>바로 위에 삽입 - 중복 주의: 코드가 겹치지 않게 정확한 영역만 복사
- 미리보기: 적용 후 모바일과 PC 화면을 번갈아 가며 확인
버튼 텍스트 및 링크 수정 가이드
버튼을 성공적으로 띄웠다면 이제 여러분만의 링크로 채울 차례입니다. HTML 코드 내에서 href="#" 부분에 원하는 링크 주소를, 텍스트 부분에 버튼 이름을 입력하시면 됩니다.
저 같은 경우에는 가장 인기 있는 글이나 수익형 페이지로 연결되는 링크를 최상단에 배치합니다. 모바일에서는 화면 크기 제약으로 인해 데스크톱보다 적은 수의 버튼이 보일 수 있으니 우선순위를 잘 정하는 것이 핵심입니다.
- 링크 수정:
href="링크주소"따옴표 안에 정확한 URL 입력 - 텍스트 변경: 버튼에 표시될 문구는 10자 이내가 시각적으로 가장 예쁨
- 우선순위: 모바일(약 6개)과 데스크톱(10개 이상) 출력 개수 차이 고려
전면 광고를 위한 새창/현재창 설정
구글 애드센스 수익을 극대화하기 위해 전면 광고 효과를 노리신다면 링크 열기 방식도 중요합니다. target="_blank" 속성을 사용하면 새 창으로 열리고, 이 속성을 지우면 현재 창에서 열리게 됩니다.
수익형 블로그라면 전면 광고 노출을 위해 ‘현재 창 열기’ 설정을 권장하지만, 외부 정보 제공 목적이라면 ‘새 창 열기’가 독자의 이탈을 막는 데 유리합니다.
자주 묻는 질문 ❓
background-color 값을 원하는 헥사 코드로 수정하시면 즉시 반영됩니다.지금까지 티스토리 블로그의 디자인과 사용성을 한 단계 높여줄 반응형 플로팅 버튼 적용법을 알아보았습니다. 작은 변화처럼 보이지만, 독자가 느끼는 편리함은 생각보다 큰 차이를 만듭니다.
오늘 알려드린 방법을 통해 여러분의 블로그가 더욱 활발하게 소통되는 공간이 되길 바랍니다. 궁금한 점이 있다면 언제든 댓글 남겨주세요. 다음에도 더 유용한 팁으로 찾아뵙겠습니다!