일주일간 미뤄둔 TIL 드디어 다시 컴백!

지난 일주일은 첫 프로젝트 주간이라 진짜 정신이 하나도 없었다.

프로젝트를 잘 완수하고싶어서 코드카타도 미뤄두고 프로젝트에만 매진했는데도

금요일까지 끝내려고 했던 계획이 무산되고 주말까지 나와서 다들 고생하셨당..

우리팀 체고!!!

기록도 열심히 했어야했는데 기록도 제대로 못하고 진행해서

다 끝낸 오늘 기억나는 것들 위주로 첫번째 프로젝트를 정리할 것!

프로젝트 개발일지

팀 이름 : 주빈과 아이들

프로젝트 주제 : SNS 앱 만들기

프로젝트 필수 구현사항

• 메인 화면
• 디테일 화면
• 로그인 회원가입 화면
• 마이 페이지 화면
• Activity 전환 시 애니메이션 구현
• 영어버전 적용하기

프로젝트 선택 구현사항

• ImageView 동그랗게 만들기
• 스크롤기능 사용하기
• 더보기 기능
• Font 크기 설정에 따라 글씨 크기 달라지게 만들기
• Dark Theme 구현하기
• 가로모드 구현하기
• 회원정보 관리 구현하기

개발 타임라인

1. 첫 기획 회의

1.회의 방식

Figma 잼에서 아이디어 회의 , Figma로 와이어 프레임 제작

2.논의한 내용

• 앱의 주제 ( sns의 메인 주제 정하기)
• 앱 이름, 아이콘 컨셉 투표
• 앱 컬러코드와, 폰트사이즈 등 논의
• 개발 룰( IDE, SDK, 등 등 개발환경, Git Commit 규칙, 브랜치 규칙 등)
• 각 화면 구성요소, 디자인 논의
• 인원 배분

3.논의 결과

• 앱 이름 : PlayList

• 앱 주제 : 종합 게임의 리뷰를 공유하며 본인 취향에 맞는 게임을 찾을 수 있게 도와주는 SNS

• 컬러 코드

  

  Primary Color : A2C9E9

  Secondary Color : D4E2ED

  White : FFFFFF

  Gray : BCBCBC

  Black : 222222
  

• 폰트 & 사이즈

  폰트 : Pretendard

  

• 개발 룰 :

  • Android Studio 버전 : jellyfish
  • SDK 14.0
  • Emulator Pixel 7 API 33
  • 깃 컨벤션 : 작업한사람인식코드(맡은 Activity 첫글자)_ 날짜.주(완성).부(기능).패치(소소한추가, 수정) 아이디이름 규칙 : 뷰종류사용액티비티기능

• 와이어프레임? 디자인?

피그마로 회의하면서 와이어 프레임이 뭔지 모르는 분도 계시고 해서

와이어 프레임 설명드리고, 어떻게 디자인 회의를 할까 하는데, 사실 나는 한명이 디자인 싹 맡아서 하는게 효율은 제일 나을 것 같았지만, 그러면 모두의 의견을 다 반영하기 어려울 것 같고, 다들 피그마 사용에 익숙해지면 좋은데 피그마를 한번도 안 써보신 분도 게셔서 그냥 다들 페이지 하나씩 맡아서 진행하면 경험이 되어서 발전하는데에는 더 좋지 않을까해서 각자 페이지 하나씩을 디자인 맡았다.

근데 처음에는 와이어 프레임 건너뛰고 바로 디자인 할 것 처럼 말했던 것 같은데 만들고 보니 나만 디자인처럼 만들고 다른 분들은 와이어 프레임으로 만들어놓으셔서 좀 통일이 안됐다..ㅜ

나중에 끝나고는 다들 그냥 한명이 맡아서 하는게 나았을 것 같다고 하는 의견이 나와서 앗..그냥 그때 얘기할 걸 싶은 생각이 들었지만 그래도 나는 다 같이 참여해서 피그마 한번씩 만져보고, UI 구성에 의견 내보고 하는게 나쁘지 않았다고 생각함~!

