TokenSaver 구축기: AI 도구용 이미지 최적화기

최근 저는 TokenSaver라는 작은 Firefox 확장 프로그램을 만들었습니다.

아이디어는 간단한 관찰에서 시작되었습니다:

AI 도구가 거대한 스크린샷의 모든 픽셀을 필요로 하지는 않습니다.

하지만 우리는 종종 정확히 그것을 전송합니다.

MacBook에서 찍은 스크린샷은 쉽게 수천 개의 픽셀 너비를 가질 수 있습니다. 만약 제가 AI 모델에게 작은 코드 조각을 읽거나 오류 메시지를 이해하도록 요청한다면, 그 이미지의 대부분은 유용하지 않을 수 있습니다.

그래서 저는 전송하기 전에 이미지를 최적화하는 도구를 만들었습니다.

👉 Firefox에서 TokenSaver 사용해 보기

문제점

AI 코딩 어시스턴트는 제 일상 개발 워크플로우의 일부가 되고 있습니다.

저는 다음과 같은 경우에 정기적으로 스크린샷을 전송합니다:

• UI 디버깅
• 오류 메시지
• 코드 조각
• 문서화
• 터미널 출력
• 디자인 피드백

문제는 스크린샷이 필요 이상으로 클 수 있다는 것입니다.

3000×2000 크기의 스크린샷과 더 작은 최적화된 버전은 제가 모델에게 수행하도록 요청하는 작업에 대해 본질적으로 동일한 정보를 포함할 수 있습니다. 하지만 이미지는 여전히 이미지 입력으로 처리되어야 합니다.

이곳에서 TokenSaver의 아이디어가 나왔습니다.

아이디어

워크플로우는 의도적으로 간단합니다:

Screenshot
    ↓
TokenSaver
...

대신에:

Screenshot
    ↓
AI tool

목표는 이미지 품질을 파괴하는 것이 아닙니다. 중요한 정보를 유지하면서 불필요한 이미지 데이터를 제거하는 것입니다.

TokenSaver의 기능

TokenSaver는 현재 이미지를 제공하는 여러 가지 방법을 지원합니다:

• 파일 선택기 (File picker)
• 드래그 앤 드롭 (Drag and drop)
• 스크린샷 직접 붙여넣기 (Paste screenshots directly)

그런 다음 선택된 모드를 기반으로 이미지를 최적화할 수 있습니다.

이 확장 프로그램은 또한 최적화 전후의 예상 토큰 수를 표시합니다. 이를 통해 최적화가 실제로 의미 있는 차이를 만들었는지에 대한 아이디어를 얻을 수 있습니다.

다양한 최적화 모드

저는 단일한

따라서 TokenSaver는 다음을 포함하여 다양한 최적화 모드를 제공합니다:

• Sharp: 이미지 품질 우선
• Auto: 품질과 최적화의 균형
• Max Saving: 이미지 크기 축소 우선

이를 통해 스크린샷 유형에 따라 선택하는 것이 가능해집니다.

예를 들어, 저는 작은 코드 텍스트가 포함된 스크린샷을 단순한 UI 스크린샷과는 다르게 처리할 것입니다.

로컬 처리가 필요한 이유?

이것은 중요한 설계 결정이었습니다.

스크린샷에는 민감한 정보가 포함될 수 있습니다.

개발자로서 우리는 정기적으로 다음을 포함하는 스크린샷을 다룹니다:

API 응답
소스 코드
고객 정보
...

저는 사용자들이 단순히 크기를 조정하기 위해 해당 이미지를 다른 서비스에 업로드하는 것을 원하지 않았습니다.

그래서 TokenSaver는 브라우저 내에서 이미지 최적화를 수행합니다.
이미지 처리를 위해 TokenSaver 서버가 필요하지 않습니다.

흥미로운 배움 하나

이것을 구축하면서 얻은 가장 큰 교훈은 이미지 크기 조정 자체가 아니었습니다.

바로 AI를 위한 이미지 최적화가 일반적인 이미지 최적화와 다르다는 것을 깨달은 것이었습니다.

전통적인 이미지 압축은 보통 다음 사항에 중점을 둡니다:

• 파일 크기
• JPEG/WebP 품질
• 대역폭
• 저장 공간

AI 입력의 경우, 또 다른 질문이 중요해집니다:

모델이 이 작업을 위해 실제로 얼마나 많은 시각적 정보가 필요한가?

그것은 다른 최적화 문제입니다.

다음으로 작업할 내용

TokenSaver는 현재 Firefox용으로 사용할 수 있습니다.

저는 프로젝트를 당분간 작게 유지하고 실제 사용자 피드백을 사용하여 다음에 무엇이 와야 할지 결정하고 있습니다.

가능한 방향으로는 더 광범위한 브라우저 지원과 추가적인 AI 입력 최적화가 포함됩니다.

하지만 흥미롭게 들린다는 이유만으로 기능을 추가하고 싶지는 않습니다.

차라리 하나의 문제를 먼저 제대로 해결하는 것이 낫습니다.

사용해 보세요

개발을 위해 AI 도구를 사용하고 스크린샷을 정기적으로 붙여넣는다면, 한번 시도해 보세요:

👉 TokenSaver – 이미지 최적화기 설치

무료이며, 여러분의 스크린샷으로 어떤 일이 일어나는지 진심으로 듣고 싶습니다.

특히 이미지에 작은 텍스트나 코드가 포함된 어려운 경우들입니다.

개발자 소개

저는 iOS 개발과 AI 분야에서 일하는 엔지니어 Taha Hussein입니다.

LinkedIn: https://www.linkedin.com/in/taha-hussein-b0a583425/

YouTube: https://www.youtube.com/@Tahahussein-Ai