ColoRing - 색깔로 악보 읽기 (교사용)

ColoRing - 색깔로 악보 읽기

MusicXML이나 MuseScore(.mscz) 악보를 올리면 음표 머리가 고정도법 색으로 칠해집니다. 도는 빨강, 레는 주황, 미는 노랑이고, 샵과 플랫이 붙은 음도 같은 색입니다.

처음 설정하기수업 연결을 처음 쓰는 선생님용 안내 · 약 15분 · 한 번만 하면 됩니다

이 설정은 왜 필요한가요? 선생님 화면과 학생 화면을 이어 주려면 둘 사이에 우체통이 하나 있어야 합니다. 선생님 화면이 악보와 "재생!" 신호를 우체통에 넣으면, 학생 화면들이 바로 꺼내 갑니다. 이 우체통 역할을 하는 것이 구글의 무료 서비스 Firebase이고, 아래는 Firebase에서 이를 만드는 정확한 순서입니다.

설치할 것은 없습니다. 이 사이트는 이미 인터넷에 올라가 있으니 주소(이 사이트 주소)를 그대로 쓰면 되고, 아래 과정도 모두 크롬 같은 브라우저에서 합니다. 학생은 설치도, 계정도, 로그인도 필요 없고 선생님이 준 링크나 QR 코드만 열면 됩니다.

화면의 메뉴 이름은 이렇게 표시했습니다. Firebase 화면에서 같은 글자를 찾아 누르면 됩니다. 화면이 조금 달라 보여도 같은 글자를 찾으면 됩니다.

  1. 프로젝트 만들기

    1. 크롬에서 console.firebase.google.com에 들어가 구글 계정으로 로그인합니다.
    2. 프로젝트 만들기 또는 Firebase 프로젝트 시작하기를 누릅니다.
    3. 프로젝트 이름은 gyeieum-class처럼 영어로 아무 이름이나 적고 계속을 누릅니다. 약관 동의가 나오면 체크합니다.
    4. Google 애널리틱스 화면에서는 스위치를 끄세요. 끄면 훨씬 빨리 만들어집니다. 그다음 프로젝트 만들기 → 계속을 누릅니다.

  2. Realtime Database 만들기

    1. 왼쪽 메뉴에서 Realtime Database를 누릅니다. 안 보이면 빌드를 펼치거나, 메뉴 위쪽 검색칸에 "Realtime"을 적으세요.
    2. 데이터베이스 만들기를 누릅니다.
    3. 위치는 싱가포르(asia-southeast1)를 고르고 다음을 누릅니다.
    4. 잠금 모드로 시작을 고르고 사용 설정을 누릅니다.
    5. 만들어지면 데이터 탭 위쪽에 https://…firebasedatabase.app 주소가 보입니다. 이것이 데이터베이스 주소입니다. 7단계에서 쓰니 메모장에 복사해 두세요.

  3. 보안 규칙 설정하기

    1. 같은 화면 위쪽에서 규칙 탭을 누릅니다.
    2. 편집 칸을 누르고 Ctrl+A(맥은 ⌘+A)를 누른 뒤 Delete로 원래 글을 모두 지웁니다.
    3. 아래 규칙 복사 버튼을 눌러 복사하고, 편집 칸에 붙여 넣습니다.
    4. 오른쪽 위 게시를 누릅니다.
    
          
    
          
    게시한 뒤 위쪽에 노란 경고 문구가 뜰 수 있습니다. 학생이 악보를 볼 수 있게 열어 두어서 나오는 안내이니 그냥 두셔도 됩니다. 이 규칙은 학생은 보기만 하고, 수업을 연 선생님 브라우저만 악보를 바꿀 수 있게 합니다.
    
        
    4. 

        
  4. 
          
    익명 로그인 사용 설정하기
    
          
      
            
    1. 왼쪽 메뉴에서 Authentication을 누릅니다. 안 보이면 빌드를 펼치거나 검색칸에 적으세요.
      2. 
            
    2. 시작하기를 누릅니다.
      3. 
            
    3. 로그인 방법 탭에 로그인 종류가 여러 개 나옵니다. 그중 익명을 누릅니다.
      4. 
            
    4. 사용 설정 스위치를 켜고 저장을 누릅니다. 목록에서 익명 옆에 사용 설정됨이 보이면 끝입니다.
      5. 
          
    
        
    5. 

        
  5. 
          
    웹 앱 추가하고 firebaseConfig 복사하기
    
          
      
            
    1. 왼쪽 메뉴 맨 위 톱니바퀴를 누르고 프로젝트 설정을 고릅니다.
      2. 
            
    2. 위쪽 탭 중 맨 왼쪽 일반 탭을 누릅니다. 사용자 및 권한 탭이 아니니 주의하세요.
      3. 
          
    
          
          
      
            
    1. 화면을 맨 아래까지 내리면 내 앱 칸에 "프로젝트에 앱이 없습니다"라는 문구와 동그란 아이콘들이 있습니다. 그중 </> 모양(웹)을 누릅니다.
      2. 
            
    2. 앱 닉네임에 아무 이름(예: 계이름)이나 적습니다. Firebase 호스팅도 설정은 체크하지 말고 앱 등록을 누릅니다.
      3. 
            
    3. 코드가 나오면 그중 const firebaseConfig = {부터 };까지만 복사해서 메모장에 붙여 둡니다.
      4. 
            
    4. 콘솔로 이동을 누르면 Firebase 쪽 설정은 끝입니다.
      5. 
          
    
        
    6. 

        
  6. 
          
    교사 화면에 설정 붙여 넣고 수업 열기
    
          
      
            
    1. 이 교사 화면 아래쪽 수업 연결 칸에, 5단계에서 메모장에 복사해 둔 firebaseConfig 내용을 붙여 넣습니다.
      2. 
            
    2. Realtime Database 주소 칸이 비어 있으면 2단계에서 복사한 데이터베이스 주소를 넣고 저장을 누릅니다.
      3. 
            
    3. 수업 열기를 누르면 6자리 수업 코드와 QR 코드가 나옵니다.
      4. 
            
    4. 휴대폰으로 QR 코드를 찍어 학생 화면이 열리는지 확인해 보세요. 학생 수가 1명으로 바뀌면 연결된 것입니다.
      5. 
          
    
          
    설정은 이 브라우저에 저장됩니다. 다음부터는 교사 화면을 열고 수업 열기만 누르면 됩니다. 다른 컴퓨터나 태블릿에서 쓸 때는 현재 설정 저장으로 받은 파일을 그 기기에서 저장해 둔 설정 파일 불러오기로 고르면 연결과 악보 설정이 한 번에 돌아옵니다.
    
        
    7. 
      


      

        
