Status


colour	Yellow
title	릴리즈 2.18.0 이상

Status
colour Yellow
title 릴리즈 3.0.0 이상

생성형 AI를 연동해 자동 콘텐츠 생성을 지원하는 AI 글 작성 도우미 플러그인입니다.

업무용 콘텐츠 초안을 자동으로 생성하거나 다양한 편집을 할 수 있어 효율적인 콘텐츠 작성을 할 수 있습니다.

지원 브라우저

Image Added	Image Added	Image Added	Image Added
Chrome	Edge	Safari	IE
Image Added	Image Added	Image Added	Image Added

공식적으로 지원하는 웹 브라우저는 다음과 같습니다.
- Microsoft Edge 최신버전
- Google Chrome 최신버전
- Apple Safari 최신버전
- Mozilla Firefox 최신버전
다른 브라우저에서도 작동할 수는 있지만 모든 기능이 올바르게 작동하지 않을 수 있습니다.
Internet Explorer 브라우저는 지원하지 않습니다.

사용 방법

플러그인 파일 불러오기

Code Block

language	xml
theme	Emacs

<!-- SynapEditor 객체가 존재해야 적용할 수 있기 때문에 에디터 스크립트 파일 아래에 include 해야 합니다 -->

<script src="aiWriteSupporter.min.js의 url"></script>
<link rel="stylesheet" href="aiWriteSupporter.min.css의 url">

툴바에 버튼 추가하기

AI에게 글 작성을 요청하는 버튼을 툴바 영역, 벌룬, 바로 삽입, 메뉴 영역에 추가할 수 있습니다.

툴바에 추가

Code Block

language	js
theme	Emacs
title	synapeditor.config.js

//...
'editor.toolbar': [
	// AI 요청하기 버튼
    'openTextAI',
	//...
],
// ...

바로 삽입에 추가

Code Block

language	js
theme	Emacs
title	synapeditor.config.js

//...
'editor.quickInsert': [
	// AI 요청하기 버튼
    'openTextAI',
	//...
],
// ...

플러그인 설정하기

사용 가능한 키

...

요청을 보낼 URL을 설정합니다.
- OpenAI의 API 주소
- OpenAI의 API로 요청을 하도록 구현한 URL
- HyperCLOVA X로 요청을 하도록 구현한 URL
설정이 되지 않으면 툴바에 플러그인 버튼이 표시되지 않습니다.

...

OpenAI에서 발급받은 API Key를 설정합니다.
- https://platform.openai.com/account/api-keys
해당 설정을 사용하게 되면 브라우저에 Key 값이 노출되기 때문에, Key 값을 설정하지 않고 서버를 통해 요청을 할 수 있도록 하는 것이 안전합니다.

...

ai

...

사용할 AI를 설정합니다. 기본값은 'gpt'입니다.
- OpenAI GPT: 'gpt'
- NAVER HyperCLOVA X: 'hcx'

...

max_tokens
temperature
n
....

...

글 작성 AI와 관련된 설정은 'text' , 이미지 생성 AI와 관련된 설정은 'image' 키 아래에 객체로 정의합니다.

이미지 생성 AI와 관련된 내용은 오른쪽 링크에서 확인해주세요: [AIWriteSupporter] 이미지 생성 AI

Code Block

language	js
theme	Emacs
title	synapeditor.config.js

'aiWriteSupporter.config': {
	text: { // 글 작성 AI 설정
		url: '/request',
		//...
	},
	image: { // 이미지 생성 AI 설정
		url: '/request',
		//...
	}
}

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

Key	Type	필수	기본값	설명
url	string	O	''	요청을 보낼 URL을 설정합니다. OpenAI의 API 주소 OpenAI의 API로 요청을 하도록 구현한 URL HyperCLOVA X로 요청을 하도록 구현한 URL 설정이 되지 않으면 툴바에 플러그인 버튼이 표시되지 않습니다.
apiKey	string		''	OpenAI에서 발급받은 API Key를 설정합니다. https://platform.openai.com/

docs

- account/api-

reference/completions/createocrUrlstring''

OCR URL을 설정하면 초안 작성 메뉴에서 '이미지 첨부'메뉴가 활성화됩니다.
이미지를 첨부하면 이미지에 있는 텍스트를 추출해 추출된 텍스트와 프롬프트를 AI에 함께 전송합니다.

customPrompts

Object[][]

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

Code Block

language	js
theme	Emacs

