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',
	//...
],
// ...

플러그인 설정하기

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

...

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/account/api-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: 글쓰기

...

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: HyperCLOVA X로 요청을 하도록 구현한 URL
'aiWriteSupporter.config': {
    text: {
        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, 
            ...
        }
    }
}

Status

colour	Yellow
title	릴리즈 2.18.0 이상

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

...

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을 설정하면 초안 작성 메뉴에서 '이미지 첨부' 메뉴가 활성화됩니다.

...

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

사용자 정의 프롬프트 설정

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

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']
        	}
        ]
    }
}

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

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

...

Key

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

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

...

적용된 모습

설정

Code Block

language	js
theme	Emacs
title	synapeditor.config.js

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

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

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

적용된 모습

설정

Code Block

language	js
theme	Emacs
title	synapeditor.config.js

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

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

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

...

적용된 모습

설정

Code Block

language	js
theme	Emacs
title	synapeditor.config.js

// 즐겨찾기 카테고리에 커스텀 메뉴 추가
'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 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']
        	}
        ]
    }
}

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

프롬프트와 미리보기 화면이 나타날 크기를 설정할 수 있습니다. 설정을 하지 않으면 기본값({ 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 4

New Version Current

Key

목차

지원 브라우저

사용 방법

플러그인 파일 불러오기

툴바에 버튼 추가하기

툴바에 추가

바로 삽입에 추가

플러그인 설정하기

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

URL, API Key 설정

Request Body 설정

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

사용자 정의 프롬프트 설정

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

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

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

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

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

Space shortcuts

Page tree

Page History

Versions Compared

Old Version 4

New Version Current

Key

목차

지원 브라우저

사용 방법

플러그인 파일 불러오기

툴바에 버튼 추가하기

툴바에 추가

바로 삽입에 추가

플러그인 설정하기

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

URL, API Key 설정

Request Body 설정

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

사용자 정의 프롬프트 설정

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

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

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

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

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