강아지 음성 데이터 수집을 위한 '반려동물 음성인식기' 웹사이트 개발 도전기

소개

지난주에 반려동물의 행동 이상을 감지하는 AI를 만들고 싶었지만, 강아지 데이터 처리 과정에서 막혔었습니다..... 그러던 중 스터디장님께서 내주셨던 보호자들이 재미로 참여할 수 있는 웹사이트를 먼저 만들어서 음성 데이터를 모아보자!!는 아이디어가 정말 흥미로웠어서 시도해보게 되었습니다.

코딩을 잘 몰라서 웹 개발이 어려울 거라 생각했는데, 지난주에 Cursor와 같은 자동 앱 개발 도구들을 소개 받아서 직접 만들어보게 되었습니다.

진행 방법

자동 개발 도구 Cursor 활용

커서의 ai채팅 기능을 통해 대화를 하며 웹사이트를 만들어나갔습니다.

커서 사용이 완전 처음인지라ㅎㅎ 텍스트만으로도 웹사이트 코드를 짜주는게 정말 맞는지 물어봤더니 맞다고 해서 살짝 충격...

검은 색 화면의 한국어 텍스트

첫 대화이기에 왜 이 웹사이트를 개발하려고 하는지 소개만 해줬는데도 커서가 먼저 필요한 기능들을 나열해주었습니다.

한국어 텍스트가있는 검은 색 화면

그리고 짜준 녹음시작 버튼이 있는 웹사이트의 가장 첫 화면 코드

어두운 방에서 코드 편집기의 스크린 샷
한자가있는 CSS 파일의 스크린 샷
한국어 텍스트가있는 컴퓨터 화면의 스크린 샷

이 코드 그대로 적용해서 사이트를 확인해보니 조금 밋밋하길래 강아지 사진을 넣어달라고 요청해보았습니다.

한국 웹 사이트의 스크린 샷

그러나 사진이 안보이길래 재요청

재요청해서 다시 수정을 했는데도 사진은 업로드되지 않았고...결국 강아지 사진 추가는 포기했습니다.

(아무래도 강아지 사진을 직접 골라서 지정해주면 잘 넣어주는데 커서보고 알아서 찾아서 넣어달라고 하니 오류가 난 듯 합니다.)

다음으로 녹음 기능 추가를 요청하니 바로 정확히 넣어주었습니다.

음성의 파형까지 보이게 설정되었습니다.

한국어 텍스트가있는 검은 색 화면

녹음이 잘 되는 것을 확인하고 '결과 확인하러 가기' 버튼을 넣어달라고 하였는데요,

한국 웹 사이트의 스크린 샷
한국어 텍스트가있는 검은 색 화면

확인해보니 이 '결과 확인하러 가기' 버튼이 녹음이 끝난 이후에 등장하는 것이 아닌 웹사이트 첫 시작부터( 녹음을 하기 전부터) 계속 떠있길래 이 부분의 수정까지 요청하였습니다.

한국 웹 사이트의 스크린 샷
검은 색 배경으로 HTML 코드의 스크린 샷

이제 마지막으로 결과 확인 페이지!!

한국 코딩 언�어의 스크린 샷

결과 확인 페이지를 만들어달라고 했더니 제가 입력하지도 않았는데 커서가 먼저 이런식으로 결과의 예시를 적어주었습니다

결과도 음성의 높낮이에 따라서 조금 수정해주면 좋을 것 같은데 우선은 여기까지로 마무리.....!

++++++스터디 이후 추가 수정!))))))

음성 인식 기능을 통해 높거나 밝은 음이면 긍정적 감정 상태의 결과, 공격적인 음이면 부정적 감정 상태의 결과를 제시하도록 수정을 하고 싶었지만, 역시나ㅜㅠ 그러려면 추가 음성 분석 AI를 연결해야 했고

심지어 기존의 AI 음성 분석 서비스들도 반려동물 특화의 음성 인식 서비스는 아니라서 직접 AI 모델 개발을 추천한다는 답변을 받았습니다.

