안녕하세요, 현재 부산소프트웨어마이스터고등학교 소프트웨어개발과 3학년에 재학 중인 학생입니다.
지난 2년동안 방송부원으로 활동하며 겪은 문제점과 불편함을 개선하기 위해 개발한 방송 원격 컨트롤 서비스 ONAIR를 소개드립니다!
겪은 불편함
좋지 않은 UI/UX
위에 첨부된 사진은 기존에 방송 장비 업체로부터 제공받은 스피커 관리 및 시보 설정 프로그램입니다. 한 눈에 봐도 정말 오래된 UI/UX로 보입니다.
각 시보를 일렬로 번호로 나열해둬서 굉장히 눈이 아프며 시간 설정, 울릴 종 소리 설정, 그룹 설정도 가로로 나열 되어있어 정말 보기 불편합니다.
게다가 특정 장소에 울리게 하고 싶으면 반드시 그룹으로 지정해야 하는 것도 좋지 못한 UX라고 생각합니다.
또한 종 소리 파일도 재생을 위해서 따로 전용 USB를 연결하여 특정 번호에 매핑하여 스피커 장치에도 함께 전송해줘야 하는 부분도 불편했습니다.
위에 첨부된 사진 역시 업체로부터 제공받은 방송 송출 프로그램입니다.
이미지, 영상 파일 관리와 송출 상황 관리만 있으면 되는 프로그램이지만 불필요한 난잡한 UI로 인해 배우기도 사용하기도 불편했습니다.
또한 반복 재생, 비율 조정 같은 UI가 쓸데없이 숨어있어 불편함을 겪었습니다.
방송실 이동 시간
결국 모든 작업은 방송실에 반드시 가야만 가능합니다.
시보 설정, 방송 송출 미디어 변경, 소리 세팅, 스피커 관리 등 대부분의 작은 업무는 귀찮게 방송실에 가야했습니다. 귀찮기도 했지만 급하게 대처해야 할때 방송실까지 달려가야 했으며 3학년이 되면서 교실과 방송실의 거리는 더 멀어졌습니다.
개발 과정
스피커 매트릭스 원격 관리
처음 개발을 결심하고 이 모든걸 어떻게 원격으로 관리하면 좋을지 고민을 많이 했습니다.
우선 스피커 매트릭스를 관리하는 부분은 방송부 담당 선생님께서 개발을 일정 부분 해두셔서 이를 리팩토링 하는 방식으로 진행했습니다.
스피커를 껐다 켰다 할때 방송실 네트워크에서 일어나는 요청 패킷을 캡쳐해두고 각 스피커마다 패킷을 매핑한 후 이후 패킷을 내보내는 방식으로 스피커를 원격으로 관리하는 것에 성공했습니다.
또한 위에 보이는 화면처럼 스피커 선택 화면도 깔끔하게 구현하였습니다.
미디어 송출 원격 관리
문제는 미디어 송출이었습니다. 기존 미디어 송출 프로그램에서는 파일을 재생시키거나 HDMI로 연결된 화면을 송출해주는 기능이 있었습니다.
처음에는 OBS를 사용하는 방향성이나 HDMI 분배기를 활용하거나 업체 프로그램을 원격으로 조종하는 방향으로 생각해봤습니다.
그러다 문득 '그냥 어차피 기존 프로그램에 PC를 그대로 출력해주는 기능이 있었으니 그 컴퓨터를 상시 송출로 두고 웹 화면을 띄워서 그 화면을 컨트롤할 수 있게 하면 이게 원격 조종 아닐까?' 라는 생각이 떠올랐고 바로 실천으로 옮겼습니다.
파일 관리
우선 기존 파일 관리를 깔끔하게 하기 위해 이미지, 영상, 음원, 프리젠테이션(PPT, PDF)를 각각 두고 파일 업로드를 할 수 있게 하였으며 서버는 상시 가동중인 방송실 컴퓨터로 두기 때문에 파일들을 방송실 컴퓨터 로컬에 저장되도록 하였습니다.
미디어 송출 및 채널 분리
기존에 복잡하던 UI에서 깔끔한 UI로 구현하였으며 기존 파일 관리에서 업로드 해둔 영상, 이미지, 프리젠테이션, 오디오 중 원하는 파일을 선택하여 송출할 수 있게 하였습니다.
오른쪽 미리보기에서는 반복 재생, 재생바, 소리를 관리할 수 있게 하였으며 타이머와 화면 공유도 송출할 수 있게 하였습니다.
영상 재생의 경우 hls 기반으로 재생되게 하여 원하는 시점으로 확확 돌리거나 테스트로 보는 화면, 방송실 컴퓨터에서 송출하는 화면, 다른 학생들이 현재 방송중인 화면을 개인 노트북으로 볼때 모두 큰 딜레이 없이 시청할 수 있게 하였습니다.
또한 저희 학교는 방송 외에 학교 전광판 화면, 다목적홀 화면, 강당 화면 등이 있기에 채널을 5개로 분리하여 이후 송출 관리해야하는 디스플레이가 늘어나도 관리할 수 있게 하였습니다.
시보 관리
방송실 메인 컴퓨터(시보 설정 컴퓨터)는 소리 송출 스피커가 매트릭스 스피커로 설정 되어 있기 때문에 해당 컴퓨터에서 소리를 재생하면 켜져있는 스피커에서 소리가 재생됩니다.
그래서 시보는 기존 프로그램을 사용하지 않고도 기존에 개발해둔 스피커 관리 + FFmpeg을 활용하여 비슷하게 구현할 수 있었습니다.
원하는 시보를 전송하면 해당 시보들이 주 단위로 스케줄러에 등록되어 스케줄러에 등록된 시간이 되면 자동으로 지정된 스피커를 켜고 설정된 음원 파일을 재생시켜 시보(학교 종)를 구현했습니다.
기존에 있던 시보 관리 화면은 앞에서 말했듯이 너무 복잡하고 눈 아프기에 위에 화면과 같이 요일을 선택하고 시보 추가를 누르면 시보 이름, 시보를 재생할 스피커(공간), 재생할 시간, 재생할 음원(관리되는 파일)을 선택하여 저장하면 세팅이 완료되게 하였습니다.
기존 시보 프로그램에서 그룹으로만 선택할 수 있던 문제를 스피커 개개인도 선택할 수 있게 하여 더 범용성을 넓혔습니다.
또한 일반적인 종 세팅 외에 시험, 단축 수업 등 예정된 특수한 상황들을 빠르게 전환하기 위에 시보 세팅을 그룹으로 관리할 수 있게 하였습니다.
현수막 원격 관리
올해부터 강당에 실물 현수막 걸던 것을 디지털화 하여 현수막 사이즈의 디스플레이를 달게 되었습니다. 이때 사용하라고 받은 프로그램은 불친절했습니다.
그래서 ‘이것도 미디어 송출이랑 비슷하게 원격으로 관리할 수 있지 않을까?’ 라고 생각했습니다.
우선 현수막 디스플레이 송출 방식과 프로그램의 송출 방식을 간단하게 설명드리겠습니다. 현수막은 약 12:1 비율입니다. 현수막 디스플레이는 일반적인 모니터 연결 하듯이 hdmi로 연결된 장치의 추가 모니터처럼 표시됩니다.
하지만 대부분의 장치의 비율은 약 16:9이기에 현수막 디스플레이에 송출하면 찌그러져 보입니다. 그래서 제공받은 프로그램은 레이어에 원하는 이미지, gif를 올리고 재생을 하면 전체 화면을 고의적으로 늘리고 찌그러뜨려서 실제 현수막 화면에서는 정상적으로 보이도록 만들어줍니다.
저 역시 이와 같은식으로 구현을 시도했습니다. 송출 화면을 고의적으로 늘리고 찌그러뜨려서 16:9 화면에서는 이상하게 보이지만 현수막 디스플레이에서는 정상적으로 보이도록 하였습니다.
송출 미디어는 기존에 관리되는 파일에서 이미지만 들고와 선택할 수 있게 하였습니다.
체육대회 점수판
현수막 송출을 만들었을 시점이 체육대회 예선이 얼마 남지 않은 시점이었습니다.
그래서 ‘강당에 디스플레이도 있겠다, 이걸 원격으로도 관리할 수 있겠다, 한번 점수판을 띄워서 체육대회 관람을 더 편하게 해볼까?’ 라는 생각을 하였고 체육부장에게 제안 후 승인 받아 바로 개발하였습니다.
기존 현수막 송출을 조금만 바꾸고 애니메이션을 추가하면 되는 부분이었습니다.
가운데에 제목, 부제목을 작성할 수 있게 하였고 양옆에는 스코어 보드를 띄웠습니다. 스코어 보드 디자인은 실제로 사용하고 있던 점수판의 모습을 비슷하게 옮겼으며 득점시 현실에서 점수판 뒤로 넘기듯한 애니메이션을 넣었습니다.
또한 득점시 SCORE 글자를 득점한 팀 방향에 띄우는 애니메이션도 추가하여 더욱 보는 맛을 증가시켰습니다.
기기 관리 및 접근 권한
방송 권한이 모두 들어간 서비스이다 보니 접근 권한 관리가 중요했습니다. 우선 클라이언트, 서버 모두 방송실 컴퓨터를 통해 올려두었기에 해당 네트워크로 접근할 필요가 있었지만 방송실 네트워크는 교실에서 접근할 수 없기에 tailscale vpn 서비스를 사용하였습니다.
허용된 tailscale 사용자만 접근할 수 있게 막았으며 허용된 사용자는 tailscale vpn을 활성화하면 어디서나 올려둔 서비스에 접근할 수 있게 하였습니다.
또한 방송부 내에서도 권한을 관리자, 운영, 보기 전용으로 나누어 보기 전용 상태에서는 상태를 확인할 수만 있고 운영에서는 기능들을 활용할 수 있으며 관리자에서는 접근 로그, 권한 부여를 할 수 있게 하였습니다.
기기 관리에서는 기기의 사용자 이름 라벨링과 권한을 선택할 수 있으며 접근 로그에서 어떤 기기에서 어떤 요청을 보냈는지 로그를 확인할 수 있습니다.
서비스 운영 및 마무리
현재 방송 송출 화면은 저의 서비스를 통해 미디어 송출이 일어나고 있으며 시보 역시 기존 시보 프로그램을 꺼두고 저의 서비스를 통해 종이 울리고 있습니다.
또한 올해 체육 대회와 농구 경기에서 저의 서비스를 활용하여 점수보드를 띄웠습니다. 방송부원들에게 배포해둔 상태이며 제가 학교를 떠나기 전 인수인계를 마칠 예정입니다.
이번 서비스를 개발하기 전에는 ‘과연 이게 될까?’ 라는 식으로 접근하여 개발하였지만 다 만들고 나니 방송부에서 좋은 서비스가 탄생한 것 같아서 만들기 잘했다는 생각이 듭니다.
학창 시절 매일 항상 듣던 종을 직접 내가 만든 서비스를 통해 울리니 신기했습니다.
한편으론 저의 서비스로 교체한뒤 문제가 발생하면 책임이 저에게 생기기 때문에 서비스를 유지하는 것이 두렵기도 하지만 개발 경험으로는 학교가 아니면 할 수 없는 경험이었기에 뜻깊었던 것 같습니다.
지금까지 긴 글을 읽어주셔서 감사합니다 :)
