[AIWriteSupporter] 릴리즈 2.18.0, 3.0.0 및 이후 버전 설정 방법

2.18.0 버전부터 지원, 3.0.0 버전부터 지원합니다.

생성형 AI로 글 작성을 지원하는 AI 글 작성 도우미 플러그인입니다.

업무 문서 초안을 자동으로 만들거나 다양한 편집을 수행하여 글을 효율적으로 작성할 수 있습니다.

목차

• 지원되는 브라우저
• 사용 방법
  • 플러그인 파일 불러오기
  • 툴바에 버튼 추가하기
    • 툴바에 추가
    • 바로 삽입에 추가
• 플러그인 설정하기
  • 사용 가능한 키(text 객체에 설정)
  • URL, API 키 설정
  • 헤더 설정
  • 요청 본문 설정
  • OCR URL 설정: '이미지 첨부' 기능 사용
    • OCR 프로모션 설정
    • OCR Pro 설정
  • 사용자 정의 프롬프트 설정
  • 카테고리별로 표시할 프롬프트 메뉴 설정
    • 초안 카테고리 메뉴 재정의
    • 편집 및 참조로 생성 카테고리 숨기기
    • 즐겨찾기 카테고리에 사용자 정의 메뉴 추가
  • 프롬프트 및 미리보기 창 기본 크기 설정

지원되는 브라우저

공식적으로 지원되는 웹 브라우저는 다음과 같습니다:

• 최신 버전의 Microsoft Edge
• 최신 버전의 Google Chrome
• 최신 버전의 Apple Safari

다른 브라우저에서도 동작할 수 있지만, 모든 기능이 올바르게 작동하지 않을 수 있습니다.

Internet Explorer 브라우저는 지원되지 않습니다.

사용 방법

플러그인 파일 불러오기

<!-- The SynapEditor object must exist for this to take effect,
     so include after the editor script files. -->
<script src="url of aiWriteSupporter.min.js"></script>
<link rel="stylesheet" href="url of aiWriteSupporter.min.css">

툴바에 버튼 추가하기

AI에게 작성을 요청하는 버튼을 툴바 영역, 풍선팝업, 바로 삽입, 또는 메뉴 영역에 추가할 수 있습니다.

툴바에 추가

// synapeditor.config.js
//...
'editor.toolbar': [
    // AI request button
    'openTextAI',
    //...
],
// ...

바로 삽입에 추가

// synapeditor.config.js
//...
'editor.quickInsert': [
    // AI request button
    'openTextAI',
    //...
],
// ...

플러그인 구성

텍스트 생성 AI와 관련된 설정은 text 키 아래에 정의되며, 이미지 생성 AI와 관련된 설정은 image 키 아래에 객체로 정의됩니다.

이미지 생성 AI에 대한 자세한 내용은 다음 링크를 참고합니다: [AIWriteSupporter] 이미지 생성 AI

'aiWriteSupporter.config': {
    text: { // Text writing AI settings
        url: '/request',
        //...
    },
    image: { // Image generation AI settings
        url: '/request',
        //...
    }
}

사용 가능한 키(text 객체에 설정)

url

요청을 보낼 URL을 설정합니다.

• OpenAI API 주소
• OpenAI API를 통해 요청을 보내기 위해 구현된 URL

설정하지 않으면 플러그인 버튼이 툴바에 표시되지 않습니다.

apiKey

OpenAI에서 발급한 API 키를 설정합니다.

https://platform.openai.com/account/api-keys

이 설정을 사용하면 키 값이 브라우저에 노출되므로, 안전을 위해 키 값을 설정하지 않고 서버를 거쳐 요청하기를 권장합니다.

ai

사용할 AI를 설정합니다. 기본값은 'gpt'입니다.

• OpenAI GPT: 'gpt'
• Google: 'gemini'

참고: NAVER HyperCLOVA X ('hcx') 연동이 중단되었습니다(서비스 종료). 'gpt' 또는 'gemini'로 전환해야 합니다.

requestBody

API로 보낼 추가 내용을 설정합니다.

• max_tokens
• temperature
• n
• ....

자세한 내용은 아래 링크를 참고합니다.

https://platform.openai.com/docs/api-reference/completions/create

customPrompts

사용자 정의 프롬프트 메뉴를 추가합니다. key, type, label, prompt 키를 가진 객체 배열을 설정합니다.

{
    key: 'customPromptKey',
    type: 'prompt', // or 'immediately'
    label: {
        ko: '메뉴에 보여지는 텍스트',
        en: 'Label shown in menu'
    },
    prompt: {
        ko: 'AI에게 전달될 프롬프트. 요약해줘, 내용을 늘려줘, ...',
        en: 'Prompts to be passed to the AI',
    }
}

