이번 작업은 다 '클로드 인 크롬(Claude in Chrome)'이라는 확장 프로그램에서 시작됐다.
이게 있어야 클로드가 실제 브라우저 화면을 보고, 클릭하고, 코드를 직접 고칠 수 있기 때문이다. 설치 자체는 생각보다 간단했다.
- 크롬 웹 스토어에서 "Claude" 검색하거나, claude.ai/download 페이지에서 확장 프로그램 링크로 들어간다.
- 게시자가 진짜 Anthropic 맞는지 확인하고 (인증 배지 있는 거) Chrome에 추가 버튼 클릭.
- 권한 안내 팝업 뜨면 확장 프로그램 추가로 확정.
- 툴바에 클로드 아이콘 생기면 클릭해서 로그인. (참고로 이 기능은 무료 요금제에서는 안 되고, Pro 이상 유료 플랜에서만 쓸 수 있다.)
- 로그인하면 사이드패널이 열리는데, 여기서 원하는 작업을 그냥 말하듯이 적으면 된다.
- 자주 쓸 거면 툴바에 고정해두는 게 편하다.
설치하고 나면 사이트별로 클로드한테 접근 권한을 따로 줄 수 있는데, 처음에는 믿을 만한 사이트 위주로만 열어두고 하나씩 넓혀가는 걸 추천한다. 나도 티스토리 관리자 페이지만 우선 허용해두고 시작했다.
예전 같으면 하루 이틀 걸렸을 일
예전에 티스토리 스킨을 손보려면 먼저 마음에 드는 스킨을 찾아 발품을 팔고, 다운받은 뒤 HTML이랑 CSS를 열어서 직접 코드를 하나하나 뜯어고쳐야 했다. 어디가 광고 영역인지, 어떤 클래스를 건드려야 레이아웃이 안 틀어지는지 감 잡는 데만도 시간이 꽤 걸렸고, 잘못 건드렸다가 스킨 전체가 깨지는 것도 흔한 일이었다.
이번엔 그 과정을 전부 클로드한테 맡겨봤다. 프롬프트로 원하는 방향만 알려주면 실제 스킨 편집기 화면에서 코드를 찾아 직접 수정해주는 방식이라 훨씬 수월했다.
작업은 크게 두 갈래였다.
- 글 화면 UI 개선
- 애드센스 세팅 + 광고 슬롯 배치
UI는 타이포그래피 위주로 다듬었다
본문 제목, 소제목, 코드블록, 인용문, 이미지, 표 같은 콘텐츠 요소들 타이포그래피를 손봤다. 예전 스킨은 기본 스타일 그대로라 좀 밋밋했는데, 여백이랑 폰트 크기, 색상 대비를 조정해서 가독성 올리는 쪽으로 CSS를 다시 짰다.
애드센스는 두 단계로 진행
먼저 애드센스 관리 화면에서 진행 중이던 자동 광고 실험을 종료하고, 배너·멀티플렉스·관련 검색어 세 가지 인페이지 광고 형식을 전부 활성화했다.
그다음엔 티스토리 스킨 HTML 구조를 손봐서 본문 상단, 본문 하단, 사이드바 이렇게 세 군데에 광고 영역을 새로 만들었다. 그리고 애드센스에서 실제로 디스플레이 광고 단위를 발급받아서 그 코드를 각 영역에 정확히 삽입했다. 광고 영역마다 어울리는 여백이랑 라벨 스타일도 CSS로 같이 다듬어서, 콘텐츠랑 겹치거나 어색하게 튀지 않게 배치했다.
최종적으로 라이브 사이트 접속해서 광고 영역이 실제로 로드되는지, 애드센스 광고가 정상 표시되는지까지 확인했다.
신규로 만든 광고 단위는 매칭되기까지 시간이 좀 걸린다고 하니, 완전히 자리 잡을 때까지는 좀 더 지켜볼 생각이다.
예전 같으면 하루 이틀은 붙잡고 있었을 스킨 수정 작업을, 원하는 방향을 말로 설명하는 것만으로 훨씬 짧은 시간에 끝냈다.
코드를 몰라도 사이트 구조를 개선하고 싶은 사람들한테는 이런 방식이 꽤 실용적인 대안이 될 수 있겠다는 생각이 들었다.
