[TIL][내일배움캠프]

[내일배움캠프][TIL] 23.12.27 (수) - 팀 프로젝트 개발 2일차 : 개발 초기

kimlaurant 2023. 12. 27. 20:20
1. 팀 프로젝트 개발 2일차

 

팀 프로젝트가 시작된 지 벌써 하루가 지났다.

역시 팀 단위로 진행하다보니 시간 가는 줄 모르고 논의하랴 작업하랴 흘러가고 있다.

 

안 그래도 연말이라 시간이 빠르게 흘러간다는 느낌이 드는데 여기서 더 가속화된 느낌이다.

 

그렇지만 아직 팀 프로젝트는 갈 길이 멀다.

바로 진행하기로 했다.

 

 

UI 제작 & 기능 구현

 

어제도 말했다시피, 내가 맡은 작업은 '마이페이지'(프로필)와 '언어 설정' UI이다.

최종적인 디자인은 추후에 논의 후에 다듬기로 하고 우선은 기본 골자부터 만들어보기로 했다.

 

 

각각 '마이페이지' 화면과 '언어 설정' 화면의 프로토타입이다.

이런 식으로 구성을 짜는 것만 보여주는 것이어서 디자인은 후에 확 바뀔 수도 있다.

 

 

우선은 마이페이지 화면부터 보도록 하자.

 

프로필사진은 각 트랙 별로 호환을 시켜서 나타내도록 할 예정이다.

예를 들어서 안드로이드 과정이면 안드로이드 로고를, iOS 과정이면 애플 로고를 보여주는 식으로.

 

여기서 프로필사진을 담당하는 ImageView를 동그랗게 만드는 방법은 다음과 같다.

 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white"/>
    <corners android:radius="50dp"/>

</shape>

우선, res 폴더 안에 있는 drawble 폴더에 xml 파일을 하나 만든 뒤에 위의 코드를 적는다.

이 때, 완전히 동그랗게 만드는 방법은 radius의 값을 ImageView 크기의 절반을 주면 된다.

 

android:background="@drawable/rounded_background"
android:clipToOutline="true"

그 다음은 background에 위의 xml 파일을 불러들인 다음 clipToOutline을 true로 주면 끝.

 

그리고 왼쪽 상단에 있는 저 화살표 표시는 이전의 페이지로 되돌아가는 기능을 집어넣어서 iOS도 편하게 뒤로가기를 할 수 있게 해놓았다.

 

트랙과 아이디는 로그인에서 extra를 받아서 출력하도록 만들었다.

 

 

다음은 언어 설정 화면이다.

여기는 너무나도 간단하다. 뒤로가기 버튼과 한국어 영어 설정 단 두 개.

 

여기서 한국어 설정과 영어 설정을 정하는 데에 RadioButton을 사용했는데 둘 중 하나만 적용되게 해야 하고, 각각 다르게 설정해야 하므로 저 Widget을 사용했는데 혹시라도 문제가 생기면 바꿀 의향이 있다.

 

(그러고보니 한국어, 영어를 선택한 뒤에 확인 버튼을 눌러서 적용시키는 게 더 깔끔하다는 사실을 이제야 알았다. 내일 수정해야지….)

 

 

여기까지가 UI 설명이고, 이제는 이 UI에서 구현해야할 것들을 코드로 짜는 시간이다.

 

이 UI에서 구현해야 할 사항들을 나열하자면 다음과 같다.

  • 트랙과 아이디의 정보를 불러들어오기
  • 언어 설정 버튼을 누르면 언어 설정 화면으로 이동
  • 뒤로가기 버튼을 누르면 이전 화면으로 되돌아가기 (마이페이지 화면에서는 메인페이지 화면으로, 언어 설정 화면에서는 마이페이지 화면으로)
  • 트랙의 extra에 따라서 그에 맞는 프로필사진 출력하기
  • 한국어, 영어 설정에 따라서 각기 다른 언어로 변환

 

우선은 마이페이지 코드부터 만들어 보았다.

val tv_track = findViewById<TextView>(R.id.txt_track)
val tv_id = findViewById<TextView>(R.id.txt_id)

if (intent.hasExtra("track")) {
	tv_track.text = "트랙 : "+ intent.getStringExtra("track")
}
if (intent.hasExtra("id")) {
    tv_id.text = "아이디 : "+ intent.getStringExtra("id")
}

트랙과 아이디의 extra를 intent를 이용해서 불러들인다.

 

val btnLanguageSetting = findViewById<Button>(R.id.btn_languageSetting)
val backToMainPage = findViewById<ImageView>(R.id.iv_return)

btnLanguageSetting.setOnClickListener{
    val intent = Intent(this, LanguageSettingActivity::class.java)
    startActivity(intent)
}
backToMainPage.setOnClickListener{
    finish()
}

언어 설정 버튼을 누르면 언어 설정 화면으로 이동하고, 뒤로가기 아이콘을 누르면 종료한다.

 

