GPT 영단어사전 익스텐션 개발기

이제는 영어로 질문하자!

ChatGPT 페이지에서 영단어를 바로 검색할 수 있는 chrome 익스텐션을 개발했습니다.
https://github.com/mattew8/quick-word-lookup-GPT

GitHub - mattew8/quick-word-lookup-GPT: Easily search for English words without switching tabs!

익스텐션은 다음과 같은 기능을 제공합니다.

1. chatgpt.com 접속 후 텍스트 입력창 클릭 시, 익스텐션이 실행됩니다. (chrome 브라우저 사이드 패널 활성화)
2. 한국어 단어를 입력하면, 해당 단어에 맞는 영단어를 검색합니다.
3. 검색 결과 중 붙여넣기 아이콘을 클릭하면, 해당 단어가 텍스트 입력창에 즉시 삽입됩니다.
4. 검색한 단어 기록을 별도로 제공합니다.

 

개발 동기

좋은 질문을 영어로 해보자

생성형 AI에서 좋은 답변을 얻는 가장 좋은 방법은... 좋은 질문을 하는 것입니다!
질문의 질이 높을수록, AI가 제공하는 답변의 질도 높아지는 것이죠.
 
그리고 이때 생성형 AI의 학습 데이터 중 대부분은 영어로 되어 있으니
→ 가능하다면 영어로 질문을 하는 것이, 더 나은 답변을 얻는 데 (미약하지만) 도움이 될 것이라고 생각했습니다.

일단 영어부터 해보자

물론 주된 이유는, 영어 학습입니다! (하하)

솰라솰라

최근 영어 공부에 매진하고 있는데, 영어로 질문을 작성하면서 자연스럽게 영어 실력을 향상하고자 했습니다.

모를 땐 찾아보자 (그런데 불편해!)

그렇게 부족한 영어 실력으로 문장을 만들다 보면, 모르는 단어를 찾아야 하는 순간이 찾아옵니다.
알고 있는 단어들로만 질문을 할 수는 없으니... 새 탭을 켜고, 구글에 원하는 단어 + "영어로" 의 형태로 검색을 합니다.

주로 이런 식으로 말이죠

그런데 문제는, 이 작업이 반복되다 보니 제법 귀찮다는 것!
 
탭 이동 없이 내가 궁금했던 단어만 빠르게 번역할 수 있다면?
나중에 내가 검색했던 단어들을 한눈에 살펴볼 수 있다면?
→ 영어 문장을 작성하는 순간의 효율성도 올라갈뿐더러, 추후 단어 학습에도 큰 도움이 될 수 있겠죠!
→ 즉시 개발에 착수했습니다.
 

주요 기능

한국어 → 영어 단어 번역

익스텐션 설치 후 텍스트 입력창을 클릭하면, 우측 side-panel이 활성화됩니다

익스텐션이 실행되면, 검색창만 (덩그러니) 존재합니다.
 

단어와 예문이 함께 제시됩니다

입력한 한국어 단어에 맞는 영어 단어가 검색되는 모습!
 

다음 문장을 이어 작성할 수 있습니다

붙여넣기 버튼을 누르면, 텍스트 입력창에 해당 단어가 즉시 삽입됩니다.
 
이를 통해 영어 문장을 작성하는 사람들이 전체 문장을 번역기에 의존하는 것이 아니라,
모르는 단어만 찾아서 채워 넣는 방식으로 영어 문장 작성 연습을 지속할 수 있는 것이죠!
 

검색 단어 단어장

개발 중...
 

주요 구현 요소

단어 번역 (with GPT)

이전에는 네이버에서 단어 번역 API를 무료로 제공했습니다.

아쉽다 아쉬워

하지만 24년부로 지원이 종료되면서, 다른 선택지를 찾아야 했죠.
 
https://www.deepl.com/ko/pro-api

DeepL API 번역 | 기계번역 기술

https://cloud.google.com/translate/docs?hl=ko

Cloud Translation 문서  |  Google Cloud

여러 번역 관련 API들이 있고, 모두 무료 플랜 + 사용량에 따른 과금 형태로 요금을 지불합니다.
 
하지만... 제가 원하는 건 한국어 문장을 문맥에 맞는 영어 문장으로 번역하는 것이 아닌
한국어 단어를 영어 단어로 바꾸는, 단순하고 간단한 작업이었습니다. 
즉, 위와 같은 언어 번역 서비스를 사용하는 것이 오히려 과한 기능이라 여겨졌죠.
(회원가입하고, 공식 문서 읽고, 카드 등록하는 것도 제법 귀찮았습니다)
 
최대한 빠르게 이를 구현할 방법이 뭐가 있을까 생각하던 도중,
이전 정부 지원 사업 때 작업한 챗GPT api가 떠올랐습니다.
 
즉 GPT에 사용할 영어 단어를 GPT에게 맡기는 것인데...
때마침 크레딧도 있겠다, 가장 빠르고 가볍게 구현할 수 있을 것 같아 이를 적용해 보기로 했습니다.
https://platform.openai.com/docs/quickstart
 
이전 3.5 모델만 하더라도

{"prompt": "사용자 입력 프롬프트", "completion": "기대 답변"}
{"prompt": "사용자 입력 프롬프트", "completion": "기대 답변"}
{"prompt": "사용자 입력 프롬프트", "completion": "기대 답변"}

과 같은 형태로 파인 튜닝을 해줬어야 했는데, 4.0대가 나오면서  

[
    {"role": "system", "content": "You are a helpful assistant."},
    {"role": "user", "content": "Who won the world series in 2020?"},
    {"role": "assistant", "content": "The Los Angeles Dodgers won the World Series in 2020."},
    {"role": "user", "content": "Where was it played?"}
]