{
    key: 'customPromptKey',
    type: 'group',
    label: {
        ko: '하위 메뉴가 있는 메뉴',
        en: 'Menu with submenus'
    },
    items: ['summarize', 'explanation', ...]
}

categoryConfig

카테고리별로 표시할 프롬프트 메뉴를 설정합니다.

카테고리는 다음과 같습니다:

• favorite: 즐겨찾기
• draft: 초안
• edit: 편집 또는 검토
• createByReference: 참조로 생성
• write: 작성

URL, API 키 설정

요청을 보낼 API의 URL과 API 키를 설정합니다.

URL에는 OpenAI API 주소(https://api.openai.com/v1/chat/completions) 또는 OpenAI API로 요청을 전달하는 URL을 설정합니다. URL은 필수 항목입니다. 설정하지 않으면 플러그인의 'AI 요청' 버튼이 툴바, 메뉴 등에서 표시되지 않습니다.

API 키에는 OpenAI에서 발급받은 키를 설정합니다. 클라이언트에서 API 키를 설정하는 것은 안전하지 않습니다. 키가 브라우저의 개발자 도구 > Network 탭에 노출되기 때문입니다. 키를 숨기려면 이 설정을 사용하지 말고, 대신 서버에서 요청을 보내세요.

// synapeditor.config.js
// When setting URL and API Key
'aiWriteSupporter.config': {
    text: {
        url: 'https://api.openai.com/v1/chat/completions',
        apiKey: 'sk-abc123...456xyz' // Not safe: exposed in the browser
    }
}

// When setting only the URL
'aiWriteSupporter.config': {
    text: {
        url: '/request'
    }
}

OpenAI GPT 설정

// synapeditor.config.js
// When setting URL and API Key
'aiWriteSupporter.config': {
    text: {
        ai: 'gpt',
        url: 'https://api.openai.com/v1/chat/completions',
        apiKey: 'sk-abc123...456xyz' // Not safe: exposed in the browser
    }
}

// When setting only the URL
'aiWriteSupporter.config': {
    text: {
        ai: 'gpt',
        url: '/request'
    }
}

네이버 HyperCLOVA X 설정

참고: NAVER HyperCLOVA X ('hcx') 연동이 중단되었습니다(서비스 종료). 'gpt' 또는 'gemini'로 전환해야 합니다.

이전 설정, 참고용:

// synapeditor.config.js
// url: URL implemented to make requests through HyperCLOVA X
'aiWriteSupporter.config': {
    text: {
        url: '/request',
        ai: 'hcx'
    }
}

HyperCLOVA X에 설정할 수 있는 값은 다음과 같습니다:

헤더 설정

AI 요청과 함께 보낼 사용자 정의 HTTP 헤더를 설정할 수 있습니다.

여러 서비스가 동일한 AI API를 공통으로 사용할 때, 헤더에 서비스별 레이블 값을 설정할 수 있습니다.

예를 들어, 서버에서 AI-Label 값을 추출하여 서비스별 사용량 집계, 비용 모니터링, 로그 분석 등에 활용할 수 있습니다.

// synapeditor.config.js
// Headers settings
'aiWriteSupporter.config': {
    text: {
        url: 'url',
        apiKey: 'apiKey',
        headers: {
            'AI-Label': 'synapeditor'
        }
    }
}

요청 본문 설정

API 요청에 필요한 추가 값을 설정합니다.

GPT에 설정할 수 있는 값들은 아래 링크에서 확인할 수 있습니다.

https://platform.openai.com/docs/api-reference/completions/create

// synapeditor.config.js
// Request body settings
'aiWriteSupporter.config': {
    text: {
        url: 'url',
        apiKey: 'apiKey',
        requestBody: {
            model: 'gpt-4o',      // defaults to gpt-3.5-turbo if not specified
            temperature: 2,
            presence_penalty: 2,
            ...
        }
    }
}

OCR URL 설정: '이미지 첨부' 기능 사용

ocrUrl을 설정하면 초안 작성 메뉴에서 '이미지 첨부' 메뉴가 활성화됩니다.

'이미지 첨부' 기능은 이미지에서 텍스트를 추출하여 입력한 프롬프트와 함께 AI에 전송합니다.

사용 예시) 보도자료 이미지 첨부 → '요약' 프롬프트 입력 → 전송

OCR 프로모션 설정

// synapeditor.config.js
'aiWriteSupporter.config': {
    text: {
        ocrUrl: 'https://ailab.synap.co.kr/sdk', // Available during the promotion period.
        ocrApiKey: 'issued API key'
    }
}

OCR Pro 설정