자주 막히는 곳

        

          
왼쪽 메뉴에 Realtime Database나 Authentication이 안 보여요.

          
메뉴의 빌드 또는 제품 카테고리를 펼치거나, 메뉴 위쪽 검색칸에 이름을 적어 찾으세요.

          
수업 열기를 눌렀더니 "보안 규칙을 확인해 주세요"라고 나와요.

          
3단계 규칙을 다시 붙여 넣고 게시를 눌렀는지 확인하세요.

          
"익명 로그인을 켜 주세요"라고 나와요.

          
4단계에서 사용 설정을 켠 뒤 저장까지 눌렀는지 확인하세요.

          
학생 링크가 휴대폰에서 안 열려요.

          
교사 화면을 내 컴퓨터에 받은 파일로 연 경우입니다. 이 사이트 주소로 교사 화면을 열고 수업을 다시 여세요.

          
돈이 드나요?

          
무료 요금제로 충분합니다. 무료 요금제는 동시에 100명까지 접속할 수 있습니다.

        

      

    

  



  

    
    
    
    
    
    
    
    
    
      
      100%
      
    
  


  

  

  

    

      
      
      
    

    

      
      
    

    

      
      
      마디씩
      
      
      
      
      
    

    
악보에 표시된 마디 번호를 쉼표로 구분해 적으면 그 마디부터 새 줄이 시작됩니다. 비워 두면 자동으로 배치됩니다. 지정한 마디가 한 줄에 다 들어가지 않으면 음표 간격을 좁히고, 그래도 안 되면 악보 크기를 줄여서 맞춥니다. 새 페이지가 시작될 마디를 적으면 그 마디부터 다음 페이지가 되고, 보기와 PDF·인쇄에 같은 페이지 나눔이 적용되고, 페이지 안에 여유가 있으면 음표·쉼표 크기와 마디선 간격을 함께 키우고, 남는 공간은 줄 사이 간격으로 채웁니다. 인쇄할 때는 위아래 2cm를 비우며, 화면의 페이지는 그 안쪽 인쇄 영역입니다. 이 버튼이 켜져 있으면 한 줄 안에서 음표와 쉼표가 많은 마디일수록 넓게, 개수가 같은 마디는 비슷한 폭으로 나눕니다.

  


  

  

    

      
      
      
      Space 재생 · 일시정지
      
    

    

      
      
      
      
      
      
      
    

    

      
        
        
      
      
      
      
      
      
      
    

    

  


  

    

    

      
      
      
    

  


  


  


  

  

  
PDF는 그림에 가까워서 음표 정보가 없습니다. 먼저 Audiveris 같은 악보 인식(OMR) 프로그램으로 MusicXML로 바꾼 뒤 올려 주세요. 피날레(.musx)나 시벨리우스(.sib) 같은 다른 사보 프로그램 파일은 그 프로그램에서 MusicXML로 내보낸 파일을 올려 주세요.