[내일배움캠프][TIL] 23.12.29 (금) - 팀 프로젝트 4일차 : 팀 프로젝트 앱 완성시키기

1. 팀 프로젝트 개발 4일차

 

본격적으로 다른 팀원들이 만든 작업물들을 합치는 과정에서 여러 충돌과 오류들을 접하게 된 어제였다.

 

2023년의 마지막 평일인 오늘.

앱을 만들 수 있는 시간은 사실상 오늘이 마지막이기 때문에 하나둘씩 완성시켜나갔다.

 

이제 그 완성시켜나가는 과정을 하나하나씩 알아보자.

 

전체 UI

 

우선, 우리 팀이 만든 앱의 전체적인 모습은 다음과 같다.

 

맨 위 왼쪽부터 오른쪽 순서대로 설명하면

MainPage, DetailPage, SignInPage, SignUpPage, MyPage, 언어설정 Page 이다.

 

이 UI의 메커니즘은 다음과 같다.

 

1. 우선, MainPage에서 MY라고 적힌 부분의 프로필을 누른다. 이 때, 로그인이 안 된 상태라면 로그인 화면(SignInPage)으로 넘어가고 로그인이 된 상태라면 마이페이지 화면(MyPage)으로 넘어간다.
2. MainPage에서 게시글을 누르면 그 게시글의 내용을 볼 수 있는 DetailPage로 넘어간다.
3. (로그인 화면) 아이디, 비밀번호가 등록되어 있지 않으면 로그인할 수 없게 되어 있다. 고로 이 때 회원가입 버튼을 누르면 회원가입 화면(SignUpPage)으로 넘어간다.
4. 회원가입 화면에서는 이름, 이메일, 비밀번호, 트랙을 입력한다. (참고로 저기 화면에는 구현되어 있지 않지만, 트랙을 고르는 기능도 추가했다) 그리고 회원가입을 누르면 따로 만든 객체에 정보를 전달한다. 이 때, 입력되어 있지 않은 정보가 하나라도 있으면 회원가입 버튼을 누를 수 없다.
5. 마이페이지 화면(MyPage)에서는 객체에 등록된 아이디와 트랙을 받아와서 그에 맞게 정보를 할당한다. (프사, 트랙, 아이디, 게시글 등) 그리고 역시 그 게시글을 누르면 DetailPage로 넘어가도록 구현시켰다. 마지막으로 언어 설정을 누르면 언어설정 화면으로 넘어가도록 하였다.
6. 언어설정 화면에서는 한국어, 영어를 누름에 따라서 언어를 다르게 설정할 수 있다.

 

여기서 내가 개인적으로 생각하는 개선점은 크게 2가지다.

1. 처음 이 앱을 접하는 유저라면 MainPage에서 로그인이 직관적으로 보이지 않아서 로그인을 찾는 과정이 어렵겠다는 생각이 든다. MY가 적힌 프로필 사진을 우측 상단에 올려서 대략적으로 파악할 수 있게 하거나 아예 로그인 버튼을 따로 만드는 방식으로 개선하면 좋을 것 같다.
2. MyPage에서 로그아웃을 하는 버튼이 없다. 구현은 어려워도 적어도 만들어뒀으면 좋겠다 싶었다. (다 만들고나니 보이네….)

 

그 다음으로는 이 UI들을 구현하기 위한 코드다.

물론 코드의 전체적인 내용은 내가 만든 코드가 아니기 때문에 자세하게 설명할 수 없고 내가 짠 코드만 따로 설명하겠다.

 

private val tvId:TextView by lazy { findViewById<TextView>(R.id.txt_id) }
private val tvTrack:TextView by lazy { findViewById<TextView>(R.id.txt_track) }
private lateinit var tvTrackName: TextView
private lateinit var tvWritting: TextView

우선, 변수 선언은 onCreate() 가 들어가기 이전에 선언하였다.

 

// 객체에서 정보 받아오기
if (!CurrentUser.isSignedIn()) {
    Toast.makeText(this, "오류: 로그인 되어있지 않습니다.", Toast.LENGTH_SHORT).show()
} else {
    val user = CurrentUser.user
    tvId.text = "아이디 : " + (CurrentUser.user?.id ?: "not signed in")
    tvTrack.text = "트랙 : " + (CurrentUser.user?.track ?: "not signed in")
}

User 클래스를 만든 다음, 거기서 생성자를 만들고 그걸 CurrentUser 객체로 받은 다음에 그 객체에 저장된 인스턴스들을 가져온다.

이 때, SignedIn()이 False 값이라면 Toast 메시지를 출력한다.

(이건 팀원의 도움을 받아서 만들었다.)

 

이게 만들어지니 나머지 내가 구현하고 싶었던 기능들을 추가하는 건 굉장히 쉬웠다.

 

