취미로 프로그래밍 공부하고 있어서 프로그래밍을 전혀 모르는 것은 아니지만 브라우저 확장앱은 어떻게 만드는지 몰라 그냥 한번 만들어달라고 쫄라볼까? 해서 클로드에 물어봤습니다.

"이미지에 마우스 갖다대면 이미지의 텍스트를 분석해서 한국어로 번역해주는 브라우저 확장프로그램을 만들어줘" 라고...

(무료플랜을 쓰니 물어보는데도 한계가 있어서 새로운 채팅을 열고 하는게 좀 번거롭긴 합니다.)

아...앱스토어에 이런 확장앱이 있을지도 모르겠습니다만 만들어보는데 의의를 뒀습니다.

이 글을 읽어보시는 분들 중에서도 이런거 만들어볼까? 라는 아이디어가 있으시다면 AI의 도움을 받아보세요.

지시만 제대로 하면 무료플랜에서도 얼마든지 만들어 볼 수 있습니다.

확장앱을 만들면서 제가 한건 그저 이거 고쳐줘, 저거 고쳐줘 한 것 밖에는 없네요.

아...아이콘 사이트 가서 아이콘 만든거랑.

몇 번의 시행착오 끝에 하나 만들어졌습니다.

출처: 잉글리시시티​

이미지에 마우스 갖다대면 팝업창이 뜨고 원본과 번역 텍스트가 나옵니다.

어떤 경우에는 잘 되고, 어떤 경우에는 안 뜨고...뭐가 문제인지는 정확히 모르겠습니다. ㅋ

사용법:

1. 첨부한 파일을 다운받아 압축을 푼다.

2. 브라우저의 확장 메뉴를 눌러 확장관리로 간다.

3. 개발자 모드를 ON

4. "압축 풀린 파일 로드" 를 눌러 압축을 푼 해당 폴더를 선택한다.

5. 설치된 확장앱의 확장옵션을 선택해서 구글 API들을 입력하고 저장한다.

​Cloud API | Google Cloud​

구글 API 얻는 방법이 헷갈려서 저도 이것저것 마구 눌러보다가 겨우 얻었네요 ㅋ

Vision과 Translation 두 가지 API를 신청하면 됩니다.

결제는 등록해야 하지만 무료 범위 내에서도 충분히 쓸 수 있습니다.

// 2025.03.16 조금 업데이트된 버전을 다시 올렸습니다. 이미지에 마우스 올리면 번역팁이 뜨도록 수정.