웹페이지 모르는 단어 클릭하면 문맥 기반 AI 번역 + 자동 단어장 만드는 크롬 확장 만들었습니다 (무료, 백엔드 X, 피드백 환영)

유재범 · 2026-06-11T14:20:48+09:00

안녕하세요. 평소에 영문 문서·뉴스·아티클을 많이 읽는데, 세 가지가 늘 흐름을 끊었습니다.모르는 단어 하나 때문에 매번 번역 탭으로 이탈사전·번역기는 문장 맥락을 무시하고 일반적인 뜻만 줌 ("lead"가 기사에서랑 화학 문서에서 다른데 똑같이 나옴)공부한 단어들을 공책이나 별도로 메모해서 공부하는 수고로움이 존재그래서 직접 만들었습니다. Clutio — 웹페이지에서 단어를 더블클릭하면 그 자리에서 AI가 "그 문장 안에서의 뜻"을 풀어주고, 단어 + 등장한 문장을 자동으로 단어장에 저장합니다. 모아둔 단어로 빈칸(Cloze) 퀴즈도 생성돼서 "읽은 게 곧 복습"이 됩니다.[기술 스택 — 개발자분들이라 적어둡니다]Manifest V3 크롬 확장, Vanilla JS + Webpack 5 (background SW / content / popup / options / welcome 5개 번들)단어장·학습기록은 IndexedDB, 설정은 chrome.storage — 로컬에만 저장content script로 in-page 단어 클릭/팝업, host 페이지 CSS 충돌은 inline !important로 격리AI 엔진 3종(Groq / ChatGPT / Claude) BYOK 방식[의도적으로 백엔드를 안 만들었습니다 — 사실 이게 핵심 결정이었어요]서버·계정·DB 없음. 그래서 단어장 데이터나 API key와 같은 민감한 데이터는 제 쪽으로 아예 오지 않습니다 (볼 수가 없어요).정직하게 말하면: 클릭한 단어+문장은 번역을 위해 브라우저에서 AI 제공사(기본 Groq 무료 / 또는 본인 ChatGPT·Claude 키)로 직접 전송됩니다. Clutio 서버를 거치지 않을 뿐, "아무 데도 안 나간다"는 아닙니다.서버가 없으니 호스팅 비용이 0 → 그래서 무료 유지가 가능합니다. 기본 엔진 Groq Llama 3.1 8B로 하루 14,400회, 결제카드 없이 휴대폰 인증만으로 무료 키 발급(약 1분).[솔직한 한계]기기 간 동기화 없음 (로컬 저장의 반대급부). "노트북에서 읽는" 용도엔 아직 불편함 없었습니다.서버 분석이 없어서 사용 지표가 깜깜합니다. 그래서 이렇게 피드백을 구하러 왔습니다.[피드백이 궁금한 부분]"단어 클릭 → 문맥 번역 → 단어장 → 퀴즈" 루프가 실제로 유용한가요, 아니면 한 도구가 너무 많은 걸 하려는 느낌인가요?권한 모델이나 in-page UX에서 "나라면 이렇게 하겠다" 싶은 부분 있을까요?광고처럼 보일까 봐 크롬 웹스토어/사이트 링크는 댓글에 남기겠습니다.

안녕하세요. 평소에 영문 문서·뉴스·아티클을 많이 읽는데, 세 가지가 늘 흐름을 끊었습니다.

모르는 단어 하나 때문에 매번 번역 탭으로 이탈
사전·번역기는 문장 맥락을 무시하고 일반적인 뜻만 줌 ("lead"가 기사에서랑 화학 문서에서 다른데 똑같이 나옴)
공부한 단어들을 공책이나 별도로 메모해서 공부하는 수고로움이 존재

그래서 직접 만들었습니다.
Clutio — 웹페이지에서 단어를 더블클릭하면 그 자리에서 AI가 "그 문장 안에서의 뜻"을 풀어주고, 단어 + 등장한 문장을 자동으로 단어장에 저장합니다.
모아둔 단어로 빈칸(Cloze) 퀴즈도 생성돼서 "읽은 게 곧 복습"이 됩니다.

[기술 스택 — 개발자분들이라 적어둡니다]

Manifest V3 크롬 확장, Vanilla JS + Webpack 5 (background SW / content / popup / options / welcome 5개 번들)
단어장·학습기록은 IndexedDB, 설정은 chrome.storage — 로컬에만 저장
content script로 in-page 단어 클릭/팝업, host 페이지 CSS 충돌은 inline !important로 격리
AI 엔진 3종(Groq / ChatGPT / Claude) BYOK 방식

[의도적으로 백엔드를 안 만들었습니다 — 사실 이게 핵심 결정이었어요]

서버·계정·DB 없음. 그래서 단어장 데이터나 API key와 같은 민감한 데이터는 제 쪽으로 아예 오지 않습니다 (볼 수가 없어요).
정직하게 말하면: 클릭한 단어+문장은 번역을 위해 브라우저에서 AI 제공사(기본 Groq 무료 / 또는 본인 ChatGPT·Claude 키)로 직접 전송됩니다. Clutio 서버를 거치지 않을 뿐, "아무 데도 안 나간다"는 아닙니다.
서버가 없으니 호스팅 비용이 0 → 그래서 무료 유지가 가능합니다. 기본 엔진 Groq Llama 3.1 8B로 하루 14,400회, 결제카드 없이 휴대폰 인증만으로 무료 키 발급(약 1분).

[솔직한 한계]

기기 간 동기화 없음 (로컬 저장의 반대급부). "노트북에서 읽는" 용도엔 아직 불편함 없었습니다.
서버 분석이 없어서 사용 지표가 깜깜합니다. 그래서 이렇게 피드백을 구하러 왔습니다.

[피드백이 궁금한 부분]

"단어 클릭 → 문맥 번역 → 단어장 → 퀴즈" 루프가 실제로 유용한가요, 아니면 한 도구가 너무 많은 걸 하려는 느낌인가요?
권한 모델이나 in-page UX에서 "나라면 이렇게 하겠다" 싶은 부분 있을까요?

광고처럼 보일까 봐 크롬 웹스토어/사이트 링크는 댓글에 남기겠습니다.

#llm 목록