구글 번역 탭 왔다갔다 이제 그만 — AI로 번역기 직접 만들었어요

✅ 사용 도구: Claude (claude.ai)
✅ 소요 시간: 약 30분~1시간 (대화하며 수정 반복)
✅ 필요한 것: 클로드 계정, 크롬 브라우저


━━━━━━━━━━━━━━━━━━━━━━━━━━━━
STEP 1. 처음 프롬프트 — 기본 틀 만들기
━━━━━━━━━━━━━━━━━━━━━━━━━━━━

아래처럼 Claude에게 요청했습니다:

[요청 내용]
"텍스트를 여러 나라 언어로 동시에 번역해주는
크롬 확장프로그램 만들어줘.
영어, 일본어, 중국어 기본으로 있고
스페인어, 프랑스어, 독일어도 선택할 수 있으면 좋겠어.
번역 결과를 음성으로 읽어주는 기능도 넣어줘.
API 키 없이 무료로 쓸 수 있으면 좋겠고
하루 50번 제한으로 무료 운영되게 해줘."

Claude가 manifest.json, popup.html, popup.css, popup.js
전체 코드를 작성해줬습니다.


━━━━━━━━━━━━━━━━━━━━━━━━━━━━
STEP 2. 크롬에 설치해서 테스트
━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Claude가 준 코드를 설치하는 방법:

1) 바탕화면에 새 폴더 생성 (이름: translator-extension)
2) 폴더 안에 Claude가 만들어준 파일 저장
   - manifest.json
   - popup.html
   - popup.js
   - background.js

3) 크롬 주소창에 입력
   chrome://extensions

4) 우측 상단 "개발자 모드" 토글 ON

5) "압축해제된 확장 프로그램을 로드합니다" 클릭
   → translator-extension 폴더 선택

6) 크롬 상단 🧩 퍼즐 아이콘 클릭
   → Quick Translator 옆 📌 핀 클릭해서 고정

7) 상단 아이콘 클릭 → 팝업 실행 확인!


━━━━━━━━━━━━━━━━━━━━━━━━━━━━
STEP 3. 오류 수정 — 증상 그대로 말하기
━━━━━━━━━━━━━━━━━━━━━━━━━━━━

설치하고 써보니 오류가 몇 개 생겼어요.
오류가 나면 증상을 그대로 Claude에게 말했습니다.

[오류 1] 처음엔 Gemini API를 붙였는데

"models/gemini-1.5-flash is not found for API version v1beta"
→ Claude: 모델 이름 바뀐 것 → gemini-2.0-flash로 수정

[오류 2] 모델 이름 수정해도 해결 안 됨

"You exceeded your current quota... limit: 0"
→ 한국에서 Gemini 무료 API 사용 제한 문제
→ Claude: Gemini 대신 MyMemory 무료 번역 API로 교체
→ API 키 없이도 완전 무료로 작동!

[오류 3] 팝업 형태라 창이 자꾸 닫힘

"번역창이 다른 곳 클릭하면 닫혀서 불편해"
→ Claude: 사이드 패널(Side Panel) 방식으로 전환
→ 브라우저 오른쪽에 고정되어 계속 떠있게 됨!


━━━━━━━━━━━━━━━━━━━━━━━━━━━━
STEP 4. 사이드 패널 전환
━━━━━━━━━━━━━━━━━━━━━━━━━━━━

가장 큰 개선이었어요.

처음엔 팝업 형태로 만들었는데
다른 곳 클릭하면 창이 닫혀서 불편했어요.

"이미지처럼 오른쪽에 고정해서 계속 띄워놓을 수 있게 해줘"
라고 요청했더니

manifest.json에 sidePanel 권한 추가,
background.js에서 아이콘 클릭 시 사이드 패널 열기,
sidepanel.html 새로 제작

이렇게 세 파일을 수정해서
브라우저 오른쪽에 고정되는 번역 패널로 변신했습니다! 🎉

