# 창작 모드

사이트를 어떻게 바꾸고 싶은지 한 문장으로 말하면 됩니다. 예를 들면 "내 메시지 폭을 좁혀 줘" 같은 식입니다. 그 사이트의 AI가 바꿔 주고, Voyager가 한 번 확인한 뒤 설치합니다. 코드를 몰라도 되고, 지금 보는 페이지를 떠날 필요도 없습니다. Gemini, AI Studio, ChatGPT, Claude, DeepSeek, Kimi에서 쓸 수 있습니다.

이렇게 만든 것을 '창작물'이라고 부릅니다. 창작물은 작은 플러그인이고, 이 브라우저에만 저장됩니다. 언제든 끄거나 지울 수 있습니다.

<GuideHero src="/assets/create-mode-hero-en-light.png" dark="/assets/create-mode-hero-en-dark.png" alt="AI 사이트 페이지에서 연 Voyager 패널의 만들기 탭, 한 문장 요청이 입력되어 있음">

창작 모드는 두 곳에서 시작할 수 있습니다. 하나는 페이지 위 [Voyager 패널](./panel.md)의 **만들기** 탭입니다. 다른 하나는 Voyager 팝업의 **내 창작물** 카드입니다. 팝업은 브라우저 도구 모음에서 Voyager 아이콘을 누르면 열리는 작은 창입니다.

</GuideHero>

## 페이지에서 만들기

<GuideOp>

가장 빠른 방법은 바꾸고 싶은 AI 사이트에서 바로 만드는 것입니다. 그 사이트에서 Voyager 패널을 열고 **만들기**를 고르세요.

<GuideShot kind="panel" src="/assets/create-mode-ask-en.png" alt="만들기 탭: 한 문장을 쓰는 칸, 페이지 구조 스위치, 로컬 에이전트용 복사와 이 페이지에서 만들기 버튼" :width="632" />

</GuideOp>

<GuideSteps>
<GuideStep>

**무엇을 바꿀까요?** 아래에 한 문장을 쓰세요. 예를 들면 "내 메시지 폭을 좁히고 사이드바를 숨겨 줘"입니다. 그다음 **이 페이지에서 만들기**를 고르세요.

</GuideStep>
<GuideStep>

Voyager가 그 사이트에서 새 채팅을 열고, 요청을 입력창에 넣어 둡니다. 한 번 읽어 본 뒤 직접 보내세요. Voyager는 대신 보내지 않습니다. 입력창에 이미 글이 있으면 Voyager는 손대지 않습니다. 먼저 보내거나 지워 달라고 알려 줍니다.

</GuideStep>
<GuideStep>

AI가 답하면 답변 아래에 Voyager 버튼 **미리 보고 설치**가 나타납니다.

<GuideShot src="/assets/create-mode-reply-en.png" alt="AI 답변 아래의 Voyager 미리 보고 설치 버튼" :width="267" />

</GuideStep>
<GuideStep>

이 버튼을 고르면 패널에 내용이 나옵니다. 창작물이 무엇을 바꾸는지, 어느 사이트에서 동작하는지, 그리고 **먼저 확인하세요** 아래의 내용입니다. 괜찮다면 **설치하고 켜기**를 고르세요. 바로 바뀝니다. 더 필요 없으면 패널의 **기능** 탭에서 끄면 됩니다.

<GuideShot kind="panel" src="/assets/create-mode-review-en.png" alt="패널의 검토 화면: 창작물의 이름, 적용 사이트, 바꾸는 내용, 먼저 확인할 점, 설치하고 켜기 버튼" :width="632" />

</GuideStep>
</GuideSteps>

<GuideOp>

다시 바꾸고 싶으면 같은 채팅에서 AI에게 이어서 말하세요.

- **새 버전**: AI의 새 답변 아래에 **업데이트 미리 보기**가 나옵니다. 확인한 뒤 **업데이트하고 켜기**를 고르세요. 예전 답변에는 **이전 버전**이 표시됩니다.
- **이미 설치한 것**: 설치한 답변에는 **설치됨**이 표시됩니다.
- **이 채팅에서만**: 버튼은 **이 페이지에서 만들기**로 시작한 채팅에만 나옵니다. 다른 채팅에서는 아래 '팝업에서 만들기' 방법을 쓰세요.

</GuideOp>

## AI에게 페이지 보여 주기

<GuideOp>

**만들기** 탭에는 스위치가 하나 있습니다. 바로 **이 페이지의 구조를 텍스트 없이 덧붙여 AI가 실제 페이지에 맞게 작성하도록 하기**입니다. 처음부터 켜져 있습니다.

