설명서 - Stylebot

시작하기

툴바에서 Stylebot 아이콘을 클릭한 다음 이 페이지 스타일 지정을 클릭하세요. 또는 아무 탭에서나 alt+shift+M을 누르거나, 요소를 마우스 오른쪽 버튼으로 클릭하고 Stylebot → 요소 스타일 지정을 선택하세요.

선택기를 클릭하고 페이지 위로 마우스를 가져간 뒤 요소를 클릭하세요. 클릭하기 전에 ↑ 키를 누르면 상위 요소가 대신 선택됩니다. 그런 다음 기본 탭에서 바꾸거나 코드 탭에서 CSS를 작성하세요. 변경 사항은 바로 저장되고, 사이트를 방문할 때마다 적용됩니다.

글꼴: Google Fonts 400개 중에서 검색하면 고른 글꼴을 Stylebot이 불러옵니다. 컴퓨터에 설치된 글꼴 이름을 직접 입력할 수도 있습니다.
편집기 위치: Chrome과 Edge에서는 편집기가 측면 패널에 열립니다. ⋯ 메뉴의 위치에서 별도 창으로 열거나 페이지 안에 고정할 수 있습니다. Firefox에는 측면 패널이 없습니다.
스타일 끄기: 팝업의 스위치를 사용하거나 alt+shift+S를 누르세요. 스타일은 삭제되지 않고 적용만 되지 않습니다.

일부 사이트는 사이트가 업데이트될 때마다 바뀌는 자동 생성 클래스 이름을 사용합니다. 스타일이 더 이상 작동하지 않으면 요소를 다시 선택해 새 선택자를 받으세요.

프로필

프로필은 같은 사이트에 대한 별도의 스타일시트로, 여러 디자인을 저장해 두고 전환할 수 있습니다. 한 번에 하나만 적용되며, 모든 사이트는 기본 프로필로 시작합니다.

편집기 헤더에서 사이트 옆의 프로필 이름을 클릭해 프로필을 만들거나, 이름을 바꾸거나, 복제하거나, 삭제하세요. 프로필 전환은 여기서 하거나 팝업에서 할 수 있으며, 팝업에서 스타일 없음을 선택하면 사이트의 스타일이 꺼집니다. 새 프로필은 빈 상태로 시작합니다.

명령줄

stylebot 명령을 사용하면 Claude Code, Codex, Cursor 같은 코딩 에이전트가 API 키 대신 사용 중인 구독으로 브라우저에서 바로 사이트 스타일을 바꿀 수 있습니다. 에이전트에게 사이트 스타일을 맡기는 가장 좋은 방법이며, 명령을 직접 실행할 수도 있습니다.

설정: CLI를 설치하고 브라우저에 연결한 다음, 옵션에서 이 컴퓨터의 앱이 Stylebot을 제어하도록 허용을 켜세요. 각 단계는 명령줄 페이지에서 안내합니다. 현재는 Chrome과 Edge만 지원합니다.
Claude Code: Stylebot 플러그인을 추가하고 /stylebot으로 사이트에 다크 테마를 적용하는 등의 변경을 요청하세요.
개인정보 보호: 명령줄 액세스는 직접 켜기 전까지 꺼져 있습니다. Stylebot과 CLI는 이 컴퓨터 안에서 서로만 통신하며, 에이전트는 읽은 내용을 자신의 제공업체로 보냅니다.

채팅

채팅은 간단한 수정에 알맞습니다. 채팅 탭에서 원하는 변경을 설명하면 Stylebot이 CSS를 작성합니다. 요소를 선택해 대상을 가리키거나, 스크린샷을 첨부해 원하는 모습을 보여 줄 수도 있습니다. 완전히 새로운 테마처럼 큰 변경에는 명령줄을 사용하세요.

