헤이조이스 웨비나를 소개합니다

2주 만에 개발된 웨비나 시스템이 지금까지도 잘 사용되고 있다는 이야기 💬

황선주 게시 날짜: 2023.05.18.

들어가며

2022년 1월, 컬리의 자회사가 된 플래너리의 서비스 헤이조이스는 일하는 여성들의 커리어를 지원하고 지지하는 워킹우먼 커뮤니티 플랫폼입니다.

일하는 여성들의 네트워킹과 커리어 개발 기회를 제공하기 위해 국내 최초 여성 네트워킹 멤버십 서비스를 시작했고, 성공한 여성 리더를 연사로 초청해 진행되는 오프라인 강연, 컨퍼런스, 공통의 관심사를 가진 분들을 위한 소규모 네트워킹 모임을 통해 수많은 워킹 우먼들을 연결해주었습니다.

하지만 2020년, 갑작스럽게 찾아온 COVID19로 인해 오프라인 네트워킹을 기반으로 했던 헤이조이스는 온라인 서비스로의 빠른 전환이 필요하게 되었습니다. 기존의 멤버십 시스템을 온라인에 맞게 전면 개편하고, 자체 웨비나와 디지털 콘텐츠를 런칭해야 했습니다.

그중에서도 온라인 전환에 크게 기여한 헤이조이스 웨비나는 최대한 오프라인에서의 현장감을 살릴 수 있게 개발하는 것이 중요했습니다. 실시간 라이브 스트리밍은 기본이고, 채팅, 리액션 기능들로 유저들에게 현장감을 주고 편리하게 소통을 이어갈 수 있어야 하며, 웨비나를 운영하기 위해 들어가는 리소스도 크게 줄이는 것이 개발팀에게 주어진 미션이었습니다. 당시 헤이조이스 개발팀은 초기 스타트업의 초소형 조직이었습니다. 때문에 외부 솔루션과 SaaS프로그램, 서버리스 아키텍쳐 등을 적극 활용했고, 그 결과 안정적인 서비스를 빠르게⚡️ 개발하여 제공할 수 있었습니다.

헤이조이스의 온라인 강연을 책임지고 있는 헤이조이스의 웨비나 시스템과 그 개발 여정에 대해 소개합니다.

image

COVID19 이전과 이후의 헤이조이스 라이브 강연

헤이조이스 웨비나 시스템

배경

헤이조이스의 오프라인 강연을 온라인으로 전환하면서 줌, 이벤터스 등 다양한 웨비나 솔루션과 외부 프로그램을 사용해보았지만, 유료 온라인 강연 특성상 다음과 같은 여러 문제가 있었습니다.

  • 사용자 : 강연을 듣기 위해 헤이조이스 외의 사이트 접속, 강연 정보를 보기 힘든 UI 등의 불편한 사용자 경험
  • 운영자 : 유료 강연을 결제한 사용자 관리 및 웨비나에 등록, 안내에서 많은 운영 리소스 소모
  • 데이터 : 사용자의 실제 강연 참석 여부, 접속 환경, 이후 동선 등의 데이터 수집 불가

이에, 저희는 자체 웨비나를 런칭하기로 결정했고 곧 요구사항 정의, 시스템 설계를 거쳐 개발에 임했습니다. ⚡⚡⚡

요구사항 정의

  • 사용자 : 기존 시청 방법에 비해 월등히 편한 접근성과 사용자 경험을 제공한다
    • 이메일, 카카오톡 등 다양한 채널로 웨비나 시청 URL 수신
    • 라이브 스트리밍, 실시간 채팅, 강연 정보(공지사항, 연사 소개, 프로그램 소개)에 맞는 UI
  • 운영자 : 웨비나 관리 시스템을 통합한다
    • 웨비나와 결제 정보를 연결하여 참가자 관리
    • 사용자를 위한 강연 정보 작성
  • 데이터 : 사용자들의 웨비나 참가 및 시청 정보 데이터를 관리한다

시스템 아키텍쳐

image

헤이조이스의 웨비나 시스템은 빠른 개발을 위해 MVP 단계 부터 AWS IVS와 Sendbird를 적극 활용했습니다.

라이브 스트리밍 영역의 AWS IVS는 멤버들이 동시에 같은 내용을 볼 수 있게 필요한 솔루션이었습니다. 채팅 영역의 Sendbird는 실시간 라이브에 필요한 채팅 기능과 운영 툴을 제공하며, UIkit을 활용하면 빠른 채팅 개발이 가능했습니다. 헤이조이스 사용자 간 채팅을 위해 이미 사용해본 적이 있어 검토가 수월하기도 했습니다.

