구글, 카메라·마이크 권한용 새 HTML 요소 '유저미디어' 공개...크롬 151부터 지원, 버튼 한 번으로 권한 요청과 복구를 처리해 상용구 코드 줄이고 시스코 시험선 거부 후 허용률 10%에서 65%로 개선

[한국정보기술신문] 웹사이트가 이용자의 카메라와 마이크를 쓰려면 매번 권한을 요청해야 하는데, 구글이 이 과정을 더 쉽고 안전하게 바꾸는 새로운 HTML 요소 '유저미디어(usermedia)'를 선보였다. 구글 크롬 개발자 블로그는 6월 29일 이 요소를 소개하는 글을 올렸으며, 해당 기능은 크롬(Chrome) 151 버전부터 쓸 수 있다. HTML 요소란 웹페이지를 구성하는 기본 단위로, 개발자가 태그 형태로 적어 넣으면 브라우저가 이를 화면의 버튼이나 입력창 같은 기능으로 바꿔 준다.

이 요소는 앞서 크롬 144에서 위치 정보를 다루기 위해 도입된 '지오로케이션(geolocation)' 요소에 이은 두 번째 '기능 요소'다. 기능 요소는 브라우저가 하드웨어 기능을 다루는 방식을, 권한을 켜고 끄는 단순한 관리에서 데이터를 실제로 주고받는 중개자 역할로 넓힌 것이다. 유저미디어 요소는 이용자의 의도를 파악하고, 브라우저의 권한 요청 창을 관리하며, 카메라·마이크에서 나오는 영상·음성 데이터 묶음인 '미디어 스트림(MediaStream)'을 웹 애플리케이션에 곧바로 전달한다. 이 덕분에 기존에 따로 있던 권한 요청 명령을 별도로 부를 필요가 없어진다.

지금까지 웹사이트는 '겟유저미디어(getUserMedia)'라는 자바스크립트 명령을 통해 카메라·마이크 사용 권한을 요청해 왔다. 문제는 이 명령이 실행되는 순간, 이용자가 예상하지 못한 시점에 권한 창이 뜨는 경우가 많았다는 점이다. 이용자가 실수로 접근을 차단하면, 이를 되돌리기 위해 브라우저 설정 깊숙이 들어가야 했고, 그 과정이 번거로워 결국 기능 사용을 포기하는 이른바 '권한 구멍(permission hole)'으로 이어지곤 했다.

유저미디어 요소는 이용자가 화면의 버튼을 실제로 눌렀을 때만 권한 창을 띄운다. 이용자가 직접 행동했다는 믿을 만한 신호가 있어야 창이 뜨기 때문에, 브라우저가 스크립트 자동 실행에 따른 요청을 조용히 차단하던 문제를 피할 수 있다. 한 번 거부했던 이용자도 요소를 다시 누르면 복잡한 설정을 거치지 않고 곧바로 카메라·마이크를 다시 켤 수 있는 전용 복구 절차가 실행된다. 또 미디어 스트림을 요소가 직접 제공해, 개발자가 콜백과 오류 상태를 관리하며 반복해서 작성해야 했던 코드도 줄어든다.

두 방식은 권한 창을 띄우는 계기와 브라우저의 역할에서 차이가 크다. 기존 겟유저미디어에서는 스크립트가 명령을 실행하는 순간 브라우저가 여러 정황을 따져 창을 띄울지 스스로 판단했고, 개발자는 이 명령을 직접 호출하며 성공·실패와 오류를 일일이 처리해야 했다. 반면 유저미디어 요소에서는 이용자의 버튼 클릭이 창을 띄우는 계기가 되고, 브라우저는 동의를 받아 스트림을 넘겨주는 중개자 역할에 집중한다. 개발자는 데이터가 준비됐다는 신호를 받아 스트림 속성만 가져다 쓰면 된다.

구글은 이 요소를 실제 서비스에 미리 적용해 본 '오리진 트라이얼(초기 시험 프로그램)' 참여 기업들의 데이터를 공개했다. 화상회의 기업 시스코(Cisco)는 처음 권한을 거부했던 이용자가 기존 방식으로 다시 권한을 허용할 가능성이 10%에 그쳤지만, 새 요소를 쓰면 이 비율이 65% 이상으로 높아졌다고 밝혔다. 화상회의 서비스 줌(Zoom)은 시스템 수준의 차단 등으로 발생하던 카메라·마이크 오류가 46.9% 줄었다고 보고했다. 구글 미트(Google Meet)에서는 '마이크가 작동하지 않는다'는 이용자 의견이 17% 감소했고, 처음 접근을 거부한 이용자의 권한 복구 성공률은 131% 늘었다. 구글은 이 수치들이 이용자가 직접 조작하는 시점에, 지금 왜 권한이 필요한지를 알 수 있는 맥락 안에서 권한을 요청하도록 한 것이 실제 성공률을 크게 끌어올린 근거라고 설명했다.

개발자는 HTML에 유저미디어 태그를 넣고, '셋컨스트레인츠(setConstraints)'라는 기능으로 원하는 화질이나 음성 처리 같은 하드웨어 조건을 이용자 조작 전에 미리 지정할 수 있다. 이용자가 권한을 허용하면 요소의 '스트림(stream)' 속성으로 영상·음성 데이터를 받아 쓸 수 있고, 요청이 실패하거나 이용자가 창을 닫으면 각각 '에러(error)'와 '캔슬(cancel)'이라는 신호로 나뉘어 처리된다. 구글은 이 방식이 기존 자바스크립트 방식보다 훨씬 적은 코드로 같은 일을 할 수 있다고 설명했다.

다만 이 요소에는 다른 기능 요소와 마찬가지로 엄격한 디자인 제한이 걸린다. 이용자를 속이는 이른바 '기만적 디자인'을 막기 위해서다. 브라우저는 글자와 배경의 색 대비를 일정 수준(3대 1) 이상으로 유지하도록 하고, 요소를 투명하게 만들어 숨기지 못하도록 불투명도를 최대로 강제한다. 크기와 여백, 글자 크기에도 최소·최대 한계를 두고, 요소를 화면 밖으로 밀어내거나 왜곡하는 효과도 제한한다. 아울러 권한이 허용돼 스트림을 받아 오면 자동으로 적용되는 상태별 스타일 지정도 지원한다.

유저미디어 요소는 이 기능을 지원하지 않는 옛 브라우저에서는 그 안에 넣어 둔 일반 버튼이 대신 나타나도록 설계돼, 모든 이용자에게 대체 화면을 제공한다. 개발자는 브라우저가 이 요소를 지원하는지 코드로 확인한 뒤, 지원하지 않으면 기존 겟유저미디어 방식으로 넘어가도록 짤 수 있다. 초기 시험 단계에서 실험적인 일반 권한 요소를 이미 쓰던 개발자도 태그와 확인 코드를 바꾸는 정도로 옮겨 갈 수 있도록 했다.

구글은 앞으로 영상만 다루는 '카메라(camera)' 요소와 음성만 다루는 '마이크(microphone)' 요소도 내놓을 계획이라고 밝혔다. 지금의 유저미디어 요소가 영상과 음성을 함께 요청하는 것이라면, 앞으로는 상황에 맞게 필요한 기능만 골라 쓸 수 있게 하겠다는 것이다. 구글은 이런 기능별 요소들이 개발자가 더 직관적이고 신뢰할 수 있는 미디어 환경을 만드는 데 도움이 될 것으로 기대한다고 밝혔다.