{ key: 'customPromptKey', type: 'prompt', // 또는 'immediately' label: { ko: '메뉴에 보여지는 텍스트',

- keys
해당 설정을 사용하게 되면 브라우저에 Key 값이 노출되기 때문에, Key 값을 설정하지 않고 서버를 통해 요청을 할 수 있도록 하는 것이 안전합니다.

ai

string

'gpt'

사용할 AI를 설정합니다. 기본값은 'gpt'입니다.
- OpenAI GPT: 'gpt'
- NAVER HyperCLOVA X: 'hcx'

requestBody

Object

{}

추가로 API에 전송할 내용을 설정합니다.
- max_tokens
- temperature
- n
- ....
자세한 내용은 아래 링크를 참고해 주세요.
- https://platform.openai.com/docs/api-reference/completions/create

ocrUrl

string

''

OCR URL을 설정하면 초안 작성 메뉴에서 '이미지 첨부'메뉴가 활성화됩니다.
이미지를 첨부하면 이미지에 있는 텍스트를 추출해 추출된 텍스트와 프롬프트를 AI에 함께 전송합니다.

customPrompts

Object[]

[]

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

Code Block

language	js
theme	Emacs

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

Code Block

language	js
theme	Emacs

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

key	Type	필수	설명
key	string	O	프롬프트를 구분할 수 있는 유니크한 값을 설정합니다.
type	'prompt' \| 'immediately' \| 'group'	O	prompt: 프롬프트 입력칸에 prompt에 정의한 텍스트가 추가됩니다. immediately: prompt에 정의한 텍스트가 메뉴를 실행 시 바로 전송됩니다. group: 하위 메뉴를 가지는 경우 설정합니다.
label	Object	O	메뉴에 보일 텍스트를 설정합니다.
prompt	Object		`type: 'prompt'` 또는 `type: 'immediately'`일 때만 유효합니다. 프롬프트로 전송할 텍스트를 설정합니다.
items	string[]		`type: 'group'`일 때만 유효합니다. 하위 메뉴에 보일 프롬프트 메뉴의 key를 배열 형태로 설정합니다.
iconName	string		아이콘 이름을 설정합니다. 이름에 해당하는 아이콘이 에디터에 등록이 되어있으면 메뉴에 아이콘이 보입니다.

categoryConfig

Object

{}

카테고리 별 보일 프롬프트 메뉴를 설정합니다.
카테고리는 아래와 같습니다.
- favorite: 즐겨찾기
- draft: 초안 작성
- edit: 편집 또는 검토
- createByReference: 내용을 참고하여 생성
- write: 글쓰기

URL, API Key 설정

...

areaSize

Object

{ width: '380px', height: '260px' }

프롬프트 및 미리보기 창 기본 사이즈를 설정합니다. (단위: px)
최소 사이즈 이하로 설정 시 최소 사이즈로 표현됩니다.
- 최소 사이즈: { width: '370px', height: '120px' }

URL, API Key 설정

요청을 보낼 API의 URL, API Key를 설정합니다.

...

Code Block

language	js
theme	Emacs
title	synapeditor.config.js

// URL과 API Key를 설정하는 경우
'aiWriteSupporter.config': {
    urltext: '{
        url: 'https://api.openai.com/v1/chat/completions',
        apiKey: 'sk-abc123...456xyz' // 브라우저에 노출되므로 안전하지 않음
    }
}

// URL만 설정하는 경우
'aiWriteSupporter.config': {
    text: {
        url: '/request'
}

Status

colour	Yellow
title	릴리즈 2.18.0 이상

사용할 생성형 AI에 맞춰 아래와 같이 설정합니다.

}
}

OpenAI GPT 설정

Code Block

language	js
theme	Emacs
title	synapeditor.config.js

// URL과 API Key를 설정하는 경우
'aiWriteSupporter.config': {
    text: {
        ai: 'gpt',
        url: 'https://api.openai.com/v1/chat/completions',
        apiKey: 'sk-abc123...456xyz' // 브라우저에 노출되므로 안전하지 않음
    }
}

// URL만 설정하는 경우
'aiWriteSupporter.config': {
	
    text: {
        ai: 'gpt',
        url: '/request'
    }
}

Naver HyperCLOVA X 설정

Code Block

language	js
theme	Emacs
title	synapeditor.config.js

// url: HyperCLOVA X로 요청을 하도록 구현한 URL
'aiWriteSupporter.config': {
    aitext: 'hcx', {
      url: '/request',  ai: 'hcx',
        url: '/request'
    }
}

