[Android TIL] 240325 (스탠다드 UI 집중 구현 완료, 개발 일정 산정)

 

 

 

 

 

~ Today I Learned ~

 

✔️ 프로그래머스 알고리즘 문제 풀이 (문자열 내림차순으로 배치하기)
✔️ 스탠다드반 과제 (피그마UI를 XML로 구현)
✔️ 종합반 3주차 다시 수강 시도

(진행중) 발제 개인과제 추가 구현 시도
(시간이 남으면) 키오스크 리팩토링
(시간이 남으면) 개인 프로젝트 시작

 

 

 

---

 

 

 

 

1. 프로그래머스 알고리즘 문제 풀이 (문자열 내림차순으로 배치하기)

 

[Kotlin] 문자열 내림차순으로 배치하기

• 정렬을 했을 때, 원래 대문자는 소문자보다 작은 값을 가진다.

 

💡sortedWith()

fun <T> Iterable<T>.sortedWith(comparator: Comparator<in T>): List<T>

• 사용자가 제공한 비교자(Comparator)에 따라 컬렉션을 정렬
• 정렬된 새로운 컬렉션을 반환하며, 원본 컬렉션을 변경하지 않음
• comparator: 정렬에 사용될 비교자
  Comparator 인터페이스의 compare() 메서드를 구현하여 두 요소를 비교

 

val list = listOf(3, 1, 4, 1, 5, 9)
val sortedList = list.sortedWith(Comparator { a, b -> b - a })
println(sortedList) // 출력: [9, 5, 4, 3, 1, 1], 내림차순 정렬


val numbers = listOf(5, 3, 8, 2, 7)
val sortedNumbers = numbers.sortedWith(Comparator { a, b -> b.compareTo(a) })
println(sortedNumbers) // 출력: [8, 7, 5, 3, 2]


val words = listOf("apple", "banana", "orange", "kiwi")
val sortedWords = words.sortedWith(compareBy { it.length })
println(sortedWords) // 출력: [kiwi, apple, banana, orange], 문자 길이에 따른 정렬


data class Person(val name: String, val age: Int)
val people = listOf(Person("Alice", 30), Person("Bob", 25), Person("Charlie", 35))
val sortedPeople = people.sortedWith(compareBy<Person> { it.age }.thenBy { it.name })
println(sortedPeople) 
// 출력: [Person(name=Bob, age=25), Person(name=Alice, age=30), Person(name=Charlie, age=35)]

 

 

 

 

 

 

 

2. 스탠다드반 과제 (피그마UI를 XML로 구현)

 

 

 

🔨 일정 산정

프로젝트 개발 일정 산정을 산정하고 관리하는 법

예상 시간

[US] 메인화면에서 Sign in을 눌렀을 때 로그인 페이지로 간다
- [1시간][UI] 인트로 페이지 UI 설계
- [2시간][UI] 로그인 페이지 UI 설계
	- [1시간] UI 아이콘, 텍스트, 버튼 배치 및 배열
	- [1시간] 인풋텍스트 설정
- [0.5시간] 인텐트로 각 페이지 연결

• 과제 시작 전, 일정 산정 방법에 따라 예상 시간을 산정해보았다. 총 3시간 30분 정도를 예상했다.

 

실제 시간 

[US] Sign in을 눌렀을 때 로그인 페이지로 간다
- [50분][UI] 인트로 페이지 UI 설계 // 이중 버튼 설계 스킵, 하나의 버튼으로 설계
- [52분][UI] 로그인 페이지 UI 설계 // Edittext에 자체 배경 적용
	- [41분] UI 아이콘, 텍스트, 버튼 배치 및 배열 
	- [5분] 인풋텍스트 설정
- [5분] 인텐트로 각 페이지 연결 (5분)

• 실제로 1차 커밋, 최소 구현까지 걸린 시간은 위와 같다. (총 2시간 33분)
• 로그인 페이지 UI가 생각했던 것보다 빨리 걸렸고, 애초에 UI구현 과제라 액티비티를 인텐트로 연결해줄 수고가 적었다. 다만 생각보다 인트로 페이지에서 '두 개가 겹쳐진 모양의 버튼'을 구현하는 것에 고민하는 시간이 길었다. 기존 버튼 모양을 rotationY 줄려다가, 그것보다 더 근본적인 해결책은 없을까 고민했던 것 같다.

 

 

🔨 1차 구현

 

 

• 위의 내용으로 1차 깃 커밋을 완료했다.
• 다만 주어진 대로 완벽히 과제를 구현하기 위해 해결해야 할 부분은 아래와 같았다.

1. 버튼 두 개가 겹쳐진 모양 및 그림자 구현
2. 현재 EditText의 이미지를 background로 주었는데, 입력 시 앞부분의 margin이 부족하여 해당부분 해결
   (EditText와 Background를 이미지뷰로 분리해서, 이미지뷰 안에 EditText를 넣어야 할까 고민)

