지난 9월까지는 개발 마무리 및 사용자 테스트를 진행하고

개발한 앱으로 한이음 공모전 2차 접수ACK 2021 학술발표대회 논문 최종본 제출을 완료했다.

 

한이음 공모전

1차 평가로 200팀이 합격하고 그 중 140팀이 2차 평가에 합격한다.

 

2차 접수는 1차 평가 때 제출한 개발보고서, 제작설계서를 보완하고 시연 동영상을 제출해야했다.

보고서와 설계서는 앱 디자인 변경으로 인해 캡쳐 이미지를 변경하여 간단히 수정을 마쳤다.

 

문제는 시연 동영상 제작이었다. 영상 길이는 1분 내로 제작해야 한다는 조건이 있었다.

앱에서 제공하는 기능이 크게 5가지정도 있는데 이것을 전부 보여주기엔 1분이라는 시간은 부족했다.

따라서 어떤 기능을 중점적으로 보여줄지 정하고 나머지 기능 분량은 최대한 줄여야했다.

 

https://www.youtube.com/watch?v=YxmgPSXDh0c 

2021 한이음 ICT 멘토링 : 학교폭력 문제해결을 위한 앱, 마음이 시연 영상

 

주요 기능인 AI상담과 진단테스트를 중점적으로 보여주고 나머지 기능은 간단하게 보여줬다.

10월 18일까지 2차 접수 마감이었고 우리 팀은 15일에 제출 완료했다.

 

그리고 오늘, 26일에 2차 평가 결과가 나왔다.

 

 

2차 평가 결과 합격한 작품은 입선예정작과 3차 평가 대상작(본상)으로 나뉘는데

우리 팀은 3차 평가 대상작이라고 결과가 나왔다. 최소 장려상!!

2차 평가 합격한 팀은 모두 12월 3일 엑스포 전시에 참가해야한다.

그리고 11월 6~7일에 코엑스에서 3차 평가가 이루어지기 때문에 발표 준비가 필요하다.

 

팀원 모두 열심히 프로젝트에 참여한 덕분에 공모전 2차 합격을 할 수 있었다고 생각한다!

다들 4월부터 고생 많았는데 11월 공모전 수상까지 받으면 너무 좋을 것 같다.

 

 

ACK 2021 학술발표대회

지난 9월 말에 논문 투고를 완료했었고 10월 18일에 '게재 가능' 심사 결과를 전달받았다.

정보처리학회측에서 정말 친절하게 논문 피드백도 해주셨다.

 

기존 서비스의 기능이 분절적으로 제공되고 있다는 점에 착안하여 통합 시스템을 구현한 점,

진단테스트 제작 시 신뢰할 수 있는 문항을 기반으로 설계한 점,

진단테스트와 AI상담 기능의 시너지 효과를 기대할 수 있다는 점에 대해 좋은 평가를 받았고

 

영상 시청을 통한 교화, 게시판 기능 제한 등 논문에 명확하게 표현되지 않은 부분을 짚어주셔서

부족한 점을 보완하여 최종본을 제출할 수 있었다.

 

 

올해 학술발표대회는 코로나로 인해 온라인으로 진행되며 실시간 발표를 대체하여 발표 영상 제출이 요구되었다.

팀원 모두 ICT 학술 논문을 작성하는 것이 처음이라 여러모로 어려움을 겪었는데 게재 수락이 되어 다행이었다.

학술적인 관점에서 글을 작성하는 법을 조금은 익힌 것 같다.

 

공모전 수상도 확정되고 논문 제출도 완료했고...

올해 계속 진행한 프로젝트에 대한 보상을 받는 듯한 느낌

좋은 10월이다 ~_~

학교폭력 문제 해결을 위한 앱, 마음이 Github ➡ https://github.com/askges20/Maeumi

 

GitHub - askges20/Maeumi: 2021 한이음 ICT 멘토링 프로젝트 [21_HF114] : Android Studio 앱

2021 한이음 ICT 멘토링 프로젝트 [21_HF114] : Android Studio 앱 - GitHub - askges20/Maeumi: 2021 한이음 ICT 멘토링 프로젝트 [21_HF114] : Android Studio 앱

github.com

 

 

앱 기능 구현을 마무리하고 8월 말에는 한이음 공모전 접수를 완료했다.

9월부터는 기존에 구현된 기능을 테스트해서 버그를 찾아내고,

개발자가 아닌 일반 사용자에게 테스트를 맡겨서 피드백을 받아보기로 했었다.

그리고 한이음 공모전 1차 발표가 나는 대로 2차 접수를 준비하기로 했다.

 


 

사용자 테스트

각자 지인으로부터 앱의 피드백을 받고 그 내용을 바탕으로 앱을 개선하기로 했다.

 

피드백 내용을 총 정리한 결과 다양한 의견을 들을 수 있었다.

각 의견의 우선순위를 파악해보고, 앱의 로직 상 수정하기 어려운 부분을 제외하고

앱에 반영한 의견은 다음과 같았다.

 

디자인

  • 메인화면 버튼에 그림자 효과 또는 테두리를 넣어서 배경과 구분하면 좋겠다.
  • (가장 많이 나온 의견) 앱의 폰트가 삐뚤빼뚤하고 전체적으로 가독성이 낮다. 다른 것으로 바꾸는게 나을듯

진단테스트

  • 테스트 이용안내 페이지 가독성을 높일 필요가 있다. (줄 간격, 유의사항 배치 등)
  • 테스트 결과 멘트의 수정이 필요할 것 같다.

일기장

  • 일기장 기능이 제공 목적을 안내하면 좋겠다.
  • 일기장 캘린더에서 주말은 다른 색으로 표시하면 좋겠다.
  • 학교폭력 증거물로 활용되니까 일기 작성 시간을 기록하여 타임스탬프를 남기면 좋겠다.