Request Body 설정

API 요청 시 추가로 필요한 값들을 설정합니다.

...

Code Block

language	js
theme	Emacs
title	synapeditor.config.js

// Request body 설정
'aiWriteSupporter.config': {
    text: {
        url: 'url',
        apiKey: 'apiKey',
        requestBody: {
            temperature: 2,
            presence_penalty: 2, 
            ...
        }
}

...

}
}

HyperCLOVA X의 설정할 수 있는 값들은 아래와 같습니다.

필드	타입	설명
temperature	double	생성 토큰에 대한 다양성 정도 (설정값이 높을수록 다양한 문장 생성 가능) - 0~1 (기본값: 0.5)
topK	int	생성 토큰 후보군에서 확률이 높은 k 개를 후보로 지정하여 샘플링 - 0~128 (기본값: 0)
topP	double	생성 토큰 후보군을 누적 확률을 기반으로 샘플링 - 0~1 (기본값: 0.8)
repeatPenalty	double	같은 토큰을 생성하는 것에 대한 패널티 정도 (설정값이 높을수록 같은 결괏값을 반복 생성할 확률 감소) - 0~10 (기본값: 5)
stopBefore	string	토큰 생성 중단 문자 - [] (기본값)
maxTokens	int	최대 생성 토큰 수 - 0~2048 (기본값: 2048)

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

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

...

Code Block

language	js
theme	Emacs
title	synapeditor.config.js

'aiWriteSupporter.config': {
    text: {
        ocrUrl: 'https://ailab.synap.co.kr/sdk', // 프로모션 기간 중 사용이 가능합니다.
        ocrApiKey: '발급받은 API key'
    }
}

'ocrUrl'을 설정하지 않음: 초안 작성시 '이미지 첨부'메뉴 보이지 않음	'ocrUrl'을 설정: 초안 작성시 '이미지 첨부'메뉴 보여짐
Image Modified	Image Modified

사용자 정의 프롬프트 설정

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

Code Block

language	js
theme	Emacs
title	synapeditor.config.js

'aiWriteSupporter.config': {
    text: {
    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']
        	}
        ]
    }
}

카테고리 별 보일 프롬프트 메뉴 설정

카테고리 별 보일 프롬프트 메뉴를 설정합니다.

카테고리는 'favorites', 'draft', 'edit', 'createByReference', 'write'가 있고, 아래는 각각의 카테고리에 대한 설명입니다.

Key

초안 작성(draft) 카테고리 메뉴 재정의 하기

카테고리에 보일 메뉴를 재정의할 수 있습니다.

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

적용된 모습

설정

Image Modified

Code Block

theme
language	js

Emacstitlesynapeditor.config.js'aiWriteSupporter.config': { categoryConfig: {

	Emacs
title	synapeditor.config.js

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

편집 또는 검토(edit), 내용을 참고하여 생성(createByReference) 카테고리가 보이지 않도록 하기

카테고리에 빈 배열을 설정하면 카테고리가 보이지 않게 할 수 있습니다.

적용된 모습

설정

Image Added

Code Block

language	js
theme	Emacs
title	synapeditor.config.js

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

즐겨찾기(favorite) 카테고리에 커스텀 메뉴 추가하기

즐겨찾기 카테고리는 모든 상황에서 항상 보여지는 카테고리입니다.

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

적용된 모습

설정

Image Added

Code Block

language	js
theme	Emacs
title	synapeditor.config.js

// 즐겨찾기 카테고리에 커스텀 메뉴 추가
'aiWriteSupporter.config': {
    text: {
        categoryConfig: {
            favorites: ['my-custom-menu1', 'my-custom-menu2', 'my-custom-menu3']
        },

draft

customPrompts: [
            {

'meetingRequestEmail', 'salesEmail

           	key: 'my-custom-menu1',

'jobAnnouncement'

]

} }

편집 또는 검토(edit), 내용을 참고하여 생성(createByReference) 카테고리가 보이지 않도록 하기

카테고리에 빈 배열을 설정하면 카테고리가 보이지 않게 할 수 있습니다.

적용된 모습설정

Image Removed

Code Block

language	js
theme	Emacs
title	synapeditor.config.js

'aiWriteSupporter.config'

	type: 'prompt',
          		label: {

categoryConfig: {

      	    	ko: '나의 커스텀 메뉴 1',
                	en: 'My custom menu'

edit:

[],

createByReference: []

},

}

즐겨찾기(favorite) 카테고리에 커스텀 메뉴 추가하기

즐겨찾기 카테고리는 모든 상황에서 항상 보여지는 카테고리입니다.

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

적용된 모습설정

Image Removed

Code Block

language	js
theme	Emacs
title	synapeditor.config.js

//

즐겨찾기

카테고리에

커스텀

메뉴

추가 'aiWriteSupporter.config'

 	prompt: {

categoryConfig:

{

favorites

ko:

['my-custom-menu1

'바나나를 영어로',

'my-custom-menu2', 'my-custom-menu3'] }


                	en: 'banana in english',

customPrompts:

[

{

},

key:

'my-custom-menu1',

type:

'prompt',

label:

{

ko

key: '

나의 커스텀 메뉴 1

my-custom-menu2',

en

type: '

My custom menu'

immediately',

},

prompt

label: {
                	ko: '

바나나를 영어로

나의 커스텀 메뉴 2',
                	en: '

banana

My

in

custom

english

menu'

,

}

    	},
            	prompt: {

key

    	ko: '

my-custom-menu2

포도를 영어로',

type

        	en: '

immediately

grape in english',

label:

{

   	}
        	},

ko:

'나의

커스텀

메뉴 2',

en

key: '

My custom menu'

my-custom-menu3',

},

prompt

type:

{

'group',

ko

label:

'포도를 영어로',

en

ko: '

grape in english

내가 제일 자주쓰는 메뉴 모음',

}

},

{

en: 'My most used menu'

key:

'my-custom-menu3',

},

type: 'group',

label

items:

{

['englishTranslation', 'tabularFormat']
        	}

ko:

'내가

제일

자주쓰는

메뉴

모음',

 ]
    }
}