• 인원 배분 대충 만들어 놓은 디자인인지 와이어프레임인지 모를 놈들을 가지고 인원 배분을 했다. 나는 어떤 액티비티를 해도 상관이 없어서 다른 분들에게 선택권을 드리고 남은걸 가져옴! 나는 Detail Activity를 맡게 되었당! 사람은 다섯인데 페이지는 여섯개라서 가장 UI적으로 간단한 회원가입 로그인을 한 사람이 맡기로 했다!
  

2. Git Repository 생성 후 브랜치 나누고 개발시작

개별적으로 작업을 들어가기 전, 레포지토리를 생성하고, 기초 프로젝트를 만들고, dev브랜치를 만들고 각자 feature 브랜치를 만들어서 작업을 시작했다.

나는 Detail Activity 를 맡아서 작업했기 때문에

feature_detail이라는 브랜치를 만들어서 작업했다.

처음 협업 때 뭔지도 모르고 git 써봤던게 그래도 많이 도움이 됐다.

역시 서당개 삼년이면 풍월을 읊는다는 말이 쌩구라가 아님. 옆에서 뭔지도 모르는걸 보기만 해도 나중에 직접 할 때 훨씬 도움이 된다.

사실 내가 맡은 페이지가 그렇게 어려운 페이지가 아니여서 처음에는 딱히 어려운 점이 없었다.

Datail Activity 에서 사용한 기술 중 기억에 남는 것들

1. Rating Bar

구성하던 중에 별점 주는 기능은 어떻게 구현할까. 하고 찾다가 Rating Bar라는 걸 알았다.

ㄹㅇ 개꿀 기능!

이런게 있는지 모르고 처음에 별점 구상했을때는

코드로 직접 짜야되는 줄만 알고 고생할수도 있겠다 생각했는데 Rating Bar라는 기능이 있어서 쉽게구현했다.

Rating Bar 간단 설명

• 간단하게 별점을 구현할 수 있는 기능
• 유용한 속성
  • isIndicator : false로 두면 화면에서 유저가 직접 별점을 드래그해서 움직일 수 있어지고, true로 두면 초기에 지정된 별점이 그대로 유지된다.
  • numStars : Int값대로 별의 최대 개수가 설정된다.
  • rating : 초기에 설정하는 값
  • stepSize : 별점의 점수가 움직이는 최소단위를 설정할 수 있다.
• 내가 사용한 예시

  <RatingBar
  		android:id="@+id/rb_d_user_rating"
  		android:layout_width="wrap_content"
  		android:layout_height="wrap_content"
  		android:layout_marginTop="16dp"
  		android:isIndicator="true"
  		android:numStars="5"
  		android:progressTint="@color/primary"
  		android:rating="3.5"
  		android:stepSize="0.5"
  		app:layout_constraintStart_toStartOf="@id/tv_d_username_rating"
  		app:layout_constraintTop_toBottomOf="@id/tv_d_subtitle_user_rating" />

2. include

처음에는 바텀 네비게이션 바를 만들어서 서로 넣어주기 위해서 사용했는데, 결국 나중에는 모션레이아웃을 사용하게 되면서 코드가 복잡해져서 하나의 xml에서 작성했던 애들을 header와 scroll 파트로 나눠서 각각 다른 xml에 옮겨적어주고, include로 가져왔다.

include 간단 설명

• 다른 xml 파일을 간단하게 해당 xml에 가져와서 xml 파일의 재사용성을 높여주는 기능
• 사용방법 : 간단하게 그냥 include 태그를 열어주고 layout=”가져올 레이아웃 이름” 적어주면 끝
• 내가 사용한 예시

  <include
      android:id="@+id/d_navigation"
      layout="@layout/bottom_navigation_view"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:layout_constraintBottom_toBottomOf="parent"/>

3. Regex 이용한 가격 표시