게시판

  • 게시판의 글 목록에서 글 내용을 미리보기로 한 줄 정도 넣으면 좋을 것 같다.

상담

  • 채팅 메세지 길이가 한줄이면 말풍선 길이가 그에 맞게 짧아지도록 수정하면 좋을 것 같다.

 

이미 몇 달간 이 앱을 개발한 개발자 입장에서는 기존 화면이 너무 눈에 익어서 수정할 부분을 찾기 어려웠는데

사용자 테스트를 통해 디자인적으로 개선할 부분을 많이 찾을 수 있었다.

그리고 팀원끼리 피드백을 했을 때도 앱의 전체적인 색감과 메인 화면 배치를 수정하면 좋겠다는 의견이 나왔기 때문에 앱 전체적으로 수정을 했다.

 

 

이 외에도 사용자 피드백에서 상담 진행 시 AI의 목소리를 넣으면 어떨까,

사용자의 의견을 들을 수 있는 기능을 추가하면 어떨까,

주기적으로 테스트를 할 수 있게 하고 결과를 그래프로 나타내서 학생이 자신의 변화된 모습을 파악할 수 있게 하면 어떨까 등

생각도 못하고 있던 다양한 아이디어를 들을 수 있었다.

 

 

한이음 프로젝트를 진행하면서 여러 사람의 의견을 모으다 보면 새로운 아이디어를 창출해낼 수 있다는 것을 체감했고

이번에 사용자 테스트를 통해 개발자가 아닌 일반 사용자들의 관점에서의 의견을 들어보고 앱을 개선할 수 있는 기회를 갖게 되어 좋았다!

 

(사용자 테스트에 참여해주신 모든 분들께 감사 인사를...😘)

 


UI 개선

메인 화면 수정 전 (8월) -> 수정 중 (9월) -> 현재 모습 비교 (10월)

 

수정 전의 메인 화면은 폰트의 가독성이 낮고, 버튼의 크기가 너무 크다는 의견이 있었다.

따라서 앱 전체 폰트를 깔끔한 나눔스퀘어 체로 바꾸었고 버튼의 배치를 수정했다.

 

최종적으로는 버튼에 테두리를 넣음으로써 배경과 구분할 수 있도록 했고 색감은 베이지 계열, 파스텔톤으로 통일했다.

이렇게 비교 과정을 살펴보니 많이 개선된게 느껴진다😏

 

일기장 캘린더, 일기 내용 페이지

 

일기장 캘린더에는 일요일날 빨간 글씨로 표시하도록 수정했고

일기 작성/수정 시에 타임스탬프가 남아서 내용을 조작할 수 없도록 의도했다.

 

상담 수정 전 -> 후

 

채팅으로 진행되는 상담은 텍스트 내용이 많기 때문에 가독성이 중요한데

기존 폰트를 적용했을 땐 가독성이 매우 저하되었다.

 

폰트를 바꾸고 줄 간격을 조절하니 훨씬 깔끔하고 읽기 편안해졌다.

그리고 메세지가 짧을 경우 말풍선이 그 길이에 맞게 너비를 갖도록 수정했다.

 

게시판 글 목록

 

게시판에는 각 게시글의 내용 미리보기를 추가했다.

 

이 외에 앱에서 수정된 점은

  • 일기장 안내 페이지 추가
  • 마음 채우기 안내 페이지 내용 추가
  • 알림 아이콘 이미지 수정
  • 테스트 결과 문구 수정

등이 있었다. 이로서 개선할 점은 다 고친 것 같고 디버깅만 더 하면 개발은 끝날 것 같다.

 


 

한이음 공모전

8월 26일 공모전 접수를 하고 9월 14일에 1차 합격 결과를 받았다.

2차 평가는 제출했던 개발보고서를 수정하고, 시연 동영상!!을 제출해야한다.

따라서 앱 UI 개선을 완료한 후에 앱 시연 영상을 녹화하고 편집하는 중이다.

2차 평가에서 합격하면 입선 수상은 확보하는건데 꼭 합격했으면 좋겠다🙏

 


 

논문 작성

9월 말에 멘토님과 온라인 미팅이 있었다. 그 때 학술 대회에 참가하는 것도 좋을거라는 멘토님의 말씀에

늦게나마 한국정보처리학회에서 주관하는 ACK 2021(KIPS 추계학술발표대회)를 접수해보기로 했다.

 

지금까지 개발 보고서는 종종 작성해보았으나 논문을 작성하는 것은 처음이라

어떻게 구성해야 할지, 어떤 관점에서 내용을 작성해야할지 많은 고민이 되었다.

 

아직 논문을 한창 작성하고 있고 고쳐야할 부분도 많이 있지만

논문을 작성해보았다는 경험 자체가 큰 의미가 있을 것이라 생각한다!


 

10월 계획

한이음 ICT 멘토링이 11월 30일까지 진행되는데, 벌써 10월이 되었다.

앞서 언급한대로 한이음 공모전 2차 접수를 위해 영상을 제작하고 개발보고서를 수정할 것이며 ACK 2021 논문 투고를 하려고 한다.

결과 나오는거에 따라서 추후 일정이 달라질 것 같다! 모든 일이 잘 풀렸으면 좋겠다 🍀

8월의 주요 개발 목표는 다음과 같았다.

  • 테스트 결과 게시판 기능 제한
  • 교화 프로그램 시청 (마음 채우기 = 유튜브 영상 시청)
  • 알림 기능 추가
  • 기타 레이아웃 보완 및 디버깅

 


 

테스트 결과 기능 제한

학교폭력 진단테스트 결과를 바탕으로 마음 온도를 산출한다.

마음 온도가 낮은 사용자는 학교폭력 관련 영상 (교화 프로그램) 시청을 통해 마음 온도를 높이고

60점 이상을 달성해야 게시판 기능을 이용할 수 있게 제한하도록 구현했다.

 

 