- **덧붙이는 것**: 페이지의 짜임새입니다. 어떤 버튼, 입력칸, 메시지 영역이 있고 어디에 놓여 있는지를 알려 줍니다. 이게 있으면 AI가 짐작으로 만들지 않아도 됩니다.
- **절대 덧붙이지 않는 것**: 페이지에 있는 글은 하나도 넣지 않습니다. 내 채팅 내용도 마찬가지입니다. 웹 주소나 계정 정보도 넣지 않습니다.
- **직접 보기**: **덧붙는 내용 보기**를 고르면 AI에게 갈 내용을 전부 볼 수 있습니다.
- **빼고 싶을 때**: 스위치를 끄세요. 그러면 요청에는 내가 쓴 문장만 들어갑니다.

<GuideShot kind="panel" src="/assets/create-mode-structure-en.png" alt="첨부 내용을 펼친 모습: 페이지 구조가 부분의 이름과 개수로만 나오고 텍스트는 없음" :width="612" />

</GuideOp>

## Gemini의 모델 알림

<GuideOp>

Gemini에서는 여러 모델 중에서 고를 수 있습니다. Flash와 Flash-Lite는 가벼운 모델이라, 제대로 동작하는 창작물을 만들지 못할 때가 많습니다. 새 채팅이 이 중 하나를 쓰게 되면 **만들기** 탭 맨 위에서 알려 줍니다.

- **이럴 땐**: 알림에 더 알맞은 모델 이름이 나옵니다. Gemini 모델 메뉴에서 그 모델로 바꾼 뒤 **다시 확인**을 고르세요.
- **다른 방법**: 알림 안의 **로컬 에이전트용으로 복사**를 고르면 내 컴퓨터에 있는 코딩 도우미에게 일을 맡길 수 있습니다. [직접 플러그인 만들기](./write-a-plugin.md)를 보세요.
- **막지는 않음**: 알림일 뿐입니다. **이 페이지에서 만들기**는 그대로 쓸 수 있습니다.

<GuideShot kind="panel" src="/assets/create-mode-model-en.png" alt="만들기 탭 위쪽 알림: Gemini의 Flash는 보통 플러그인을 못 만든다는 안내와 다시 확인, 로컬 에이전트용 복사 버튼" :width="616" />

</GuideOp>

## 설치할 수 없을 때

<GuideOp>

AI가 늘 한 번에 제대로 만들지는 못합니다. 그럴 때는 답변 아래에 이유가 한 줄로 나옵니다. 예를 들면 "어느 사이트에 적용할지 적혀 있지 않습니다" 같은 것입니다.

- **고쳐 달라고 하기**: 답변 아래의 **AI에게 수정 요청**을 고르세요. Voyager가 문제를 입력창에 적어 주니, 보내기만 누르면 됩니다.
- **고친 뒤**: AI가 고친 버전을 보내면 그 아래에 다시 **미리 보고 설치**가 나옵니다.
- **그동안 바뀌는 것은 없음**: 설치하지 않은 창작물은 페이지를 건드리지 않습니다.

<GuideShot src="/assets/create-mode-rejected-en.png" alt="AI 답변 아래의 안내: 어느 사이트용인지 적혀 있지 않아 설치할 수 없음, AI에게 수정 요청 버튼" :width="624" />

</GuideOp>

## 설치한 뒤

<GuideOp>

설치한 것은 모두 **내 창작물**에 있습니다.

- **패널에서**: **기능** 탭의 **내 창작물** 묶음입니다. 창작물마다 한 줄씩 있고, 줄마다 스위치가 있습니다.
- **팝업에서**: Gemini와 AI Studio에서는 카드 하나로 나옵니다. 옮기지 않았다면 **클라우드 동기화** 바로 아래에 있습니다. 팝업 위쪽의 **바로 가기**로 곧장 갈 수 있습니다. 다른 사이트에서는 플러그인 목록 아래에 있습니다.
- **삭제**: 그 줄의 휴지통 아이콘을 누르고 확인하세요. 되돌릴 수 없습니다.
- **다른 브라우저로 옮기기**: 팝업의 **내 창작물**에서 그 창작물의 **내보내기**를 고르면 파일이 하나 생깁니다. 다른 브라우저에서 그 파일을 가져오세요.
- **모두와 나누기**: 다른 사람에게도 쓸모 있겠다면 Voyager에 넣자고 제안할 수 있습니다. 방법은 [플러그인 기여 가이드](./plugin-contribution.md)에 있습니다.

</GuideOp>

### 자동 점검

<GuideOp>

패널을 열 때마다 Voyager가 창작물이 지금 페이지에서 제대로 동작하는지 살펴봅니다.