게임의 가격 정보를 받아서 표시할 때 받는 정보에서는 그냥 Int값이 들어오는데, 그러면 너무 보기 어렵기도 하고 딱 보기에 예쁘지가 않길래, Regex를 통해서 받은 값에 콤마를 찍어서 표시하도록 만들어줬다.

tmi : 처음 써보는 건 아니지만, 프로젝트나 과제에서 실사용? 하는 건 처음이라서 미리 공부해놓은게 뿌듯해짐!

Regex 간단 설명

• Regular Express 의 줄임말. 정규식이라고도 부른다.
• 어떤 문자열의 패턴을 분석하여 변환해주거나, 유효성 검사를 하거나 등에 자주 쓰임
• 내가 사용한 예시

  fun priceRegex(priceString: String): String {
          var finalPrice = ""
          if (priceString == "0") {
              finalPrice = "무료 게임"
          } else {
              val regex = Regex("(\\d)(?=(\\d{3})+(?!\\d))")
              finalPrice = "₩ " + priceString.replace(regex, "$1,")
          }
          return finalPrice
      }

4. 텍스트 더보기 기능

리뷰의 글 부분이 길 때 처음부터 리뷰를 전부 표시하지 않고, 처음에는 두줄만 보이다가 유저가 더보기를 클릭하면 리뷰를 전부 볼 수 있게 만들었다.

TextView의 maxlines와 ellipsize라는 속성을 조정해서 만듦

maxlines : 텍스트뷰가 보이는 최대 줄 수 설정

ellipsize : 속성을 end로 주면 maxline으로 줄여졌을 때 보이는 마지막 글자들 뒤에 …이 붙어서 나온다.

• 내가 사용한 예시

userReview.maxLines = Int.MAX_VALUE

        userReview.viewTreeObserver.addOnGlobalLayoutListener(object :
            ViewTreeObserver.OnGlobalLayoutListener {
            override fun onGlobalLayout() {
                if (userReview.lineCount <= 2) {
                    showMore.visibility = View.GONE
                } else {
                    showMore.visibility = View.VISIBLE
                }

                userReview.maxLines = 2
                userReview.viewTreeObserver.removeOnGlobalLayoutListener(this)
            }
        })
        showMore.setOnClickListener {
            if (userReview.maxLines == 2) {
                userReview.maxLines = Int.MAX_VALUE
                showMore.text = "닫기"
            } else {
                userReview.maxLines = 2
                showMore.text = "더보기"
            }
        }

추가 설명 : 처음에는 showMore.setOnClickListener로만 만들었는데 저렇게만 하니까

애초에 2줄이 안넘는 짧은 리뷰에도 더보기가 있어서 UX적으로 사용자가 헷갈릴 것 같아서 애초에 2줄이 안되는 리뷰에는 더보기가 나오지 않게 만들어주기 위해서 viewTreeObserver를 사용해서 뷰가 그려진 이후에 라인을 세고 줄 수에 따라서 더보기의 visibility를 설정해주었다.

5.overridePendingTransition

필수 구현사항인 액티비티 전환 시 애니메이션 구현을 하기위해 넣었다.

나는 화면 디자인에 어울리게 메인 액티비티에서 디테일 화면을 눌렀을 때 아래에서 위로 화면이 나오는 것처럼 나오고, 닫기를 누르면 아래로 다시 내려가면서 종료되게 만들었다.

overridePendingTransition 간단 설명

• 이제는 deprecated 된 코드임 (하지만 먼저 애니메이션 적용하신 팀원 분이 이걸로 적용하셔서 통일성을 위해? 그리고 따로 새로운 방법을 공부할 시간이 별로 없었어서 해당 기능을 사용했다.)
  
• 사용방법 :
  1. xml 로 태그를 사용해서 translate를 지정해줌 ( 액티비티의 이동을 어떻게 할건지와 애니메이션 지속시간을 정의)
  2. 코드에서 적용