테스트 결과 가해 정도에 따라 마음 온도가 산출되는데

이때 마음 온도가 60점 보다 낮으면 마음 채우기 안내 페이지로 이동하며

60점 이상을 달성하기 전까진 게시판 접근이 제한된다.

 

 

교화 프로그램 시청 (마음 채우기)

 

유튜브에 있는 학교폭력 영상을 앱 안에서 시청할 수 있도록 YouTube API를 활용하여 기능을 구현했다.

유튜브 썸네일은 YouTubeThumbnailView를 이용했고 각 영상의 제목, 설명, 시청 여부를 함께 표시한다.

전체 영상 개수와 시청한 영상 개수도 상단에 표시했다.

 

(YouTubeThumbnailView 공식 문서 : https://developers.google.cn/youtube/android/player/reference/com/google/android/youtube/player/YouTubeThumbnailView.html?hl=ko

 

YouTubeThumbnailView  |  YouTube for Android  |  Google Developers

Javadoc API documentation for YouTube Android Player API.

developers.google.cn

 

영상 목록도 진단테스트와 마찬가지로 ListView를 이용하여 Adapter 패턴을 적용했다.

 

 

영상 시청 화면으로 이동하면 유튜브 영상 플레이어와 (YouTubePlayerView 이용) 누적 시청 시간을 나타내는 seekbar을 확인할 수 있다.

 

영상 시청 시간을 체크하도록 구현하는 부분이 생각보다 어려웠는데

단순히 현재의 영상 타임라인을 구하는 것은 쉽지만만약 제대로 시청하지 않고 타임라인을 건너뛰어서 영상의 맨 뒤로 이동하면 그것을 알 수 있는 방법이 없었기 때문이다.

 

 

따라서 나는 스레드를 이용해서 직접 이 코드를 구현했다.

 

영상 시청 화면 액티비티는 YouTubeBaseActivity를 상속받았고YoutubePlayerView에 setPlaybackEventListener, setPlayerStateChangeListener를 설정하여영상 재생 상태와 사용자로 인한 이벤트에 대한 처리를 할 수 있었다.

 

👇

 

 

GitHub - askges20/Maeumi: 2021 한이음 ICT 멘토링 프로젝트 [21_HF114] : Android Studio 앱

2021 한이음 ICT 멘토링 프로젝트 [21_HF114] : Android Studio 앱 - GitHub - askges20/Maeumi: 2021 한이음 ICT 멘토링 프로젝트 [21_HF114] : Android Studio 앱

github.com

 

이것과 스레드를 이용해서 만든 누적 시청 시간 카운터를 연결했다.카운터는 1초에 1번씩 영상 재생 상태를 확인하여 누적 시간을 카운트한다.

 

👇

 

 

GitHub - askges20/Maeumi: 2021 한이음 ICT 멘토링 프로젝트 [21_HF114] : Android Studio 앱

2021 한이음 ICT 멘토링 프로젝트 [21_HF114] : Android Studio 앱 - GitHub - askges20/Maeumi: 2021 한이음 ICT 멘토링 프로젝트 [21_HF114] : Android Studio 앱

github.com

 

최대한 YouTube API 자체에서 제공하는 메소드를 활용하고 싶었는데

이 부분은 아무리 구글링해봐도 실제 누적 시청 시간을 구하는 코드가 없는 것 같았다.

 

(혹시나 저와 같은 어려움을 겪고 있는 개발자분이 있으시다면 제 코드를 참고해보시길...!)

 

 

 

그렇게 정직하게 영상을 끝까지 시청해야만 마음 온도가 5점씩 오르고,

60점을 달성하면 위와 같은 팝업창으로 사용자에게 기능 해제를 알리도록 구현했다.

 

 

게시판 카테고리 세분화

기존 게시판은 자유게시판과 익명게시판으로 나뉘어져서 익명게시판은 댓글이 없다는 점에서 차이가 있었다.

그런데 이렇게 게시판을 나누는 것은 사용자 입장에서 큰 의미가 없을 것 같아서

게시판을 어떻게 수정할까 고민하다가 카테고리를 조금 더 늘리기로 했다.

 

 

질문, 꿀팁 게시판이 추가되어 게시판 카테고리가 총 4개로 늘었다.

원래는 마음 온도에 따라 기능 제한을 할 때 일부 카테고리만 제한 or 댓글 작성만 제한하는 것으로 얘기를 했었는데

다시 회의를 거쳐서 기능 제한 시에는 게시판 자체를 접근하지 못하는 것으로 계획을 변경했다.

 

그게 개발자 입장에서 구현할 때 가장 편한 방법이기도 하고

사용자 입장에서 댓글을 달지 못하더라도 게시글 내용을 확인할 수 있으면

기능 제한을 해제하기 위해 마음 채우기 기능을 이용하고 싶다는 동기부여가 되지 않을 것 같았기 때문이다.

 

 

알림 기능

앱이 전체적으로 정적이라는 생각이 들어서, 어떻게 하면 동적으로 만들 수 있을까 고민해보니

기능 제한 또는 내 게시글에 새로운 댓글이 추가되었다는 것을 알리는 알림 기능의 구현이 필요해보였다.

 

 

회원가입 / 댓글 달렸을 때 / 마음 온도 60점 달성 시 알림이 추가되도록 했고

알림을 길게 누르면 개별 알림 삭제가 가능하도록 했다.

 

 

기타 개선 사항

  • 일기장, 게시판에 등록된 이미지 확대 기능 (image-zoom-view 라이브러리 활용)
  • 게시판 레이아웃 보완, 유효성 검사
  • 디버깅 및 오류 픽스 (댓글 알림을 클릭해서 해당 게시글로 이동했을 때 DB에서 공감 수를 제대로 받아오지 못하는 현상 해결 등)

 


 

8월 개발 일지 목록

  • 8/1 ~ 8/2 (로딩 화면 DB 데이터 조회 문제 해결, 챗봇에서 일기장으로 이동)
 

2021.08.01 - 08.02 개발 일지 (로딩 화면 DB 데이터 조회 문제 해결, 챗봇에서 일기장으로 이동)

1. 로딩 화면(스플래시 화면)에서 firebase DB 데이터 불러오는 문제 해결 - 스레드의 run 메소드 안에 DB 조회 코드가 들어있던 것이 문제... 스레드 밖으로 해당 코드를 뺐더니 해결! - 하지만 지금은

askges20.tistory.com

 

  • 8/6 (마음 온도 산출, 마음 채우기 안내, 메인화면 디자인 보완)
 

2021.08.06 개발 일지 (마음 온도 산출, 마음 채우기 안내, 메인화면 디자인 보완)

테스트 결과를 바탕으로 마음 온도를 산출하고, 마음 채우기 페이지를 안내하는 것을 중점적으로 구현했다!!😎 1. 테스트 결과 확인 후 마음 온도 DB에 저장 2. 테스트 결과 화면에 "마음 채우기

askges20.tistory.com

 

  • 8/8 (YouTube API 적용 완료, 챗봇 링크 활성화, 게시판 카테고리 세분화, 게시판 기능 제한)
 

2021.08.08 개발 일지 (YouTube API 적용 완료, 챗봇 링크 활성화, 게시판 카테고리 세분화, 게시판 기능

회의 내용 오늘 오전 9시에 회의에서 마음 채우기 프로그램의 영상 개수, 마음 온도 높이는 기준과 게시판에 대해 얘기했다. 교화 프로그램(마음 채우기)에서 제공할 영상의 개수는 10개, 사용자

askges20.tistory.com

 

  • 8/9 ~ 8/10 (마음 채우기 유튜브 영상 시청 기능)
 

2021.08.09 - 08.10 개발 일지 (마음 채우기 유튜브 영상 시청 기능)

안드로이드 스튜디오에서 YouTube API를 이용하여 유튜브 영상을 앱 화면에 띄우는 것은 어제 완료했었다. 오늘은 본격적으로 마음 채우기 (영상 시청) 기능을 구현했다. 구현하면서 고려한 점 1.

askges20.tistory.com

 

  • 8/12 ~ 8/13 (에뮬레이션 이용, 마음 채우기 팝업 추가, 화면 회전 방지)
 

2021.08.12 - 08.13 개발 일지 (에뮬레이션 이용, 마음 채우기 팝업 추가, 화면 회전 방지)

며칠 전에 YouTube API 연결을 시도할 때만 해도 갈 길이 멀다고 생각했는데 생각보다 빠른 기간 안에 기능을 거의 다 구현한 듯 하다. 오늘은 주로 영상 시청 관련 디테일을 추가하고, 디버깅을 하

askges20.tistory.com

 

  • 8/14 ~ 8/15 (게시판 레이아웃 보완, 유효성 검사, image-zoom-view 적용)
 

2021.08.14 - 08.15 개발 일지 (게시판 레이아웃 보완, 유효성 검사, image-zoom-view 적용)

앱에서 제공할 기능들은 다 완성한 상태라 이제 앱 전반적인 레이아웃과 디자인만 보완하면 될 듯 하다. 그래서 오늘은 게시판 레이아웃을 전체적으로 손보고 유효성 검사를 추가했다. 개발 내

askges20.tistory.com

 

  • 8/16 ~ 8/17 (알림 기능 추가)
 

2021.08.16 - 08.17 개발 일지 (알림 기능 추가)

앱에서 게시판이라는 커뮤니티 기능을 제공해서 글을 작성하고 댓글로 소통할 수 있긴 하지만 어딘가 정적이라는 느낌이 들어서 해결 방법을 여러가지 생각해보았고 그 결과 알림 기능을 추가

askges20.tistory.com

 

이 외에도 앱 레이아웃 개선 등을 했는데 자잘한 오류를 픽스하는 과정이라 개발 일지는 따로 작성하지 않았다.

 


 

한이음 공모전 참가

8월 30일까지 한이음 공모전 참가 서류를 제출해야해서 8월 중순부터 말까지는 계속 개발보고서와 제작설계서를 작성했다.

7월 중간점검때 제출하기 위해 중간보고서를 한번 작성하긴 했지만

7~8월에 워낙 많은 기능을 구현했다보니 추가 작성해야할 내용이 꽤 많았다.

팀원 모두 열심히 작성한 덕분에 마감일로부터 4일 전인 8월 26일에 접수 완료😎

 

 

9월 이후 계획

이제 기능 자체는 구현이 모두 완료되었으니, 주변 지인들에게 배포하여 사용자 테스트를 진행하며 피드백을 받아보려 한다.

몇 달간 개발을 하다보니 이미 메인화면, 기타 화면의 UI에 너무 익숙해졌다...

사용자 테스트를 통해 앱을 아예 처음 접하는 사용자가 객관적으로 평가를 해줄 필요성을 느꼈다.

UI/UX를 개선해서 2차 공모전 접수 시 시연 영상을 촬영할 수 있도록 해야겠다.

 

추가로 2학기에 교내에서 진행하는 비교과 프로그램에도 참가할 예정이다.

1학기 비교과 프로그램에서 시작한 프로젝트인데 이렇게 개발을 거의 마무리하고 공모전에 참가하게 되다니ㅎㅎ

비교과 프로그램에서 두 차례에 걸쳐 공모전 참가 관련 컨설팅도 해준다고 하니 도움이 될 것이라고 기대한다.

 

막학기에 취준도 하면서, 한이음 프로젝트도 끝까지 열심히 참여해서 이번 학기에 마무리하자 파이팅!😉

여름방학 기간에 집중적으로 마음이 앱 개발을 진행했다!

앱 개발 기획 시 생각했던 주요 기능은 AI 상담 채팅, 진단테스트, 일기장, 게시판이 있었고

7월에 해당 기능들을 모두 구현했다.

 

또한 한이음 중간점검 보고서 제출 마감일이 7월 19일까지라서 중간보고서와 제작설계서를 작성했었다.

 


 

게시판

6월에 게시판 레이아웃 틀을 잡고 게시글 등록 기능을 구현했었고

7월에는 다음과 같은 기능들을 구현하여 게시판 개발을 마무리했다.

  • 게시글 수정/삭제 기능
  • 댓글 등록/삭제 기능
  • 공감 기능
  • 댓글 수, 공감 수 출력

 

현재 게시판은 자유게시판과 익명게시판으로 나뉜다.

추후에 진단테스트 결과에 따라 마음 온도가 낮게 나온 사용자에 대해 게시판 기능 제한을 둘 예정인데

게시판의 분류가 애매하다는 생각이 들어서 어떻게 변경할지 고민할 필요가 있었다.

 

게시글 목록과 글 내용 페이지

 

진단테스트

진단테스트 문항은 JSON 파일에 저장해놓고, parsing하여 화면에 출력하도록 했다.

게시판과 마찬가지로 RecyclerView를 이용해서 구현하였는데

 

처음 구현하고 나서 테스트를 해보니 사용자가 선택한 응답의 체크 표시가 사라지고,

응답하지 않은 문항에 체크가 되어있는 이상한 현상이 있었다.

 

다행히도 이러한 현상에 대해 다룬 포스팅을 찾을 수 있었다.

https://kawaiineko.tistory.com/19

 

[android] Listview Checkbox 스크롤 후 체크 이상현상 해결법

안드로이드 개발은 쉬우면서도 어렵다. 이게 무슨 개소리냐면 머리로 구상한대로만 진행된다면 정말 그 어떤 코딩보다도 쉬운데 구상한대로 진행하다보면 꼭 생각지도 못한 문제가 발생한다.

kawaiineko.tistory.com

 

RecyclerView의 재사용 처리로 인해 이러한 현상이 발생하는 것이라고 한다.

체크한 응답이 코드상에서 저장은 되는데, 화면에 출력될 때 이상하게 나오는거라

화면에 선택했던 응답에 체크 표시를 하도록 코드를 추가함으로써 해결할 수 있었다.

 

테스트 진행 화면과 결과 화면

 

AI 상담 채팅

앱의 핵심 기능이라고 할 수 있는 AI 상담 채팅 기능!

학교폭력 관련 앱이므로 앱 이용자와 전문가가 직접 상담을 할 수 있다면 좋겠지만 지금 우리가 구현하긴 힘들다고 생각되어

이것의 대체 방안으로 AI 학교폭력 상담 채팅 기능을 제공하기로 한 것이다.

 

Google Dialogflow 챗봇 API를 이용하여 기능 구현을 했는데

구글 서비스 계정에서 문제가 여러 차례 발생하여 Android Studio와 연동하기까지 많은 어려움이 있었다.

지금은 다행히 해당 문제를 해결하여 연동이 완료되었고

앱에서 Dialogflow에 채팅을 전송하고, 응답을 받는 코드 구현 방법을 유튜브에서 찾을 수 있어서 쉽게 구현했다.

 

다만, 원래 Dialogflow는 Custom payload를 이용하여 카드 형식으로 Dialogflow에 보낼 채팅을 선택할 수 있었는데

앱으로 구현할 땐 그러한 응답 형식을 구현할 수 없었다.

사용자가 메세지를 1개 보내면 그에 대한 챗봇 응답 1개만 텍스트 형식으로 받을 수 있는 로직이었기 때문이다.

따라서 웰컴 메세지 (채팅을 시작할 때 첫 메세지) 를 추가하여 사용자에게 예상 질문 목록을 보여주는 것으로 보완했다.

 

채팅 내역은 Firebase DB에 저장하고 불러오도록 코드를 작성하였으며

채팅 내역 전체 삭제 기능을 추가하여 편하게 웰컴 메세지를 다시 확인할 수 있도록 하였다.

 

채팅 화면, 웰컴 메세지, 채팅 내역 전체 삭제 기능

 

기타 개발

  • 사이드바 추가 (Navigation Drawer 이용)
  • 로그아웃 기능 추가 (Firebase Authentication 이용)
  • 앱 디자인 개선

 

8월에는 진단테스트 결과에 따른 기능 제한과 마음 채우기 (영상 시청) 기능 구현을 주 목표로 할 것이고

그 외 앱의 디자인 개선과 각 기능의 완성도를 높이기 위해 다양한 방법을 생각해보아야겠다.

 


 

7월 개발 일지 목록

  • 7/1 (게시글 수정/삭제, 댓글 등록/조회 기능 구현)
 

2021.07.01 개발 일지 (게시글 수정/삭제, 댓글 등록/조회)

1. 게시글 내용 페이지 - 게시글 목록 불러오는 것까지 구현했었는데 이제 각 게시물 카드를 터치했을 때 게시글 세부 내용을 확인하는 페이지로 이동하도록 추가함 2. 게시글 수정 및 삭제 - 작

askges20.tistory.com

 

  • 7/2 (댓글 목록 레이아웃 수정, 댓글 삭제 기능 추가)
 

2021.07.02 개발 일지 (데이터 중복 출력 오류 해결, 댓글 삭제 기능)

1. 댓글 목록 ListView height 조절 - ScrollView 안에 모든 요소를 넣고 그 중에서 ListView가 있는 구조인데 ListView만 스크롤이 되고 전체 ScrollView는 스크롤이 되지 않는 상태였음 - ListView의 각 item들..

askges20.tistory.com

 

  • 7/4 (Android Studio - Firebase 다시 연결)
 

2021.07.04 개발 일지 (Android Studio - Firebase DB 다시 연결)

새로운 Firebase 프로젝트 DB와 안드로이드 스튜디오 연결하기 오늘은 회의가 있는 날이었다. 일기장, 게시판 주요 기능 구현은 거의 다 마친 상태에서 앞으로 구현해야할 기능들에 대해 얘기를 나

askges20.tistory.com

 

  • 7/10 (상담 채팅 레이아웃 구성, 로그인 유지 구현, 마이페이지 사용자 정보 출력)
 

2021.07.10 개발 일지 (1:1 상담 레이아웃 구성, 로그인 유지, 마이페이지 사용자 정보 출력)

1. 1:1 상담 채팅(dialogflow) - 앱 내의 레이아웃 구현 - https://www.youtube.com/watch?v=zVxDBBCdpfY 이 영상에 나온 방법대로 구현 - 메세지 전송 시 화면에 해당 메세지가 출력되는 상태 - 현재 dialo..

askges20.tistory.com

 

  • 7/11 ~ 7/12 (게시판 사용자 아이디 출력, 앱 테마 및 디자인 개선, 진단테스트 기능 구현)
 

2021.7.11 - 7.12 개발 일지 (게시판에 사용자 아이디 반영, 앱 테마 및 디자인 개선, 진단테스트 기능

새벽 시간에 완전 집중해서 개발했다!! 덕분에 많은 진전이 있었다. 슬슬 앱의 디자인적인 요소를 신경써야할거 같아서 폰트나 테마를 수정해봤고 주요 기능인 진단테스트 구현을 하루만에 거

askges20.tistory.com

 

  • 7/13 (Android Studio - Dialogflow 연결 완료, 채팅 내역 Firebase DB에 저장, 불러오기)
 

2021.07.13 개발 일지 (Android Studio - Dialogflow 연결 완료)

1. 게시글 작성 페이지 레이아웃 수정 2. Dialogflow - Android Studio 연결 완료 3. 1:1 상담 채팅 내역 Firebase DB 저장 4. 1:1 상담 채팅 내역 Firebase DB에서 읽어오고 화면에 띄우기 어제는 정말 감격스러..

askges20.tistory.com

 

  • 7/14 ~ 7/15 (Firebase Authentication 로그아웃 기능 구현)
 

2021.07.14 - 7.15 개발 일지 (로그아웃 기능 구현)

1. 로그아웃 기능 추가 - 마이페이지에 로그아웃 버튼 추가 - 파이어베이스 Authentication에서 로그아웃 필요 FirebaseAuth.getInstance().signOut(); - 로그아웃을 진행하면 기존에 실행되던 액티비티를 모두

askges20.tistory.com

 

  • 7/19 (게시판 공감 기능 추가, 사이드바 추가, 채팅 날짜 출력)
 

2021.07.19 개발 일지 (게시판 공감 기능 추가, 사이드바 구현, 채팅 날짜 표시)

일주일 전에 정보처리기사 실기 시험 보고나서 한동안 아무 의욕 없이 지내다가 오늘에서야 다시 의욕이 되돌아온듯 하다. 그동안 많이 쉰만큼 오늘은 12시간동안 빡세게 개발했지!⭐🤸‍♀️

askges20.tistory.com

 

  • 7/24 (게시판 댓글 개수 출력, 익명게시판 댓글 영역 삭제)
 

2021.07.24 개발 일지 (댓글 개수 표시, 익명게시판 댓글 영역 제거)

1. 자유게시판 댓글 개수 표시 - 공감 개수 표시는 지난번에 구현 완료했었고 이번에 댓글 개수 표시까지 완료함 2. 익명게시판 목록에서 댓글 개수 표시X, 글 내용 페이지에서 댓글 영역 제거 3.

askges20.tistory.com

 

  • 7/29 (진단테스트 결과 내용 추가, 채팅 전체 삭제 기능 구현, 채팅 웰컴 메세지 출력)
 

2021.07.29 개발 일지 (진단테스트 결과 상세 내용, 채팅 전체 삭제, 채팅 웰컴 메세지 추가)

1. 진단테스트 결과 출력 - 테스트 점수에 따라 피해, 가해 정도를 [아주 약함 / 약함 / 보통 / 심함 / 아주 심함]으로 분류하여 상세 진단 내용 출력 - 프로그레스바로 최대 점수 중 몇 점을 차지했

askges20.tistory.com

 

6월 초~중순

6월에는 1학기 마무리를 마무리하는 시점이며 기말고사로 한창 바쁜 시즌이었다.

따라서 6월 초~중순에는 학업에 충실하기로 하여 한이음 프로젝트 개발은 잠시 쉬어가는 타이밍이었다.

종강을 먼저 한 사람부터 앞으로 개발을 하기 위해 공부를 하고 사용할 기술(Dialogflow 등)에 대해 조사하기로 했다.

 

6월 말

우선 비교적으로 구현이 간단할 것으로 판단되며, CRUD의 유사한 기능을 가지는

일기장, 게시판 기능을 6월까지 마무리하기로 하였고 주요 기능 구현을 마쳤다.

 

일기장

일기장 기능에서는 기본으로 지원되는 CalendarView보다는 커스텀 캘린더를 만들어 적용하는 것이

디자인적인 면에서 더 낫다고 생각해서 MaterialCalendarView를 이용하여 구현하는 것을 시도하다가

작성한 코드에서 오류가 발생했는데 그 원인을 1~2주간 고민해도 찾지 못했다.

캘린더 구현 부분에서 너무 오랜 시간을 보내고 있는 것으로 판단하여 결국 MaterialCalendarView 사용을 포기하고

다른 커스텀 캘린더 구현 방법을 찾아보기로 했고 다행히도! 유튜브에서 관련 자료를 찾아 해당 방법을 사용하여 구현했다.

 

게시판

그리고 게시판 기능은 글 작성, 글 목록 조회(DB에서 불러오기) 및 수정/삭제 기능을 구현했다.

게시판은 자유게시판과 익명게시판으로 나뉘는데 fragment 개념을 이용하여 두 게시판을 이동하도록 했다.

아직 로그인/회원가입 구현이 되어있지 않은 상태라 구현이 되고 나면

사용자 계정에 따라 자신이 작성한 글에 대해서만 수정/삭제 권한을 부여할 것이고

각각의 게시글에 대한 댓글 기능, 공감 기능을 추가할 것이다.

 

7월 계획

여름방학 기간 7~8월에 열심히 개발하여 8월 말까지는 개발을 끝내는 것을 목표로 하고 있다!

 

7월에 구현을 끝내야할 사항들을 나열해보았다.

  • Firebase Authentication을 이용하여 사용자 계정 관리, 로그인/회원가입 기능 구현
  • 진단테스트 문항 구성 및 기능 구현
  • Dialogflow 챗봇 인텐트 구성 시작, 앱 화면과 연결하기
  • 일기 작성 시 사진 첨부 기능 추가하기
  • 게시판 댓글, 공감 기능 추가하기
  • 앱 디자인, 레이아웃 개선하기

6월 개발 일지

 

2021.06.21 개발 일지 (게시물 목록 구현, 자체테스트 문항 목록 구현)

1. 게시판 게시물 목록 구현 (RecyclerView 이용) 구현 방법 1) 기존 화면에 RecyclerView 태그 추가 2) 게시물.java 생성 3) 게시물_item.xml 생성 -현재는 CardView 사용, 추후에 레이아웃 수정할 예정 4) 게시..

