3 주차 계획

[gringrape]

이 앱을 언제 사용하나요?

실어증을 겪고 있는 분들이 의사소통을 연습하기 위해 사용합니다.

제약 조건은 무엇인가요?

듣고 이해하기(Yes/No)

• 사용자는 음성으로 제시되는 예/아니오로 대답할 수 있는 질문을 들을 수 있어야 합니다.
• 사용자는 화면에서 정답을 고를 수 있습니다.
• 사용자는 정답이 맞는지 확인 할 수 있어야 합니다.

구체적인 사례는 무엇인가요?

듣고 이해하기(Yes/No)

사용자가 '듣고 이해하기' 버튼을 클릭합니다. 화면에 재생중 표시가 나옵니다. '쥐는 코끼리 보다 무겁나요?' 라는 질문이 음성으로 나옵니다 질문이 끝나면 화면에 예 / 아니오가 표시됩니다 질문이 끝나면 화면에 '다시듣기'가 표시됩니다 사용자가 '아니오' 를 누르면 정답 효과음이 나면서 다음문제로 넘어갑니다 사용자가 '예'를 누르면 오답 효과음이 나면서 다음문제로 넘어갑니다

이번주에 구현할 기능을 우선순위에 따라 나열해 주세요.

디자인 개선 - 메인화면

• [x] 사용할 컬러, 폰트 추가 #97
• [x] 타이틀, 버튼 표시 #98
• [x] 컴포넌트 위치 및 크기 설정 #99
• [x] 배색 설정 #99
• [x] 폰트 설정 #99
• [x] 세부 조정 #99

디자인 개선 - 기능 선택 화면

• [x] 타이틀, 버튼 렌더링 #100
• [x] 메인 페이지 연결 #100
• [x] 경로에 추가 #100
• [x] 스타일 설정 #101

디자인 개선 - 문장말하기 화면

• [x] 스타일 설정 #102
• [x] 프로그레스 바 구현 #103
• [x] 다음 문제 버튼 - 액티브, 인액티브 스타일 설정

디자인 개선 - 문장말하기 - 결과확인 화면

• [x] 제시어당 2개의 예문 데이터 추가 #108
• [x] 예문 화면에 보여주기 #109
• [x] 정답확인 화면 - 슬라이더 구현
• [ ] 슬라이더 미완료/완료 -> 버튼 액티브/인액티브

듣고 이해하기 화면

UI

• [x] 페이지 생성 및 예 / 아니오 표시 #89
• [x] 페이지에 들어가면 재생 액션 실행 #90
• [ ] 상태가 재생중일때, 재생 중 표시
• [ ] 상태가 재생끝일때, 예/아니오 표시

Action, Service

• [x] 재생 액션이 실행되면 문장 데이터를 랜덤으로 얻기 #90
• [x] 문장 데이터를 api 에 post 전송하고 얻어온 데이터를 플레이하기 #90
• [ ] 플레이 중일때, 상태를 재생중으로 변경
• [ ] 플레이가 끝나면, 상태를 재생끝으로 변경

UI

• [ ] 답을 고르면 문제와 고른 답을 저장하는 액션
• [ ] 정답을 고르면 정답사운드 재생
• [ ] 오답을 고르면 오답사운드 재생

Action

• [ ] 문제와 고른답을 저장

데이터 추가

• 문장 데이터 추가

다시 듣기 기능 추가 예정

디자인 개선 - 듣고 이해하기 화면

디자인 개선 - 듣고 이해하기 - 결과확인 화면

이번주가 지나면 사용자는 어떤 기능을 사용할 수 있게 되나요?

문장 만들기

• 몇 문제를 풀지 정할 수 있게 됩니다

  듣고 이해하기

• 문장을 들을 수 있게 됩니다.
• 정답을 맞출 수 있게 됩니다.
• 문제와 정답을 확인 할 수 있게 됩니다.

디자인 개선

[Kihyun92]

UI, Service, Action을 따로 생각하면서 할일들을 나눠보신 부분이 좋네요! 이번주도 화이팅입니다~ 👍

[gringrape]

@Kihyun92 감사합니다 ㅎ 기현님 한가지 고민이 생겼는데, 현재 텍스트를 AWS polly 로 보내면 mp3 데이터를 받는형식으로 구성을 해놓았습니다.

이경우, 문장이 같을 때도 계속 요청을 해서 해석하게 되는 문제가 발생하는데 어떻게 처리해야 할까요? 요청이 많아질 경우 비용문제도 생기고, 같은 걸 매번 해석하는게 비효율적이라는 생각이듭니다. 제가 단순하게 생각한 해결책은

1. 백엔드 서버를 구성한다
2. 프론트엔드에서 문장 텍스트로 요청(POST)이 올 경우, 아마존 polly API 에 요청한다.
3. 요청결과로 온 mp3 를 저장한다.
4. 프론트엔드에서 오는 요청마다 캐시가 있는지 검사하고(문장 -> hash?) 있으면, 저장된 값을 돌려주고 없으면, 새로운 요청을 하고 요청결과를 돌려준다.

이 정도 인데, 구현해본적도 없고 경험도 없어서 현실과 맞지 않는 부분이 많을 것 같습니다 ㅜ

[Kihyun92]

음 클라이언트와 AWS polly 사이에 서버를 둬서 캐싱 해두는게 당장 생각했을때는 베스트 인듯 하지만, 당장 AWS 요청을 낮출 수 있는 방법이 있을지 고민을 조금 더 해봐야할 것 같네요

음성 파일 같은 경우에 생각을 해보니 다른 번역 앱 같은 경우에도 음성 패키지를 추가 다운로드 하는 방식이었던 것 같긴하네요. 🤔

[Kihyun92]

잠깐 찾아보니 CloudFront, S3 같은 AWS의 다른 서비스들을 사용하는 방법도 가능할 것 같기도 하네요

• https://docs.aws.amazon.com/ko_kr/polly/latest/dg/polly-dg.pdf 166페이지 봤습니다.

좀 더 고민해볼게요~ 😁

[gringrape]

!! 개발자 가이드가 있었군요. 조사 부족 이네요 ㅜ 감사합니다! ㅎ

[Kihyun92]

문장 만들기를 진행해보니 하나의 단어를 보고 문장을 만드는게 생각보다 쉽지 않더라구요 ㅎㅎ.. 추후 난이도라던지 혹은 추천되는 단어들이 여러개 나와도 재밌을 것 같다는 생각이 들었습니다~ 😁

아 그런데 생각해보니 끝나고 예시 문장에서 한번 짚어주긴하는군요 😅

[gringrape]

@Kihyun92 네 ㅎ 단어 분류나 단어 갯수를 늘리는 것도 구상중이었는데, 어쩌다 보니 계속 우선순위에서 밀리네요 ㅜ 4 주차 과정이 끝나고 다시 한 번 설계를 해서 발전시켜봐야 할 것 같습니다.ㅎㅎ