AI와 함께 만든 수업 집중 버튼, 크롬 확장 프로그램 ‘Teacher Bell’ 제작기

소개

크롬 확장프로그램으로 크롬 안에서 간단히 사용가능한 플로팅 위젯 스타일의 수업용 차임벨을 만들어보고자했습니다.

처음에는 차임벨과 타이머만 생각했습니다.
이후에는 선생님이 버튼을 누르면 학생 화면에 하얀 화면이 뜨고, 가운데에 “앞을 보세요”라는 문구가 나오는 학생 집중 모드까지 구상하게 되었습니다.

최종적으로 만든 Teacher Bell은 이런 도구입니다.

선생님 화면에 플로팅 위젯이 뜸
차임벨을 누르면 “띵동” 소리가 남
타이머를 설정하고 활동 시간을 관리할 수 있음
선생님이 집중 버튼을 누르면 학생 화면에 “앞을 보세요” 오버레이가 표시됨
교실 코드를 이용해 선생님 PC와 학생 PC를 연결함

제가 원했던 것은 거창한 LMS나 수업 관리 플랫폼이 아니라, 수업 중 정말 자주 쓰는 기능만 모은 작은 수업 리모컨이었습니다.

진행 방법

사용한 도구는 크게 세 가지였습니다.

ChatGPT
아이디어 정리, 기능 구상, PRD 문서 작성에 활용했습니다.
Claude / Codex 계열 AI 코딩 도구
PRD를 바탕으로 실제 크롬 확장 프로그램 코드를 생성하고 수정하는 데 활용했습니다.
Chrome Extension + Firebase
크롬 확장 프로그램은 Manifest V3 기반으로 만들었고, 선생님 명령을 학생 PC에 전달하기 위해 Firebase Realtime Database를 사용했습니다.

개발은 한 번에 완성하려고 하지 않고 단계별로 나누었습니다.

1단계: 선생님용 플로팅 위젯 만들기

처음에는 선생님 화면에 작은 위젯이 뜨는 것부터 만들었습니다.

위젯에는 다음 기능을 넣었습니다.

차임벨
타이머
집중 버튼
설정 버튼
드래그 이동
크기 조절
최소화

일반 크롬 확장 프로그램처럼 아이콘을 누르면 잠깐 열리는 팝업 방식이 아니라, 웹페이지 위에 계속 떠 있는 방식으로 만들었습니다.

수업 중에는 버튼을 빨리 눌러야 하기 때문에, 팝업을 열고 닫는 방식보다 플로팅 위젯이 훨씬 편하다고 판단했습니다.

2단계: 차임벨과 타이머 구현하기

차임벨은 별도의 MP3 파일을 넣는 방식도 가능했지만, 이번에는 Web Audio API를 활용해 코드로 “띵동” 소리를 만들었습니다.

타이머는 수업 활동에 바로 쓸 수 있도록 1분, 3분, 5분, 10분, 15분 버튼을 넣었습니다. 직접 시간을 입력할 수도 있게 했고, 타이머가 끝나면 자동으로 차임벨이 울리도록 만들었습니다.

3단계: 학생 집중 모드 만들기

Teacher Bell에서 가장 마음에 드는 기능은 학생 집중 모드입니다.

선생님이 위젯에서 집중 버튼을 누르면 학생 화면 전체가 하얗게 바뀌고, 가운데에 크게 문구가 표시됩니다.

>> 선생님 위젯 화면

>> 학생 크롬 화면

학생들이 웹 기반 수업을 하고 있을 때, 말로만 “앞을 보세요”라고 하는 것보다 훨씬 명확한 신호가 될 수 있겠다고 생각했습니다.

4단계: 선생님 모드와 학생 모드 나누기

확장 프로그램을 두 개로 나누는 대신, 하나의 확장 프로그램 안에서 역할을 선택하게 만들었습니다.

처음 실행하면 다음 중 하나를 선택합니다.

선생님 모드
학생 모드

선생님 모드에서는 플로팅 위젯이 보입니다.
학생 모드에서는 평소 아무것도 보이지 않다가, 선생님이 집중 명령을 보낼 때만 화면 오버레이가 뜹니다.

이 구조가 마음에 들었던 이유는 설치 방법이 단순해지기 때문입니다.

“선생님용 따로, 학생용 따로”가 아니라
“같은 확장 프로그램을 설치하고 역할만 선택”하면 됩니다.

