3차 프로젝트 기획부터 개발까지

1. 프로젝트 소개

• 한글을 배우기로 희망하는 외국인들을 위한 K-guel 한글배움 프로젝트 중 "Study with contents" 프로젝트 기획 및 개발

2. 개발기간 및 인원

• 개발기간 : 2022년 11월 14일(월) ~ 2022년 12월 08일(목)
• 개발 인원 : 4명(FE 1명, BE 3명)

3. 사용된 기술 스택

• FE : Javascript, React
• BE : Javascript, Node Js, Express, Mysql, Redis, AWS
• 협업 도구 : GIT, GITHUB, TRELLO, FIGMA, POSTMAN

4. 프로젝트 시연 영상

5. 기능 구현 페이지

 

1) 메인페이지

• "Study with contents" 클릭 시 메인 페이지로 이동하며 메인 페이지는 '영상으로 학습하기'와 '대화로 학습하기' 총 2개의 섹션으로 나누어져 있다. 영상으로 학습하기는 해당 영상 클립의 이미지와 제목이 주어져 사용자로 하여금 해당 학습이 어떤 내용일지 유추할 수 있게 해준다. '영상으로 학습하기' 클릭 시 해당 3개의 파트 중 첫 번째인 'keyword 페이지'로 이동한다.

2) Keyword 페이지

• 한글 자막과 영어 자막이 함께 제공된다. 영상 재생 시 대사 타이밍에 맞춰서 한글 자막에 빨간색으로 단어들이 하이라이팅 되어 해당 대사가 어떤 단어에 해당하는지 알 수 있게 해준다. 또한, Keywords 클릭 시 한글과 영어 키워드들이 나와서 해당 문장을 단어 단위로 쪼개서 학습할 수 있도록 구성하였다. 단어 학습이 완료되면 다음 페이지로 넘어가는 버튼이 활성화되어 두 번째 페이지인 'puzzle 페이지'로 이동한다.

3) puzzle 페이지

• 앞선 keyword 페이지에서 학습한 문장을 빈칸 처리하여 퍼즐 형식으로 어순에 맞게 문제를 풀 수 있도록 구성하였다. 이때 퍼즐은 랜덤으로 배치하였으며 사용자가 올바른 어순으로 정답을 도출 시 정답이라는 알림 창과 함께 다음 페이지(record 페이지)로 넘어갈 수 있는 버튼이 활성화되었다. 그러나 오답을 도출할 경우 오답이라는 경고 창과 함께 reset 버튼이 활성화되어 처음부터 문제를 풀 수 있게 구현하였다.

4) record 페이지

• REC 버튼을 눌러 직접 자신의 음성을 녹음한 후 재생 버튼을 눌러 해당 음성을 들을 수 있다. 또한, Accuracy 버튼을 클릭 시 자신이 녹음한 음성의 정확도를 퍼센트 수치로 보여줌으로써 확인할 수 있다.
• 사용자가 REC 버튼을 눌러 녹음한 파일은 폼 데이터 형식으로 전달되어 Google Cloud storage(GCS)에 저장되게 하였다. 그리고 저장된 음성 파일의 gcUrl을 받아와서 Google SpeechToText(STT)를 이용하여 녹음된 음성을 텍스트로 전환 및 해당 음성의 정확도(confidence)를 FE에게 반환하였다. 이때 Redis를 사용하여 캐시 기능을 보강함으로써 데이터 반환 속도를 조금 더 빠르게 처리할 수 있도록 하였다.

5) conversation 페이지

 

• '대화로 학습하기' 페이지에서 학습했던 전체 문장들을 대화창 형태의 UI로 구성하여 사용자로 하여금 자연스러운 대화의 흐름으로 문장들을 인식할 수 있도록 구성하였다.
• 해당 문장 클릭 시 Google TextToSpeech(TTS)를 이용하여 녹음된 음성이 재생된다.

 

6.  어려움 및 극복

