Hello World

11월 30일에 한이음 프로젝트가 공식적으로 종료된다.

마지막으로 한이음에서 프로젝트 성과물 등록을 지원해주는데

우리는 앱 등록을 하기로 했다.

구글 플레이스토어 앱 등록 절차 설명 :

https://support.google.com/googleplay/android-developer/answer/6112435?hl=ko#zippy=%2C%EB%8B%A8%EA%B3%84-google-play-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EA%B3%84%EC%A0%95-%EB%A7%8C%EB%93%A4%EA%B8%B0 

오늘은 개발자 계정 등록까지 해보는걸로~~

먼저 구글 계정을 새로 만들었다.

개발자 계정으로 만들기 위해서는 2단계 인증을 반드시 거쳐야한다.

2단계 인증을 완료하면 구글 플레이 콘솔에서 개발자 계정 생성을 시작한다.

개발자 이름(추후 수정 가능), 담당자 이름, 연락처 이메일 주소, 연락처 전화번호, 웹사이트를 입력하고

Google Play 개발자 배포 계약 동의와 Google Play Console 서비스 약관 동의를 한다.

입력을 완료하면 결제 화면으로 넘어간다.

VISA 카드 번호와 유효기간, CVC 번호를 입력해서 결제 완료!

최초 개발자 계정 등록시에 25달러가 결제된다.

등록 수수료 영수증은 이메일로 왔고 결제 금액을 보니 3만원 정도 나왔다.

계정 생성 완료까지는 생각보다 간단했다.

콘솔을 둘러보니 개발자 계정에 접근할 수 있는 사용자를 추가할 수 있었다.

다음과 같이 각 사용자에 대해 권한을 관리할 수 있었고 모든 권한으로 팀원들을 초대했다.

앱에서 게시판이라는 커뮤니티 기능을 제공해서 글을 작성하고 댓글로 소통할 수 있긴 하지만

어딘가 정적이라는 느낌이 들어서 해결 방법을 여러가지 생각해보았고

그 결과 알림 기능을 추가하는걸로 결정했다.

알림을 추가하는 경우는 3가지로 생각했고, 각 알림을 클릭했을 때 특정 화면으로 넘어가게 설계했다.

1. 회원가입 완료 알림 -> 클릭 시 이용안내 페이지로 이동

2. 작성한 글 새로운 댓글 알림 -> 클릭 시 해당 글 내용 페이지로 이동

3. 마음 온도 60점 이상 달성 시 게시판 기능 해제 알림 -> 클릭 시 게시판으로 이동

메인 화면 상단바 오른쪽에 알림 아이콘을 추가했다.

읽지 않은 알림이 있으면 사진에 나온 것처럼 빨간색으로,

모든 알림을 읽었으면 회색으로 나온다. (물론 아이콘 모양도 바뀜)

알림 목록 페이지에서 각 알림 이미지(추후 수정 예정)와 알림 제목, 내용, 날짜, 읽음 여부가 출력된다.

댓글 알림을 클릭하면 해당 게시글 페이지로 이동해서 어떤 글에 달린건지 알 수 있다.

맨 아래에 있는 마음 온도 60점 달성 알림을 클릭하면 게시판으로 이동한다.

알림 기능 만드는 것 자체는 어렵지 않아서 2~3시간만에 후다닥 만들었다.

다만 자잘한 오류가 있는 것 같아서 계속 테스트하고 해결해가는 중이다...

앱에서 제공할 기능들은 다 완성한 상태라

이제 앱 전반적인 레이아웃과 디자인만 보완하면 될 듯 하다.

그래서 오늘은 게시판 레이아웃을 전체적으로 손보고 유효성 검사를 추가했다.

개발 내용

1. 게시판 카테고리 버튼 TabLayout 적용

게시판 카테고리가 총 4개가 있는데 각 게시판을 fragment로 만들고

상단에 있는 게시판 이름 버튼을 클릭해서 fragment를 불러오는 방식으로 작동한다.

버튼 4개를 나열해놓으니 디자인이 투박한 것 같아서 보완하기 위해 구글링해봤는데

내가 원하던 디자인을 구현하는데 필요했던 TabLayout이라는 레이아웃을 찾았다.