웨비나와 관련된 데이터는 GraphQL과 DynamoDB를 사용하여 마이크로 서비스 아키텍처로 구성되어있으며, AWS의 AppSync와 EventBridge를 사용하여 서버리스 환경으로 개발하였습니다.

저희가 연동한 솔루션과 서버리스 구성에 대해, 아래에서 좀더 자세히 들여다보겠습니다.

웨비나의 라이브 스트리밍 영역, AWS IVS

AVS IVS를 사용하면 아주 손쉽게 라이브 스트리밍을 구현할 수 있습니다.

  • 라이브 스트리밍 채널 생성

    AWS에서 제공하는 ivsClient SDK를 사용하여 채널을 생성합니다.
    채널을 생성하면 channel과 streamKey를 리턴받을 수 있습니다.
    리턴받은 값들 중 channel의 playback_url 과 endpoint, streamKey값을 웨비나 정보에 저장합니다.
    이 playback_url이 영상 플레이어의 src 주소가 됩니다.

...
  const webinarId = uuid();
  const channelName = `${webinarId}`;

  const ivs = await ivsClient.createChannel({ name: channelName }).promise();
...

  • 라이브 스트리밍 플레이어 설정

    AWS에서 권장하는 Video.js 라이브러리에 ivs 설정과 실시간 라이브에 필요한 요구사항에 맞게 플레이어 설정과 아까의 playback_url을 영상 리소스에 연결하면 라이브 스트리밍을 제공할 수 있습니다.

    헤이조이스 웨비나에서는 아래와 같은 설정을 사용하였습니다.

    • 기본 하단 컨트롤바 사용
    • replay 설정은 끄기
    • 웹브라우저 inline 재생
    • 자동 재생

    inline 재생 설정으로 웨비나 페이지에 진입 시, 플레이어 자동 전체화면을 막아 채팅과 라이브 스트리밍 화면을 제공하였습니다.

...
       window.registerIVSTech(window.videojs);
       window.registerIVSQualityPlugin(window.videojs);

       const player = window.videojs(
         'amazon-ivs-videojs',
         {
           techOrder: ['AmazonIVS'],
           controls: true, //하단 컨트롤 바 제공 유무
           playsinline: true, // 웹 브라우저 재생 화면 유무
           autoplay: true, // 자동 재생 여부 (
           'x-webkit-airplay': true, // (사파리) airplay 지원여부
           controlBar: { // 컨트롤 바 옵션
             playToggle: {
               replay: false,
             },
             pictureInPictureToggle: true,
           },
         },
         function onPlayerReady() {

           ...

           player.enableIVSQualityPlugin();
           player.src(ivs.playback_url);
         }
       );
...

채팅은 Sendbird를 사용하자

Sendbird가 제공하는 아래 두 종류의 채팅 기능 중, 저희는 헤이조이스 웨비나에 적합한 Open Channel을 선택했습니다.

  • Open Channel
    • 많은 인원이 채팅을 사용할 수 있고, 기본 1000명까지 한 채널에 들어갈 수 있습니다.
    • 더 많은 인원의 경우, 채널 분리가 필요한데 이때에는 Dynamic partitioning을 사용할 수 있습니다.
  • Group Channel
    • 100명 정도의 인원이 대화가 기록되어야 하는 경우에 사용합니다.

Sendbird를 사용한 채팅 기능은 다음과 같이 구현되었습니다.

  • Sendbird의 채널 생성

    웨비나를 생성 할 때에 Sendbird 채널을 함께 생성하여 추가해줍니다.

   ...
   const webinarId = uuid();
   const channelName = `${webinarId}`;

   const ivs = await ivsClient.createChannel({ name: channelName }).promise();
   const sendbird = await SendBird.createOpenChannel({ name: notice.title, customType: 'live' }); //샌드버드 채널 생성
   ...

  • 유저 생성 및 연결

    헤이조이스의 유저가 웨비나에 접속할 때, Sendbird 액션을 사용하여 Sendbird에 유저 id와 닉네임을 보내 등록합니다.
    헤이조이스의 유저 정보를 그대로 채팅에서도 사용할 수 있게 됩니다.

const sb = new SendBirdAction();
await sb.connect(userId, nickName, accessToken, profileUrl);
  • 생성된 Sendbird 오픈 채널에 입장