askges20.tistory.com

 

 

2021.06.25 개발 일지 (게시판 Fragment화, 게시글 작성 및 조회 기능)

1. 게시판 Fragment화 앱에는 자유게시판과 익명게시판, 2개의 게시판이 존재한다. 그런데 기존 코드는 자유게시판/익명게시판 버튼을 터치할 때마다 새로운 Intent를 만들어 페이지 이동을 해서 Inte

askges20.tistory.com

 

5월 초 : 아키텍처 결정 및 개발 환경 세팅

우리 프로젝트는 안드로이드 스튜디오로 진행하는 것으로 생각했었는데

이왕 프로젝트를 진행하는 안드로이드, iOS 모두 지원 가능한 앱을 만들까? 라는 얘기가 잠깐 나왔었다.

네이티브 앱? 리액트? 웹 앱? 등 여러 키워드가 회의 시간에 제시되었지만

결론적으로는 원래 계획대로 안드로이드 스튜디오에서만 구현하기로 했다.

우리 팀은 서버 숙련자가 없기도 하고

앱 자체 기능을 구현하는데도 꽤 오랜 시간이 걸릴 것 같아서

서버단의 작업은 최소화하는게 좋을 것이라고 판단했다.

 

서버 구축에 대해 구글링을 많이 해봤는데