https://developer.android.com/reference/com/google/android/material/tabs/TabLayout

TabLayout 적용 전후 사진을 비교해봤을 때 훨씬 깔끔한 느낌이 든다.

2. 게시판 글 작성 레이아웃 수정

제목과 내용을 입력할 때 키보드가 올라오면서 작성하고 있는 부분이 화면에서 안보이는 문제가 있어서

전체적으로 레이아웃을 갈아엎었다.

3. 게시판/일기장 사진 클릭 시 확대 페이지로 이동 (image-zoom-view)

일기장에 있던 사진 첨부 기능을 게시판에도 적용하게 되어 한층 더 완성도가 높아지긴 했는데

어딘가 허전한 느낌이 드는 것이다... 그래서 에브리타임이나 네이버 카페에서 글을 확인할 때를 떠올려봤는데

이미지를 클릭했을 때 확대할 수 있는 기능이 들어가면 좋겠다는 생각이 들었다.

검색해보니 image-zoom-view라는 라이브러리가 있어 간편하게 줌 기능을 적용할 수 있었다!!

https://github.com/hsmnzaydn/image-zoom-view

dependency 추가하고 기존에 ImageView였던 것을 ImageZoomView로 바꾸기만 하면 끝.

이미지를 확대할 수 있게 되었다~~

4. 게시판 글 작성 취소 팝업 추가

사소한 기능이긴 한데 글 작성하다가 뒤로 가기 버튼을 실수로 눌러서 작성하던 글이 날아가는 것을 방지하기 위해

뒤로 가기 버튼을 눌렀을 때 글 작성 취소 확인 팝업을 추가했다.

5. 게시판 글 작성 완료 시 유효성 검사

제목, 내용을 작성하지 않고 글을 등록하는 것을 방지하기 위해 유효성 검사를 추가했다.

며칠 전에 YouTube API 연결을 시도할 때만 해도 갈 길이 멀다고 생각했는데

생각보다 빠른 기간 안에 기능을 거의 다 구현한 듯 하다.

오늘은 주로 영상 시청 관련 디테일을 추가하고, 디버깅을 하였다.

개발 내용에 앞서 에뮬레이션 이용 후기를 적도록 하겠다.

에뮬레이션 이용 후기

한이음 ICT 멘토링에서 에뮬레이션 이용을 지원해줘서 우리 팀은 8월 2주차 이용을 신청했다.

지원받은 에뮬레이션은 클라우드 기반 테스트 서비스인 Remote TestKit인데 Web 사용 방법과 Client 사용 방법이 있었다.

안드로이드 스튜디오에서 에뮬레이션을 연결하기 위해서는 가상 ADB(Android Debug Bridge) 기능을 이용해야 하므로

Client 사용 방법에 따라 응용 프로그램을 설치하고 이용해보았다.

응용 프로그램을 실행해보면 대여 가능한 단말기 리스트가 쭉 나오고 단말기 정보로는 통신사, 제조사, 단말기명, OS, 단말 위치 등이 나와있었다.

대여 시간은 30분 또는 60분으로 선택 가능했고 여러 단말기를 대여해서 테스트를 해봤다.

평소에 개발할 땐 하나의 기기에서 테스트를 하는데, 에뮬레이션을 이용하면 다양한 기종의 스마트폰에서 앱을 테스트해볼 수 있다는 점이 좋았다!

개발 내용

1. 시청한 영상 개수 출력

총 몇 개의 영상이 있고 그 중에서 몇 개의 영상을 시청했는지 사용자에게 보여주도록 하였다.

2. 마음 온도 60점 달성 시 게시판 기능 해제 알림 팝업

마음 채우기 영상을 시청하여 마음 온도가 60점 이상이 될 경우, 게시판 기능이 해제된다.

영상 시청 화면에서 뒤로 가기 버튼을 클릭할 때 영상 시청 완료 팝업 이후 해당 팝업을 띄운다.

3. 이전에 시청했던 영상 팝업 추가

이미 시청했던 영상은 다시 본다고 해도 마음 온도가 오르지 않는다.

따라서 영상 시청 전에 미리 팝업을 띄워 사용자에게 알려주도록 하였다.

