안드로이드 예상연봉 기능 개발하기
원티드 서비스에서는 직군, 직무, 연차에 맞는 예상 연봉 확인 서비스를 제공하고 있습니다. 원티드 서비스를 사용하는 많은 사용자들은 이 기능을 매우 만족스럽게 사용하였고, 긍정적인 피드백을 많이 주셨습니다.
안드로이드 원티드 앱3.8.3 버전 출시와 함께 해당 기능을 앱에서도 사용할 수 있게 되었습니다. 각 직군별 예상정보와 선택한 직군에 맞는 채용공고를 함께 볼 수 있도록 만들었습니다. 예상 연봉 기능을 개발한 내용에 대하여 정리 하였습니다.
| 홈 화면 | 면접 제안 받기 설정화면 | 연봉정보 확인화면 |
|---|---|---|
 |
 |
 |
개발
예상 연봉 제공하기 기능은 이미 그것을 서버에서 지원해주기 위한 API가 준비되어 있었습니다. 그 정보를 원티드에서 제공하는 서비스 Identity를 UI적으로 표현하는데 있어 고민을 하였습니다. 이를 바탕으로 작업한 몇 가지 내용을 정리해 보겠습니다.
예상 연봉 UI Background 표시
예상 연봉 화면은 사용자가 선택한 관심있는 직군의 수 만큼 ViewPager로 화면을 구성하고 있습니다. 연봉 정보가 표시되는 영역 Background Color는 ViewPager의 onPageScrolled callback 에서 ColorUtils.blendARGB 메소드를 이용하여 자연스럽게 변경 처리하였습니다.
int[] BG_COLOR = { Color.RED, Color.GREEN, Color.BLUE };
int count = statisticPager.getAdapter().getCount();
int from = BG_COLOR[position%BG_COLOR.length];
int to = BG_COLOR[(position+1)%BG_COLOR.length];
int color = ColorUtils.blendARGB(from, to, positionOffset);
statisticPager.setBackgroundColor(color);
Fragment and ViewPagerAdapter
각 직군에 해당되는 연봉 페이지는 Fragment로 구현되어 있습니다. 생성되어야 할 페이지 수는 직군에 따라서 10개 이상 생성되어야 할 수도 있습니다. 모바일 디바이스에서 가장 고려해야하 할 사항인 메모리 이슈가 생길 수 있다고 판단하여 Fragment 의 인스턴스 생성 개수를 결정하는 ViewPager의 OffsetScreenPageLimit값은 기본 값인 1을 이용하였으며, 각 Fragment는 savedInstanceState를 활용하여 불필요하게 API가 많이 요청되는 것을 최소화하기 위하여 FragmentPageStateAdapter 를 이용하여 구현하였습니다.
SavedInstanceState 는 서버에서 응답받은 객체를 재사용하는데, 원티드 앱에서는Parceler 라이브러리를 이용하여 간편하게 사용중입니다. 단, SavedInstanceState로 유지할 수 있는 데이터의 한계가 있으므로 만약 상태 저장 시 마지막으로 표시되고 있던 job list 의 수가 일정 수 이상일 경우에는 API를 다시 호출하고 페이징 하는 형태로 작업 하였습니다.
@Override
public void onSaveInstanceState(Bundle outState) {
// Fragment Recreate 시 API 재사용 여부
if(items.size() < MAX_CACHE_SIZE ) {
outState.putParcelable(STATE_PAGER, Parcels.wrap(pager));
outState.putParcelable(STATE_SALARIES, Parcels.wrap(salaries));
// and other state save
}
super.onSaveInstanceState(outState);
}
Chart UI 표시
다행히도 iOS버전에서 사용한 차트 라이브러리는 Android 앱들도 많이 사용하고 있는 MPAndroidChart Library 와 태생이 같은 라이브러리였습니다. (Thanks to Philipp Jahoda) 차트의 경우 직접 구현하는데 있어 개발 및 유지보수가 너무 큰 비용이 발생되므로 라이브러리 적용을 생각하고 있던 차여서 작업 시작전에 한시름 놓고 시작할 수 있었습니다.
차트 종류는 굉장히 많은데, 그중 원티드 앱에서는 그 중에서도 BarChart 형태를 이용하였으며 작업 간 처리했던 몇 가지 삽질기록을 정리하였습니다.
- y축 정보는 left, right 두 개가 모두 존재한다.
Y축을 그리기 위한 정보를 담고있는 객체가 BarChart 에서 좌/우축 정보를 모두 가지고 있었습니다. (iOS도 동일했습니다.) 따라서, 라벨을 표시한다던가 GridLine을 표시하지 않는 부수적인 처리를 좌/우축 객체에 모두 세팅을 해줬어야 했습니다.
YAxis yAxis = chart.getAxisLeft();
yAxis.setDrawLabels(false);
yAxis.setDrawGridLines(false);
// etc ...
yAxis = chart.getAxisRight();
yAxis.setDrawLabels(false);
yAxis.setDrawGridLines(false);
// etc ...
- 각 데이터 영역 (바) 선택 처리
각 차트 영역 데이터 설정을 하려면 차트에서 제공되는 아래 메소드를 설정해주고, 선택 시 callback 을 구현해야 합니다.
chart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
@Override
public void onValueSelected(Entry e, Highlight h) {
Object item = (Object)e.getData();
textView.setText(item.toString());
}
@Override
public void onNothingSelected() {
// Nothing Selected
}
});
해당 라이브러리는 모든 데이터를 Entry 로 사용하게 되는데, 사용자 인터렉션, 데이텨 표시 형식 등에 대한 정의 모두 Entry 정보를 바탕으로 정의해서 사용해야 하기 때문에 초기 데이터 설정하는 flow 에서 많은 삽일을 할 수 있습니다.
- 선택 시 Marker 표시 작업
Chart 에 marker를 설정할 수 있는 기능이 있습니다. 특정 바가 선택 되면 별도의 마커를 그려줄 수 있는 기능을 지원해주는 것인데, 아래와 같이 refreshContent, getOffset 함수를 구현해주면 가능합니다.
chart.setMarker(new SalaryMarker(getActivity()));
...
public class SalaryMarker extends MarkerView {
private final Context context;
private SalaryMarker(Context context) {
super(context, R.layout.salary_chart_marker);
this.context = context;
}
@Override
public void refreshContent(Entry e, Highlight highlight) {
// update marker data to UI
}
@Override
public MPPointF getOffset() {
return MPPointF.getInstance(getXOffset(), getYOffset());
}
public int getXOffset() {
// this will center the marker-view horizontally
return -(getWidth() / 2);
}
public int getYOffset() {
// this will cause the marker-view to be above the selected value
return -getHeight() + 30;
}
}
실제 마커가 그려지는 위치는 차트뷰에서 관리하며 그 위치를 offset 설정만 가능하기 때문에, 실제로 차트 내 각 Bar가 가지고있는 Point 위치가 약간씩 오차가 발생하는 이슈가 있입니다. BarChart 에서 그려지는 데이터 간 차이가 많이 나면 많이 날 수록 마커 위치가 맞지 않는 현상이 발생됩니다. 이 부분은 iOS라이브러리와 그려지는 방식이 약간 다른데 안드로이드의 경우 해당 이슈는 감안하고 진행하였습니다.
마치며
예상 연봉 서비스는 면접 제안 받기 설정 화면에서 확인이 가능합니다. 예상 연봉 정보 와 함께 관심 분야에 맞는 채용 정보도 함께 제공되니, 사용자들이 편리하고 다양한 정보를 손쉽게 찾을 수 있을 것으로 기대하고 있습니다. 면접 제안 받기 설정도 좀 더 쉽고 직관적으로 업데이트 되었는데, 면접 제안 받기를 설정하여 사용한다면 기업들이 먼저 좋은 제안을 할 수도 있습니다. 앞으로도 원티드앱 서비스에 원하는 기능을 알려주신다면 적극적으로 반영할 수 있도록 노력하겠습니다.
