AI를 사용한 Web 앱이나 Chrome 확장 프로그램을 만들려고 하면, 가장 먼저 떠올리기 쉬운 것이 API 연동입니다.

예를 들어, ChatGPT API나 Gemini API를 사용하여 앱 내부에서 직접 AI에게 문의하는 형태입니다.

물론 그것은 편리하지만, 다음과 같은 허들도 있습니다.

• API 키 관리가 필요함
• 이용 요금이 발생할 가능성이 있음
• 서버나 Cloudflare Workers 등 중계 처리가 필요해지는 경우가 있음
• 공개물에 API 키를 포함하지 않도록 주의해야 함
• 개인 개발에서는 조금 과하게 느껴질 수 있음

그래서 이번에는 API를 사용하지 않고 AI 기능을 구현하는 방법으로서,

"프롬프트(Prompt)를 복사한다"

"ChatGPT나 Gemini 사이트를 연다"

"사용자가 AI에게 붙여넣어 실행한다"

"생성 결과를 앱 측에 다시 붙여넣는다"

"앱 측에서 결과를 반영한다"

라는 방식을 제안하고자 하는 것이 이 기사의 취지입니다.

만든 것은 이것입니다.

Gmail의 메일 목록에 "수상함 %"를 표시하는 Chrome 확장 프로그램입니다.

메일 내용을 AI에게 판정하게 하고, 그 결과를 확장 프로그램 측에 붙여넣음으로써, 다음번 이후의 Gmail 화면에서 수상함의 기준이 표시되도록 합니다.

주요 기능은 다음과 같습니다.

• Gmail의 메일 목록에 "수상함 %"를 표시
• 수상함 단계에 따라 표시를 강조
• 확장 패널에서 ChatGPT 또는 Gemini를 열 수 있음
• AI 판정용 프롬프트를 자동 생성하여 복사
• ChatGPT의 경우, 짧은 프롬프트라면 URL 파라미터로 직접 전달
• AI의 생성 결과를 붙여넣어 "반영"할 수 있음
• 판정 결과를 압축하여 저장하고, 다음번 이후의 수상함 표시로 사용
• 메일 본문 자체는 저장하지 않음

이번 목적은 단순히 Gmail의 수상한 메일을 판정하는 것만이 아닙니다.

오히려 가장 전달하고 싶은 것은,

"API를 사용하지 않아도, 자신이 만든 결과물에 AI를 도입할 수 있다"

라는 점입니다.

AI를 앱에 구현한다고 하면, API 연동이나 서버 구현이 필요하다고 생각하기 쉽습니다.

하지만 개인용 도구나 작은 Web 앱이라면,

• 앱 측에서 프롬프트를 만든다
• 사용자에게 AI 사이트에서 실행하도록 한다
• 결과를 앱 측에 다시 붙여넣게 한다
• 앱 측에서 결과를 저장·반영한다

라는 흐름만으로도 상당히 실용적인 AI 기능이 됩니다.

이 방식이라면 API 키를 배포할 필요가 없습니다.

이용자는 자신이 평소에 사용하는 ChatGPT나 Gemini를 그대로 사용할 수 있습니다.

Chrome 확장 프로그램으로 불러옵니다.

• GitHub에서 파일을 가져옵니다
• Chrome에서 chrome://extensions/를 엽니다
• 오른쪽 상단의 "개발자 모드"를 켭니다
• "압축 해제된 확장 프로그램을 로드합니다"를 누릅니다
• gmail-suspicion-extension 폴더를 선택합니다
• Gmail을 엽니다
• 확장 프로그램 아이콘을 누르면 패널이 표시됩니다

패널에는 ChatGPT 또는 Gemini를 여는 버튼이 있습니다.

버튼을 누르면 판정용 프롬프트가 클립보드에 복사되고, AI 사이트로 이동합니다.

그 후 사용자가 AI 사이트에서 프롬프트를 실행하고, 생성된 JSON 결과를 확장 패널에 붙여넣습니다.

마지막으로 "반영"을 누르면 확장 프로그램 측에 판정 결과가 저장되어, Gmail 목록에 수상함 %가 표시됩니다.

ChatGPT는 다음 URL로 엽니다.

또한, 프롬프트가 3000자 이내인 경우에는 URL 파라미터에 프롬프트를 포함하여 이동합니다.

XXX에는 URL Safe하게 변환한 프롬프트가 들어갑니다.

이를 통해 대응 환경에서는 ChatGPT를 연 시점에 프롬프트가 입력된 상태에 가깝게 만들 수 있습니다.

단, 너무 긴 프롬프트를 URL에 포함하면 다루기 어려워지기 때문에, 3000자를 초과하는 경우에는 일반적인 임시 채팅 URL만 엽니다.

어느 경우든 프롬프트 자체는 클립보드에 복사합니다.

ChatGPT에서는 임시 채팅을 사용함으로써 일반적인 대화 기록과는 분리하여 사용하기 편리합니다.

이번처럼 메일의 수상함을 일시적으로 판정하고 싶은 경우에는 일반적인 채팅 기록에 섞이지 않는 편이 자연스럽습니다.