// 프로필사진 분류
val ivProfil = findViewById<ImageView>(R.id.iv_profil)
val image = when (CurrentUser.user?.track) {
    "Android" -> R.drawable.sparta
    "iOS" -> R.drawable.sparta2
    "Unity" -> R.drawable.sparta3
    else -> R.drawable.snake_sparta
}
ivProfil.setImageDrawable(ResourcesCompat.getDrawable(resources, image, null))

객체에서 받은 트랙마다 다른 이미지를 받아와서 그걸 프로필 사진에 적용시키는 코드이다.

 

// 자신의 트랙에 따라서 보여지는 트랙과 게시글 제목 분류
tvTrackName = findViewById(R.id.txt_apptrack)
tvTrackName.text = CurrentUser.user?.track

tvWritting = findViewById(R.id.txt_writing)
tvWritting.text = when(CurrentUser.user?.track) {
    "Android" -> "스파르타 친구들 새해 잘 보내!"
    "iOS" -> "코딩 너무 어려워.."
    "Unity" -> "UNITY 팁 몇가지 알려줄게!"
    else -> "최초 AI의 탄생 알고있어??"
}

역시 위와 똑같은 방법으로 게시글을 다르게 보이게 하는 코드이다.

 

 

여기까지가 내가 구현한 코드들이다.

실제로 구동이 잘 되는지는 다른 팀원이 공유한 화면으로 확인을 했으니 OK. 그런데 내가 확인을 못하니 여기에 실제 구동영상을 올릴 수가 없다.

 

 

트러블 슈팅

 

이번 트러블 슈팅은 전반적으로 팀 프로젝트를 진행하면서 내가 겪었던 기술적 어려움에 대해서 이야기 해보고자 한다.

 

 

1. 객체 받아오기

마이페이지 특성 상 다른 액티비티에서 intent를 받아와야 구현 가능한 기능들이 많은데 여기서 막히니까 도무지 진전이 되질 않았다. 그냥 putExtra, getStringExtra를 하자니 어디서 이걸 써야 할지 애매했고, Singleton은 내가 배우지 않은 정보라서 쉽사리 사용하기 어려웠다.

 

결국 이건 따로 User 클래스를 만들어서 생성자를 만들고 그걸 CurrentUser 객체로 받는 식으로 해결했지만, 역시 아직은 객체를 다루는 기술이 부족하다는 것을 느꼈다.

 

그나마 이거는 보고나서 "아, 이렇게 하면 되는구나"라고 이해라도 했지만, 이 다음 항목은 그 이해의 영역을 아득히 벗어났다.

 

 

2. 언어 변환

와, 이건 진짜 여러번을 봐도 어떻게 돌아가는지를 모르겠다.

그냥 string.xml과 string.xml(en)까지는 만들었는데 이걸로 적용시키려고 하니 Locale, Configuration 등 내가 모르는 지식이 툭툭 튀어나와버렸다.

 

그래서 앱 자체에서 구현하는 건 아주 깔끔하게 포기를 하고 폰 설정에서 변환하는 걸로 결론을 내렸다.

 

 

3. UI

내가 미적 감각이 더럽게 없는 건지 아니면 그냥 감각이 없는 건지 어떻게 해야 UI를 깔끔하게 표현할지에 대해서 꽤나 많은 시간이 들어갔다.

이쁘게 꾸미는 건 말할 것도 없고, 어떤 Widget을 써야 더 효율적인가에 대해서도 아직은 부족한 부분이 많았다.

 

 

4. 상호작용 간에 생기는 오류

액티비티가 3~4개일 때에는 오류를 찾아내기 비교적 쉽고 고치기도 쉬웠지만, 이제 액티비티가 7~8개 씩 생기고 거기다가 나 혼자서 작업하는 것이 아니라 여러 사람이 동시에 작업해서 합치다보니 예상치 못 한 오류들이 툭툭 튀어나왔다.

거기다 이 작업물들이 내 작업물에도 영향을 주는 것들이고 하다보니 그 오류들이 더 크게 다가왔다.

 

그래도 혼자서 끙끙 앓는 것보다는 여러 사람이서 볼 수 있으니 오류를 찾는 속도 또한 빨랐다.

 

 

5. 깃(Git)

아마 시작부터 끝까지 여기에 익숙해지는 데에 시간을 많이 쓰지 않았나 싶다.

쓰다보니 깃이 편한 부분도 물론 많지만, 그만큼 편하게 쓸 수 있는 경지에 오르기까지 도달하기가 굉장히 어렵다.

 

그나마 이제는 commit, pull, push 이 메커니즘은 숙지했는데 아직 다른 branch로 왔다갔다 하는 것까지는 익숙지 않았다.