위와 같이, "역할 설정" / "사용자 답변" / "챗봇 답변"과 같은 형태로 파인 튜닝이 진행됩니다.
 
저 같은 경우
1) 사용자가 한국어 단어를 입력하면
2) 영어 단어와 예문을 최대 5개까지 제공하고
3) 존재하지 않는 단어일 경우 Error를 반환하는 형태로 만들고 싶었기 때문에

import { ChatCompletionMessageParam } from 'openai/resources/index.mjs';

const translateCompletionMessages: ChatCompletionMessageParam[] = [
  {
    role: 'system',
    content:
      "You are a bilingual Korean-English dictionary. Provide up to 5 English translations and example sentences for Korean words. If the input is not a valid Korean word, respond with 'ERROR'.",
  },
  { role: 'user', content: '사과' },
  {
    role: 'assistant',
    content:
      "Apple\nExample: 'I ate an apple for breakfast.'\n\nApology\nExample: 'He offered an apology for his mistake.'",
  },
  { role: 'user', content: '바나나' },
  {
    role: 'assistant',
    content: "Banana\nExample: 'Monkeys love eating bananas.'",
  },
  { role: 'user', content: '책' },
  {
    role: 'assistant',
    content: "Book\nExample: 'I am reading a fascinating book.'",
  },
  { role: 'user', content: '물' },
  {
    role: 'assistant',
    content: "Water\nExample: 'Please give me a glass of water.'",
  },
  { role: 'user', content: '먹다' },
  {
    role: 'assistant',
    content:
      "Eat\nExample: 'I like to eat apples.'\n\nConsume\nExample: 'They consume a lot of fast food.'",
  },
  { role: 'user', content: '걷다' },
  {
    role: 'assistant',
    content:
      "Walk\nExample: 'She likes to walk in the park.'\n\nStroll\nExample: 'We took a stroll along the beach.'",
  },
  { role: 'user', content: '가다' },
  {
    role: 'assistant',
    content:
      "Go\nExample: 'I need to go to the store.'\n\nLeave\nExample: 'He decided to leave early.'\n\nMove\nExample: 'We need to move quickly.'\n\nTravel\nExample: 'They love to travel around the world.'",
  },
  { role: 'user', content: '잡다' },
  {
    role: 'assistant',
    content:
      "Catch\nExample: 'Can you catch the ball?'\n\nGrab\nExample: 'I will grab a drink.'\n\nHold\nExample: 'Please hold my hand.'",
  },
  { role: 'user', content: 'abcd' },
  {
    role: 'assistant',
    content: 'ERROR',
  },
];

위와 같은 예시 데이터를 사용했습니다.
 

import OpenAI from 'openai';
import { ChatCompletionMessageParam } from 'openai/resources/index.mjs';

const apiKey = import.meta.env.VITE_API_KEY;

const openai = new OpenAI({
  apiKey: apiKey,
  dangerouslyAllowBrowser: true,
});

export async function generateText(text: string) {
  const completion = await openai.chat.completions.create({
    messages: [...translateCompletionMessages, { role: 'user', content: text }],
    model: 'gpt-3.5-turbo',
  });

  const answer = completion.choices[0]?.message?.content;
  if (answer === 'ERROR') {
    throw new Error('존재하지 않는 단어입니다!');
  }
  return answer;
}

실제 OpenAI 모듈을 통해 언어 생성 후 응답을 반환하는 함수!
이 중 dangerouslyAllowBrowser 옵션을 줘야만 client-side에서 호출이 가능합니다.
 

side-panel

회사에서 개발을 하다 알게 된 chrome side panel!
브라우저를 가리지 않고 익스텐션 기능을 활용할 수 있다는 장점이 있는데
왜 다른 익스텐션들이 이를 적극 사용하지 않는지 의아할 정도로, 좋은 사용자 경험을 제공합니다.

// manifest.json
{
  "name": "QuickWordLookupGPT",
  "manifest_version": 3,
  "version": "1.0.0",
  "permissions": ["sidePanel"],
  "side_panel": {
    "default_path": "src/app/side-panel/index.html"
  },
}

익스텐션에서 side-panel을 사용하기 위해서는, 우선 해당 권한을 얻어야 합니다.
 

chrome.sidePanel.open({ tabId })

chrome의 sidePanel API를 통해 활성화할 수 있는데,
중요한 점은 반드시 사용자 상호작용을 통해 해당 API를 호출해야만 한다는 것!
 

  // content-script.ts
  const xpath = "//textarea[@id='prompt-textarea']";
  const textArea = document.evaluate(
    xpath,
    document,
    null,
    XPathResult.FIRST_ORDERED_NODE_TYPE,
    null,
  ).singleNodeValue;
  if (textArea === null) return;

  textArea.addEventListener('click', function openSidePanel() {
    chrome.runtime.sendMessage('open_side_panel');
  });

물론 저의 경우 chatgpt.com 페이지에서 텍스트 입력창을 클릭했을 때 활성화되므로, 큰 문제는 아니었습니다.
 

추가 개발 사항 (?)

단어장

검색했던 단어 목록을 저장해, 나중에 찾아볼 수 있게 만들 예정입니다.
단어 시험, TTS 등을 넣어도 좋겠네요!
 

영어 프롬프트 생성기

아무래도 단어 검색에 GPT를 활용하다 보니...
~~한 기능을 수행할 수 있는 프롬프트를 영어로 제공받을 수 있어도 좋겠다 하는 생각이 들었습니다.
(저 같은 경우 위 예시처럼 프롬프트를 위한 프롬프트도 많이 작성하는 편인데, 그때마다 새 채팅을 시작하는 게 귀찮았달까요)
 
한국어 문장 → 영어 프롬프트 작성기 정도가 될 것 같은데, 얼마나 유용할는지는..?