웹·앱 만들기
Inbrowser Agent
교사 개인용 ⭐ 87 MIT
웹 앱에 언어 모델을 넣는 브라우저 내 AI 스택. 사용자의 GPU에서 실행하거나 클라우드 모델로 프록시. 토큰 스트림이 재로드와 연결 끊김에서 복구됨.
예시 체험
중3 정보 — 브라우저 안에서 도는 수업 메모 도우미 앱 만들기
중학교 3학년 정보 교사가 개인 노트북에서 수업을 준비한다. 수업 메모를 외부 서버에 올리지 않고, 브라우저 안에서만 도는 작은 대화형 준비 도우미 앱을 직접 만들어 쓰려는 상황이다.
제 노트북 브라우저 안에서만 도는 수업 준비 도우미 웹앱을 만들어 주세요. 인터넷 서버에 제 자료를 올리지 말고, API 키도 쓰지 않게 해 주세요. 제가 적은 거친 수업 아이디어를 넣으면 활동 순서와 발문으로 다듬어 주고, 제 수업 메모에서 근거를 찾아 함께 보여 주면 좋겠어요. 중학교 3학년 정보 '문제 해결과 프로그래밍' 단원에 쓸 거예요. 화면 글자는 모두 한국어로 해 주세요.
활동 순서: 문제 만나기 5분 → 문제 정의하기 8분 → 자료로 확인하기 12분 → 해결 방법과 순서도 15분 → 공유와 성찰 5분 (모두 45분) 발문: "어떤 자료를 모으면 우리 짐작이 맞는지 확인할 수 있을까요?" 목표: 생활 속 문제를 찾아 자료로 확인하고, 해결 과정을 순서도로 나타내기
직접 해 보기 — 3단계
- Claude Code 같은 AI 에이전트에 저장소 안내대로 이 스킬(브라우저 내 AI 스택)을 설치한다.
- 만들고 싶은 앱의 쓰임과 조건을 적은 문장을 붙여 넣는다. 위 문장을 바꿔 써도 된다.
- 만들어진 HTML 파일을 WebGPU를 켠 최신 브라우저로 열어, 첫 실행 내려받기·동작 여부·글자 크기·개인정보 처리를 확인한다.
수업 상황은 이해를 돕기 위해 꾸민 예시입니다. 만든 방법: opencode (DeepSeek) + 이 스킬 (inbrowser-agent) · 확인일 2026-10-16. 그림은 이 스킬로 만들 앱 화면을, 저장소 site의 문서화된 대화형 on-device 화면 형식에 맞춰 HTML로 재현한 것이다. 실제 스킬은 브라우저에서 WebGPU로 SmolLM2 360M 가중치(약 180MB)를 내려받아 실행하므로(WebGPU가 없으면 느린 WASM) 이 환경에서는 그대로 돌려 확인하지 못했고, 화면과 동작은 문서대로 흉내 낸 것이다. 화면 속 답변 문장과 토큰·속도 숫자(45 in / 312 out, 6.4s, 49 tok/s)와 '수업 메모' 출처 두 개는 모두 꾸민 수업용 예시 값이며 측정한 사실이 아니다. 학교에서 쓸 때는 첫 실행 때 모델을 내려받는 시간이 걸리는 점, 브라우저 저장공간(캐시)에 모델이 남는 점, 학생 개인정보를 넣지 않을 점, 성취기준과 시간 배분을 교사가 직접 확인할 점을 챙겨야 한다. 작은 on-device 모델은 문장 품질이 낮을 수 있어 결과를 그대로 쓰지 말고 다듬어야 한다.
써 보려면
- 저장소 davideast/inbrowser-agent를 엽니다.
- 이 기록에는 별도 설치가 필요하지 않다고 되어 있습니다.
- 이 기록에는 API 키가 필요하지 않다고 되어 있습니다.
출처
스타 수와 라이선스는 공식 저장소 기준이며, 일일 검증이 다시 확인합니다. 정보 정정 요청