• 내가 사용한 예시

          overridePendingTransition(R.drawable.slideup, R.drawable.no_animation)
  
          val back = findViewById<ImageView>(R.id.iv_icon_back) // < 뒤로가기 버튼
  
          back.setOnClickListener {
              super.finish()
              overridePendingTransition(0,R.drawable.slideout)
          }

  <?xml version="1.0" encoding="utf-8"?>
  <set xmlns:android="http://schemas.android.com/apk/res/android">
      <translate
          android:fromYDelta="100%"
          android:toYDelta="0%"
          android:duration="500"/> <!-- 애니메이션 지속 시간 (밀리초) -->
  </set>

• 주의 사항 : drawable의 아이디 값을 인자로 받기 때문에 0으로 주면 애니메이션이 적용안되는 것과 같지만, 0으로 주는것과 파일을 만들고 거기에 아무것도 적지 않은 파일을 만들어서 적용해주는 것과 차이가 있을 수 있음
• 아직 정확히 왜인지는 모르지만 뒤로가기 버튼에서 첫번째 인자를 0으로 주었을때는 뒤의 메인 액티비티가 잘 보이는 상태로 내 액티비티가 내려가는데, 내 애니메이션이 등장할때에는 빠지는 액티비티의 애니메이션을 0으로 주면 애니메이션이 시작되면서 뒤에 화면이 메인액티비티가안나오고 검은색이 표시됨.

6. Motion Layout

튜터님이 Sa 피드백으로 이런 레이아웃이면 모션 레이아웃을 사용해서 해보면 좋을 것 같다고 한번 공부해서 넣어보라고 미션같은 아이디어를 주시고,, 참고할 자료도 주셔서 공부해서 적용함!

모션 레이아웃 간단 설명

• 레이아웃에 모션을 줄 수 있게 컨스트레인트 레이아웃의 업그레이드 버전
• scene.xml 파일을 작성해주고 layout description에 넣어주면 된다.
• scene 파일에는 start와 end의 아이디와, 각 모션 적용해줄 애들의 위치를 지정해주면 됨
• scene 파일에서는 OnSwipe , OnClick 으로 트리거 옵션도 설정 할 수 있다.
• scene파일에서는 레이아웃에 대한 위치 조절만 가능하고, 뷰의 옵션을 조절하고 싶을 때는 코틀린 코드에서.setTransitionListener를 사용해서 시작시점의 속성, 변화 중의 속성, 전환완료시의 속성, 트리거시의 속성 등을 설정할 수 있다.

그 외 작업하면서 알게된 소소한 팁..?

println으로 로그 확인하는 방법

drawable id? 나 id 값들이 인트값이였다는것?

log로 찍어보면서 오류 해결하는 방식

3. 1차 개발 완료 후 머지

한번 다같이 dev에 머지를 하고 작업 진행 상황을 한번 확인하고, 어떤걸 더 하면 좋을지 등을 논의 했다.

건의사항 :

• 로고에서 글씨부분에서 list크기를 줄이고 play색을 더강조하는 방식으로 좀 수정하는 거 어떨까용
• 앱 시작화면, 어플 아이콘 넣고싶슴당(시간모자라면 주말에 김현지가 추가 가능)

로그인 :

• 회원가입 로그인 기능 구현,
• 싱글톤으로 데이터 받는거

메인 :

• 네비바로 다른 페이지 인텐트
• 뷰페이저2 인디케이터 제작
• 인게임 스크린샷 전부 가져오기

디테일 :

• 인게임 스크린샷 데이터 추가 (갓화민님)
• 해시태그 정렬정리
• 가격 표시 regex추가 (유료게임은 ,랑 원화 표시나 달러표시/ 무료게임은 0말고 무료 라고 표시)
• 리뷰 line 2줄이하면 더보기 visiblility 변경
• 모션레이아웃 올렸을때 해시태그 maxline 변경

탐색 :

