티스토리 블로그에 댓글 기능을 붙여두고 한동안 그냥 방치했다. 노란 카카오 버튼이 거기 있다는 걸 알면서도 딱히 건드릴 생각을 못 했다. 그러다 어느 날 블로그 디자인을 전체적으로 어두운 톤으로 다듬고 나서야 그 버튼이 눈에 확 들어왔다. 모노톤으로 정성껏 맞춘 공간에 형광 노란 의자 하나가 덩그러니 놓인 느낌이었다. 처음에는 저게 바꿀 수 있는 건지조차 몰랐다. 개발자 도구로 요소를 클릭해보다가 클래스명을 발견했고, 그때부터 CSS 덮어쓰기를 시도하기 시작했다.
솔직히 처음 시도에서는 제대로 동작하지 않았다. 클래스명은 찾았는데 스타일이 반만 먹히고 나머지는 카카오 기본 스타일이 남아 있었다. 왜 이런지 이해하는 데도 시간이 걸렸다. 결국 CSS 우선순위 문제였다. 이 경험이 나중에 다른 스킨 수정 작업에도 직접적인 도움이 됐다. 버튼 하나를 고치려다 CSS 구조 자체를 이해하게 된 것이다.
첫 번째: 개발자 도구로 클래스명 정확히 찾기
어떤 요소를 바꾸려면 먼저 그 이름을 알아야 한다. F12를 눌러 개발자 도구를 열고, Elements 탭에서 커서 아이콘으로 카카오 로그인 버튼을 직접 클릭하면 해당 요소의 클래스명이 표시된다. 티스토리 댓글 영역의 카카오 버튼 관련 선택자는 스킨마다 다르기 때문에, 인터넷에서 찾은 클래스명을 그대로 믿지 말고 반드시 내 블로그에서 직접 확인해야 한다. 내가 처음에 시간을 많이 낭비한 이유가 바로 그것이었다. 남의 블로그에서 찾은 클래스명이 내 스킨에는 존재하지 않았다.
클래스명을 확인했으면 개발자 도구의 Styles 탭에서 현재 어떤 스타일이 적용돼 있는지 함께 살핀다. 이게 중요하다. 어떤 속성이 걸려 있는지 파악해야 제대로 덮어쓸 수 있다. 구체적으로 어떤 속성이 문제인지 모르면 무작정 넣는 CSS가 아무 효과를 내지 못한다.
두 번째: 티스토리 스킨 CSS에서 덮어쓰기
클래스명을 파악했다면 티스토리 스킨 편집의 CSS 탭 맨 아래에 커스텀 스타일을 추가한다. 기존 스타일 위에 덮어쓰는 방식이라 !important를 함께 써야 할 때가 많다. 이걸 처음 배울 때는 !important가 뭔가 편법처럼 느껴졌다. 그런데 생각해보면 이미 굳어진 스타일 위에 내 스타일을 얹으려는 상황 자체가 그런 강제 수단을 요구한다. 다만 !important를 남발하면 나중에 내가 쓴 CSS도 서로 충돌하는 상황이 온다. 꼭 필요한 속성에만 쓰고 전체를 도배하지 않는 게 낫다는 걸 반복하면서 배웠다.
배경색, 글자색, 테두리, 여백 정도를 조정하면 버튼의 인상이 크게 바뀐다. 호버 상태도 함께 정의해두는 것이 완성도를 높인다. 이게 없으면 마우스를 올렸을 때 갑자기 카카오 기본 호버 효과가 튀어나와서 어색해진다.
세 번째: 기존 버튼을 숨기고 새 버튼 만들기
어떤 경우에는 CSS 덮어쓰기가 제대로 먹히지 않는다. 특히 카카오 SDK가 버튼 스타일을 JavaScript로 직접 제어하는 구조일 때 그렇다. 이럴 때 선택지는 두 가지다. CSS 수정을 포기하거나, 기존 버튼을 완전히 숨기고 새 버튼을 만드는 것이다. 나는 후자를 택했다. 기존 버튼을 display:none으로 숨긴 뒤, 내가 원하는 디자인으로 새 버튼을 만들고 클릭하면 원래 버튼의 클릭 이벤트를 트리거하는 방식이다.
이 방법의 단점은 유지보수가 까다롭다는 것이다. 티스토리나 카카오가 버튼의 클래스명이나 구조를 바꾸면 내가 만든 스크립트가 동작하지 않을 수 있다. 실제로 한 번 그런 일이 있었다. 업데이트 이후 댓글 로그인이 안 된다는 걸 한참 뒤에야 알았다. 그래서 이 방법을 쓴다면 주기적으로 실제 동작을 확인하는 습관이 필요하다.
네 번째: 버튼 주변 댓글 영역 전체를 함께 스타일링하기
버튼 하나만 바꾸면 버튼은 예뻐졌는데 주변 댓글 입력창이나 구분선이 따로 노는 느낌이 난다. 드레스를 새것으로 바꿨는데 신발이 낡은 운동화인 것과 같다. 버튼과 함께 댓글 영역 전체 톤을 맞춰주는 게 완성도를 높인다. 댓글 섹션을 감싸는 상위 요소, 텍스트 입력창, 전송 버튼까지 같은 색 계열로 정리하면 댓글 영역이 블로그 전체에 자연스럽게 녹아든다.
이 작업을 해보고 나서야 알게 된 것이 있다. 부분적인 수정은 완성도를 높이는 게 아니라 오히려 어색함을 더 부각시킬 수 있다는 것이다. 변경 전보다 더 눈에 띄게 이상해지는 경우도 있다. 하나를 고치면 그 주변이 같이 눈에 들어오기 시작한다. 결국 댓글 영역 전체를 정리하게 됐다.
이 작업에서 실제로 배운 것들
카카오 로그인 버튼 하나를 바꾸려고 시작했는데, 결국 개발자 도구로 요소를 찾는 법, CSS 우선순위, 이벤트 위임까지 손에 익혔다. 작은 버튼 하나 안에서 배운 것들이 이후 스킨 수정 전반에 쓰이게 됐다는 게 지금 생각하면 흥미롭다.
한 가지 덧붙이고 싶은 것이 있다. 인터넷에서 "티스토리 카카오 버튼 바꾸는 법"을 검색하면 나오는 코드를 그대로 복사해서 쓰는 것을 권하지 않는다. 스킨마다 구조가 다르고, 티스토리는 꽤 자주 업데이트된다. 남의 코드가 내 블로그에서 동작하지 않을 때 왜 동작하지 않는지 이해하지 못하면 아무것도 할 수 없다. 개발자 도구를 직접 열고, 클래스명을 직접 찾고, 직접 적용해보는 과정이 처음에는 번거롭지만 결국 가장 빠른 길이다.
- 카카오 로그인 개발자 가이드: developers.kakao.com
- 티스토리 스킨 편집 가이드: tistory.com
- MDN - CSS ::before: developer.mozilla.org