val iv_profil = findViewById<ImageView>(R.id.iv_profil)
val image = when (tv_track) {
    android ->
    ios ->
    unity ->
    else ->
}

iv_profil.setImageDrawable(ResourcesCompat.getDrawable(resources, image, null))

각각의 이미지를 트랙의 값에 따라서 다른 image를 불러와 그걸 출력한다.

참고로 그럴 일은 없겠지만 else에는 그 인간의 형상만 있는 그 카톡 기본 프로필 사진을 넣을까한다.

 

그런데 이것도 곰곰이 생각해보니 when 괄호 안에 tv_track가 아니라 다른 값을 집어넣어야 할 것 같다는 생각이 드네.

 

 

여기까지가 오늘 구현한 것들이다.

내일은 여기서 다른 팀원들이 작업한 페이지들과 상호작용을 하는 식으로 코딩을 진행할 듯하다.

 

 

트러블 슈팅 (Trouble Shooting)

 

트러블 슈팅이란, 개발 과정에서 일어난 문제점들을 분석하고 해결하는 과정을 말한다.

코드카타를 할 때마다 중간에 실행오류가 떴던 거에 대해서 이야기했던 것도 일종의 트러블 슈팅이라 할 수 있다.

 

이제 팀 단위로 프로젝트를 진행하는 만큼 트러블 슈팅은 필수불가결한 과정이다.

 

그럼 오늘은 어떤 걸로 트러블 슈팅을 진행했는지 알아보자.

 

 

…라고 해도 답은 정해져 있다.

 

팀 단위로 프로젝트를 진행하는 것이 처음이면 무조건 부딪힐 수밖에 없는 문제.

 

바로 깃(Git).

 

모든 문제의 중심에는 바로 깃이 있었다.

가장 대표적으로 팀원들의 코드를 합칠 때 일어나는 문제들이 있는데 그 종류를 열거하자면 수도없이 많다.

  • git push가 안 되는 문제
  • 팀 대표가 만든 git repository를 clone하기 전에 새 프로젝트를 만들어서 git push를 한 문제
  • git branch를 만들지 못 하는 문제
  • 그 외 다수

참고로 내가 겪은 문제는 볼드체로 처리한 항목인데 처음에 여기서 한 번 꼬이기 시작하니 연쇄작용이 장난 아니게 터져나왔다.

 

첫 단추를 잘못 끼우니 파생된 문제 역시 나열하자면

  1. 팀 단위로 단일화된 파일이 아닌 따로따로 떨어진 파일이 생김 (심지어 폴더명도 다름)
  2. 그로 인해서 git push를 한 뒤에 pull request를 진행할 수가 없음 (pull request를 하다가는 팀원들이 작업한 작업물이 싹 다 날아가는 상황)
  3. 이걸 일일이 찾아서 고치느라 시간 허비

이것도 사실 내가 pull request를 요청하기 전에 무언가 쎄함을 감지해서 미리 알리고, 팀장님이 코드 리뷰를 통해서 수정할 점을 콕콕 집어줘서 해결했지 아니었으면 전체적으로 수정할 뻔했다.

 

그리고 이것 말고도 git pull을 하다보니 충돌하는 코드들이 생기게 되는데 이걸 적절히 처리하는 것도 일이었다.

 

그렇다면 이 문제들은 어떻게 해결했을까?

  • git push가 안 되는 문제 : 처음에 팀 대표가 만든 git repository를 git remote하지 않아서 생긴 문제여서 이걸 하니 자연스럽게 해결 
  • 팀 대표가 만든 git repository를 clone하기 전에 새 프로젝트를 만들어서 git push를 한 문제 : 우선은 새 폴더를 만들어서 오롯이 대표 git repository를 clone하고 거기에 기존에 만든 작업물들을 하나하나 옮겼다. 그 과정에서 기존 폴더로 적혀있던 것들도 싸그리 수정.
  • 그 외에 일어날 수 있는 문제를 사전에 방지하기 위해 우리 조 만의 깃 사용 규칙을 설정해서 혼선이 생기지 않게 함.

 

 

이 외에도 다른 문제를 말하자면 코딩 컨벤션 이슈가 있고, 레이아웃 간의 상호작용 이슈가 있다.

예를 들자면, 팀 대표에는 MyPage 레이아웃이 있는데 나는 이 레이아웃의 이름을 Profil로 적어서 작업했다던가, 혹은 MyPage에 무얼 쓸지 혼동이 생긴다던가.

 

이 문제는 팀원 간의 논의를 통해서 Profil 레이아웃의 이름을 MyPage로 통합하고, DetailPage는 다른 역할을 맡는 걸로 해결했다.

 

코딩 컨벤션 이슈는 아직 팀원 간의 조율이 완벽하게 되지는 않았고, 딱 한 가지만 정해놓았다.

 

Ctrl + Alt + L (코드 정렬)을 잘 사용할 것.

 

나머지는 추후에 조율한 후에 확정할 예정이다.