ZeroZone 프로젝트를 들어가며
❄️ 들어가며
UN이 제공하는 지속가능한 목표 17가지 중에서 선택하여 지역 사회에 존재하는 문제를 구글 기술을 활용하여 해결하는 대회인 Solution Challenge에 참여하게 되었다. 처음에는 팀에서 주제로 '동작 인식 기능을 활용한 운동 어플'로 잡아 프로토타입까지 만들었지만 동아리원 분들의 피드백 이후 작년에 출품된 프로젝트의 주제와 겹치는 것이 확인되어 주제를 변경하기로 하였다. 주제를 다시 선택하기 위해 고민하던 중 지난 학기 '특수교육학개론' 수업에서 청각장애인 분들은 사람과 의사소통을 할 때, 구화(말하는 상대방의 입술의 움직임과 표정 바탕으로 의사소통하는 것), 필담(종이에 글로 써서 의사 소통하는 것), 수화(손으로 의사소통하는 것)의 방법으로 의사 소통한다고 했던 것이 문득 떠올랐다. 하지만 필담의 경우, 시간이 오래 걸린다는 단점이 있고 수화의 경우에는 수화를 익히지 않은 비장애인이 많다는 단점이 있다. 따라서 청각장애인이 비장애인과 더불어 살아가는데 있어서는 구화를 학습하는 것이 도움이 될 것이라 생각해 청각 장애인 분들이 구화를 좀 더 쉽게 익힐 수 있도록 도움을 주는 앱을 만들어보면 어떨까 하는 생각을 바탕으로 '구화 학습 앱'을 제안하게 되었다.
👄 구화 학습 앱 'ZeroZone'
구화 학습앱 'ZeroZone'은 청각장애인이 비장애인과 보다 원활하게 의사소통할 수 있도록 돕는 것을 목표로 한다. 이러한 목표를 앱 이름에 담고자 구화 학습 앱의 이름으로 'ZeroZone'을 제안하게 되었다. 이 이름은 2가지 뜻을 담고 있는데 하나는 '청각 장애인과 비장애인간의 의사소통 어려움이 0이되는 공간'이라는 의미이고 또 다른 하나는 '청각 장애인과 비장애인이 함께 공존해 나가는 세상'이라는 의미를 내포하고 있다. 'ZeroZone'이 원활한 의사소통을 목표로 하고 있는만큼 청각 장애인이 비장애인이 하는 말을 알아들을 수 있도록 도움을 주기 위한 구화 학습 뿐만 아니라 청각 장애인이 보다 정확한 발음으로 비장애인들과 의사소통할 수 있도록 하는 말하기 학습이 동시에 이루어질 수 있도록 하는 것이 필요할 것이라 생각했다. 그 결과, 'ZeroZone'에 주요 기능으로 구화 학습, 말하기 학습, 시험 모드, 리뷰 모드, 마이 페이지의 기능을 넣기로 결정하게 되었고 회의에서 정한 세부 사항들을 바탕으로 피그마에서 팀원들과 함께 프로토 타입을 만들게 되었다. 하지만 이렇게 구상한 앱이 실질적으로 청각장애가 있으신 분들께 도움이 될 수 있을지에 대해 확신이 없었기 때문에 저번 학기에 들었던 '특수교육학개론' 교수님께 프로토타입을 바탕으로 앱의 세부기능들을 정리해서 자문을 구하게 되었다. 다행히 자문 결과 특수교육학적 관점에서 우리가 기획하고 있는 구화 학습 앱이 청각장애인 분들의 구화 학습에 도움이 될 것 같다고 이야기해 주셨고 구화의 연령에 따라 어휘에 차이를 두면 좋을 것 같다고 추가적으로 조언해 주셨다.
👩🏽💻 ZeroZone 개발 시작
flutter 담당이 2명인 만큼 각각 어떤 기능을 구현할지 먼저 분배하게 되었다. 다른 팀원 분과 논의하여 분배한 결과 나는 한 글자 선택 화면과 단어 선택 화면, TabBar, 말하기 연습 (음성 인식 구현 포함), 마이 페이지, 로그인 기능, 스플래시 화면을 맡게 되었다.
1) 한 글자 선택 화면 & 단어 선택 화면
한 글자 선택 화면과 단어 선택 화면은 Grid View로 구성하게 되었다. 각각 자음 리스트와 모음 리스트를 만들어 map 함수로 각 리스트에 있는 요소들을 매핑하고 인덱스에 따라 각 줄 별로 색깔이 다르게 나타나도록 설정했다. 초반에 map을 이용하여 할 당시에는 index값을 어떻게 받아와야 할지 고민했었는데 asMap함수로 data와 index를 같이 받아올 수 있도록 설정하여 index값을 이용할 수 있게 되었다. 여기에서 한 가지 문제가 더 발생하였다. (index/3)%2를 할 경우 이 결과가 0또는 1이 나올 것이라 생각했던 것에 비해 결과가 원하는대로 나오지 않아 저 값을 각각의 그리드에 출력되도록 해 보았더니 소수점자리까지 나오는 것을 확인하게 되었다. 이를 해결하고자 color: (index/3)%2 < 1 ? Color(0xffD8EFFF) : Color(0xff97D5FE)의 형식으로 사용하여 줄 별로 색깔을 다르게 줄 수 있었다.
2) 로그인 화면 & 회원가입화면
로그인 화면에서는 도중에 시뮬레이터에서 TextField에 입력하게 될 경우, 타자기에 화면이 밀려 오류가 나는 문제가 있었다. 해결 방법을 찾던 중 화면이 밀려 올라가지 않게 하는 resizeToAvoidBottomInset : false를 하는 방법과 SingleChildScrollView를 설정하는 방법으로 해결 가능하다는 것을 알게 되었고 후자의 방법을 선택하여 문제 상황을 해결하게 되었다. 전자의 경우 입력하려는 텍스트 필드가 화면 상에서 보이지 않을 수 있다는 단점이 존재했기 때문에 후자의 방법을 선택하여 구현하게 되었다.
3) 마이 페이지 화면
마이페이지를 구현하며 가장 고민을 많이 했던 것 중 하나는 학습 목록/책갈피 목록을 보여주는 페이지를 구현하는 것이라 할 수 있을 것이다. body에서 선택한 탭에 해당하는 listview가 나오도록 해야 했기 때문에 Column 안에서 tabbar와 tabbarview를 차례로 정의해 주었다. 또한, itemBuilder를 사용하여 index로 리스트에 접근할 수 있도록 했다.