다만 마음 채우기 화면은 AppCompatActivity가 아닌 YouTubeBaseActivity를 상속받기 때문에

팝업에 기본 폰트가 적용되지 않는다... 폰트 적용 방법을 찾아봐야겠다.

4. 화면 회전 방지
에뮬레이션으로 테스트하며 이것저것 버튼을 눌러보다가 화면 회전 버튼을 눌렀더니

회전이 되어 화면에 있는 버튼과 각종 레이아웃이 찌부(...)되는 것이다..

그래서 회전 방지하는 방법을 찾아봤는데 AndroidManifest.xml에서 각 액티비티마다 android:screenOrientation="portrait" 를 추가하면 된다고 한다.

<activity android:name=".MainActivity" android:screenOrientation="portrait"/>

이런 식으로 모든 액티비티에 대해 screenOrientation을 추가해줬더니 가로로 회전이 되지 않았다.

5. 일기장 캘린더 사라지는 문제 해결

메인화면에서 일기장 화면으로 넘어갈 때 어떨 때는 캘린더가 뜨고, 어떨 때는 안뜨는 버그가 있었다.

열심히 콘솔 찍어보면서 로직 상 잘못된 부분이 없는지 확인해봤는데

로직이 잘못된건 아니었고 스레드를 생성해서 그 안에서 어댑터의 notifyDataSetChanged() 메소드를 실행하며 해결!!

https://stackoverflow.com/questions/24740557/notifydatasetchanged-not-working-on-recyclerview/24740763

이 답변 적어주신 분께 진심 감사합니다...... 스레드 안에서 작동해야 제대로 결과가 반영된다는 사실을 알게 되었다.

안드로이드 스튜디오에서 YouTube API를 이용하여 유튜브 영상을 앱 화면에 띄우는 것은 어제 완료했었다.

오늘은 본격적으로 마음 채우기 (영상 시청) 기능을 구현했다.

구현하면서 고려한 점

1. 영상 관련 데이터를 어디에, 어떻게 저장할지

• 영상 정보(id, 제목, 설명)는 json 파일로 프로젝트 자체에 저장
• 사용자의 영상 시청 기록은 firebase DB에 저장하기로 함

2. 영상 시청 완료 기준

• 해당 영상의 길이만큼 시청해야 완료
• 단, 영상 하단의 스크롤바를 이용하여 시간을 건너뛰는 것을 고려하여 실제로 영상이 재생된 시간을 구해야함

3. 마음 온도 높이는 기준

• 시청 기록이 없는 영상에 대해서만 마음 온도 증가, 이미 시청 완료한 영상은 마음 온도가 오르지 않음
• 하나의 영상을 시청했을 때 5점 증가

개발 내용

1. 마음 채우기 영상 목록 ListView 구현

지금까지 앱을 개발하면서 RecyclerView, ListView를 많이 이용하였기 때문에

이번에도 Model을 만들고 Adapter을 생성해서 ListView를 만들었다.

2. 영상 누적 시청 시간 체크

이 부분을 구현하면서 시간이 꽤 걸렸는데, 앞서 고려한 점에서 언급한 것처럼

영상을 제대로 시청하지 않고 타임라인을 이동하여 영상 시청을 끝내는 것을 방지해야 했다.

실제로 재생된 시간만 리턴하는 메소드를 찾아보았으나 YouTube API에서는 해당 메소드를 제공하지 않는 것으로 보였다.

따라서 스레드를 이용하여 직접 구현하였다.

스레드는 1초마다 cnt 값을 높이면서 재생한 시간(초)을 높인다.

이것이 영상의 길이와 일치하게 되면 스레드는 종료되고 영상 시청 완료 처리를 하는 것이다.

영상 재생 시작, 일시정지 후 다시 재생을 할 때 스레드가 동작하도록 하고

일시정지 (또는 정지) 시에는 스레드를 일시중지시키도록 하였다.

YouTube API 관련 메소드들은 공식 문서에서 찾아볼 수 있었다

https://developers.google.com/youtube/android/player/reference/com/google/android/youtube/player/YouTubePlayer?hl=ko 

