5 - 7일차 (2022. 01. 01 - 2022. 01 .04)
프로젝트 개발 및 완성
원래 하루마다 게시글을 쓰려고 하였으나... 생각보다 작업량이 많아져서 늦어진 것 같다. 5일차부터 7일차까지는 기능 개발, 디버깅, 디자인 및 UI 수정 작업을 계속 진행했다.
아래에는 완성된 프로젝트 Github 레포에 나와 있는 Readme 파일의 내용을 조금 수정해서 첨부했다.
Pro . dev
IT업계 종사자를 위한 Human Network Platform
프로젝트 소개
과제 소개
1주차 과제의 경우 다음과 같이 3개의 탭으로 구성된 어플리케이션을 개발하는 것이다.
3개 탭의 내용은 아래와 같다.
- 연락처를 보여주는 화면 (단, 연락처는 JSON 데이터 형식이어야함)
- 20장 내외의 이미지로 구성된 이미지 갤러리를 보여주는 화면
- 자유롭게 구현한 기능을 보여주는 화면
1번탭
JSON 데이터를 효과적으로 다룰 수 있는 ZXing 라이브러리를 사용하여 연락처 데이터를 추가하고 편집할 수 있게 진행했다. ZXing은 QR코드 읽기/쓰기 기능을 제공해주는 라이브러리
별도의 Activity나 Fragment를 만들어 주지 않아도 QR 코드를 읽어올 수 있으며, Activity의 경우 onActivityResult() 함수를 Override하여 결과 값을 받아올 수 있다.
fun runQRCodeReader() { // QR 코드 리더 실행 함수 예시
val integrator = IntentIntegrator(this)
integrator.setBarcodeImageEnabled(false)
integrator.setBeepEnabled(false)
integrator.setPrompt("화면에 QR 코드를 인식시켜주세요")
integrator.initiateScan()
}
@SuppressLint("MissingSuperCall") // QR 코드 리더의 결과를 처리하는 함수
override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
result = IntentIntegrator.parseActivityResult(requestCode, resultCode, data)
if (result.contents == null) {
Toast.makeText(applicationContext, "스캔 실패. 다시 시도해주세요.", Toast.LENGTH_SHORT).show()
}
else {
var bundle = Bundle()
bundle.putString("JSON", result.contents)
}
}그리고 연락처는 프로필 카드의 형태로 보여주며, 이를 위해 프로필 카드를 직접 디자인했다. 프로필 카드는 여러 개를 추가할 수 있으며 이를 위해 ViewPager2를 사용했다.
추가로 현재 선택된 프로필 카드의 위치를 시각적으로 사용자에게 알려주기 위해 Dots Indicator 라이브러리를 사용했다. 하지만 ViewPager2의 아이템을 삭제해도 Indicator의 인덱스 길이가 변하지 않는 등 여러 문제점이 있어 Circle Indicator 라이브러리의 CircleIndicator3를 사용하여 문제를 해결했다.
첫번째 탭 작동 예시.gif
그리고 프로필 카드의 추가 및 삭제를 위한 드롭다운 메뉴를 추가했다.
드롭다운 및 삭제화면 예시. 프로필 카드를 추가하는 화면도 있지만, 안드로이드 에뮬레이터에서는 QR 코드 인식이 불가능해 따로 첨부하지 못했다.
추가 혹은 삭제 시 나오는 모달 창의 경우 Dialog 클래스를 상속하여 커스텀 Dialog 클래스를 만들어 사용했다. 그리고 이를 위해 별도의 XML 파일을 만들어 사용했으며, 삭제 시 모달 창을 띄우고 결과에 따라 프로필 카드를 삭제하는 코드를 작성했다.
deleteBtn.setOnClickListener(object: View.OnClickListener{
override fun onClick(v: View?) {
val dialog = ProfileDeleteDialog(context)
dialog.setOnOKClickedListener{
delete(viewholder)
readJsonData()
}
dialog.start("dsf")
}
})프로필 카드의 삭제 버튼에 onClickListener를 활용하여 삭제 기능 실행
2번탭
두번째 탭은 사진을 갤러리로 보여주는 화면이다. 저희는 IT 계열 회사에서 사용한다고 가정하였으므로, 동료 개발자를 비롯한 사우들이 올린 게시물을 보여줄 수 있는 화면으로 구성했다.
화면의 구성은 인스타그램이나 페이스북 등을 참고해서 배치했다. 사진의 경우 GridView를 사용하여 한 열에 3개의 사진이 배치 될 수 있게 했다.
사진 클릭 시 게시글을 볼 수 있는 Fragment를 실행한다. 이때 Fragment를 전환하면서 애니메이션을 추가했는데, 아래와 같은 코드로 Fragment 간의 전환에 애니메이션을 실행할 수 있다.
activity!!.supportFragmentManager.beginTransaction()
.setCustomAnimations(R.anim.fade_in, R.anim.fade_out)
.replace(R.id.fragment, feedDetailFragment)
.commitAllowingStateLoss()현재 알파 값을 조정하여 Fade-In과 Fade-Out 효과를 구현했는데, 안드로이드의 경우 XML 파일을 작성하여 애니메이션을 구현할 수 있다.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="500"/>
</set>3번탭
본 앱은 IT 계열 직장인을 대상으로 만들어졌기 때문에 3번째 탭은 프롤젝트 관리형 페이지로 직장인들이 참여하는 프로젝트를 관리하기 용이하도록 제작하였다. 시간 관리 및 세부적인 할 일을 체크하기 편하도록 제작되었다.
UI
가장 위의 chart에서는 프로젝트의 언어 비율을 확인할 수 있다. 가지고 있는 프로젝트들의 언어를 파악하여 개수에 따라 ratio를 계산하여 반영한다. 어떤 언어가 높은 비중을 차지하고 있는지 빠르게 확인하는 용도이다.
앞면
프로젝트를 관리하는 카드의 앞면은 중요 정보를 포함하고 있다. 프로젝트 마감일, 마감일까지의 D-Day, 프로젝트를 담당하는 리더, 리더 외 프로젝트 참여자들, 현재 프로젝트 진행률을 포함하고 있다. 프로젝트에서 사용하는 언어는 카드의 색상을 통해 구분할 수 있다. 파란색은 Python, 노란색은 Kotlin, 빨간색은 그 외의 언어를 의미한다.
뒷면
카드의 뒷면에서는 세부적인 프로젝트 정보를 확인할 수 있다. 앞면에서 잘린 프로젝트 제목을 다시 한 번 확인할 수 있으며, 프로젝트 담당자의 이름, 이메일, 핸드폰 번호, 프로필 사진을 볼 수 있다. 아래쪽에는 프로젝트를 효과적으로 관리하기 위한 TODO List를 제공하고 있다. 우측에는 프로젝트를 실행할 때 수행해야 하는 일들을 스크롤하여 확인할 수 있다. 일을 마쳤다면 체크 박스를 선택하면 진행률이 왼쪽의 차트에 반영된다. 뒷면에 있는 파이 차트는 해당 프로젝트의 세부 업무 진행 상황을 나타낸다. 전체 업무 중 몇 개의 업무가 마무리 되었는지, 체크 박스를 통해 확인하고 퍼센트로 프로젝트 완성도를 알려준다.
프로젝트 생성 화면 예시