• 위의 내용을 해결하기 위해 추가적으로 코드를 수정중이며, 다 해결시 2차 커밋 및 푸쉬를 할 생각이다.

 

 

🔨 2차 구현

• (+ 17분) 인트로 화면 버튼 2개로 분기하기
  - Xml파일을 새로 만들어서 각 Radius 값을 수정했다. (topRight, bottomRightRadius / topLeft,bottomLeftRaius)
  - 버튼의 Background로 지정하여 쉽게 완료하였다.
  - 실제로 디테일하게 수정하게되면, 다양한 해상도에 대응하기 위해서는 아무래도 xml이 svg보다 낫다고 한다.
• (+ 15분) EditText 배경에 맞는 적절한 방법 찾기
  - 왼쪽이 너무 붙어있던 문제는 Padding 값을 줘서 손쉽게 몇 초만에 해결이 가능했다.
  - 튜터님께 이런식으로 EditText에 배경을 주는 게 현업에서 쓰이냐 여쭤보니, 지금처럼 보기에 잘 만들어졌으면 이렇게 만들어도 되고, 좀 더 디테일하게 꾸며야 하면 리니어/프레임/컨스트레인트 레이아웃 안에 넣기도 한다고 하셨다.
• 깃 2차 커밋/푸쉬, 멘토님께 질문하는 등의 시간까지 합쳐서 2차 구현은 총 30분 정도가 걸렸다.
• 예상 산정시간이 3시간 30분, 실제 구현시간은 3시간 10분이 걸린 과제였다.

 

 

 

💡 sp와 dp의 차이

 

• sp는 TextView의 textSize를 지정할 때 사용
• dp는 화면에 따라 사이즈가 달라지지 않고 고정된 값
• sp는 시스템의 사이즈에 따라 TextView가 작아지거나 커짐
• dp는 TextView의 사이즈를 고정값으로 유지

 

 

 

 

3. 종합반 3주차 복습 시도

• viewpager2와 fragment로 화면을 구성했던 점, 엘비스 연산자(?:), 인텐트 처리 등을 이제야 이해할 수 있었다.
• 다만 여전히 구현하는 방법에 있어 쉽게 이해하기 어렵다고 느껴서, 숙련 이후에 다시 시도해보자.
  (예) const val을 사용하는 이유, 해당 방법에서 companion object를 사용하는 이유 등에 대한 이해 부족

 

 

 

 

 

 

 

---

 

~ Trouble Shooting ~

 

 

1. XML에서의 '&' 사용 오류

• & 문자는 XML에서 특수 문자로 인식되므로 해당 문자를 직접 사용할 수 없다. 대신 XML에서 특수 문자를 나타내기 위해 해당 문자의 엔티티를 사용해야 한다. 
• &의 엔티티인 & 를 사용하면 된다.

android:hint="   Username, Email & Phone Number"

 

 

 

2. 버튼 상의 영어 소문자가 대문자로 표시

• 안드로이드 스튜디오 XML 파일에서 android:text 속성에 지정한 텍스트는 디바이스의 기본 테마나 스타일에 따라 대문자로 표시될 수도 있다. 특히, 일부 기본 테마는 버튼 텍스트를 모두 대문자로 표시하도록 설정되어 있다.
  아마 나의 경우 appcompat.widget.AppcompatButton을 사용해서 그런 것 같았다.
• 해결 방법은 간단하다. 모두 대문자로 표시되는 것을 방지하는 코드를 추가하면 된다. (textAllCaps)

android:textAllCaps="false"

 

 

3. Github에서 클론한 프로젝트 gradle 빌드 오류

• 보통은 SDK 문제가 많은데, SDK를 설치하고 일치시켜도 알 수 없는 오류가 넘쳐났다. 관련 내용으로 구글링과 스택오버플로우 검색을 오랫동안 했지만 해결되지 않았다.
• 결국 팀원분이 감사하게도 거의 30분 가까이 도와주셨는데, 시도한 방법은 아래와 같다.
  - 다른 컴퓨터로 시도 및 sdk 일치
  - .idea 폴더를 삭제하고 열기
  - gradle에서 Firebase를 불러오는 영역 / 오류영역 삭제
• 결론은 Firebase 서버를 이용한 프로젝트이기 때문에 Firebase 키값(?)등이 코드나 파일에 포함되는데, 이 부분이 Git에 업로드되지 않아서 여러 부분이 누락되어서 생긴 일로 예상된다. 해당 문제를 해결하기 위해서는 프로젝트 주인에게 해당 파일을 요청하는 방법밖에 없을 것 같았다. 일단은 코드만 참조하기로!

 

 

 

 

---

~ Retrospect ~

 

오늘 네이티브와 크로스플랫폼에 대한 얘기를 잠깐 나눠서 생각해볼 기회가 생겼는데, 확실히 내년도에 투입할 예산과 노력을 허비하지 않기 위해 아이템과 BM을 좀 더 고민해봐야겠다는 생각이 들었다. 

고민은 차근차근하고... 당장은 빨리 배워서 오류와의 싸움을 더 능숙하게 하자.