FullStackFamily

강사,수강생 리액션 크롬 확장도구 설치 방법

토토
2026.01.18 13:17조회 11
토토·2026.01.18 13:17·조회 11·추천 1

실시간 리액션 크롬 확장 도구 사용 매뉴얼

목적: 온라인/오프라인 수업에서 수강생이 강사에게 실시간으로 피드백을 보낼 수 있는 도구입니다.

목차

  1. 개요
  2. 강사용 (Receiver) 설치 및 사용
  3. 수강생용 (Sender) 설치 및 사용
  4. 리액션 버튼 설명
  5. 문제 해결

개요

이 도구는 두 개의 크롬 확장 프로그램으로 구성되어 있습니다:

확장 프로그램대상역할
Reaction Receiver강사수강생들의 리액션을 화면에 표시
Reaction Sender수강생강사에게 리액션 전송

동작 원리

수강생 (Sender)  →  서버  →  강사 (Receiver)
   리액션 클릭       중계      화면에 애니메이션 표시

강사용 (Receiver) 설치 및 사용

Step 1: 확장 프로그램 설치

  1. Chrome 브라우저에서 주소창에 chrome://extensions 입력 후 Enter

  2. 우측 상단의 개발자 모드 토글을 켜기(ON)로 변경

2026-01-18_22-17-24.png

  1. 압축해제된 확장 프로그램을 로드합니다 버튼 클릭

  2. reaction-receiver 폴더 선택

  3. 확장 프로그램이 설치되면 Chrome 툴바에 아이콘이 나타납니다

Step 2: 설정

  1. 툴바의 확장 프로그램 아이콘 클릭 → Settings 링크 클릭
      (또는 확장 프로그램 아이콘 우클릭 → 옵션)

  2. 설정 화면에서 다음 항목을 입력:

  | 항목 | 설명 | 예시 |
  |------|------|------|
  | Session ID | 수업을 구분하는 고유 ID (수강생에게 공유) | java-class-2026-01-18 |
  | Auto-connect on startup | 브라우저 시작 시 자동 연결 (선택) | 체크 권장 |
  | Use local API | 개발/테스트용 (일반적으로 체크 해제) | 체크 해제 |

  1. Save Settings 버튼 클릭

Step 3: 연결 및 사용

  1. 툴바의 확장 프로그램 아이콘 클릭

  2. Connect 버튼 클릭
      - 상태가 "Connected"로 변경되면 연결 성공

  3. 수업 진행 중 수강생이 리액션을 보내면 모든 열린 탭에서 이모지 애니메이션이 표시됩니다
      - 이모지가 화면 하단에서 위로 떠오르며 사라집니다
      - 발송자 이름이 함께 표시됩니다

  4. 수업 종료 후 Disconnect 버튼 클릭

테스트하기

  • 팝업 하단의 Test Reaction 링크를 클릭하면 테스트 리액션이 표시됩니다

수강생용 (Sender) 설치 및 사용

Step 1: 확장 프로그램 설치

  1. Chrome 브라우저에서 주소창에 chrome://extensions 입력 후 Enter

  2. 우측 상단의 개발자 모드 토글을 켜기(ON)로 변경

  3. 압축해제된 확장 프로그램을 로드합니다 버튼 클릭

  4. reaction-sender 폴더 선택

  5. 확장 프로그램이 설치되면 Chrome 툴바에 아이콘이 나타납니다

Step 2: 설정

  1. 툴바의 확장 프로그램 아이콘 클릭 → Settings 링크 클릭

  2. 설정 화면에서 다음 항목을 입력:

  | 항목 | 설명 | 예시 |
  |------|------|------|
  | Session ID | 강사가 공유한 세션 ID (정확히 동일하게 입력) | java-class-2026-01-18 |
  | Your Name | 리액션과 함께 표시될 이름 (선택) | 홍길동 |
  | Use local API | 개발/테스트용 (일반적으로 체크 해제) | 체크 해제 |

  1. Save Settings 버튼 클릭

Step 3: 리액션 보내기

  1. 툴바의 확장 프로그램 아이콘 클릭

  2. 상단에 "Connected"와 세션 ID가 표시되는지 확인

  3. 원하는 리액션 버튼 클릭
      - 클릭하면 바로 강사 화면에 표시됩니다
      - "Sent!" 메시지가 나타나면 전송 성공

리액션 버튼 설명

이모지버튼 이름사용 상황
👍네/좋아요이해했어요, 동의해요, 잘 따라가고 있어요
🤔이해 안돼요설명이 조금 어려워요, 다시 한번 설명해주세요
🆘모르겠어요완전히 이해가 안 돼요, 도움이 필요해요
✋기다려주세요잠시만요, 아직 진행 중이에요
☕쉬어가요휴식이 필요해요, 잠시 쉬었다 해요

리액션 활용 팁

강사용:

  • 👍가 많이 오면 → 다음 내용으로 진행
  • 🤔나 🆘가 오면 → 추가 설명 또는 개별 질문 확인
  • ✋가 오면 → 잠시 기다렸다가 진행
  • ☕가 많이 오면 → 휴식 시간 고려

수강생용:

  • 말로 질문하기 어려울 때 리액션으로 의사 표현
  • 다른 수강생도 같은 생각인지 리액션으로 확인 가능

문제 해결

강사 (Receiver)

문제해결 방법
Connect 버튼 클릭해도 연결 안 됨1. Session ID가 올바른지 확인<br>2. 인터넷 연결 확인<br>3. 확장 프로그램 재설치
리액션이 화면에 표시 안 됨1. 연결 상태가 "Connected"인지 확인<br>2. 다른 탭에서도 확인<br>3. Test Reaction으로 테스트
연결이 자주 끊김"Auto-connect on startup" 옵션 활성화 권장

수강생 (Sender)

문제해결 방법
"Not Connected" 표시1. Settings에서 Session ID 입력했는지 확인<br>2. Save Settings 클릭했는지 확인
버튼 클릭해도 반응 없음1. 팝업 상단 상태 확인<br>2. Session ID가 강사와 동일한지 확인
"Error" 메시지1. Session ID 오타 확인<br>2. 잠시 후 다시 시도

공통

문제해결 방법
확장 프로그램 아이콘이 안 보임Chrome 툴바 퍼즐 아이콘 클릭 → 핀 고정
설정이 저장 안 됨브라우저 재시작 후 다시 시도

세션 ID 권장 규칙

일관된 세션 ID 명명 규칙을 사용하면 관리가 편리합니다:

{과목}-{날짜}
예: java-2026-01-18
    spring-2026-01-20
    react-2026-01-22

또는

{과목}-{반이름}
예: java-morning
    java-evening
    spring-weekend

참고 사항

  • 세션 ID는 대소문자를 구분합니다
  • 리액션은 실시간으로 전송되며 저장되지 않습니다
  • 한 세션에 여러 명의 수강생이 동시에 참여할 수 있습니다
  • 강사가 연결을 끊으면 수강생의 리액션은 전달되지 않습니다

댓글

불러오는 중...