record 페이지에서 사용자가 음성을 녹음한 후 해당 음성이 얼마나 정확한지를 수치로 보여주기 위해서 어떻게 하면 좋을지 고민을 많이 하였다. 처음엔 음성 파형 패턴을 분석하는 작업을 고려하여 일주일간 구글링 하며 찾아보았으나 이 파트는 딥러닝 분야로 해당 자료도 많지 않을뿐더러 Node JS로 작업한 자료는 거의 드물어서 다른 방안을 고려하기로 하였다. 다음 방안으로 고려한 것은 일단 사용자가 녹음한 음성을 구글 STT를 통해 텍스트로 전환한 후 DB에 저장해 놓은 정답 텍스트와 비교하여 이것에 대한 일치율을 반환해 주는 방법을 고려하였다. Python에 관련 코드가 있어서 Python 쪽을 공부하며 코드를 짜다가 이것 또한 정확도가 떨어지는 것은 아닌가 하는 고민과 함께 분명 구글에 해당 방법에 대한 정답이 있을 것이라는 생각으로 공식 문서를 찾아보았다. 그러다가 TTS와 관련하여 해당 음성 녹음 시 텍스트 전환으로 인한 정확도를 confidence라고 하여 0부터 1사이의 부동 소수로 나타내 주는 것을 알게 되었다. 그리하여 더 정확하고 쉬운 이 방법으로 해당 소수에 100을 곱한 FE에게 해당 데이터를 반환하는 방법으로 해결하였다.

 

7. 프로젝트 후기

앞선 두 번의 프로젝트는 특정 사이트를 모티브로 한 프로젝트였으므로 기획 단계에서는 크게 염두에 둘 것이 없었다. 그러나 이번 3차 프로젝트는 기획부터 개발까지 온전히 팀원들끼리 상의하며 직접 구상하고 계획하였다. 먼저 어떻게 구현할지 팀원들끼리 의견을 모아서 Figma를 통해 페이지들을 이미지화 시킨 후 해당 페이지들에 필요한 데이터를 구축하기 위해 ERD를 작성하였다. 그 후 Trello를 이용하여 각 페이지별 작업을 세분화 시킨 후 티켓을 나누어 작업에 들어갔다.

 

백엔드는 나를 포함해 3명이라 작업 속도가 빠른 반면에 프론트는 한 명뿐이라서 프론트 속도에 맞추며 작업에 들어갔다. 처음엔 좀 더 욕심을 내 많은 것을 하고 싶다는 생각에 답답함이 있었으나 오히려 생각을 전환하여 지금 하는 것에 무엇이 추가되면 좋을지, 그리고 최대한 불필요한 것들은 더 이상 뺄 것이 없다고 느낄 때까지 빼자는 생각으로 다듬고 다듬었다. 특히 이 제품을 사용하는 사용자 입장에서 무엇이 있으면 좋을지 그리고 무엇은 불필요할지 생각하였고 이 과정에서 수 십 번 ERD 및 테이블, 데이터 수정 작업이 이루어졌다. 이때 무언가 새로운 것을 추가하거나 제거할 때는 항상 팀원들과 의견을 공유하여 팀원들을 이해시킨 후 모두 동의할 경우 작업에 들어갔다. 이렇게 하니 처음엔 작업 단계에서 대화로 인해 조금 느려지는 감이 있었지만 오히려 원활한 소통으로 인해 서로에 대한 신뢰와 함께 피드백으로 인해 더 좋은 결과물을 도출해낼 수 있었다.

 

매일 아침 또는 필요할 때마다 팀원들끼리 모여 자신들이 진행하고 있는 일 등을 공유하며 작업을 진행하니 서로의 상황을 좀 더 이해할 수 있었다. 정말 한 달이 어떻게 지나갔는지 모를 정도로 팀원들끼리 합을 맞춰서 재미있게 프로젝트를 진행하였고 결과 또한 만족스러워서 의미 있는 프로젝트가 되었다. 협업이라는 것이 무엇인지 알게 해준 소중한 팀원들에게 감사의 말을 전하고 싶다.