시작하며안녕하세요. 카카오엔터프라이즈 워크Web개발파트에서 프론트엔드 개발을 하고 있는 Dale(조한별)입니다.이번 포스팅에서는 지난 8월 카카오워크 신규 기능으로 탑재된 음성채팅을 구현하면서 얻은 프론트엔드 개발 경험을 소개해볼까 합니다. 카카오워크 PC 버전(Mac, Windows)에 구현되어 있는 음성채팅은 JavaScript로 구현된 Webview(이하 웹뷰)로 개발되었습니다. 아무래도 웹뷰로 구현하게 되면 빠른 구현과 간편한 배포를 통해 유지보수가 편하지만, 웹뷰라는 틀 안에서 음성 기술을 다루다 보니 각 플랫폼 별로 제약사항이 꽤 존재했던 만큼 고려해야되는 한계점들도 분명히 존재했습니다. 이 포스팅이 WebRTC 기술을 활용하여 웹뷰로 비슷한 서비스를 개발하시는 분들에게 소소한 팁이 될 수 있었으면 좋겠습니다.카카오워크 음성채팅카카오워크의 음성채팅 기능은 메시지 형식의 커뮤니케이션 방식에서 한발 더 나아가 음성으로 서로 연결된 느낌의 커뮤니케이션을 제공합니다. 음성채팅은 기존 화상회의보다는 간단하지만, 텍스트보다는 빠르게 의사소통할 수 있는 서비스를 제공한다는 점에 주목하며 개발하게 되었는데요. 카카오워크 음성채팅은 로컬 오디오와 스피커의 상태/종류를 변경하거나 참여자들의 음량 레벨을 통해 발화자를 표시하고, 메인 스피커(주발화자)를 판단하여 표시할 수 있습니다. 뿐만 아니라 참여자들의 정보와 미디어 기기 권한 여부를 표시하는 등 음성채팅을 위한 기본적인 기능들을 간단하고 빠르게 제공합니다.❕카카오워크 음성채팅 사용 방법카카오워크 PC 버전에서 음성채팅 사용법을 궁금해하시는 분들을 위해 사용법을 설명드리면, 사용법은 아주 간단합니다. 채팅방 우상단에 있는 🎧아이콘을 누르면 바로 채팅방 멤버들과 음성채팅이 시작됩니다.[그림 1] 카카오워크 음성채팅 시작하기음성채팅이 시작되면 [그림 2]와 같이 초록색 아이콘이 채팅창 목록과 채팅방 우상단에 표시됩니다. 저 같은 경우 개발하면서 동료들과 그때 그때 잠깐씩 빠르게 이야기를 나눌 때(그리고 화상회의는 뭔가 부담스러울 때), 음성채팅을 정말 유용하게 사용하고 있는데요. 개발 구조에 대해 텍스트로 의견을 나누는 것보다, 클릭 한 번으로 음성채팅을 통해 안건을 빠르게 논의할 수 있어 참 편리합니다. 🙂[그림 2] 카카오워크 음성채팅이 진행되는 모습음성채팅 구현에 사용한 기술카카오워크의 음성 채팅을 구현하기 위해 제가 사용했던 기술들을 공유해 보겠습니다.음성 라이브스트리밍 with WebRTC음성 채팅에서 가장 핵심적인 기능은 역시나 음성 라이브스트리밍 기술입니다. 음성 라이브스트리밍 기술은 카카오엔터프라이즈의 자체 WebRTC 기술을 사용했습니다. 음성채팅은 화상이 아닌 음성만을 다루다 보니 안정적인 음성 전달과 음성 품질이 매우 중요합니다. 음성채팅을 개발하면서 사내에서 음성 성능 테스트를 진행한 적이 있었는데요. 몇백 명 수준의 인원이 접속해도 성능이나 품질 면에서 이상이 없는 부분을 확인했고, 덕분에 성능에 대한 의심 없이 다른 기능 구현에 집중할 수 있었습니다.[그림 3] (좌)음성