- **여기서는 동작하지 않음**: 창작물은 켜져 있는데 이 페이지에서 바꿀 곳을 못 찾은 경우입니다. 그 줄에 **켜져 있지만 이 페이지에서 일치하는 요소가 없습니다**라고 나옵니다. 사이트 디자인이 바뀐 뒤에 자주 생깁니다.
- **페이지가 멈춤**: 코드를 실행하는 창작물 때문에 페이지가 멈춘 경우입니다. Voyager가 이미 그 창작물을 껐고, 그 줄에 이유가 나옵니다.
- **고쳐 달라고 하기**: 두 경우 모두 **수정 요청하기**가 있습니다. 고르면 Voyager가 새 채팅을 열고 문제를 채워 넣습니다. 내용을 읽고 보낼 수 있도록 패널은 닫힙니다.

<GuideShot kind="panel" src="/assets/create-mode-creations-en.png" alt="기능 탭의 내 창작물: 하나는 켜져 있지만 이 페이지에 맞는 부분이 없다고 나오고 아래에 수정 요청하기 버튼" :width="414" />

</GuideOp>

## Voyager 색 바꾸기

<GuideOp>

창작물로 Voyager 자체의 색도 바꿀 수 있습니다. 그렇게 말하기만 하면 됩니다. 예를 들면 "Voyager를 Nord 색으로 맞춰 줘"처럼요.

- **바뀌는 것**: Voyager의 패널, 메뉴, 대화상자, 잠깐 떴다 사라지는 알림, 타임라인의 색입니다. 라이트 모드와 다크 모드 모두 바뀝니다.
- **그대로인 것**: 사이트 자체의 색, 그리고 Voyager가 사이트 페이지에 바로 쓰는 글자입니다. 그래서 글자가 사이트 배경에 묻혀 안 보이는 일이 없습니다. Voyager 팝업도 바뀌지 않습니다.
- **되돌리기**: 그 창작물을 끄면 원래 색으로 돌아옵니다.

</GuideOp>

## 팝업에서 만들기

<GuideOp>

새 채팅을 열고 싶지 않을 때는 팝업의 **내 창작물**에서 시작하세요. 다른 채팅이나 다른 AI에게 맡기고 싶을 때도 마찬가지입니다. 플러그인 목록 맨 아래의 **직접 만들기**를 누르면 그곳으로 갑니다.

</GuideOp>

<GuideSteps>
<GuideStep>

**무엇을 바꿀까요?** 아래에 한 문장을 쓰세요. 그 아래 **사이트**에는 지금 보고 있는 사이트가 먼저 골라져 있습니다. 다른 사이트용이라면 바꾸세요.

</GuideStep>
<GuideStep>

**이 채팅용으로 복사**를 고르세요. 복사된 글을 그 사이트의 AI 채팅에 붙여 넣고 보내세요.

</GuideStep>
<GuideStep>

AI가 답하면 답변 전체를 복사하세요. **AI 답변 붙여넣기** 칸에 붙여 넣고 **답변 검사**를 고르세요.

</GuideStep>
<GuideStep>

Voyager가 무엇이 바뀌는지 쉬운 말로 알려 줍니다. **가져오기**를 고른 다음 플러그인 목록에서 켜세요. 이렇게 추가한 창작물은 꺼진 상태로 시작합니다.

</GuideStep>
</GuideSteps>

<GuideOp>

이 방법에서는 Voyager가 스스로 아무것도 보내지 않습니다. 글을 붙여 넣는 것도, 답변을 가져오는 것도 내가 직접 합니다.

</GuideOp>

## 코드를 실행하는 창작물

<GuideOp>

대부분의 창작물은 모양만 바꿉니다. 하지만 그것만으로는 안 되는 요청도 있습니다. 내 메시지 수를 세거나, 클릭했을 때 무언가를 하는 일 같은 것입니다. 이럴 때 AI는 코드를 실행하는 창작물을 만듭니다. 검토 화면에서는 여기에 **코드 실행** 표시가 붙습니다.

</GuideOp>

### 켜기

<GuideOp>

- **먼저 살펴보기**: 검토 화면에 이 창작물이 실행되는 사이트와 코드 전체가 나옵니다. 이 창작물은 그 페이지의 모든 것을 볼 수 있습니다. 내 채팅 내용도 볼 수 있습니다. 본 내용을 다른 곳으로 보내는 것을 Voyager는 막을 수 없습니다. 그러니 믿을 수 있는 것만 켜세요.
- **설치하고 켜기**: 방금 살펴본 바로 그 버전만 켜집니다. 나중에 AI가 새 버전을 주면, 다시 살펴보기 전까지는 꺼져 있습니다. 이 스위치는 이 기기에만 적용됩니다.
- **한 번만 하는 브라우저 설정**: 이런 창작물을 실행하려면 브라우저에서 Voyager를 허용해야 합니다. **Voyager 세부정보 페이지 열기**를 고르세요. 그곳에서 **사용자 스크립트 허용**(Allow User Scripts)을 켭니다. 돌아와서 **켰어요**를 고르세요.
- **쓸 수 있는 브라우저**: 컴퓨터의 Chrome 또는 Edge 133 이상입니다. Safari, Firefox, 휴대폰에서는 설치된 채로 일시 중지됩니다. 모양만 바꾸는 버전을 AI에게 부탁할 수도 있습니다.