내 API 키 사용: Claude, OpenAI, Gemini API 키를 연결하세요. 키는 이 컴퓨터에만 저장되며 동기화되지 않습니다. 메시지는 브라우저에서 제공업체로 바로 전송됩니다.
변경 사항이 저장되는 곳: 각 변경은 바로 적용되고 현재 프로필의 스타일시트에 추가됩니다. N줄 추가됨을 클릭하면 코드 탭에서 볼 수 있고, 채팅에서 실행 취소할 수도 있습니다.
비용: 메시지 입력란 아래의 토큰 수는 대화에 사용된 양과 예상 비용을 보여 줍니다.

가독성 모드와 회색조 모드

두 기능 모두 프리셋 탭에 있으며, 직접 만든 변경 사항과 함께 적용됩니다. 가독성 모드는 사이트의 기사를 깔끔한 읽기 화면으로 바꾸고 테마, 글꼴, 크기, 너비를 고를 수 있게 하며, 기사가 아닌 페이지는 그대로 둡니다. 회색조 모드는 사이트에서 색을 빼며, 강도는 원하는 대로 조절할 수 있습니다.

동기화, 백업, 기록

Google Drive 동기화: 옵션에서 Google Drive를 연결하세요. 프로필을 포함한 스타일이 30분마다, 그리고 편집 직후에 동기화됩니다. Stylebot은 Drive에서 자신이 만든 파일만 볼 수 있으며, Stylebot 서버는 없습니다.
충돌: 두 컴퓨터에서 같은 스타일을 바꾼 경우 더 최근 편집이 유지되고 다른 버전은 주석으로 저장되므로, 잃어버리는 내용이 없습니다.
백업: 옵션에서 모든 스타일을 JSON으로 내보내고 가져올 수 있습니다.
버전 기록: 동기화로 들어온 변경을 포함해 이 컴퓨터의 모든 변경 사항이 옵션에 보관됩니다. 일부 사이트 또는 전체 사이트를 이전 버전으로 복원할 수 있습니다.

URL 규칙

기본적으로 Stylebot은 도메인 이름으로 스타일과 웹사이트를 연결합니다. 더 구체적으로 지정하려면 옵션에서 스타일의 URL을 편집하고 다음 패턴을 사용하세요.

**모든 문자열과 일치합니다.

*/가 나올 때까지의 모든 문자열과 일치합니다.

,패턴 목록을 구분합니다. 패턴 중 하나라도 일치하면 URL이 일치합니다.

^URL 맨 앞에 쓰면 URL을 정규 표현식으로 바꿉니다.

예시

docs.google.com: docs.google.com 도메인 또는 그 하위 도메인.
docs**: docs로 시작하는 모든 URL.
docs*.google.com: docs.google.com, docs1.google.com, docs2.google.com 등.
*.ycombinator.com: news.ycombinator.com과 apps.ycombinator.com.
docs.google.com, spreadsheets.google.com: 두 도메인 중 하나 또는 그 하위 도메인.
^http://www.reddit.com/$: Reddit 홈페이지만.
*: 모든 사이트. 어디에나 적용할 스타일에 유용합니다.

키보드 단축키

전역 단축키는 Stylebot이 스타일을 적용할 수 있는 모든 페이지에서 작동하며, 옵션에 링크된 브라우저의 단축키 설정에서 바꿀 수 있습니다. 편집기 자체의 단축키는 편집기에서 ? 키를 누르면 볼 수 있습니다.

전역

편집기 열기/닫기alt+shift+M

스타일 켜기/끄기alt+shift+S

가독성 모드 켜기/끄기설정 안 됨. 브라우저에서 지정하세요

회색조 모드 켜기/끄기설정 안 됨. 브라우저에서 지정하세요

요소를 선택하는 동안

상위 요소 선택↑또는←

하위 요소로 돌아가기↓또는→

강조 표시된 요소 선택enter

도움말 및 지원

버그를 발견했거나 아이디어가 있으신가요? GitHub에 이슈를 등록하세요. Stylebot은 2011년부터 관리되고 있는 무료 오픈 소스입니다. 유용하게 쓰고 계신다면 커피 한 잔으로 후원할 수 있습니다.