const sbChannel = await sb.getChannel(channelUrl, true);
setChannel(sbChannel);
await sb.enter(channelUrl);

const messageList = await sb.getMessageList(sbChannel, true);
setMessageList(messageList);
setChatItemList(messageList);
setIsChannelLoaded(true);
  • Sendbird 이벤트를 사용하여 메세지 전송, 수신

sendUserMessage, getMessageList 이벤트와 액션을 사용하여 메세지를 전송, 수신할 수 있고, 이미지와 파일 업로드도 가능한 채팅을 구현할 수 있습니다.

  • 부가기능 개발

image

MVP개발 이후 웨비나를 개선하면서 Sendbird의 meta counter 기능을 활용하여 리액션 기능을, 유저리스트 기능을 활용하여 참석자 리스트 기능과 현재 시청자 수를 추가하였습니다.

서버리스하게 개발하기

image

헤이조이스는 최초 외주로 개발된 영역(강연 리스트, 결제 등)을 제외한 새로운 서비스는 MSA로 개발하고 있습니다. 웨비나 시스템도 마찬가지로, MSA로 내부 로직들이 서버리스하게 개발되었습니다.

웨비나 자체는 새로운 서비스지만, 웨비나에 참석하는 참석자들은 기존에 개발되어있는 주문정보와 연결되어 있어 RDB에 저장되어있는 유저들의 주문 정보를 가져와 참석자 리스트를 만들어 웨비나 DynamoDB에 생성해주어야 합니다. 해당 작업은 AWS에서 람다함수로 정의, EventBridge를 사용하여 매 시간마다 배치를 돌 수 있게 규칙을 설정하여 주었습니다.

이렇게 생성된 웨비나 참석자 리스트와 웨비나 정보를 이용하여 웨비나 참석자 관리, 웨비나 알림 자동화, 웨비나 참석 여부 확인 등의 웨비나 관련 기능들을 개발해주었으며, 서버에 대한 큰 고민 없이 빠르게 개발 후 운영할 수 있게 되었습니다.

이렇게 헤이조이스 웨비나의 초기MVP가 탄생하게 되었습니다.👏

웨비나 개선하기

MVP를 완성하고 난 이후 3년이 지난 현재까지도 큰 장애 없이 웨비나가 운영되고 있습니다. 🧐 헤이조이스 웨비나를 더욱 많은 사람이 사용할 수 있고, 이용하기 편하게 개선한 사례를 몇 가지 공유합니다.

💡사용자가 웨비나에 접속했을 때 자동 재생을 시키고 싶어요

플레이어에 별다른 설정을 하지 않았다면, 사용자가 웨비나에 접속하였을 때 만나는 첫 화면은 아래와 같은 검은색 화면이 됩니다. 이는 자동 재생 설정을 하지 않았기 때문인데요, 이 화면에서 웨비나를 시청하기 위해서는 사용자가 재생 버튼을 직접 눌러야 합니다.

이러한 사용자 경험은 강연 시작 전부터 미리 접속해서 기다리는 헤이조이스 사용자들의 특성상, 강연이 시작하지 않아 검은색 화면을 마주하고 있는지, 혹은 재생 버튼을 누르지 않아 시작하지 않는지 알기 어려웠습니다.

image

"웨비나 시작 했나요?" (실제로 채팅에도 종종 나오는 cs였습니다.)

자동재생 설정을 주면 간단하게 해결될 것 같지만,

자동재생 설정은 또 다음 문제를 가져옵니다. 크롬의 정책상 동영상 플레이어에서 자동 재생을 하기 위해서는 음소거 상태여야 가능하며, 사파리 및 다른 브라우저들도 사용성을 위해 비슷한 정책들을 가지고 있습니다.

사용자가 직접 웨비나에 접근한다면 크롬 정책에 해당하지 않아 음소거 문제를 해결 할 수 있습니다. 하지만, 새로고침을 하게 될 경우 다시 음소거가 됩니다 🥲

고민 끝에 웨비나 시작 전에는 웨비나 시작까지 남은 시간을 표시하고, 이후 웨비나가 시작된 이후에는 음소거에 대한 안내를 표시해주었습니다.

image

안내가 개선된 웨비나

여전히 정책상 새로고침시에는 웨비나가 음소거되고, 이에 대한 문의가 채팅창에 간혹 나타나지만, 사전 안내와 친절한 사용자들의 안내로 이러한 문의가 줄었습니다.