firebase를 이용해서 서버리스 아키텍처를 적용한 안드로이드 스튜디오 프로젝트 사례가 많이 있었고

firebase 이용 관련 문서가 잘 나와있는 것 같아 인터넷을 참고해서 충분히 구현할 수 있을 것이란 생각이 들어서

google에서 지원하는 firebase를 이용하는 것으로 결정했다.

또한 우리가 기획한 기능들 중 챗봇을 이용한 상담 기능이 있어서

챗봇 같은 경우 google의 dialogflow를 이용하기로 했다.

결론적으로 우리 팀의 아키텍처는

1. 안드로이드 스튜디오내에서 UI, 로직을 처리하고

2. dialogflow API를 가져와서 챗봇을 구현하고

3. firebase 서버와 연동하여 서버 운영, 실시간 데이터베이스를 사용하는 것이다.

 

 

코드 형상 관리는 GitHub를 이용해서 진행하는데 안드로이드 스튜디오와 GitHub 연동은 생각보다 수월했다.

 

Firebase 연동도 무난하게 하는 듯 했으나...

실시간 데이터베이스를 이용하기 위해 앱 수준의 gradle 파일에 google service 4.3.6버전 dependency를 추가했는데

빌드를 시도할 때마다 자꾸 오류가 나는 것이었다.