프롬프트 및 미리보기 창 기본 사이즈 설정

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

Code Block

language	js
theme	Emacs
title	synapeditor.config.js

'aiWriteSupporter.config': {
	text: {

...

url: '

...

/request',
		areaSize: { width: '500px', height: '350px' }
		//...
	}
}

areaSize 설정을 하지 않았을 때	areaSize 설정을 했을 때
기본 값으로 ({ width: '380px', height: '260px' }) 크기가 설정되어 프롬프트와 미리보기 화면이 타납니다.	설정한 값으로({ width: '500px', height: '350px' } ) 크기가 설정되어 프롬프트와 미리보기 화면이 나타납니다.
Image Added	Image Added

Space shortcuts

Page tree

Versions Compared

Old Version 2

New Version Current

Key

목차

지원 브라우저

사용 방법

플러그인 파일 불러오기

툴바에 버튼 추가하기

툴바에 추가

바로 삽입에 추가

플러그인 설정하기

사용 가능한 키

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

URL, API Key 설정

URL, API Key 설정

Request Body 설정

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

사용자 정의 프롬프트 설정

카테고리 별 보일 프롬프트 메뉴 설정

초안 작성(draft) 카테고리 메뉴 재정의 하기

편집 또는 검토(edit), 내용을 참고하여 생성(createByReference) 카테고리가 보이지 않도록 하기

즐겨찾기(favorite) 카테고리에 커스텀 메뉴 추가하기

편집 또는 검토(edit), 내용을 참고하여 생성(createByReference) 카테고리가 보이지 않도록 하기

즐겨찾기(favorite) 카테고리에 커스텀 메뉴 추가하기

프롬프트 및 미리보기 창 기본 사이즈 설정

Space shortcuts

Page tree

Page History

Versions Compared

Old Version 2

New Version Current

Key

목차

지원 브라우저

사용 방법

플러그인 파일 불러오기

툴바에 버튼 추가하기

툴바에 추가

바로 삽입에 추가

플러그인 설정하기

사용 가능한 키

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

URL, API Key 설정

URL, API Key 설정

Request Body 설정

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

사용자 정의 프롬프트 설정

카테고리 별 보일 프롬프트 메뉴 설정

초안 작성(draft) 카테고리 메뉴 재정의 하기

편집 또는 검토(edit), 내용을 참고하여 생성(createByReference) 카테고리가 보이지 않도록 하기

즐겨찾기(favorite) 카테고리에 커스텀 메뉴 추가하기

편집 또는 검토(edit), 내용을 참고하여 생성(createByReference) 카테고리가 보이지 않도록 하기

즐겨찾기(favorite) 카테고리에 커스텀 메뉴 추가하기

프롬프트 및 미리보기 창 기본 사이즈 설정