• 네비바 인텐트
• 네비바 기본선택 아이템 탐색으로변경
• 각 사진에 clipToOutline사용해서 모서리 둥글게 적용
• 고객님을 위한 추천 스크롤뷰 , 네비바 ? 사이 마진 더 늘리기

프로필 :

• 네비바 인텐트
• 네비바 기본선택 아이템 프로필로 변경
• 게임장르별 이미지
• 프로필 이미지 clipToOutline 적용 (건의사항)
• 이름 자기소개 textColor white로하고 뒤 이미지를 어둡게 하는거?(건의사항)

4. 각자 버그/수정사항 픽스

다른 분들 화면을 다 받아와서 보면서 피드백을 진행하고, 각자 다시 수정함!

이 쯤 부터 슬슬 완성 된 사람은 아직 안 된 사람이나 어려움이 있는 사람가서 도와주기도하고

주말에 시간 얼마 안 남았을 때는 그냥 아예 기능 몇개 맡아서 추가해주거나 했음!

5. 작업 완료 후 dev에서 버그 , 추가 수정사항 찾기

작업 완료 후에 이제 dev에 전부 머지하고 각자 에뮬레이터로 테스트해보면서 버그나 수정사항을 찾아서 수정했다.

6. 완료 후 제출!

다 끝나고 dev에서 main으로 머지하고 제출!!!

우리는 결국 다크모드, 폰트크기 설정에따라 변경, 가로모드 구현은 못하고 나머지는 다 했다!!

첫 프로젝트 후기

다행히 첫 프로젝트를 하는 팀이 너무 잘걸려서 다들 본인 의견 피력을 잘하시고,

각자 맡은일도 열심히 해주시고, 시간약속도 잘지켜주시고, 주말까지 나와서 작업하실만큼 열의가 있는 분들이 계셨다.

제각각의 실력인 사람들이 한 팀으로 묶어서 처음으로 작업해보는 거다 보니까 답답해 한다거나, 게을러진다거나, 주눅이 든다거나 할 수있는데 팀원들 모두 그런거없이 적극적으로 참여해주시고 모르는 부분도 잘 질문하면서 해결해나가셔서 무사히 마무리 할 수 있었다고 생각한다.

나는 사실 주말에도 원래 나와서 혼자 공부하는 사람이라 괜찮았는데 다른 분들은 주말에 나와야할 때 싫어하실까봐 걱정을 했는데 다들 나와서 너무 열심히 해주심.

나도 회원가입 기능 맡은 분이 로그인 페이지랑 두개 다 맡으면서 너무 버거우신 것같아서 그분 퇴근후에 따로 남아서 회원가입 기능이나 UI수정을 했는데, 우리팀 코딩 챌린저분도 같이 새벽 5시 까지 남아서 같이 해주셨다.. 본인 파트만 하셨으면 이미 끝내셨을 걸 다른 분들 먼저 도와주시느라 자기파트도 미루고 늦게까지 남아서 해주시는게 아주아주 감동이였다..두번째 같은팀이였는데.. 또같은팀되고싶다…사실 조바뀌는게 너무 싫다!!!이번 조 좋았는데!!!!!!!!분위기 짱이였는데!!!!!!!!!!!!!!!!!!!!

아쉬운건 매니저님들이 ppt만드는데 너무 시간쓰지말고 발표준비보단 개발에 집중하라고 하도 강조하시길래 발표준비 너무 열심히 만들면 혼날까봐 신경안썼는데,,, 다른 조들 보니까 너무 ppt를 예쁘게 만 들어오셔서 우리도 피피티 열심히 만들어올걸!하고 아쉬웠다 나는 평소에 ppt가 굉장히 중요하다고 생각해서 원래같으면 최대한 열심히 만들었을텐데 일부러 대충만든건데…………..우리 팀 열심히 만든 앱이 생각보다 어필이 안된 것같아서 조금 속상했다….

그래도 주말까지 나와서 최선을 다해서 진행했기도 하고, 소통이 원활하게 되었어서 아주 행복했당!