3. 영상 시청 기록 DB 저장

정상적으로 영상 시청을 완료하고 스레드가 종료되면 firebase DB에 사용자의 uid와 영상의 id 정보를 저장한다.

4. 시청 완료한 영상 DB 조회 후 화면에 표시

firebase DB를 조회하여 시청 완료한 영상에 대해서 시청 완료 표시를 한다.

5. 영상 시청 화면에서 뒤로가기 버튼 클릭 시 팝업 띄우기

영상 시청을 완료한 후 눌렀을 땐 마음 온도가 올랐다는 팝업을 띄우고

영상 시청 중간에 뒤로가기를 눌렀으면 시청을 완료하지 않았음(마음 온도가 오르지 않음)을 알리는 팝업을 띄운다.

6. 메인 화면 메뉴 이미지 추가

메인 화면 디자인을 보완하기 위해 팀원분이 직접 그린 이미지를 추가하였다.

회의 내용

오늘 오전 9시에 회의에서 마음 채우기 프로그램의 영상 개수, 마음 온도 높이는 기준과 게시판에 대해 얘기했다.

교화 프로그램(마음 채우기)에서 제공할 영상의 개수는 10개,

사용자의 영상 시청 시간을 측정하여 마음 온도를 높이기로 했다.

각 영상마다 시청했는지 체크하는 것을 구현해야하는데 이 부분 구현이 조금 오래 걸릴지도 모르겠다.

주요 변동사항은 게시판 기능에 관한 것이었는데,

기존에 있는 자유게시판/익명게시판의 분리, 게시판 기능 제한의 모호성에 대해 논의한 결과

게시판의 카테고리를 세분화하여 질문게시판과 꿀팁게시판을 추가하기로 했고

마음 온도가 60 보다 낮은 사용자는 아예 게시판에 접근이 불가능 (조회도 불가능) 하게 제한하는 것으로 결정했다.

그 외 회원가입 시 이메일 인증과 닉네임 중복 체크 추가, 메인 화면의 마음 온도 실시간 반영 등을 구현하기로 했다.

개발 내용

1. YouTube API를 이용한 YouTubePlayerView 초기화 문제 해결

- 갤럭시S20+로 테스트를 해봤는데 유튜브 플레이어의 초기화에서 오류가 발생했었음

- 다른 팀원들은 오류가 발생하지 않았는데 어째서 나만...? 고민

   → 구글링 결과, Android 11 (API 30+)는 AndroidManifest.xml에 추가적으로 코드를 작성해야했음

https://github.com/PRNDcompany/YouTubePlayerView/issues/12

2. YouTube API 로드 후 썸네일 불러오기, 재생/일시정지 버튼 구현

- cueVideo(String videoId) 메소드를 이용하여 썸네일을 로드할 수 있었음 (아래 링크 참고)

https://developers.google.com/youtube/android/player/reference/com/google/android/youtube/player/YouTubePlayer?hl=ko 

3. 챗봇 상담 기관 전화, 웹사이트 링크 활성화

- 챗봇의 응답 중 학교 외에 학교폭력 관련 도움을 받을 수 있는 센터 등의 전화번호, 웹사이트 주소를 포함하는 것이 있음

- 전화번호, 링크를 클릭하여 전화 화면 또는 인터넷으로 이동할 수 있도록 autoLink 속성을 추가함

https://saeatechnote.tistory.com/entry/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-link%EA%B1%B8%EA%B8%B0

4. 게시판 카테고리 세분화

- 회의 결과에 따라 자유게시판/질문게시판/꿀팁게시판/익명게시판 으로 카테고리를 세분화함

- 익명게시판만 닉네임이 안보이고 댓글 기능을 제공하지 않음

5. 게시판 파이어베이스 DB 구조 변경

기존에 DB 구조는 다음과 같이 루트 하위 구조로 각 게시판이 있었는데

루트

ㄴ자유게시판

ㄴ익명게시판

게시판 카테고리가 늘어나면서 하나로 묶는게 나을 것 같다는 생각이 들었음

변경된 구조 :

루트

ㄴ게시판

  ㄴ자유게시판

  ㄴ질문게시판

  ㄴ꿀팁게시판

  ㄴ익명게시판

