말듣꾸 - 방언 분류 서비스

본 포스트는 프로젝트에 관한 간략한 설명, 관련 포스트 링크 내용등이 작성되어 있습니다.

상세 설명 및 코드, 서비스 화면 등을 확인하기 위해 중간에 작성된 Github 링크를 이용부탁드립니다.

 

🎁 말듣꾸

💡 프로젝트 소개

교통과 기술의 발전으로 과거와 다르게 지역간 교류가 활발하게 이루어지고 있습니다.

특정 지역의 방언을 구사하는 드라마와 영화가 많이 나오고 있고, 주변에 특정 지역 사투리를 구사하는 지인들이 많이 있습니다.

이러한 환경으로 내가 자란 환경과 다른 지역의 방언을 구사하는 경우도 있습니다.

 

사용자가 주어진 텍스트를 녹음하여 제출하면 여러 지역 방언을 학습한 인공지능 모델이 사용자의 억양과 유사한 지역 방언을 비율로 알려주게 됩니다.

테스트 결과에 따라 지역을 모티브로 제작한 캐릭터를 이용하여 나만의 이미지를 꾸미고 지인들과 공유하는 서비스입니다.

 

📆 프로젝트 기간

2022-02-28 ~ 2022-04-08 (6주)

 

💻 프로젝트 상세 내용 (Github)

통합 README

프로젝트 소개 및 핵심 기능, 서비스 아키텍처, 전체 기술 스택, 디자인 컨셉, 팀원 소개, 전체 코드

https://github.com/ssafy6-koko/maldeudggu

 

Frontend README

Wireframe, 페이지별 상세 설명

https://github.com/ssafy6-koko/maldeudggu/tree/master/frontend

 

💭 커뮤니케이션

 

• 애자일 방법론을 적용하였으며, 스프린트 생성 및 이슈 관리는 Jira를 이용하였습니다.
• 기타 스크럼 미팅, 회의, 일정 공유는 Notion을 이용하였습니다.
• 실시간 보이스 채팅, 버그 공유, 코드 리뷰는 Discord를 이용하였습니다.

 

🙋‍♂️ 역할

프론트엔드

• 프로젝트 구조 정의, 레이아웃 구성
• SSR, SSG
• 공통 컴포넌트, 모듈 제작 (비동기 통신 모듈, 시간 지연 모듈)
• 모바일 기기 및 브라우저 대응 (반응형 웹, 오디오 녹음 파일 타입 지정)
• 카카오 메시지 API
• Firebase Storage API
• 코드 리팩토링

 

AI 

• 음성 데이터 전처리
• 모델 선정 및 구현, 학습

 

📚 기술 스택

 

📌 기술 선정 이유

Next.js

테스트 서비스의 특징상 많은 사용자들의 참여 유도가 필수적인 서비스인 만큼 SEO 의 필요성이 대두되었습니다.

또한, 많은 사용자들에게 거의 동일한 페이지가 제공 될것으로 예상하였습니다.

이러한 이유로 React 기반으로 SSR 과 SSG 가 가능한 Next.js 를 사용하게 되었습니다.

 

PyTorch

AI 허브에서 제공 받은 지역별 방언 음성 데이터를 학습 데이터로 이용하여 방언을 구분하는 인공지능을 만들기 위하여 PyTorch를 이용하였습니다.

 

✨ 프로젝트 성과 및 어려웠던 점

• SSAFY 특화 프로젝트 3등 시상
  
  
• CSR, SSR, SSG 비교 및 장단점
  CSR, SSR, SSG 에 대하여 비교 및 장단점에 대해 이해하고 학습하였습니다.
  이번 프로젝트에서는 SSG 가능한 페이지에 대해서 정적 페이지로 구성하려고 노력하였으며, SSR과 SSG 를 많이 비교하며 학습하게 되었습니다.
  
  
• 모바일 기기 및 브라우저별 대응
  사용자들이 이용하는 기기와 브라우저에 따라서 설정을 변경해주는것에 중요성을 학습하였습니다.
  기능을 구현하고 여러 기기와 브라우저로 직접 접속을 하여 오류를 확인하고 해결하는 방식을 학습하였습니다
  
  
• 공통 부분 모듈화
  동일한 로직과 변수에 대해 모듈로 제작하여 사용하는것이 팀원과의 의사소통과 개발 진행 속도 등에 많은 영향을 끼친다는것을 알게 되었습니다.
  또한, 주석으로 어떠한 기능을 하는 모듈인지 작성하여 팀원들이 쉽게 이해할 수 있었습니다.
  
  
• UI/UX
  유사한 타 서비스와 UI 요소를 비슷하게 구성하여 사용자가 처음 서비스를 이용할때, 어려움이 없도록 설계하였습니다. 또한, 간단한 텍스트가 아닌 상대적으로 대용량인 음성 파일을 전송하는 경우에 페이지 이동시 약간의 지연이 발생하였고, 이로 인해서 화면이 멈춰 보이는 경험을 제공하는 문제가 발생하였습니다.
  이를 해결하기 위해 로딩 화면을 추가하여 사용자에게 서비스가 정상 작동 중임을 인지시켰습니다.
  이러한 방식으로 서비스를 이용하는 실사용자를 생각하며 UI/UX 를 고려하는 방식을 학습하였습니다.
  
  
• Firebase Storage 및 Kakao Message API 이용
  자체 서버에 수많은 음성 파일이 저장되어 서버의 저장공간과 이미지 저장에 부담이 높았습니다.
  서버의 부하를 줄이기 위하여 클라이언트에서 생성된 이미지를 Firebase Storage 에서 관리하였고, 이미지의 주소만 서버 데이터베이스에서 관리하는 방식을 학습하였습니다.
  
  국내의 많은 사용자들이 카카오톡을 이용하여 지인들과 의사소통이 이루어지기 때문에, Kakao Message API 를 이용하여 결과화면을 카카오톡으로 공유할 수 있도록 서비스를 제공하는 방식을 학습하였습니다.
  
  
• 음성 데이터 전처리 및 인공지능 모델 구현
  인공지능이 음성 데이터를 인식하고, 구분 및 학습하기 위해서는 데이터 전처리 과정이 필요하였습니다.
  Python 의 Pytorch 를 이용하여 음성 데이터 전처리 과정을 학습하였고, 다수의 모델 중 적절한 모델을 선정하여 학습시키는 방법에 대해 학습하였습니다.

 

📘 관련 포스팅

관련 포스팅 전체 모아보기

 

1. 기본 개념과 프로젝트에 사용한 이유
2. 페이지 나누기 (라우팅)
3. SSR, SSG, ISR 구성하기
4. 음성 녹음 크로스브라우징