5단계: Firebase로 교실 코드 연결하기

선생님과 학생 PC를 연결하기 위해 Firebase Realtime Database를 사용했습니다.

선생님이 교실을 만들면 이런 코드가 생성됩니다.

ROOM-ABCD1234

학생은 같은 코드를 입력해서 교실에 참가합니다.

이후 선생님이 버튼을 누르면 Firebase에 명령이 저장되고, 학생 확장 프로그램이 그 명령을 확인해서 실행합니다.

명령 구조는 대략 이런 식입니다.

{
  "roomCode": "ROOM-ABCD1234",
  "command": "focus",
  "message": "앞을 보세요",
  "duration": 5000,
  "createdAt": 1710000000000
}

명령 종류는 다음처럼 나누었습니다.

focus      → 학생 화면에 집중 오버레이 표시
bell       → 학생 PC에서 차임벨 재생
timerStart → 학생 화면에 타이머 표시
timerStop  → 학생 타이머 숨기기

사용한 프롬프트

처음부터 “코드 짜줘”라고 하지 않고, 먼저 제품 요구사항을 정리한 뒤 AI에게 전달했습니다. 아래는 제가 사용한 프롬프트의 핵심 버전입니다.

너는 Chrome Extension 개발 전문가다.

Manifest V3 기반 크롬 확장 프로그램을 만들어줘.

프로젝트명은 Teacher Bell이다.

목표:
교사가 수업 중 크롬 화면 위에서 바로 사용할 수 있는 플로팅 위젯형 수업 도구를 만든다.
기능은 차임벨, 타이머, 학생 집중모드이다.
확장 프로그램 하나에서 “선생님 모드”와 “학생 모드”를 선택해서 사용한다.

중요한 방향:
- 팝업만 뜨는 확장 프로그램이 아니라, 웹페이지 위에 항상 보이는 플로팅 위젯을 만들어라.
- 선생님 모드에서는 플로팅 위젯이 보인다.
- 학생 모드에서는 평소 아무것도 보이지 않다가, 선생님이 집중모드를 실행하면 화면 전체가 흰색 오버레이로 덮이고 “앞을 보세요” 문구가 표시된다.
- 일반 웹사이트, 구글 슬라이드, 유튜브, 엔트리, 스크래치, ChatGPT 같은 크롬 웹페이지 위에서 동작하면 된다.
- chrome:// 페이지나 크롬 밖 프로그램까지 제어하려고 하지 마라.

개발 방식:
- Manifest V3 사용
- Vanilla HTML, CSS, JavaScript 사용
- React, Vue, TypeScript, 빌드 도구는 사용하지 않는다.
- chrome://extensions에서 압축해제된 확장 프로그램 로드로 바로 테스트 가능해야 한다.
- 모든 코드는 주석을 충분히 작성한다.
- 초보자도 테스트할 수 있도록 README.md를 작성한다.

필수 기능:
1. 선생님 플로팅 위젯
   - 드래그 이동 가능
   - 크기 조절 가능
   - 최소화 가능
   - 위치와 크기 저장

2. 차임벨
   - 버튼 클릭 시 Web Audio API로 띵동 소리 재생
   - 볼륨 조절 가능
   - Ctrl+Shift+B 단축키 지원

3. 타이머
   - 1분, 3분, 5분, 10분, 15분 프리셋
   - 직접 입력 가능
   - 시작, 일시정지, 초기화
   - 종료 시 차임벨 재생

4. 집중모드
   - 흰색 전체 화면 오버레이
   - 중앙에 “앞을 보세요” 표시
   - 3초, 5초, 10초 선택 가능
   - ESC 키 또는 클릭으로 닫기

5. 역할 선택
   - 선생님 모드
   - 학생 모드
   - chrome.storage.local에 저장

6. 교실 코드
   - 선생님은 ROOM-ABCD1234 형태의 교실 코드 생성
   - 학생은 교실 코드 입력 후 참가

7. Firebase 연동
   - Firebase Realtime Database 사용
   - 선생님 명령을 학생 PC에 전달
   - Firebase 설정값이 없으면 로컬 기능만 동작하도록 처리

결과물:
- manifest.json
- popup.html / popup.css / popup.js
- content.js / content.css
- background.js
- options.html / options.css / options.js
- firebase-client.js
- README.md

