시작하기
툴바에서 Stylebot 아이콘을 클릭한 다음 이 페이지 스타일 지정을 클릭하세요. 또는 아무 탭에서나 alt+shift+M을 누르거나, 요소를 마우스 오른쪽 버튼으로 클릭하고 Stylebot → 요소 스타일 지정을 선택하세요.
선택기를 클릭하고 페이지 위로 마우스를 가져간 뒤 요소를 클릭하세요. 클릭하기 전에 ↑ 키를 누르면 상위 요소가 대신 선택됩니다. 그런 다음 기본 탭에서 바꾸거나 코드 탭에서 CSS를 작성하세요. 변경 사항은 바로 저장되고, 사이트를 방문할 때마다 적용됩니다.
- 글꼴
- Google Fonts 400개 중에서 검색하면 고른 글꼴을 Stylebot이 불러옵니다. 컴퓨터에 설치된 글꼴 이름을 직접 입력할 수도 있습니다.
- 편집기 위치
- Chrome과 Edge에서는 편집기가 측면 패널에 열립니다. ⋯ 메뉴의 위치에서 별도 창으로 열거나 페이지 안에 고정할 수 있습니다. Firefox와 Safari에는 측면 패널이 없습니다.
- 스타일 끄기
- 팝업의 스위치를 사용하거나 alt+shift+S를 누르세요. 스타일은 삭제되지 않고 적용만 되지 않습니다.
프로필
프로필은 같은 사이트에 대한 별도의 스타일시트로, 여러 디자인을 저장해 두고 전환할 수 있습니다. 한 번에 하나만 적용되며, 모든 사이트는 기본 프로필로 시작합니다.
편집기 헤더에서 사이트 옆의 프로필 이름을 클릭해 프로필을 만들거나, 이름을 바꾸거나, 복제하거나, 삭제하세요. 프로필 전환은 여기서 하거나 팝업에서 할 수 있으며, 팝업에서 스타일 없음을 선택하면 사이트의 스타일이 꺼집니다. 새 프로필은 빈 상태로 시작합니다.
프리셋
프리셋 탭에는 두 가지가 있으며, 모두 직접 만든 변경 사항과 함께 적용됩니다. 가독성 모드는 사이트의 기사를 깔끔한 읽기 화면으로 바꾸고 테마, 글꼴, 크기, 너비를 고를 수 있게 하며, 기사가 아닌 페이지는 그대로 둡니다. 회색조 모드는 사이트에서 색을 빼며, 강도는 원하는 대로 조절할 수 있습니다.
동기화 및 버전 기록
- Google Drive 동기화
- 옵션에서 Google Drive를 연결하세요. 프로필을 포함한 스타일이 30분마다, 그리고 편집 직후에 동기화됩니다. Stylebot은 Drive에서 자신이 만든 파일만 볼 수 있으며, Stylebot 서버는 없습니다.
- 충돌
- 두 컴퓨터에서 같은 스타일을 바꾼 경우 더 최근 편집이 유지되고 다른 버전은 주석으로 저장되므로, 잃어버리는 내용이 없습니다.
- 백업
- 옵션에서 모든 스타일을 JSON으로 내보내고 가져올 수 있습니다.
- 버전 기록
- 동기화로 들어온 변경을 포함해 이 컴퓨터의 모든 변경 사항이 옵션에 보관됩니다. 일부 사이트 또는 전체 사이트를 이전 버전으로 복원할 수 있습니다.
갤러리
갤러리에는 다른 사용자들이 Stylebot으로 만든 스타일이 있습니다. 해당 사이트에서 미리 보고, CSS를 살펴보고, 클릭 한 번으로 설치하세요.
- 스타일 게시
- 팝업에서 스타일의 ⋯ 메뉴나 편집기의 ⋯ 메뉴에서 갤러리에 게시를 선택하고 Google로 로그인하세요. 수정한 내용은 업데이트를 게시하기 전까지 내 컴퓨터에만 저장됩니다.
- 내 스타일
- 갤러리에 로그인하면 게시한 스타일의 이름을 바꾸거나 삭제할 수 있고, 사용자 이름도 변경할 수 있습니다.
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 홈페이지만.
*- 모든 사이트. 어디에나 적용할 스타일에 유용합니다.
CLI
stylebot 명령을 사용하면 Claude Code, Codex, Cursor 같은 코딩 에이전트가 API 키 대신 사용 중인 구독으로 브라우저에서 바로 사이트 스타일을 바꿀 수 있습니다. 명령을 직접 실행할 수도 있습니다.
- 설정
- CLI를 설치하고 브라우저에 연결한 다음, 옵션에서 명령줄 액세스 허용을 켜세요. 각 단계는 CLI 페이지에서 안내합니다. 현재는 Chrome과 Edge만 지원합니다.
- Claude Code
- Stylebot 플러그인을 추가하고
/stylebot으로 사이트에 다크 테마를 적용하는 등의 변경을 요청하세요. - 개인정보 보호
- CLI 액세스는 직접 켜기 전까지 꺼져 있습니다. Stylebot과 CLI는 이 컴퓨터 안에서 서로만 통신하며, 에이전트는 읽은 내용을 자신의 제공업체로 보냅니다.
키보드 단축키
전역 단축키는 Stylebot이 스타일을 적용할 수 있는 모든 페이지에서 작동하며, 옵션에 링크된 브라우저의 단축키 설정에서 바꿀 수 있습니다. 편집기 자체의 단축키는 편집기에서 ? 키를 누르면 볼 수 있습니다.
도움말 및 지원
버그를 발견했거나 아이디어가 있으신가요? GitHub에 이슈를 등록하세요. Stylebot은 2011년부터 관리되고 있는 무료 오픈 소스입니다. 유용하게 쓰고 계신다면 커피 한 잔으로 후원할 수 있습니다.