포지션 페이지 디자인 개선 적용하기
원티드 안드로이드앱 4.1.5 버전에서 채용 정보 상세 페이지가 리뉴얼 되었습니다. 어떤것을 고민하여 반영하였으며, 어떻게 개발을 하였는지 정리해 보았습니다.
디자인 변경사항
개발자 시각에서 바라본 변경된 부분은 아래와 같습니다.
- 포지션 공고 마감 표시 추가
- 관련된 포지션 디자인을 홈 화면의 잡 카드와 동일한 레이아웃으로 통일
- '좋아요'를 선택한 사람을 이미지로 표시 (최대 3개)
- 북마크 버튼을 별도로 Toolbar 영역으로 이동디자인 관점에서 정리를 해보자면, 전반적으로 잡 포지션 화면이 각 영역을 기능 단위로 좀 더 명확히 분리되고 묶는 방향 으로 리뉴얼 되었습니다.
대표적인 예로 좋아요 버튼 및 좋아요를 한 사람을 표시하는 영역은 좀 더 일반적인 기능 영역이라면 북마크 기능은 좀 더 개인화된 기능이므로 우측 상단으로(Toolbar Options menu) 이동되었습니다. 각 영역을 구분하기 위한 선을 많이 없앴지만 기능이 직관적으로 보일 수 있도록 개선되었습니다.
그리고 기존에 상단 회사 이미지 영역을 덮고있던 보상금 정책이 1)회사 그림을 가리고 있어서 지저분한 느낌이 있었고, 2)공유하기 기능과 약간 떨어져 있어서 혜택과 기능을 함께 표시 될 수 있도록 개선 되었습니다.
잡 포지션에서는 확인중인 포지션과 관련된 포지션을 확인 가능한데요, 잡 카드 형태를 홈 화면의 카드형태와 동일하게 수정하였습니다. 지원하기 버튼은 하단 버튼 영역 전체를 사용함으로써 포지션 상세 화면에서 할 수 있는 행동이 더 잘 보여주도록 개선되었습니다.
진입 코드 리팩토링
포지션 상세 화면 Activity 를 호출하는 코드는 굉장히 많이 산개되어 있었습니다. 앱 내부에서 Intent 를 생성하여 상세화면을 진입하거나, 외부에서부터 Deeplink 로 진입하는 케이스등 다양한 케이스에 대하여 Intent가 산발적으로 존재하고 있습니다.
먼저 잡 상세 화면을 실행하는 코드를 static method 로 정리하고, 각 잡 상세 화면에 진입하는 코드들은 상세 화면 Activity 를 호출하는 부분들을 찾아서 앞에서 정리한 Activity 의 static method 를 이용하여 잡 상세 화면을 실행 하도록 코드를 정리 하였습니다.
진입 코드가 정리가 완료 되었으므로 실제 실행하는 코드의 Intent 의 타겟 Activity만 리뉴얼 작업 Activity로 교체하여 디자인과 구조를 잡기 시작했습니다.
RecyclerView 로 변경
크게 변경된 점이라고 하면, 기존에는 NestedScrollView 하위에 include layout 으로 여러 개의 뷰가 구성되어 있었다고 한다면, 이번에는 RecyclerView 로 포지션 상세 UI 구성을 변경한 부분입니다. 기존의 화면 상단 이미지 영역은 AppBarLayout 및 CollaspingToolbarLayout 를 활용하였으며, 하단 영역은 아래와 같이 5가지의 뷰타입 및 ViewHolder 로 구성하였습니다.
뷰 모델 구조 작업
상세화면은 Activity 는 먼저 ViewModel을 생성하고, 여기에서 화면에 필요한 각 데이터들을 LiveData 로 관리하도록 구성하였습니다. API 통신이나 사용자 행동 등으로 변경이 발생되는 것은 각 ViewHolder가 observe 하는 것으로 정리하였습니다. 예를들어, 가장 상단의 ViewHolder 의 코드는 다음과 같습니다.
viewModel 이 가지고있는 job 은 상세 화면에 진입 전 알고있는 데이터(목록 등에서)이며, detail 은 실제 상세화면에 진입 이 후 API 통신을 통하여 데이터가 갱신된 내용을 의미합니다.
ripple effect with radius corner
일반적으로 Ripple Effect 를 corner radius 가 있는 형태로 적용하려면 selector 를 만들고, API 21 에 따라 다르게 동작하게 해야 합니다. 이번에는 약간의 편법을 이용해서 Corner radius 만큼 ripple 를 적용되게 하도록 처리하였는데, 바로 CardView 를 활용하는 것입니다. CardView의 속성 중 cardCornerRadius 를 설정하게 되면 이 영역을 제외한 부분만큼은 View 가 그려지게 됩니다. 따라서, CardView 하위에 선택 영역을 ViewGroup 으로 clickable 하게 구성을 하면 됩니다.
예를들어 좋아요를 한 사람들 목록표시하는 부분의 ‘…’ 버튼 레이아웃은 아래처럼 되어있습니다.
편법이긴 하지만 잘 동작 합니다. 다만 이러한 방법을 사용하였을 경우에는 안드로이드 5.0이상, 미만버전 두 가지 케이스에 대하여 실제 CardView 가 radius 속성에 의하여 그려지는 영역이 차이 가 나게 되어있기 때문에 레이아웃이 약간 다르게 표시될 수 있습니다.
해당 부분은 좌 우 버튼이 동일한 radius를 사용하여 inset value가 같고, 디바이스 점유율이나 기능 사용 측면에서 봤을 때 크리티컬한 이슈는 아니라고 판단되어 현 상태로 진행 하였습니다.