구글링해도 해당 오류에 대한 자료가 너무 없길래 몇 시간동안 절망했는데

알고보니 4.3.6버전 자체 버그가 있던 것이다,,, 아래는 해당 이슈

https://github.com/google/play-services-plugins/issues/176

Could not find setVariantDir after 4.3.6 · Issue #176 · google/play-services-plugins

Describe the bug A problem occurred configuring project ':mobile'. > Failed to notify project evaluation listener. > com.android.build.gradle.internal.crash.ExternalApiUsageException:...

github.com

4.3.6 버전에서 삭제된 메소드를 여전히 호출하는 메소드가 있었던 것..

해당 이슈가 발생한지 얼마 안된 시점이었는데

다행히도(?) 며칠 만에 버그 픽스가 된 4.3.8 버전이 나왔고 Firebase DB와 연동을 마쳤다.

 

5월 중순 : 개발 시작 (레이아웃 구성)

Figma 툴을 이용해서 작성한 앱 화면 프로토타입을 바탕으로

팀원들이 각자 맡은 역할대로 안드로이드 스튜디오 안에서 레이아웃을 구현했다.

현재는 디자인 고려 안하고 화면 해상도에 맞게 레이아웃, 버튼 배치만 한 상태이다. (위의 이미지는 메인 화면)

