눈으로 보며 듣는 음성 기록, 클로바노트 서비스의 웹 기술 톺아보기
DEVIEW 2023 네이버 · YouTube
AI 핵심 요약
클로바노트 웹팀은 음성 기록 서비스를 오프라인과 다양한 기기에서도 편리하게 쓰도록 Next.js 기반 PWA를 준비하며, Workbox·IndexedDB를 활용하고 서비스 워커 업데이트와 데이터 충돌 문제를 다뤘다. 마우스와 터치 입력에 맞춰 선택·메뉴·드래그 UX를 달리하고, Zoom REST API와 웹훅을 이용한 자동 녹음 연동에 이어 RTMP 라이브 스트리밍으로 실시간 처리 기반도 마련했다. 개발 구조에는 Yarn 워크스페이스 모노레포와 팀에 맞게 조정한 Atomic Design, Recoil 훅을 적용했으며, 감성 스크럼과 코드 리뷰로 협업과 코드 유지보수를 뒷받침했다. 기술 선택은 정답을 그대로 적용하기보다 서비스의 요구와 팀의 작업 방식에 맞춰 조정하고, 예외 상황과 운영까지 함께 설계해야 한다는 경험을 공유했다.
- PWA는 서비스 워커와 Workbox 설정만으로 오프라인 기능이 완성되지 않으므로, 쓰기 작업의 동기화와 충돌 처리 방식을 별도로 설계해야 한다.
- 서비스 워커의 업데이트가 브라우저마다 늦어질 수 있어, 매니페스트 버전 확인과 강제 새로고침 등 업데이트 경로를 마련했다.
- 마우스·터치·펜 등 입력 방식에 따라 호버, 메뉴 호출, 드래그 동작을 다르게 설계하면 반응형 UI를 넘어 사용성까지 개선할 수 있다.
- Zoom 연동처럼 웹 기능이 백엔드 작업으로 확장될 때는 REST API와 웹훅을 조합하고, 이벤트 누락이나 순서 변경에 대비해 상태를 재확인해야 한다.
- 모노레포와 컴포넌트·상태 관리 규칙은 도구의 기본 구조를 그대로 따르기보다 팀의 협업 방식과 유지보수에 맞춰 조정하는 것이 중요하다.
소개
[DEVIEW 2023] * 발표자 : 임대현,이은성(NAVER Cloud) * 발표제목 : 눈으로 보며 듣는 음성 기록, 클로바노트 서비스의 웹 기술 톺아보기 * DEVIEW 2023 바로가기: https://deview.kr/2023 #DEVIEW #DEVIEW2023 #데뷰 #데뷰2023
비슷한 학습 자료
컨퍼런스 DEVIEW 2023
UI 빌더를 지탱하는 레고 블록 같은 아키텍처 만들기
컨퍼런스 DEVIEW 2023
SSR환경에서의 Micro-Frontend 구현과 퍼포먼스 향상을 위한 캐시전략
컨퍼런스 DEVIEW 2023
클로바노트의 두뇌: NAVER의 End-to-End 음성인식 엔진 소개
컨퍼런스 DEVIEW 2023
LiveOps : 네이버앱의 실시간 운영과 크래시 핸들링 솔루션
컨퍼런스 DEVIEW 2023
Remember Me: 맞춤 케어를 위한 기억하기 챗봇
컨퍼런스 DEVIEW 2023