강사,수강생 리액션 크롬 확장도구 설치 방법
실시간 리액션 크롬 확장 도구 사용 매뉴얼
목적: 온라인/오프라인 수업에서 수강생이 강사에게 실시간으로 피드백을 보낼 수 있는 도구입니다.
목차
개요
이 도구는 두 개의 크롬 확장 프로그램으로 구성되어 있습니다:
| 확장 프로그램 | 대상 | 역할 |
|---|---|---|
| Reaction Receiver | 강사 | 수강생들의 리액션을 화면에 표시 |
| Reaction Sender | 수강생 | 강사에게 리액션 전송 |
동작 원리
수강생 (Sender) → 서버 → 강사 (Receiver) 리액션 클릭 중계 화면에 애니메이션 표시
강사용 (Receiver) 설치 및 사용
Step 1: 확장 프로그램 설치
-
Chrome 브라우저에서 주소창에
chrome://extensions입력 후 Enter -
우측 상단의 개발자 모드 토글을 켜기(ON)로 변경
-
압축해제된 확장 프로그램을 로드합니다 버튼 클릭
-
reaction-receiver폴더 선택 -
확장 프로그램이 설치되면 Chrome 툴바에 아이콘이 나타납니다
Step 2: 설정
-
툴바의 확장 프로그램 아이콘 클릭 → Settings 링크 클릭
(또는 확장 프로그램 아이콘 우클릭 → 옵션) -
설정 화면에서 다음 항목을 입력:
| 항목 | 설명 | 예시 |
|------|------|------|
| Session ID | 수업을 구분하는 고유 ID (수강생에게 공유) | java-class-2026-01-18 |
| Auto-connect on startup | 브라우저 시작 시 자동 연결 (선택) | 체크 권장 |
| Use local API | 개발/테스트용 (일반적으로 체크 해제) | 체크 해제 |
- Save Settings 버튼 클릭
Step 3: 연결 및 사용
-
툴바의 확장 프로그램 아이콘 클릭
-
Connect 버튼 클릭
- 상태가 "Connected"로 변경되면 연결 성공 -
수업 진행 중 수강생이 리액션을 보내면 모든 열린 탭에서 이모지 애니메이션이 표시됩니다
- 이모지가 화면 하단에서 위로 떠오르며 사라집니다
- 발송자 이름이 함께 표시됩니다 -
수업 종료 후 Disconnect 버튼 클릭
테스트하기
- 팝업 하단의 Test Reaction 링크를 클릭하면 테스트 리액션이 표시됩니다
수강생용 (Sender) 설치 및 사용
Step 1: 확장 프로그램 설치
-
Chrome 브라우저에서 주소창에
chrome://extensions입력 후 Enter -
우측 상단의 개발자 모드 토글을 켜기(ON)로 변경
-
압축해제된 확장 프로그램을 로드합니다 버튼 클릭
-
reaction-sender폴더 선택 -
확장 프로그램이 설치되면 Chrome 툴바에 아이콘이 나타납니다
Step 2: 설정
-
툴바의 확장 프로그램 아이콘 클릭 → Settings 링크 클릭
-
설정 화면에서 다음 항목을 입력:
| 항목 | 설명 | 예시 |
|------|------|------|
| Session ID | 강사가 공유한 세션 ID (정확히 동일하게 입력) | java-class-2026-01-18 |
| Your Name | 리액션과 함께 표시될 이름 (선택) | 홍길동 |
| Use local API | 개발/테스트용 (일반적으로 체크 해제) | 체크 해제 |
- Save Settings 버튼 클릭
Step 3: 리액션 보내기
-
툴바의 확장 프로그램 아이콘 클릭
-
상단에 "Connected"와 세션 ID가 표시되는지 확인
-
원하는 리액션 버튼 클릭
- 클릭하면 바로 강사 화면에 표시됩니다
- "Sent!" 메시지가 나타나면 전송 성공
리액션 버튼 설명
| 이모지 | 버튼 이름 | 사용 상황 |
|---|---|---|
| 👍 | 네/좋아요 | 이해했어요, 동의해요, 잘 따라가고 있어요 |
| 🤔 | 이해 안돼요 | 설명이 조금 어려워요, 다시 한번 설명해주세요 |
| 🆘 | 모르겠어요 | 완전히 이해가 안 돼요, 도움이 필요해요 |
| ✋ | 기다려주세요 | 잠시만요, 아직 진행 중이에요 |
| ☕ | 쉬어가요 | 휴식이 필요해요, 잠시 쉬었다 해요 |
리액션 활용 팁
강사용:
- 👍가 많이 오면 → 다음 내용으로 진행
- 🤔나 🆘가 오면 → 추가 설명 또는 개별 질문 확인
- ✋가 오면 → 잠시 기다렸다가 진행
- ☕가 많이 오면 → 휴식 시간 고려
수강생용:
- 말로 질문하기 어려울 때 리액션으로 의사 표현
- 다른 수강생도 같은 생각인지 리액션으로 확인 가능
문제 해결
강사 (Receiver)
| 문제 | 해결 방법 |
|---|---|
| Connect 버튼 클릭해도 연결 안 됨 | 1. Session ID가 올바른지 확인 2. 인터넷 연결 확인 3. 확장 프로그램 재설치 |
| 리액션이 화면에 표시 안 됨 | 1. 연결 상태가 "Connected"인지 확인 2. 다른 탭에서도 확인 3. Test Reaction으로 테스트 |
| 연결이 자주 끊김 | "Auto-connect on startup" 옵션 활성화 권장 |
수강생 (Sender)
| 문제 | 해결 방법 |
|---|---|
| "Not Connected" 표시 | 1. Settings에서 Session ID 입력했는지 확인 2. Save Settings 클릭했는지 확인 |
| 버튼 클릭해도 반응 없음 | 1. 팝업 상단 상태 확인 2. Session ID가 강사와 동일한지 확인 |
| "Error" 메시지 | 1. Session ID 오타 확인 2. 잠시 후 다시 시도 |
공통
| 문제 | 해결 방법 |
|---|---|
| 확장 프로그램 아이콘이 안 보임 | Chrome 툴바 퍼즐 아이콘 클릭 → 핀 고정 |
| 설정이 저장 안 됨 | 브라우저 재시작 후 다시 시도 |
세션 ID 권장 규칙
일관된 세션 ID 명명 규칙을 사용하면 관리가 편리합니다:
{과목}-{날짜} 예: java-2026-01-18 spring-2026-01-20 react-2026-01-22
또는
{과목}-{반이름} 예: java-morning java-evening spring-weekend
참고 사항
- 세션 ID는 대소문자를 구분합니다
- 리액션은 실시간으로 전송되며 저장되지 않습니다
- 한 세션에 여러 명의 수강생이 동시에 참여할 수 있습니다
- 강사가 연결을 끊으면 수강생의 리액션은 전달되지 않습니다
댓글
댓글을 작성하려면 이 필요합니다.