[Figma] 002. 하우머치 메인 화면 UI 클론 디자인

RAEYA·2023년 11월 3일
0

UI 모작 모음

목록 보기
2/5
post-thumbnail

서비스 소개

2019년에 출시된 '하우머치'는 간편하게 근무 스케줄을 등록하고 급여, 각종 수당, 세금 등을 자동으로 계산하여 사용자가 이번 달 수익을 쉽게 확인할 수 있도록 도와주는 모바일 앱 서비스이다. 부가적으로 아르바이트생들의 익명 커뮤니티로 사용자들간의 소통 공간도 함께 만들었다.

서비스 특징

아르바이트 월급은 시급과 일한 날짜뿐만 아니라 주휴 및 야근 수당, 추가 수당, 4대 보험 적용 여부 등 고려해야 할 사항이 정말 많다. 아르바이트를 하나만 하는 것이 아니라 여러 개를 동시에 하고 있을 경우에는 월급 계산이 더 복잡해지곤 한다. 이럴 때마다 일일히 계산기를 두드리고 있는 것은 매우 귀찮고 번거로운 일일 것이다.

하우머치는 이러한 아르바이트생들의 불편함과 번거로움을 최소화하고자 출시된 앱이다. 메인 화면에서는 근무지 명근무 기간, 이번 달 월급을 한 눈에 파악할 수 있다. '출근' 및 '퇴근' 버튼을 통해 자동으로 근무 시간을 측정할 수 있으며 '근무 등록'으로 근무 날짜 및 근무 시간, 휴게 시간, 각종 수당 등을 수동으로 기록할 수도 있다. 여러 개의 근무지에서 일하게 될 경우 '근무지 추가'로 새로운 근무지를 추가하고 '근무지 순서 변경'을 클릭하여 각 근무지의 우선 순위에 따라 순서를 변경할 수도 있다.

서비스 UX/UI 분석

좋았던 부분

  • 사용자가 원할 만할 대부분의 기능을 메인 화면에서 처리할 수 있었다.
  • 그러면서도 디자인이 심플하여 가독성이나 사용 측면에서 큰 어려움이 없었다.
  • 사실 이 앱에서 가장 중요한 부분은 '이번 달 내가 받을 돈이 얼마인가?'하는 부분이라고 생각한다. 그런 측면에서 이번 달 월급을 표시하는 텍스트가 큰 사이즈로 디자인되어 텍스트의 중요도를 잘 표현했다고 생각했다.

아쉬웠던 부분

  • 우측 상단 '전구' 아이콘을 누르면 무엇이 나올 것이라고 생각하는가? 나는 '앱 사용 가이드' 혹은 '아르바이트 정보' 등이 나올 것이라고 생각했으나, 실제로 해당 아이콘을 누르면 '유료 버전 구매''광고 제거 리워드'가 표시된다. 참고로 내가 예상했던 '앱 사용 가이드'는 앱 내에서 구현되지 않았으며, '아르바이트 정보'는 네비게이션 바의 '정보'를 클릭해야 볼 수 있다. 이러한 측면에서 사용자는 혼란을 겪을 수 있다고 생각했다.
  • '출근' 및 '퇴근' 버튼은 클릭 한 번으로 근무 시간을 기록할 수 있다는 점에서 매우 편리하다고 생각할 수 있다. 하지만 막상 사용해보면 편리하지만은 않다. 오히려 불편한 부분이 많다.
    예를 들어, 시급이 10,000원인 근무지에서 10시부터 18시까지 근무하는 사용자가 있다고 가정해보자. 이 사용자는 오늘 근무지에 9시 53분에 도착해서 18시 2분에 퇴근했다. 출근 및 퇴근 버튼은 근무지에 도착하고 퇴근한 시간인 9시 53분과 18시 2분에 클릭했다. 이 때 우리는 일급이 80,000원으로 계산될 것이라고 생각하지만, 실제로 앱에서는 81,500원으로 계산된다.
    어찌 보면 '정확하게 계산한다'고 생각할 수도 있지만 대부분의 현실에서 이런 경우 80,000원으로 일급이 계산되기 때문에 나는 이 기능이 '현실적인 계산'을 하는 데에 있어서 오히려 매우 불편하다고 생각한다.

회고

위클리 클론디자인 챌린지 시작

UXUI디자인 프리랜서 '꽃내랑'님이 홀릭스(HOLIX)에서 운영 중이신 '위클리 클론디자인 챌린지'에 가입하게 되었다. 챌린지 운영 방향성이 내가 추구하는 공부 방향과 잘 맞았고(예를 들면, 빈 페이지에서 대부분의 요소를 직접 처음부터 만들어 보는 것), 다른 분들의 클론 디자인을 보면서도 얻는 부분이 많을 것이라는 기대였다. 이번 클론디자인은 챌린지 가입 후 첫 UI 클론 디자인이다.

금주 수요일에 가입하여 일요일까지 챌린지를 진행해야 하는 상황이었는데, 주말에 약속과 근무가 잡혀 버려(...) 챌린지를 진행할 시간이 이틀밖에 없었다. 따라서 저번 모작처럼 여러 페이지와 인터랙션을 만들 시간이 부족하여 메인 화면만 만들게 된 것이 아쉬웠다. 다음 주는 메인 화면 1장과 서브 화면 1장정도를 따라해보고 간단한 인터랙션까지 만들어보고 싶다.

잘했다고 생각한 부분

  • 생각보다(!) 전체적인 큰 틀의 사이즈를 잘 잡았다. 다만 그 안에 들어가는 요소의 사이즈나 간격에서 오류가 많이 발생했다. 앞으로는 이런 세세한 부분을 더 신경써야 할 것 같다.

가장 어려웠던 부분

  • 위에서 언급했던 것처럼, 간격을 맞추는 부분이 제일 어려웠던 것 같다. 앞으로 이 어려움을 해결하기 위해서는 단순히 따라만 하고 끝내는 것이 아니라, 실제 화면과 내가 만든 화면을 겹쳐 보고 실제 화면의 간격을 체크해 보는 과정이 필요할 것 같다고 생각했다. 이렇게 비교해 보니 내가 만든 화면은 컴포넌트 간의 간격보다는 그 안의 텍스트, 아이콘 등 각종 요소의 간격이 가장 심각(..)하다는 것을 한 눈에 파악할 수 있었다. 컴포넌트를 만드는 데에 아직 익숙치 않다는 이유도 있을 것 같다. 다음 모작에서는 이 부분에서 가장 많이 고민해야 할 것 같다.
  • 내가 만든 화면이 실제 화면보다 더 쨍하고 밝은 느낌이 있는 듯하다. 다음 모작에서는 실제 화면에서 컬러를 추출한 결과와 내가 설정한 컬러를 비교해보며 어떤 차이가 있는지 자세하게 공부해보고 싶다.
profile
UX/UI DESIGN

0개의 댓글