<GuideShot kind="panel" src="/assets/create-mode-scripted-en.png" alt="코드를 실행하는 창작물의 검토: 코드 실행 표시, 경고, 전체 코드, Allow User Scripts 설정 단계" :width="632" />

</GuideOp>

### 계속 관리하기

<GuideOp>

**내 창작물**에서는 코드를 실행하는 창작물마다 상태가 나옵니다. **켜짐, 이 기기에서만**, **꺼짐**, **일시 중지됨** 중 하나입니다. 일시 중지됐을 때는 이유도 함께 나옵니다.

- **모두 멈추기**: **내 창작물** 맨 아래의 **코드를 실행하는 창작물 모두 멈추기**를 고르세요. 다시 실행하려면 **다시 시작**을 고르세요.
- **이미 열려 있는 페이지**: 새로고침하기 전까지는 계속 실행됩니다. **이 페이지 새로고침**을 고르면 지금 페이지를 새로고침합니다.
- **페이지가 멈췄을 때**: 이런 창작물 때문에 페이지가 멈추면 Voyager가 그것들을 끕니다. 다음에 페이지를 열면 어떤 것이었는지 알림으로 알려 줍니다.

</GuideOp>

## 할 수 있는 일과 할 수 없는 일

<GuideOp>

- **할 수 있는 일**: 페이지 모양 바꾸기(폭, 글자 크기, 색 등), 보기 싫은 부분 숨기기, 설정에 스위치와 슬라이더 넣기, Voyager 색 바꾸기. 일부 사이트에서는 Voyager에 원래 있는 기능을 켤 수도 있습니다. 수식 복사나 타임라인 같은 기능입니다.
- **코드가 필요한 일**: 클릭하면 무언가 하기, 개수 세기, 페이지 내용 읽기. 위의 '코드를 실행하는 창작물'을 보세요.
- **어떤 창작물도 못 하는 일**: 다른 사이트에서 실행되기, Voyager 자체 설정 바꾸기. 이런 요청이면 AI가 그렇다고 알려 주고, 가장 비슷한 버전을 만들어 줍니다.

</GuideOp>

## 자세히 알아보기

<GuideOp>

여기부터는 속에서 어떻게 돌아가는지 궁금한 분을 위한 내용입니다. 쓰기만 할 거라면 건너뛰어도 됩니다.

- **창작물의 정체**: 로컬 플러그인입니다. 플러그인 매니페스트와 스타일(CSS)로 이루어집니다. 직접 작성하는 법, 규칙, 색 바꾸기에 쓰는 색상 변수는 [직접 플러그인 만들기](./write-a-plugin.md)에 있습니다.
- **AI가 읽는 것**: 요청에는 그 사이트용 Voyager 안내 페이지 링크가 들어 있습니다(예: `https://voyager.nagi.fun/create/claude.md`). AI는 JSON 코드 블록 하나로 답합니다. Voyager는 메시지에 이 링크가 있는 채팅에서만 버튼을 보여 줍니다. 그래서 팝업 방법을 쓸 때는 AI가 링크를 열 수 있어야 합니다.
- **페이지 구조**: Voyager가 알아보는 페이지 요소와 그 개수, 그리고 최근 답변과 내 최근 메시지 주변의 요소 트리입니다. 텍스트와 웹 주소는 없습니다. ID, 이메일, 긴 숫자처럼 보이는 속성값도 뺍니다.
- **모델 알림**: Voyager는 새 채팅이 쓸 모델을 읽습니다. [기본 모델](./default-model.md)을 켰다면 그 기본 모델을 기준으로 판단합니다. 패널로 돌아올 때 다시 확인합니다.
- **자동 점검**: Voyager는 창작물의 스타일과 페이지 변경이 현재 페이지에서 대상을 찾는지만 봅니다. 호버와 포커스 상태, 그리고 내장 기능만 호출하는 창작물은 세지 않습니다.
- **코드 실행**: Chrome의 사용자 스크립트로, 창작물이 지정한 사이트에서만 실행됩니다. Chrome 138 이전에는 이 스위치가 `chrome://extensions` 상단의 **개발자 모드**입니다.

</GuideOp>