그렇기 때문에 ChatGPT로의 이동 URL에는 temporary-chat=true를 붙이고 있습니다.

이번 확장 프로그램에서 사용하고 있는 사고방식은 상당히 범용적입니다.

흐름은 다음과 같습니다.

앱
↓
판정용 프롬프트 생성
...

이것은 API 연동이 아닙니다.

하지만 사용자가 AI 사이트를 수동으로 경유함으로써, 실질적으로 AI를 앱의 일부로서 이용할 수 있습니다.

가장 큰 장점은 API 키가 필요 없다는 것입니다.

API 키를 앱에 내장할 필요가 없으며, 서버 측에서 관리할 필요도 없습니다.

GitHub Pages나 정적 HTML, Chrome 확장 프로그램과 같은 구성에서도 사용하기 쉽습니다.

ChatGPT나 Gemini의 웹 화면을 사용하기 때문에, 사용자가 평소에 사용하는 범위 내에서 AI를 이용할 수 있습니다.

물론 사용자의 구독 상태나 이용 제한에는 의존하지만, 개발자 측이 API 비용을 부담하는 형태는 아닙니다.

AI와의 통신 처리, 인증, API 에러 처리, 속도 제한 (Rate Limit) 대응 등을 앱 측에서 갖추지 않아도 됩니다.

앱 측은,

• 프롬프트 (Prompt) 생성
• 복사
• 결과 수신
• JSON 파싱
• 결과 반영

이라는 처리에 집중할 수 있습니다.

이번에는 이메일 본문 그 자체를 저장하지 않는 설계로 만들었습니다.

AI 판정 후에 저장하는 것은, 다음번 이후의 판정에 사용하기 위한 압축된 특징(Feature)뿐입니다.

예를 들어,

• 도메인별 스코어
• 발신자별 스코어
• 짧은 키워드 규칙
• 제목이나 발신자에 대한 짧은 특징 규칙

과 같은 정보입니다.

이메일 본문을 통째로 기억하지 않음으로써 저장하는 정보량을 억제하고 있습니다.

물론 API 없는 수동 연동이기에 약점도 있습니다.

사용자가 AI 사이트를 열고 결과를 다시 붙여넣어야 합니다.

API 연동처럼 버튼 하나로 백그라운드에서 모든 것이 완료되는 방식은 아닙니다.

AI에게는 JSON으로 반환하도록 지시하지만, 반드시 완전한 JSON만 반환된다고 보장할 수는 없습니다.

따라서 앱 측에서는 어느 정도의 파싱 (Parsing) 실패를 상정해야 합니다.

이번 '수상함 %'는 어디까지나 보조적인 표시입니다.

본격적인 보안 제품의 대체재가 아닙니다.

이메일의 진위 확인이나 첨부 파일의 안전성 확인은 별도로 신중하게 수행해야 합니다.

Gmail의 목록 화면에 대해, 확장이 배지 (Badge)를 표시합니다.

수상함이 낮은 이메일은 절제하여 표시하고, 수상함이 높은 이메일은 눈에 띄게 합니다.

예를 들어, 다음과 같은 이미지입니다.

수상 12% 일반 메일 같음
수상 46% 약간 주의
수상 73% 상당히 수상함
...

표시는 어디까지나 보조입니다.

사용자가 이메일을 열기 전에 목록 상에서 '조금 주의해서 보자'라고 생각할 수 있게 만드는 것이 목적입니다.

이 확장 프로그램에서는 AI의 판정 결과를 그대로 대량으로 저장하는 것이 아니라, 다음번 이후의 판정에 사용하기 쉬운 형태로 압축합니다.

예를 들어, 다음과 같은 정보입니다.