💡더 많은 참석자를 위해 웨비나 정보와 웨비나 참석자 데이터 분리하기

최초의 웨비나 시스템의 데이터 스키마 구성은 웨비나 데이터베이스 안에 모든 정보를 저장하였습니다. 하나의 웨비나 아이템은 웨비나 url, 웨비나 제목, 공지사항, 연사 정보, 참석자 리스트 등 모든 정보가 들어있었습니다.

해당 구조는 웨비나에 4~500명의 인원수용에는 문제가 없었지만, 강연 신청자 수가 늘어나면서 더 많은 참석자를 준비하여야 했고, 이에 맞게 웨비나 시스템의 개편이 필요하게 되었습니다.

DyanmoDB를 사용하고 있는 웨비나 데이터의 사용자 1명의 데이터는 약 200자 정도로, 1000명만 웨비나를 신청하여도 하나의 웨비나 item에 참석자 리스트를 모두 저장할 수 없었기 때문입니다.

DynamoDB의 한 항목당 limit은 400KB입니다.

400byte * 1000명 = 💣

웨비나에 더 많은 참석자를 받기 위해, 웨비나 참석자 테이블을 추가 후 웨비나와 웨비나 참석자를 분리해주었습니다.

작업 이후 헤이조이스 웨비나는 1000명 이상의 참석자 신청이 들어와도 문제없이 운영할 수 있게 되었습니다. 분리하면서, 웨비나 참석자 테이블의 데이터 스키마는 웨비나 id와 사용자 정보를 하나의 세트로 담고 있어, 이에 유저별, 웨비나별 해당 웨비나 접속 정보, 출석 정보 등을 가지고 있을 수 있게 되었으며 참석자 관리도 더 쉽게 할 수 있게 되었습니다.

image

웨비나 관리자용 페이지

그렇게 MVP가 잘 굴러가고 있다는 이야기

이렇게 헤이조이스는 2020년 8월, 2주 만에 자체 웨비나를 개발 및 론칭할 수 있었고, 현재까지 200개가 넘는 강연의 웨비나를 소화하고 있습니다.

image

자체 웨비나 시스템을 이용하는 사용자들의 긍정적인 피드백도 정말 많이 받고 있습니다. ☺️

  • 유저
    “저번에도 라이브 참여해봤지만 항상 준비성이 철저하고 즉각적인 반응이 좋았습니다.”
    ”처음경험임에도 불구하고 쉽게 접근할 수 있고 시스템이 편리한 구조였습니다”
    “방송상태, 시스템, 진행자까지 모두 굿굿!!”
    “실시간으로 다른 분들의 피드백을 보면서 강의를 보니 현장감 있고 좋았습니다”
    “줌이나 유투브처럼 카메라 노출이나 로딩 오류 걱정없이 볼 수 있어서 만족스러웠습니다.”

  • 운영자
    ”공지사항탭/연사탭/채팅탭이 나뉘어져 있어 웨비나만 미리 세팅해두면 실시간으로 유저 대응이 쉽고, 안내하기 편해요”
    ”자체 웨비나가 있는 것 자체가 전문적인 느낌이 나서 좋아요”

또, 무료 웨비나의 경우 강연 구입 과정 없이 전체 유저들에게 오픈하여 신청 허들을 낮추기도 하고, 웨비나 참석자 일괄 등록 등의 기능 추가로 운영성 업무를 더 줄일 수 있게 계속 발전하고 있습니다.

AWS의 여러 서비스를 필요에 따라 다양하게 사용하면서 개발하고 있어, 새로운 개념들을 바로 사용해보고 적용할 수 있고, 적극적인 피드백을 주는 유저분들과 함께 실제 서비스에서 재미있게 개발하고 있습니다.

좋은 강연을 더 많이 제공하고, 더 많은 유저들을 연결하기 위해 아직 공부하고 해야 할 일이 많지만 헤이조이스팀이 어떻게 성장하는지 함께 지켜봐 주세요!

감사합니다.

그리고..(1)

사회적 거리두기가 해제되고, 헤이조이스는 다시 오프라인에서도 많은 일하는 여성들을 연결하기 위한 프로그램을 제공하고 있어요. 💛

그리고..(2)

Thanks to 헤이조이스 웨비나를 개발한 헤조뎁팀 @stunstunstun, @yunjeongloper, @jinee525, @nanaon and Me(@sunju0123)

Thanks to 블로그 작성에 도움을 주신 @연준님, @남희님