눈물 젖은 샘플 웹사이트 제작기가 시작된다..!
목차
•
용어집
•
왜 이 프로젝트가 시작되었는가?
•
개발 환경 선택하기
•
웹사이트 구성
•
웹데모 인터페이스
•
실제로 사용해봤더니?
•
앞으로의 개선 방향
용어집
Cochl.Sense: 현재 Cochl사의 대표적인 product로 환경음(sound event)을 인식하는 기능을 제공한다. Use case에 따른 4가지 카테고리 (Emergency Detection, Home Context, Human Interaction, Human Status)를 포함한다.
Cochl.Music: 현재 준비중인 product로 음악에 담겨 있는 정보를 분석해주는 기술을 제공한다. 대표적으로 장르/무드 분석 기술이 포함된다.
환경음 (sound event): 주변 환경에서 들리는 소리를 의미한다. 엄밀하게는 음성(Speech)과 음악(Music)도 여기에 포함될 수 있으나, 본 글에서는 사이렌 소리나 개 짖는 소리와 같은 소리를 의미하는 단어로 사용되었다.
0. 왜 이 프로젝트가 시작되었는가?
나는 Cochl의 research scientist로서, 주로 인공지능 모델의 학습과 데이터베이스 구축, 인공지능 모델 평가 등의 업무를 담당한다. 하지만 나의 주요 관심사는 기술 자체를 음미하고 최적화하는 데에 있지 않다. 나는 기술이 시장성을 가질 때에야 비로소 완성이 된다고 생각하는 편이다. 또한 시장에서의 매력도는 공동창업자로서 관심을 가져야 할 나의 의무이기도 하다.
비즈니스 미팅을 가지는 나
우리 회사 Cochl은 "Creating ears for AI"라는 모토를 가지고, 청각 인공지능 관련 전반적인 기술을 개발한다. 그러나 지금까지 가졌던 미팅들로 미루어보건대, 외부 사람들에게 이러한 설명은 쉽게 이해되지 않음이 분명하다. 한 가지 원인은 보편화된 음성인식(speech recognition) 기술이다. 대중들에게 "인공지능+소리=음성인식"이라는 공식이 오랫동안 주입되어 왔기 때문에, 음성인식을 제외한 청각 인공지능 기술이란 어려운 개념이었을 수 있다.
그러나 더 근본적인 원인은 "음성인식 외의 청각 인공지능"이 한 마디로 설명이 안 되는 방대한 분야라는 것이다. 현재 Cochl의 주력 아이템인 Cochl.Sense에서는 Siren, Snore, Toilet flush 등 24가지의 환경음을 인식 기능을 제공한다. 당연히도 세상에 존재하는 환경음은 훨씬 더 많다. 환경음 외에도, 음악에서 장르(genre)나 템포(tempo) 같은 정보를 분석하는 것도 청각 인공지능에 속한다. 그리고 음성에서 음성인식 기술이 놓치는 성별(gender) 정보나 질병 유무를 알아내는 기술도 역시 청각 인공지능에 속한다.
Cochl은 이 모든 기능을 종합적으로 제공하는 궁극의 청각 인공지능 기술을 구현하는 것을 목표로 한다. 하지만 이를 30초짜리 elevator pitch에서 완벽하게 이해시키기는 굉장히 어렵다. 그래서 친구들이 Cochl의 사업 분야에 대해 물어볼 때마다 나는 이렇게 대답하곤 했다, "사이렌 소리, 개 짖는 소리 같이 다양한 소리를 인식하는 인공지능을 만드는 회사야."
청각 인공지능 요소 기술들과 Cochl.Sense
하지만 우리 회사는 개 짖는 소리 검출기만 만드는 회사는 아니다. 나는 오랫동안 우리 기술을 쉽게 이해시킬 수 있는 방법을 고민해왔다. 그 고민의 결과, 백 마디 설명보다 데모를 보여주는 것이 가장 효과적이라는 결론에 이른다. 처음에 시도한 방법은 안드로이드 데모를 만드는 것이었다. 나는 대학교 때 C를 배운 이후로 대학원 내내 (언어가 아닌 Matlab script를 제외하면) python 외길 인생을 걸었기에 java를 처음부터 배워야만 했다.
Cochl.Sense 안드로이드 데모 앱
그러나 고생해서 만든 안드로이드 데모앱은 apk 파일을 전달하고 설치하는 과정이 번거로웠다. 그리고 자칫 잘못했다간 SDK에 포함된 tensorflow 모델이 유출될 가능성도 있기에 조심스러웠다. 모든 클라이언트가 안드로이드 디바이스를 보유하고 있다고 가정할 수도 없었다. 보유하고 있다고 하더라도, 보안 이슈 때문에 외부 앱을 설치하는 것이 꺼려질 수도 있다. 아무것도 설치하지 않아도 되는 웹 기반 데모를 가질 수 있다면 위에 나열한 안드로이드 데모의 단점들이 극복될 수 있지 않을까? 이것이 sample 사이트 제작의 시작이다.
Sample 사이트가 우리 기술에 대한 이해를 돕는 사이트라면, Cochl.Sense가 지원하는 환경음들을 보여줄 수 있는 페이지도 함께 구성하면 좋을 것이란 생각이 들었다. 예를 들어, Cochl.Sense Home Context 서비스가 지원하는 "Dining clink"라는 클래스는 이름만 보고 어떤 소리인지 이해하기 힘들 수 있다. 영어에 익숙하지 않은 한국인이라면 더더욱 그러할 것이다. "접시나 포크 또는 숟가락 등이 부딪혀서 달그락거리는 소리" 처럼 설명으로 알려줄 수도 있지만 더 직접적이고 빠르게 이해할 수 있는 방안은 소리를 들어보는 것이다! 여기까지 생각이 들자 우리 클래스를 가장 잘 설명할 수 있는 소리를 5개씩 모으는 작업을 시작했다.
본 사이트를 구상할 때에 중점을 둔 것은 다음과 같다.
•
빠른 구현 속도: 디자인, 웹 프론트엔드 개발, 확장성을 고려한 백엔드 설계 등이 포함되는 공식 프로젝트 진행보다 훨씬 빨리 구현되어야 함.
•
프론트엔드 인터페이스와 python 백엔드와의 온전한 연계.
•
웹 브라우저 호환성 문제 요소 최소화. 불가피한 경우 Chrome에 최적화.
•
심플한 화면 구성 및 높은 사용성: 처음 사이트를 접하는 사람들도 쉽게 사용할 수 있도록 함.
•
공식 출시한 제품들(Cochl.Sense)을 비롯해서, 기술이 있지만 아직 제품화하지 못한 서비스들(Cochl.Music 등)을 가능한 한 모두 포함하도록 함.
1. 개발 환경 고르기
Sample 사이트 구현은 백엔드부터 프론트엔드까지 혼자서 해야하는 작업이었으므로 나의 역량과 align되는 언어를 고르는 것이 가장 중요했다. 또한 tensorflow 모델을 활용해야 하는 상황인 만큼 백엔드는 python을 이용하는 것이 가장 편리하다고 생각했다. 프론트엔드 개발은 백엔드보다도 익숙하지 않은 관계로 간단한 html로만 만들려고 노력했고 필요에 따라 javascript 소스를 참고했다. 그리고 백엔드인 python과는 flask로 연계하였다. Flask는 백엔드와의 스무스한 연결이 가능했으나, 개발 과정 중에 파일 경로 설정 등에서 잦은 버그를 만들어냈다.
웹사이트 백엔드는 Google cloud의 VM instance에 전부 구현되었다. 리서치 팀에서 제공한 소리 인식용 tensorflow 모델들도 VM instance 내부에서 직접 돌리기로 했다. 사실 이미 우리 회사가 가지고 있는 API에 call을 날리면 간단한 일이었지만 조금 더 raw information을 이용해서 post-processing 된 결과를 보여주고 싶었다. 비즈니스 사이드에서 컨택하던 소규모 client 대상으로 sample 사이트를 뿌릴 예정이라 scalability나 load balancing 이슈는 심각하게 고려하지 않았다.
Flask가 default로 사용하는 port는 5000번인데, port번호 붙은 주소는 외부에 공개하기 적합하지 않다. 그 뿐만 아니라 http 접속으로는 Chrome에서 마이크 사용 권한도 받을 수 없다. 따라서 이 문제를 우회할 수 있는 방법이 필요했다. 백엔드 엔지니어 Benjamin의 도움을 받아 SSL certificate를 발급받아서 nginx 트래픽을 flask로 proxy pass하는 방식을 구축할 수 있었다.
한 가지 주의할 점은 nginx에서 업로드 용량을 제한해 놓았다는 것이다. 처음에는 일정시간 이상 녹음하면 웹데모에 오류가 생기는 문제를 flask 때문이라고 생각했다. 그러나 이는 nginx에서 client_max_body_size를 너무 작게 잡아 생기는 문제로, 녹음을 길게 하다보면 녹음 파일 사이즈가 커지기 때문에 오류가 발생하는 것이었다. 이 글을 보는 독자들도 개발시에 참고하기를 바란다.
2. 웹사이트 구성
Sample 사이트 랜딩페이지
Site structure는 가장 심플하게 랜딩페이지에서 모든 웹데모 페이지, 그리고 sound sample들에 연결되도록 구성하였다. Sound sample을 모아놓은 페이지는 현재 Cochl.Sense에서 서비스하고 있는 4가지 서비스에 대해 만들어졌다. 그리고 웹데모는 Cochl.Sense의 sound event detection 뿐만 아니라 Cochl이 가지고 있는 다양한 기술력을 보여줄 수 있도록 하였다.
Emergency detection sound sample 페이지
현재 웹데모로 구현된 Cochl의 기술들은 크게 Cochl.Sense와 Cochl.Music으로 categorize 될 수 있다.
다음은 Cochl.Sense 카테고리 기술에 대한 설명이다.
•
Sound event detection: 환경음을 인식하는 기술이다. 현재는 Cochl.Sense의 4가지 서비스에 포함되는 24가지 환경음을 인식한다. 본 데모에서는 1초 단위의 인식 결과를 제공한다.
•
Voice activity detection: 음성(Speech)이 나오는 구간을 인식하는 기술이다. Sound event detection처럼 1초 단위의 인식 결과를 제공한다. 이 기술을 이용하면 수 백 시간의 길이를 갖는 오디오 파일에서도 빠르게 음성 부분만을 골라낼 수 있다. 따라서 음성을 분석하는 기술들(예를 들어, 음성 인식(speech recognition))의 전처리 기술로 사용될 수 있다.
•
Music activity detection: 음악이 나오는 구간을 인식하는 기술이다. Sound event detection처럼 1초 단위의 인식 결과를 제공한다. 음악의 정보를 분석하는 기술들(예를 들어, 장르/무드 분석)의 전처리 기술로 사용될 수 있다.
다음은 Cochl.Music 카테고리에 속하는 기술들에 대한 설명이다.
•
Music tempo estimation: 음악에서 박자를 추정하는 기술이다. 보통 박자는 bpm(beats per minute) 단위로 표현된다. 예를 들어, BTS의 Butter는 110bpm으로 알려져 있는데 이는 1분에 110개의 박자가 등장하는 빠르기라는 뜻이다.
•
Music genre/mood estimation: 음악에서 장르와 분위기를 추정하는 기술이다. '장르'는 pop, rock, jazz ... 중에 어떤 카테고리에 속하는지를 나타낸다. '분위기'는 유쾌한 정도(pleasantness)와 흥분의 정도(excitingness)를 나타내는 값이다.
•
Content-based music recommendation: 음악의 장르나 분위기를 분석한 후에, 비슷한 장르나 분위기를 가지는 음악을 추천해주는 기술이다. 본 사이트에서는 사용자가 음악 파일을 업로드하면 license-free 음악들 중에 가장 비슷한 음악을 추천해주는 데모를 제작하였다.
Sound event detection, Voice activity detection, Music activity detection은 임의의 소리의 종류를 인식하는 기술이기 때문에 Cochl.Sense 카테고리에 속한다고 할 수 있다. Cochl.Music은 음악 신호의 in-depth information을 추출하는 기술이기 때문에 Music tempo estimation, Music genre/mood estimation, Content-based music recommendation이 여기에 속한다. 향후에도 우리의 보유 기술을 웹데모로 만드는 작업은 계속 진행될 예정이다.
3. 웹데모 인터페이스
오디오를 이용하는 우리 회사의 특성상 데모는 real-time audio stream을 이용한다면 가장 이상적이겠으나, 개발 기간이 훨씬 오래 걸릴 것으로 예상되었다. 따라서 일단 오디오 파일을 업로드하는 방식의 데모를 먼저 만들어 보았다. 구글링해서 쉽게 찾아볼 수 있는 flask 파일 업로드 예제(링크)를 참고했다.
File uploading interface 기반의 웹데모
테스트 결과, 다행히 문제 없이 결과를 얻을 수 있었다. 그러나 특정 task에서는 저장된 오디오 파일을 선택해서 업로드하는 것이 불편할 수 있다. 예를 들어, Whistle 소리를 테스트하고 싶은 경우에 "녹음 -> 저장 -> 파일선택 -> 업로드"를 거치는 것보다 실시간 오디오를 녹음해서 테스트하는 것이 쉬울 것이라 판단했다. 녹음기를 탑재하기 위해서는 가장 간단한 수준의 javascript 코드를 사용할 필요가 있었다. Web audio API를 기반으로 하는 javascript 데모를 참고하여 다음과 같은 인터페이스를 만들었다.
Recording interface 기반의 웹데모
그러나 Recording interface를 사용하는 것이 언제나 편한 것은 아니다. 예를 들어, 음악 장르 분석의 경우는 기보유 음원 파일로 테스트하는 use case가 많을 수 있어서 오히려 recording interface가 불편할 수도 있다. 이처럼 각 task마다 편한 인터페이스 방식이 다르므로 file uploading interface로 할지, recording interface로 할지 분석하였다. 그 고민의 결과는 아래 표 1과 같다.
표 1. 웹데모 별 인터페이스 제공 현황
이 부분은 완벽하진 않지만, 향후 UX 디자이너와 프론트엔드 개발자의 도움이 있다면 충분히 개선 가능한 부분이다.
웹데모의 테스트 결과는 브라우저 상에서 그래프를 직접 그리는 것보다 백엔드에서 생성한 이미지 파일을 띄우는 방식으로 우회하였다. 결과에 대한 설명은 아무것도 쓰지 않았는데, 백 마디의 결과 설명보다 matplotlib 라이브러리로 plot한 그래프 보여주는 편이 더 이해를 쉽게 도울 수 있다고 판단했기 때문이다. 그래서 그래프 이미지의 완성도에 공을 들였다. 그래프에서는 사용자들이 어떤 소리에서 어떤 결과가 나왔는지를 쉽게 볼 수 있도록 input audio를 함께 보여주었으며, Chrome을 이용하는 경우 이미지와 시작점/끝점이 정확히 align 되도록 하였다.
웹 데모 결과 출력 예시
4. 실제로 사용해봤더니?
이 사이트를 공개하자 가장 좋아했던 쪽은 비즈니스 팀이었다. 우리가 어떤 기술을 가지고 있는지, 우리가 목표로 하는 소리는 어떤 소리인지 등을 명확히 보여줄 수 있어서 클라이언트를 상대하기 훨씬 쉬워졌다는 피드백을 받았다. 우리의 tensorflow 모델이 유출되지 않게 보호할 수 있어서, NDA(Non-disclosure agreement)를 체결할 필요도 없이 클라이언트에게 뿌릴 수 있었다. 그리고 안드로이드 스마트폰에 apk 파일을 설치하는 찜찜함도 없앨 수 있었다. 어떤 클라이언트는 Cough와 Sneeze 감지 기능을 테스트해본 뒤, 병원쪽 비즈니스를 위해 중요할 것 같다며 공식적으로 테스트 라이센스 발급을 요청하기도 했다. 회사 소개 자료에 있는 백마디 말보다 한 번의 웹데모가 더 강한 신뢰를 주었던 것이다.
Sample 사이트는 회사 내부의 직원들에게도 inspiration을 주었다. Cochl의 직원들도 리서치 팀이 아니면 우리가 정확히 어떤 기술력을 보유하고 있는지 모르는 경우가 많았다. 예를 들어, 개발팀 직원들은 Cochl.Sense를 서포트하기 위한 시스템을 만들기 때문에 Cochl.Sense는 잘 알고 있었다. 하지만 출시 준비중인 Cochl.Music에 어떤 기술이 포함되는지는 알지 못했다. 그런 직원들은 sample 사이트를 통해 우리 회사가 할 수 있는 것들을 이해하고, 우리가 앞으로 expand할 비즈니스 분야까지 이해할 수 있었다.
리서치 팀 내부에서도 기술 개발이 github에 올린 코드로 마무리되는 것보다, 눈으로 보이는 웹데모로 마무리되는 편이 성취감을 가져다 주었다. 그리고 sound sample들을 정리함으로써 리서치 팀 내에서도 몇몇 클래스들에 대해 다른 시각을 가지고 있었던 점이 드러났고 (예를 들어, Scream 클래스에 Shouting sound가 포함되어야 하는지 등) 토론을 통해 시각을 맞춰나갈 수 있었다. 테스트용 공식 샘플들을 정리함으로써 모델 업데이트 시에 evaluation이 용이해졌음은 물론이다.
5. 앞으로 개선하고 싶은 방향
위와 같은 장점들 때문에 sample 사이트와 같은 기능을 하는 섹션이 공식 홈페이지에도 생길 예정이다. 홈페이지는 현재 디자인 리뉴얼 작업중인데, Cochl.Lab 섹션을 만들어서 웹데모, sound sample, 그리고 향후 개발될 기술들에 대한 정리된 설명 자료를 탑재할 예정이다.
또한 웹사이트 리뉴얼 전까지 현재 sample 사이트도 계속 업데이트할 예정이다. 기술 개발이 됐지만 웹데모로 포장하기까지 시간이 걸려서 sample 사이트에 아직 추가되지 못한 4가지 기술들이 곧 선보일 예정이다.
빠른 프로토타이핑은 오랜시간 말로 설명하는 것보다 더 효과적으로 내가 생각하는 바를 보여줄 수 있다. 이 글을 읽는 독자들도 일단 데모를 사용해보길 권한다. 만약 우리 회사 기술에 흥미가 생겼다면/sample 사이트를 더 잘 만들 자신이 있다면/홈페이지 리뉴얼 작업에 참여하고 싶다면/다른 어떤 이유로든 우리와 함께 일하고 싶다면, careers@cochl.ai 로 연락을 주시길 바란다. 우린 언제나 채용에 목말라 있으니까.
원한다 우린 당신을!!