6. 게시판 이용 안내 팝업 추가

- 각 게시판의 용도를 안내하는 내용을 포함

7. 마음 온도가 낮은 사용자의 게시판 기능 제한

- 메인 화면에서 게시판 버튼 클릭 시, 테스트 결과 유무 및 마음 온도 확인

- 마음 온도가 60 보다 낮은 사용자는 게시판을 이용할 수 없으며, 마음 채우기 기능을 이용할 것을 권장하는 팝업을 띄움

오전 일찍 회의하고 회의 끝나자마자 개발했더니 이것저것 많이 구현한 듯 하다.

유튜브 API 연결을 하루만에 끝낸게 다행스럽다. (파이어베이스, 다이얼로그 플로우 연결할 때 꽤나 오래 걸렸던 기억이...)

기능 제한도 끝냈으니 이제 마음 채우기 페이지에 영상 목록을 띄우고,

각 영상을 시청할 때마다 마음 온도를 높이는 것 구현을 시작해야겠다!!

테스트 결과를 바탕으로 마음 온도를 산출하고, 마음 채우기 페이지를 안내하는 것을 중점적으로 구현했다!!😎

1. 테스트 결과 확인 후 마음 온도 DB에 저장

2. 테스트 결과 화면에 "마음 채우기 기능 해제" 팝업 띄우기

- 뒤로가기 버튼 클릭 시 팝업 출력

- 이동하기 버튼 클릭 시 마음 채우기 안내 페이지로 이동

3. 마음 채우기 안내 페이지 레이아웃 틀 잡기

- 마음 채우기 프로그램의 목적과 방법을 안내할 예정

- 마음 채우러 가기 버튼 클릭 시 영상 시청 화면으로 이동

4. 팝업(AlertDialog) 디자인 커스텀

- 커스텀 폰트 지정

- 직사각형 모양 -> 둥근 사각형

5. 메인화면 디자인 수정

- 각 버튼마다 아이콘 추가, 배경 색상 변경

6. 사이드바 헤더에 유저 닉네임, 학교 출력

테스트, 상담, 일기장, 게시판 기능을 다 구현해서 주요 기능 구현은 끝난 상태였는데,

생각보다 마음 채우기 (교화 프로그램 시청) 기능을 구현하기 위해 해야할 일들이 많다.

테스트 결과를 바탕으로 마음 온도 산출과 DB 저장은 끝냈으니

이제 본격적으로 Youtube API를 이용해서 영상 시청 기능을 제공하고,

게시판의 기능 제한을 구현해야겠다.

1. 로딩 화면(스플래시 화면)에서 firebase DB 데이터 불러오는 문제 해결

- 스레드의 run 메소드 안에 DB 조회 코드가 들어있던 것이 문제... 스레드 밖으로 해당 코드를 뺐더니 해결!

- 하지만 지금은 스레드의 딜레이 시간을 고정으로 준 상태라 그 시간 내에 데이터를 불러오지 못할 수도 있음

- 따라서 확실히 DB 데이터 조회를 완료한 후 액티비티가 이동할 수 있도록 보완할 필요가 있음

2. 챗봇 답장 '일기장으로 이동합니다' 출력 시 일기장 액티비티로 이동

- 이 외에도 dialogflow 자체에서 처리할 수 없는 것들은 안드로이드 스튜디오에서 코드 작성해서 처리해야할듯

3. 진단테스트 안내 문구 추가

- 테스트 진행 전 테스트 목적, 문항 수, 유의사항 등의 안내를 확인할 수 있음

지난 일요일에 회의에서는 테스트 결과에 따라 마음 온도를 어떻게 설정할건지,

마음 온도에 따라 앱 기능의 제한 정도, 게시판 기능의 모호성 등을 논의해보았다.

슬슬 앱의 디자인을 제대로 꾸미기 위해 이모티콘 그림도 각자 그려오기로 했고 (일요일 회의때 대회 진행할 예정 ^_^)

새 기능을 구현하기 위해 각자 역할 분담해서 수행해오기로 했다.

8월 30일까지 한이음 공모전 접수 마감이니까 호다닥 개발해버리자~!😎