디자인보단 기능 구현이 우선이라고 생각해서 색 조합이나 이미지뷰는 나중에 고려할 듯 하다.

나는 앱의 주요 기능들 중 일기장 부분 레이아웃을 맡아 일기 내용/작성/수정 페이지 레이아웃을 구현했다.

5월 말 : 일기장 기능 구현 중

우리 팀이 구현할 기능들 중 가장 먼저 일기장 기능을 다뤄보기로 했다.

Firebase DB 사용법을 찾아보며 간단히 일기를 등록하고, 삭제하는 것까지 구현했다.

 

그런데 문제점이 있었으니..

1. MaterialCalendarView

커스텀 캘린더뷰를 구현하기 위해 MaterialCalendar을 활용하려고 하는데

생각보다 MaterialCalendarView와 관련된 자료들이 많이 없으며

특정 부분에서 NullPointerException 에러가 발생하는데 해당 오류의 원인을 찾지 못했다.

2. ViewModel

우리는 MVVM(Model-View-ViewModel) 패턴을 이용하여 개발을 진행하고자 한다.

그런데 안드로이드 스튜디오의 ViewModel과 관련된 자료들을 찾아보았을 때

Kotlin 언어를 이용한 자료들이 대부분.. Java를 사용하여 설명을 작성한 경우가 거의 없었다ㅠㅠ