위 요구사항을 바탕으로 실제 실행 가능한 Chrome Extension 프로젝트를 만들어줘.

이 프롬프트를 바탕으로 1차 코드를 만들고, 이후에는 오류가 생길 때마다 “현재 증상 → 기대 동작 → 관련 파일” 형태로 AI에게 다시 요청했습니다.

결과와 배운 점

결과적으로 Teacher Bell v3까지 완성했습니다.

현재 가능한 기능은 다음과 같습니다.

선생님용 플로팅 위젯
차임벨
타이머
집중모드
선생님/학생 역할 선택
교실 코드 생성 및 참가
Firebase를 통한 명령 전달
학생 화면에 “앞을 보세요” 오버레이 표시

처음에는 “차임벨 하나 만들면 되겠지”라고 생각했는데, 실제로 만들다 보니 크롬 확장 프로그램에는 신경 쓸 부분이 꽤 많았습니다.

가장 크게 배운 점은 이것입니다.

AI에게 코드를 바로 시키기보다, 먼저 제품을 정확하게 설명하는 문서가 필요하다.

PRD를 먼저 만들고 나니 AI와 대화하기가 훨씬 쉬웠습니다.
기능이 추가되어도 “이 방향이 맞는지” 판단할 기준이 생겼고, 오류가 생겨도 어느 부분에서 문제가 나는지 정리하기 쉬웠습니다.

시행착오

1. Service Worker가 잠드는 문제

처음에는 학생 확장 프로그램이 Firebase를 계속 확인하도록 setInterval을 사용했습니다. 그런데 Manifest V3의 Service Worker는 계속 살아 있는 구조가 아니라, 일정 시간이 지나면 잠들 수 있었습니다.

그래서 폴링이 멈추는 문제가 생겼습니다.

해결은 chrome.alarms API를 사용하는 방식으로 바꾸는 것이었습니다. 이 방식으로 Service Worker가 잠들어도 일정 시간마다 다시 깨어나 명령을 확인할 수 있게 했습니다.

2. 집중 명령이 학생에게 전달되지 않는 문제

처음에는 “학생에게도 전송” 같은 체크박스를 두었습니다. 그런데 기본값이 체크되어 있지 않아서 선생님이 집중 버튼을 눌러도 Firebase로 명령이 가지 않는 문제가 있었습니다.

생각해보니 집중 버튼은 누르면 당연히 학생에게 전달되어야 하는 기능이었습니다.

그래서 체크박스를 없애고, 집중 버튼을 누르면 항상 Firebase로 전송되도록 수정했습니다.

3. Firebase URL 설정 순서 문제

학생이 교실 코드만 입력하면 될 줄 알았는데, Firebase URL이 먼저 설정되어 있지 않으면 참가가 실패했습니다.

처음에는 조용히 실패해서 원인을 찾기 어려웠습니다.

그래서 오류 메시지를 명확하게 바꿨습니다.

Firebase URL이 설정되지 않았습니다.
설정에서 Firebase URL을 입력해주세요.

이 작은 메시지 하나가 테스트 시간을 많이 줄여줬습니다.

4. Firebase 401 Unauthorized 문제

Firebase Realtime Database의 보안 규칙이 기본값으로 되어 있어서 401 오류가 발생했습니다.

개발 및 테스트용으로는 다음처럼 읽기/쓰기를 열어 해결했습니다.

{
  "rules": {
    "rooms": {
      "$roomCode": {
        ".read": true,
        ".write": true
      }
    }
  }
}

물론 이 규칙은 개발용입니다. 실제 공개 서비스로 운영하려면 인증 기반 규칙으로 바꿔야 합니다.

앞으로의 계획

Teacher Bell은 아직 작고 단순한 도구지만, 수업 현장에서는 꽤 유용하게 발전할 수 있을 것 같습니다.

앞으로 추가하고 싶은 기능은 다음과 같습니다.

학생 도움 요청 버튼
전체 화면 타이머
벨 소리 커스터마이징
웹스토어 등록

처음에는 “차임벨 하나 만들어볼까?”에서 시작했는데, 만들다 보니 작은 수업 관리 도구가 되었습니다.

도움 받은 글

도로시J 스터디장님 강의
테크권님 강의

🔥<24기 AI 스터디> 9/21 모집 마감 🔥