시작하며여러분은 요즘 어디에서 일하고 계신가요? 코로나의 등장으로 다양한 근무 형태가 나타나고, 공간도 점차 개인화되면서 집이나 카페, 도서관 등 동료들과 서로 다른 각자의 공간에서 업무를 하는 경우가 많아지고 있습니다. 그러나 이렇게 다양한 업무 공간이 있음에도 불구하고 '오피스', 즉 사무실은 사라지지 않고 있는데요. 오히려 기업의 조직문화와 일하는 방식에 맞춰 더 정교하게 설계되고, 함께 일하는 사람들과 모일 수 있게끔 만들려는 경향이 강해졌죠.카카오엔터프라이즈도 이러한 경향에 맞춰 오피스에 AI Vision 기술을 접목하고, 종합 업무 플랫폼인 카카오워크와 연동해 편안하고 즐거운 오피스를 만들고 있습니다.‘사원증 없이 출입하는 카카오엔터프라이즈'‘과자, 아이스크림, 주전부리 가득한 무인상점에 마음껏 오가는 방법'‘업무 협업툴과 사옥의 완벽한 콜라보레이션!’오피스 곳곳에 어떤 기술이 사용되는지, 어떻게 적용되었는지 모두 소개해 드릴게요. 입사한 지 갓 3개월 차 따끈따끈한 워크엔진서비스 기획자 Consi(박한결)의 눈으로 바라본 카카오엔터프라이즈 오피스 공간과 디지털 세계에서 더 나은 미래를 연구하는 워크스루셀 개발자 Dizi(오태일)가 바라본 오피스에 담긴 기술을 모두 알려드리겠습니다. 호그와트에 버금가는 카엔와트! 지금 시작합니다. Drop the beat! (비트 주세요-)얼굴이 곧 사원증우리 모두 사원증을 들고 오지 않아서 곤란했던 경험이 한 번쯤 있지 않나요? 내 회사인데 들어가지 못하는 그 당혹스러움, 워크스루는 그 당혹스러움을 해결하기 위해 시작되었습니다. 덕분에 카카오엔터프라이즈에서는 사원증 없이 회사에 출입하는 모습이 일상이죠.워크스루란워크스루란 사원증 없이 얼굴 인식만으로 사용자를 식별해서 출입 허가를 내어주는 기술입니다. 사용자가 얼굴을 보여주면 딥러닝 모델이 얼굴을 인식하고, 해당 사용자가 서버에 등록이 되어있는 사용자인지 확인합니다. 얼굴이 등록되어있다면 출입을 허가해주고, 아니라면 불허하는 방식으로 작동하죠.[그림 1] 워크스루를 통해 출입증 없이 얼굴로 출입 가능한 모습 (마스크, 안경, 모자를 써도 올바르게 인식)더욱 놀라운 점은 본인의 얼굴을 사옥에 직접 방문해 등록하는 것이 아니라, 종합 업무 플랫폼인 카카오워크에서 간단하게 등록할 수 있다는 것입니다. 카카오워크 앱의 워크스루 서비스에서 얼굴 정보 등록을 누르고 앨범에서 사진을 선택하거나 촬영하면 등록이 완료됩니다! 여기에 모자나 안경을 착용한 대체 외모까지 등록하면, 얼굴 인식 정확도가 더 높아진다고 해요. 물론 언제든 얼굴 정보 재설정도 가능합니다. 카카오워크를 통해 오프라인 공간을 더 쉽고 편리하게 이용할 수 있게 되면서, 효율적인 워크라이프를 이뤄냈답니다. ?[그림 2] 카카오워크 앱 내에서 워크스루를 등록한 모습카카오 i 시각엔진워크스루의 작동방식을 설명하기 위해선 카카오 i 시각엔진을 설명하지 않을 수 없네요. 카카오 i 시각엔진은 다양한 자동화를 위해 개발되어, 다방면으로 딥러닝을 활용할 수 있도록 만들었습니다.워크스루는 시각엔진의 얼굴