Contact

📧 Email

[email protected]

🧑🏻‍💻 Github

https://github.com/Parkjju

📗 Blog

https://parkjju.github.io/vue-TIL/

iOS Skills

Swift, Alamofire, RxSwift, RxDataSources, SnapKit, Then, RxBlocking, RxTest, SwiftUI

Introduce.

UI/UX 개선을 좋아하는 개발자입니다.

타사 앱 사용 과정에서 좋았던 UI/UX를 벤치마킹하여 직접 구현하는 것을 좋아합니다. 프로젝트 포즈피커의 이미지 업로드 화면에 iOS 자체 앨범 앱의 이미지 확대, 축소 및 닫기 UI를 추가한 경험이 있습니다. 또한 포즈피드 기능에 무한 스크롤 구현 과정에서 JSON 데이터 요청과 이미지 요청 태스크를 분리하여 체감 로딩 시간을 개선한 경험이 있습니다.

문제 파고들기를 좋아하는 개발자입니다.

Kingfisher 라이브러리 도입 근거를 정의하기 위해 내부 코드 동작 과정을 정리하고 정량적인 데이터 측정을 통한 성능 차이를 비교 및 정리하였습니다. 캐시 미스, 디스크 캐시, 메모리 캐시 세 동작 과정을 확인하고 캐시 미스 이후 네트워크 통신 과정에서 소요되는 시간을 측정하였습니다. 또한 Alamofire를 활용한 네트워크 통신 과정에서 JWT 토큰과 관련하여 발생한 동시성 문제를 RxSwift를 활용하여 해결한 뒤 Swift Forum에 게시한 경험이 있습니다.

Experience.

포즈피커 - 네컷포즈 추천 앱

🔗 AppStore

2023.10 ~ 진행 중

• OAuth를 활용한 소셜 로그인 구현 (애플, 카카오 로그인)
• MVVM-C 아키텍처 도입
  • 테스트 가능한 코드 작성을 위해 클린 아키텍처 도입을 결정하였으며 전체 코드 리팩토링을 진행하였습니다.
  • Domain 계층에 유스케이스 프로토콜 & 클래스 구현
  • Data 계층에 레파지토리 프로토콜 & 클래스 구현
  • 뷰모델을 프로토콜로 정의하여 Presentation계층에서는 실제 구현체를 작성하고 테스트 코드에서는 목업 클래스를 작성하도록 아키텍처 설계
  • UIPageViewController 델리게이트 함수 호출 시 코디네이터 클래스의 화면 관리 메서드가 호출되도록 구조 설계
  • 유스케이스, 뷰모델 테스트 코드 작성 및 코드 커버리지 100% 달성 (테스트 코드 라인 수 4,600라인)
• Kingfisher 코드가 사용된 뷰 테스트 환경 구축
  • 캐시 미스 발생시 Kingfisher는 네트워크를 통한 이미지 다운로드를 자동으로 진행하는데, 외부 환경에 독립적이어야 하는 테스트 코드 규칙에 위반됨
  • Swift의 URLProtocol을 채택한 목업 URL 프로토콜 클래스를 Kingfisher ImageDownloader에 주입
  • 테스트 환경에서 프로젝트 로컬 디렉토리에 저장되어 있는 이미지를 반환하게 되어 테스트 환경 구축 완료
• Kingfisher 라이브러리 성능 테스트
  • Kingfisher 라이브러리를 써야 하는 근거를 정리하기 위해 정량적인 데이터를 추출 및 정리하였습니다.
  • 캐시 미스 시 네트워크를 통한 S3 버킷 이미지 다운로드 소요시간과 디스크 캐시 히트 & 메모리 캐시 히트 시간 추출 및 비교
    • 캐시 미스 이후 컨텐츠 다운로드 소요 시간 측정을 위해 Wireshark를 활용하여 내부 패킷 정보 확인
    • 암호화된 패킷 정보로 인해 Charles Proxy 툴을 활용하여 로컬 호스트 맥북을 Proxy 서버로 활용
    • Charles CA 자체 인증서 설치 및 신뢰를 통해 내부 패킷 정보 복호화
    • Charles SSL Proxy 기능을 통해 이미지 다운로드 소요 시간 및 네트워크 속도를 추출하여 캐시 히트시 데이터 액세스에 소요되는 시간과 비교 (Swift의 ****ContinuousClock API 활용, ****시스템 시간 측정)
    • 메모리 캐시 < 디스크 캐시 < 캐시 미스 순서로 소요 시간이 느린 것을 확인하였으며, 킹피셔 라이브러리 코드가 정상적으로 동작함을 확인
    • 디스크 캐시와 메모리 캐시의 경우 소수점 0.01 이하의 접근 시간 차이가 발생하여, 포즈피드 기능에는 메모리 캐시가 아닌 디스크 캐시를 적용하기로 결정 (메모리 부하 문제 고려)
• UX 개선
  • 페이지네이션이 적용된 데이터 UI 바인딩 구조 개선
  • 개선 전: 페이지네이션 8개 데이터의 S3 버킷 이미지 전체 다운로드가 완료될 때 까지 로딩 → 다운로드 소요 시간이 가장 긴 이미지에 의존적인 구조
  • 개선 후: JSON 데이터 로드 이후로는 이미지 다운로드 태스크를 각 셀에서 독립적으로 진행하도록 구조 개선
    • 각 셀에 imageURL 값을 갖는 BehaviorRelay를 구독한 뒤 캐시 접근 진행
    • 캐시 미스 시 Kingfisher 이미지 다운로드 태스크 생성
    • prepareForReuse 호출 시 이미지 다운로드 태스크를 취소하여 잘못된 이미지 UI 바인딩 문제 해결