이 반려동물 음성분석기 웹사이트에서 음성 데이터가 많이 수집된다면, 그 데이터들을 통해 동물 특화 음성 분석 AI를 학습시킬 수 있을 것 같습니다.

아쉬운대로 사용자가 녹음된 음성을 다시 들어볼 수 있는 기능이라도 넣자! 싶어서 추가한 '소리 들어보기' 버튼

그리고 결과 답변도 다양화 하였습니다.

>>>총 8개의 답변!

어떤 특징의 소리가 들렸는지, 그에 따른 반려동물의 감정은 어떤지, 감정 점수, 추천하는 추가적 조치나 행동. 이렇게 4가지의 카테고리로 최대한 자세하게 작성하여 답변을 구성했습니다. (전문적 결과를 주는게 아니다보니 읽는 재미라도 있었으면 해서....)

이제 마지막으로 웹사이트 사용자들에게 음성 데이터 사용에 대한 동의를 구하는 칸을 만들어야합니다. 이 칸을 어디에 넣을지가 고민이 되길래 커서에게 물어봤더니 녹음 전에 진행하는 것이 좋을 것 같다고 해서 녹음 시작전에 동의 체크 칸과 간단한 반려동물에 대한 설문조사를 넣었습니다.

한국어 텍스트가있는 페이지

그리고 진짜 최종으로 데이터 수집에 동의해줘서 고맙다는 멘트까지!! 넣어줬습니다.

결과와 배운 점

1. Cursor의 장점

웹사이트를 개발하기 위해 Cursor라는 자동 앱 개발 도구를 처음 사용해 봤는데요, 코딩을 잘 모르는 상태에서 개발을 시도해보고 싶을 때 너무 유용하고 매력적인 도구라는 생각이 들었습니다.

  • AI 대화 기능을 활용해 코드 자동 생성 → 원하는 기능을 입력하면 바로 코드로 변환

  • 사용자 요청을 기반으로 즉시 수정 가능 → 채팅하듯이 수정 요청 가능

  • 초기 프롬프트만으로 웹사이트 구조를 설계 → 개발 지식이 없어도 빠르게 구현 가능

2. 향후 계획

2.1 결과 페이지 개선

현재 웹사이트는 실제 음성 분석 기능 없이 랜덤으로 결과를 제공하는 형태로 작동합니다. 사용자가 반려동물의 소리를 녹음하는 체험을 하고, 무작위 분석 결과를 받는 방식입니다.

  • 감정 상태 분석: 랜덤으로 결과 제공

  • 소리 유형 판별: 기본적인 짖는 소리, 으르렁거리는 소리 등으로 구분

  • 신뢰도 표시: 무작위 신뢰도 수치 제공

물론 사이트 자체가 보호자가 진지하게 분석하는 것이 아니라 가볍게 즐길 수 있도록 설계되긴 했지만, 그래도 약간의 몰입을 위해 결과 페이지를 개선하는 것이 목표입니다.

음성 톤에 따른 차별화된 결과 제공

  • 밝고 높은 톤 → 긍정적 감정 상태로 해석

  • 날카롭거나 거친 톤 → 부정적 감정 상태로 해석

2.2 데이터 수집 기능 추가

웹사이트 하단에 "이 녹음 데이터가 연구개발에 활용될 수 있습니다."라는 문구를 추가하여 사용자 동의를 받을 계획입니다.

2.3 AI 모델 연계 연구

장기적으로는 수집된 데이터를 활용해 실제 반려동물 행동분석 AI를 개발하는 방향으로 발전시킬 예정입니다.

2.4 동물 음성 분석 AI 학습

동물의 음성을 분석하는 동물 특화 AI는 아직 많이 활성화되지 않은 것 같아 이쪽도 향후 연구해보면 좋을 것 같습니다.

도움 받은 글 (옵션)

데이터 처리과정에 어려움을 겪을 때 이런 웹사이트에 대한 의견을 제시해준 스터디장님과 모든 신약개발 스터디원분들의 의견이 합쳐져서 만들어졌습니다

무한한 감사를ㅜㅠ

1

👉 이 게시글도 읽어보세요