━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✅ 최종 완성된 Quick Translator 기능
━━━━━━━━━━━━━━━━━━━━━━━━━━━━

🖥️ 형태: 사이드패널 (브라우저 오른쪽 고정)
   웹페이지 보면서 동시에 번역 사용 가능!

🌐 동시 번역 언어 선택
  - 🇺🇸 영어 / 🇯🇵 일본어 / 🇨🇳 중국어 (기본 활성화)
  - 🇪🇸 스페인어 / 🇫🇷 프랑스어 / 🇩🇪 독일어 (선택 가능)
  - 원하는 언어만 체크해서 동시에 번역

🔊 TTS 음성 읽기
  - 번역 결과 오른쪽 🔊 버튼 클릭
  - 브라우저 내장 TTS 사용 → 완전 무료
  - 다시 클릭하면 정지

📋 복사 기능
  - 번역 결과 오른쪽 📋 버튼 클릭
  - 클립보드에 바로 복사

🔒 일 50회 무료 제한
  - 상단에 오늘 사용량 표시 (예: 3 / 50)
  - 매일 자정 자동 초기화
  - 한도 초과 시 안내 메시지 표시

💰 완전 무료 운영
  - MyMemory API 사용 (API 키 불필요)
  - 브라우저 내장 TTS (비용 없음)
  - 서버 없이 확장프로그램만으로 작동


━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📌 배운 점
━━━━━━━━━━━━━━━━━━━━━━━━━━━━

1. 코딩 몰라도 됩니다
   AI와 대화만으로 실제 작동하는 번역 프로그램을
   만들 수 있다는 걸 직접 경험했습니다.

2. 오류 메시지 그대로 붙여넣기
   "번역이 안 돼" (❌)
   "You exceeded your current quota... limit: 0" (✅)
   오류 내용을 그대로 복사해서 주면
   Claude가 원인을 정확히 진단해줍니다.

3. 안 되는 것도 있어요 — 과감히 바꾸기
   처음엔 Gemini API를 쓰려 했는데
   한국에서 무료 quota가 막혀 있었어요.
   Claude가 대안(MyMemory)을 바로 제시해줬고
   오히려 API 키도 필요 없는 더 나은 방법이 됐어요.

4. 원하는 형태를 이미지로 보여주기
   "이미지처럼 오른쪽에 고정해줘" 라고
   스크린샷을 첨부했더니
   사이드 패널로 정확히 구현해줬습니다.


━━━━━━━━━━━━━━━━━━━━━━━━━━━━
💡 꿀팁
━━━━━━━━━━━━━━━━━━━━━━━━━━━━

- 기본 기능 먼저 만들고 → 설치해서 써보고
  → 불편한 것 수정하는 순서가 효율적이에요

- 오류 메시지는 그대로 복사해서 Claude에 붙여넣기
  대부분 바로 해결해줍니다

- Chrome 웹 스토어 등록 없이도
  개발자 모드로 바로 설치해서 쓸 수 있어요

- 참고 이미지를 첨부하면 UI를 훨씬 정확하게 만들어줘요


━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📥 설치 방법
━━━━━━━━━━━━━━━━━━━━━━━━━━━━

1) ZIP 파일 다운로드 후 압축 해제

2) 크롬 주소창에 입력
   chrome://extensions

3) 우측 상단 "개발자 모드" 토글 ON

4) "압축해제된 확장 프로그램을 로드합니다" 클릭
   → 압축 해제한 폴더 선택
   ⚠️ 폴더 안으로 들어가지 말고
      폴더 자체를 선택해야 해요!

5) 크롬 상단 🧩 아이콘 클릭
   → Quick Translator 옆 📌 핀 클릭

6) 아이콘 클릭
   → 브라우저 오른쪽에 번역 패널 열림! 🎉

API 키 없이 바로 사용 가능합니다.