/HeyDealerClone

Primary LanguageSwift

HeyDealerClone

HeyDealer 앱의 UI를 똑같이 만들어 보겠다는 목표를 가지고 작업을 진행했습니다.

📱 기존 앱

온보딩1 온보딩2 번호판1
헤이1 헤이2 헤이3
번호판2 번호판3 -
헤이4 헤이5

📱 작업한 내용

온보딩1 온보딩2 번호판1
온보딩1번 온보딩2번 번호판1번
초록번호판 노랑번호판 커서 애니메이션
초록번호판 노랑번호판 유저 경험

🌟 핵심 키워드

  • TimelineView
  • SceneKit
  • Custom Component

온보딩 뷰

✅ 구현에 성공한 부분

  • 번호판과 버블

번호판 뒤의 몽글몽글한 버블이 Lottie일지, SwiftUI일지 고민을 많이 했습니다. Figma에서 작업한 오브젝트를 SVG로 변환한뒤 SVG를 SwiftUI의 Path 코드로 변환하는 방법을 찾아 해당 Path와 TimelineView를 이용해 몽글몽글함을 표현해 봤습니다.

번호판의 경우 이후에도 계속 등장하는 것으로 유추해 볼 때 SwiftUI일 것이라 판단해 shadow와 innerShadow를 활용해 3d 오브젝트 느낌을 줬습니다.

제자리에서 도는 애니메이션의 경우 position과 geometry를 이용해 구현했습니다. 이 때 애니메이션이 제대로 렌더링되지 않는 현상이 나타났습니다.

rotation3dEffect로 한번 감싸주니 전체 오브젝트가 3d object 묶여서 그런지 애니메이션이 정상적으로 렌더링 됐습니다.

❌ 구현하지 못한 부분

  • 차 애니메이션
  • 웹뷰 하단 바 로딩 애니메이션

동의하고 시작 버튼을 누르면 로우폴리 오브젝트가 등장하고 번호판이 애니메이션 됩니다. 영상일지, 실제 3d object일지 고민을 하다 USDZ 파일을 Scene 뷰로 전환 후 애니메이션을 줬습니다. 이후에 등장하는 번호판 애니메이션은 앞전에 작성한 오브젝트를 사용했습니다.

이렇게 구현을 한 뒤 두가지 문제점들을 발견해 구현에 성공하지 못했다고 판단했습니다.

  1. 앱에 단 한번 등장하는 애니메이션을 위해 20mb라는 리소스가 낭비 된다.
  2. 차가 사라지고 난 뒤의 번호판 애니메이션이 디바이스별로 height를 맞추지 않는다면 이후의 애니메이션과 연결되지 않는다.

과연 온보딩 애니메이션이 영상이었을지, 오브젝트였을지 아직도 궁금합니다.

내차 팔 때 탭

✅ 구현에 성공한 부분

  • 번호판 텍스트 필드

현재 텍스트 필드의 폰트 크기가 동적으로 변하고 있습니다.
숫자일 경우 폰트가 크고, 글자일 경우 폰트가 작습니다.

SwiftUI TextField의 경우 해당 기능을 지원하지 않기 때문에

  1. UITextField를 UIViewRepresentable로 감싸서 구현을 먼저 시도해봤습니다.

폰트가 동적으로 변하게 됐지만 Layout에서 문제가 발생한다는 걸 발견하게 되었습니다.

  1. 위와 같은 문제로 다른 방법을 고민해보게 되었습니다.

앱의 UI를 자세히 들여다보다 기존의 TextField와 조금씩 다른 부분들을 발견했습니다.

  • 커서의 굵기가 다르다. 기본 TextField의 커서보다 통통.
  • 텍스트 필드의 경우 커서가 on이 된 상태에서 한번 더 탭을 하게 되면 blink가 초기화 되야 하지만 그렇지 않음.
  • 절대적인 타이밍으로 커서가 blink 되고 있고
  • 복붙 액션도 켜져 있지 않다. (기존 텍스트필드도 override하면 가능하긴 하지만)
  • 폰트가 커졌다 작아질 때 커서가 애니메이션이 되고 있다.

여기서 힌트를 얻어 직접 TextField Like 뷰를 구성해보게 되었습니다.

TextField를 보이지 않게 처리 한 후,
커서처럼 깜빡이는 rectangle에 애니메이션을 주는 방법으로 구현해보게 되었습니다.

제일 시간이 많이 걸리고 Challenging하게 느껴졌던 부분은
번호판 규칙을 구현하는 부분이었습니다.

  • 숫자로 시작할 때와 한글로 시작할 때 다른 layout
  • 중간 한글이 바,사,아,자 들어가면 yellow 번호판
  • 한글로 시작하고 위의 케이스 이외에 종성이 나오면 green
  • 이외엔 normal 번호판

string을 필터링하는 것과 더불어 케이스에 맞는 UI를 보여주는 것에
시간이 다소 소요되었습니다. 어떻게 하면 더 효율적으로 필터링과 UI구성을 해볼 수 있을지 아쉬움이 남습니다.

  1. UX 개선

string에 입력 가능한 텍스트를 필터링할 때
제대로 된 입력이 아닐 경우 커서 애니메이션을 살짝 줘서
잘못된 입력이라는 걸 유저가 인지할 수 있게 할 수 있지 않을까 생각해보게 되었습니다.

❌ 구현하지 못한 부분

번호판 입력이 완료되고 나면 토스트 뷰가 등장한 이후에
API요청을 통해 데이터를 가져오는 것으로 유추했습니다.

Firebase이외에 Alamofire나 Moya를 사용한 네트워킹 작업은 아직 경험이 없어 조금 더 친숙해진 이후에 작업을 진행해야겠다는 판단을 했습니다.

그리고 공공 데이터 중 차량 번호 조회 api를 발견했습니다.

https://www.data.go.kr/data/15071233/openapi.do
https://www.car365.go.kr/web/contents/usedcar_carcompare.do

어떻게 하면 원하는 데이터만 요청해 가져올 수 있을지도 고민이 되었습니다.