또한 공식 문서를 읽어보아도 이것을 어떻게 활용해야할지 감이 안와서 난감한 상태다.

 

5월 말에 한번 멘토님과 온라인 미팅을 진행했었다.

본격적인 개발을 하기 앞서 개발 환경 세팅, 아키텍처 결정 등에 많은 시간을 들여서

우리 팀의 개발 속도가 너무 더딘건 아닐지 걱정스러운 마음이 있었는데

멘토님께서는 잘 진행하고 있는 것 같다며 힘이 되는 말씀을 해주셨다.

한이음 프로젝트와 관련된 다양한 조언들을 해주셔서

끝까지 책임감을 가지고 프로젝트를 진행해보겠다는 의지를 다시 한번 다잡을 수 있었다.

4월 5일이 한이음 신청 마감일이었고 우리 팀은 4월 4일에 계획서를 제출했다.

그리고 4월 13일에 프로젝트 개설 심의 결과가 나왔는데

다행히도 개설 승인이 되었다! 한이음 사이트에 팀 블로그가 만들어졌다.

팀 블로그를 보니 팀 총 130만원의 지원비가 있는 것으로 확인된다.

우리 팀은 앱 개발이라 지출이 많을 것 같진 않다.

만약 서버 사용량이 많아진다면 지원비로 요금 지불할지도?

 

한이음 프로젝트 진행은 확정되었으니

본격적인 개발 시작을 앞두고 어떤 아키텍처를 적용할지,

어떤 프레임워크와 API들을 사용할지 고민하기 시작했다.

 

컴공을 4년째 재학 중이지만... 전공 과목으로 다뤄본 프로그램은 생각보다 그렇게 많지 않기도 하고

더군다나 앱 개발은 학교에서 배운 적도 없기 때문에 어떤 기술을 이용해야할지 많이 막막했다.

4월 말에는 한창 중간고사 기간이라 회의를 못하고

시험이 끝난 5월 초에 다시 제대로 프로젝트를 진행하는걸로 결정했다.

한이음 프로젝트를 시작한지 몇달 되긴 했으나

티스토리를 개설한 기념으로(?) 매달 프로젝트 진행 상황을 정리하는 포스팅을 업로드하려고 한다.

 

 


 

우리 학교 교내 비교과 프로그램 중 "문제해결 프로젝트"가 있는데

다양한 문제에 대해서 팀을 구성해서 프로젝트를 진행하는 활동이다.

나는 컴공 4학년이지만 지금까지 이렇다 할 포트폴리오와 프로젝트 경험이 없어서

이번 학기를 빡세게 보내고자, 캡스톤 외의 프로젝트를 찾아보았었다.

그리고 학기 초에 에타에서 앱 개발 프로젝트를 진행할 사람을 모집한다는 글을 보고

쪽지를 보내서 프젝에 참여하게 되었다.

 

앱 개발을 목표로 하여 팀원 구성은 완료되었지만

어떤 앱을 개발할지 주제가 정해지진 않았었다.

따라서 3월에는 앱 개발 방향성에 대한 논의를 진행했고

그 결과 "학교 폭력"과 관련된 앱을 개발하기로 결정했다.

앱의 주요 기능 구성에 대한 회의가 꽤 오래 걸린 듯 하다.

개인적으로는 개발보다 기획이 더 어려운 것 같다..

그리고 교내 비교과 프로젝트에 참여할 뿐 아니라

한이음 ICT 멘토링도 신청하기로 했다.

아무래도 프로젝트 경험이 적은 학생들끼리 모여서 하다보니 어려움이 많을 것 같기에

프로젝트 지도를 해줄 수 있는 멘토의 역할이 필요할 것 같았다.

그래서 3월 중순부터 말까지는 한이음 프로젝트 계획서를 작성했다.

프로젝트 신청을 한다고 해서 다 진행될 수 있는게 아니라

멘티가 올린 계획서를 보고 자신이 이 팀의 멘토가 되겠다! 라고 해주시는 멘토님이 나타나야 한다.

그리고 멘토-멘티의 매칭 이후에 계획서를 보완해서 신청 완료해야

최종적으로 프로젝트 진행 승인 여부가 나온다.

비교과 프로젝트 계획서 작성 내용을 바탕으로 한이음 계획서를 작성해서 한이음 사이트에 올렸고

정말 운 좋게도! 계획서를 올린지 몇 시간 후에 우리 팀을 지도해주시겠다는 멘토님이 나타나셨다.

멘토님의 조언을 바탕으로 계획서 수정을 하는데 정말 계획서 적기가 너무 어려웠다.

글 작성도 그렇고 흐름도같은 시각적 자료를 나타내는게 만만치 않은 일이었다.

 

+ Recent posts