{
"domains": {
"example.com": 80
...

실제 저장 형식은 구현에 따라 다르지만, 사고방식으로는,

'본문을 저장하는 것'이 아니라,

'수상함 판단에 사용할 수 있는 작은 특징만을 저장한다'

라는 방침입니다.

이를 통해 경쟁자가 적고 정보량도 적은 기억이 됩니다.

AI에게는 판정 결과를 JSON으로 반환하도록 지시합니다.

예를 들어, 다음과 같은 형식입니다.

{
"items": [
{
...

앱 측에서는 이 JSON을 읽어 들여 이메일 목록의 표시와 기억 데이터에 반영합니다.

이번과 같은 수동 AI 연동에서는 프롬프트 (Prompt) 설계가 상당히 중요합니다.

포인트는 다음과 같습니다.

• 반환받고 싶은 형식을 명확히 하기
• JSON만 반환하도록 지시하기
• 저장해도 되는 정보와 저장해서는 안 되는 정보를 구분하기
• 이메일 본문을 그대로 기억하지 않도록 지시하기
• 수상함의 이유를 짧게 출력하게 하기
• 다음 판정용 특징을 짧은 규칙으로 출력하게 하기

특히 중요한 것은 AI에게 '결과'뿐만 아니라 '다음번 이후에 사용하기 위한 압축 특징'도 출력하게 하는 것입니다.

이 발상을 사용하면 AI의 판단을 단 한 번으로 끝내지 않고, 앱 측의 로컬 학습 데이터처럼 다룰 수 있습니다.

구성은 심플합니다.

gmail-suspicion-extension/
manifest.json
background.js
...

Chrome 확장 프로그램으로서 Manifest V3로 제작했습니다.

content.js가 Gmail 화면에 들어가 목록의 이메일 행을 찾아 수상함 표시를 추가합니다.

background.js는 확장 아이콘을 눌렀을 때의 처리 등을 담당합니다.

content.css는 패널이나 배지의 외관을 담당합니다.

Chrome 확장 프로그램이므로 Gmail에 대해 컨텐트 스크립트 (Content Script)를 읽어 들이는 설정을 합니다.

이미지는 다음과 같은 구성입니다.

{
"manifest_version": 3,
"name": "Gmail Suspicion Meter",
...

수상함을 판정하기 위해 메일 본문은 필요하지만, 이를 저장할 필요는 없습니다.

저장하는 것은 다음번 이후에 도움이 될 만한 작은 특징들뿐입니다.

AI의 판정은 편리하지만, 절대적인 것은 아닙니다.

따라서 표시는 「수상함 %」라는 보조 정보로 하고 있습니다.

Gmail의 화면 구조는 변경될 가능성이 있습니다.

Chrome 확장 프로그램으로 Gmail 화면을 직접 읽을 경우, DOM 구조에 의존하기 때문에 향후 조정이 필요할 수 있습니다.

이는 Gmail 확장 프로그램을 만드는 데 있어 피하기 어려운 부분입니다.

이번 방식은 Gmail의 수상함 판정 외에도 사용할 수 있습니다.

예를 들어, 다음과 같은 것들에 응용할 수 있습니다.

• 문장 교정 도구
• 답장 문장 생성 도구
• 상품 리뷰 분석 도구
• CSV 데이터 요약 도구
• 로컬 메모 분류 도구
• 태스크 우선순위 판정 도구
• 학습 노트 퀴즈 생성 도구
• 브라우저 상의 문장 요약 도구

이들 모두 처음부터 API 연동으로 만들 필요는 없습니다.

우선은,

「프롬프트 (Prompt)를 만든다」

「AI 사이트에서 실행한다」

「결과를 다시 붙여넣는다」

「반영한다」

라는 형태로 구성하면, 상당히 가볍게 AI 기능을 추가할 수 있습니다.

개인 개발에서는 다음과 같은 고민이 자주 발생합니다.

• API 비용을 부담하고 싶지 않다
• 서버를 준비하고 싶지 않다
• API 키 (API Key) 관리를 하고 싶지 않다
• 우선 돌아가는 것을 만들고 싶다
• 자신용 도구로 사용하고 싶다
• GitHub에 가볍게 공개하고 싶다

이번 방식은 그러한 용도와 궁합이 좋습니다.

물론 상용 서비스나 대규모 이용에서는 API 연동이 더 적합한 상황도 많습니다.

하지만 개인용 도구나 프로토타입 (Prototype)에서는 수동 AI 연동이 더 빠르고, 안전하며, 공개하기 쉬운 경우가 있습니다.

이번 사고방식을 한마디로 말하자면,

「AI를 외부 엔진으로 사용한다」

는 것입니다.

앱 본체는 AI를 직접 호출하지 않습니다.

대신 AI에게 전달하기 위한 프롬프트 (Prompt)를 만듭니다.

사용자가 AI 사이트에서 실행하고, 그 결과를 앱으로 되돌립니다.

앱은 그 결과를 읽어 들여 자신의 기능에 반영합니다.

즉, AI의 추론 (Inference) 부분만 외부에 맡기고, UI나 저장, 반영 처리는 자신의 앱 측에서 담당합니다.

이렇게 역할을 분담하면 정적 사이트나 Chrome 확장 프로그램에서도 AI 활용의 폭이 넓어집니다.

이번에는 Gmail의 메일 목록에 수상함 %를 표시하는 Chrome 확장 프로그램을 만들었습니다.

포인트는 ChatGPT API나 Gemini API를 사용하지 않고, AI 사이트를 수동으로 경유하는 방식으로 했다는 점입니다.

이 방식에는 다음과 같은 장점이 있습니다.

• API 키가 필요 없음
• 서버가 필요 없음
• 무료로도 시도하기 쉬움
• GitHub에 공개하기 쉬움
• 개인 개발에 적합함
• AI의 출력을 앱 측에 반영할 수 있음

AI를 앱에組み込む (통합하는) 방법은 API 연동뿐만이 아닙니다.

프롬프트 (Prompt)를 복사하여 AI 사이트에서 실행하고, 결과를 다시 붙여넣는 것만으로도 충분히 AI를 활용한 도구를 만들 수 있습니다.

작은 도구나 개인용 앱이라면 이 방식은 상당히 실용적이라고 생각합니다.

「API를 쓸 정도는 아니지만, AI의 힘을 자신이 만든 것에 도입하고 싶다」

라는 경우에는 이러한 수동 AI 연동도 선택지에 넣어 보면 재미있을 것입니다.