// synapeditor.config.js
'aiWriteSupporter.config': {
    text: {
        ocrUrl: 'OCR pro url',
        ocrApiKey: 'issued API key',
        ocrDirectApiKey: true // default: false
    }
}

'ocrUrl' 미설정: 초안 작성 시 '이미지 첨부' 메뉴 미표시	'ocrUrl' 설정: 초안 작성 시 '이미지 첨부' 메뉴 표시

사용자 정의 프롬프트 설정

사용자 정의 프롬프트를 추가합니다.

// synapeditor.config.js
'aiWriteSupporter.config': {
    text: {
        customPrompts: [
            {
                key: 'my-custom-menu1',
                type: 'prompt',
                label: {
                    ko: '나의 커스텀 메뉴 1',
                    en: 'My custom menu'
                },
                prompt: {
                    ko: '바나나를 영어로',
                    en: 'banana in english',
                }
            },
            {
                key: 'my-custom-menu2',
                type: 'immediately',
                label: {
                    ko: '나의 커스텀 메뉴 2',
                    en: 'My custom menu'
                },
                prompt: {
                    ko: '포도를 영어로',
                    en: 'grape in english',
                }
            },
            {
                key: 'my-custom-menu3',
                type: 'group',
                label: {
                    ko: '내가 제일 자주쓰는 메뉴 모음',
                    en: 'My most used menu'
                },
                items: ['englishTranslation', 'tabularFormat']
            }
        ]
    }
}

카테고리별로 표시할 프롬프트 메뉴 설정

카테고리별로 표시할 프롬프트 메뉴를 설정합니다.

카테고리는 'favorites', 'draft', 'edit', 'createByReference', 'write'이며, 각 카테고리에 포함된 메뉴는 미리 정의된 프롬프트 메뉴에서 확인할 수 있습니다.

초안 카테고리 메뉴 재정의

카테고리에 표시되는 메뉴를 재정의할 수 있습니다.

플러그인에서 미리 정의된 프롬프트 메뉴 키는 [AIWriteSupporter] 미리 정의된 프롬프트 메뉴에서 확인할 수 있습니다.

적용 모습

설정 예시

// synapeditor.config.js
'aiWriteSupporter.config': {
    text: {
        categoryConfig: {
            draft: [
                'meetingRequestEmail', 'salesEmail', 'jobAnnouncement'
            ]
        }
    }
}

편집 또는 검토(edit), createByReference 카테고리 숨기기

카테고리에 빈 배열을 설정하면 해당 카테고리가 숨겨집니다.

적용 모습

설정 예시

// synapeditor.config.js
'aiWriteSupporter.config': {
    text: {
        categoryConfig: {
            edit: [],
            createByReference: []
        }
    }
}

즐겨찾기 카테고리에 사용자 정의 메뉴 추가

즐겨찾기 카테고리는 모든 상황에서 항상 표시됩니다.

자주 사용하는 프롬프트 메뉴를 추가할 수 있습니다.

적용 모습

설정 예시

// synapeditor.config.js
// Adding custom menus to the Favorites category
'aiWriteSupporter.config': {
    text: {
        categoryConfig: {
            favorites: ['my-custom-menu1', 'my-custom-menu2', 'my-custom-menu3']
        },
        customPrompts: [
            {
                key: 'my-custom-menu1',
                type: 'prompt',
                label: {
                    ko: '나의 커스텀 메뉴 1',
                    en: 'My most used menu'
                },
                prompt: {
                    ko: '바나나를 영어로',
                    en: 'banana in english',
                }
            },
            {
                key: 'my-custom-menu2',
                type: 'immediately',
                label: {
                    ko: '나의 커스텀 메뉴 2',
                    en: 'My most used menu'
                },
                prompt: {
                    ko: '포도를 영어로',
                    en: 'grape in english',
                }
            },
            {
                key: 'my-custom-menu3',
                type: 'group',
                label: {
                    ko: '내가 제일 자주쓰는 메뉴 모음',
                    en: 'My most used menu'
                },
                items: ['englishTranslation', 'tabularFormat']
            }
        ]
    }
}

프롬프트 및 미리보기 창 기본 크기 설정

프롬프트와 미리보기 화면이 나타날 크기를 설정할 수 있습니다. 설정하지 않으면 기본값({ width: '380px', height: '260px' })이 적용됩니다.

// synapeditor.config.js
'aiWriteSupporter.config': {
    text: {
        url: '/request',
        areaSize: { width: '500px', height: '350px' }
        //...
    }
}

areaSize가 설정되지 않은 경우	areaSize가 설정된 경우
프롬프트와 미리보기 화면이 기본 크기({ width: '380px', height: '260px' })로 나타납니다.	프롬프트와 미리보기 화면이 설정된 크기({ width: '500px', height: '350px' })로 나타납니다.