부트캠핑앱은 인스타그램처럼 사용자들이 캠핑장에 가서 찍은 사진을 공유하는 앱이기 때문에 이미지 처리가 중요했습니다!
저희는 유저의 사진을 Firebase Storage로 올리고, 올린 이미지의 imageUrl을 받아서 사용하는 구조입니다!
처음 프로토타입때는 SwiftUI에 기본으로 있는 AsyncImage()를 사용했었는데요, 써보니 로딩 속도가 느리고, 이미지 캐싱도 따로 해줘야해서 mvp부터는 제가 좋아하는 라이브러리인 SDWebImage를 활용해서 이미지를 처리했습니다!
사용법이 간편하기도 하고, 이미지 캐싱도 자동으로 해주기 때문에 같은 이미지를 여러번 부르지 않아 서버 요청도 줄일 수 있어서
Firebase 무료요금제를 사용하는 저희에게는 너무나 좋은 라이브러리라고 생각했습니다ㅎㅎ
https://github.com/SDWebImage/SDWebImageSwiftUI
GitHub - SDWebImage/SDWebImageSwiftUI: SwiftUI Image loading and Animation framework powered by SDWebImage
SwiftUI Image loading and Animation framework powered by SDWebImage - GitHub - SDWebImage/SDWebImageSwiftUI: SwiftUI Image loading and Animation framework powered by SDWebImage
github.com
(SDWebImage 문서 예제)
SDWebImage 문서에서 .placeholder에 회색뷰를 넣을것처럼
기존에는 저도 똑같이 회색 네모를 넣었었는데요
한국서버를 사용하다보니 한국에서는 로딩이 빠르게 되서 괜찮은데
미국에서는 로딩이 느려 회색 화면이 멈춰보인다는 이유로 계속 리젝이 되었었습니다!
(리젝 이미지 캡쳐)
그래서 placeHolder에 애니메이션을 넣어서 로딩중을 표시해주려고 했습니다!
처음에는 정대리님의 유튜브에서 스켈레톤뷰 강의가 있어서 봤었는데
https://www.youtube.com/watch?v=DJlLCPQoCaw
struct를 만들고 opacity, shouldShow 등을 값들을 초기화할때 넣어줘야해서 지금 부트캠핑 구조와는 맞지 않다고 생각했습니다!
저는 다른 값을 넣어주기보다는 기존에 있는 코드에 한줄만 더 추가해서 애니메이션을 넣어주고 싶었습니다.
그래서 고민고민하다가..깃허브에서 여러 스켈레톤뷰를 찾아봤고,
https://github.com/markiv/SwiftUI-Shimmer
GitHub - markiv/SwiftUI-Shimmer: Shimmer is a super-light modifier that adds a shimmering effect to any SwiftUI View, for exampl
Shimmer is a super-light modifier that adds a shimmering effect to any SwiftUI View, for example, to show that an operation is in progress. It works well on light and dark modes, and across iOS, ma...
github.com
이 분의 코드를 변형해서 쓰기로 했습니다!
일단 별도의 프로젝트로 테스트 뷰를 만들어 봤는데요
ViewModifier를 만들고, 세부적인 사항들을 만져줍니다
그리고 기존에 애니메이션 방향이 마음에 들지 않아 startPoint와 endPoint를 조정해 제가 마음에 드는 방향으로 애니메이션이 움직이도록 만들었습니다!
그리고 extension으로 View에 추가를 해주면~~
쨘~ 이렇게 별도의 초기화 없이 함수처럼 밑에 한줄 붙여주기만 하면 애니메이션이 추가되서
기존에 만든 구조에 크게 변형을 가하지 않고 간편하게 애니메이션을 추가할 수 있었습니다!
신나는 마음으로 부트캠핑 프로젝트로 돌아가
기존의 placeHolder에 .skeletonAnimation()을 추가하고,
혹시 몰라서 .indicator까지 추가해줬습니다!
(저기 .pinchZoom() 만들어서 확대도 가능하게 만들었었는데 아직 쪼금 부족하단 생각이 들어서 나중에 자세히 써보도록 하겠습니다!ㅎㅎ)
그래서 placeHolder 변천사를 보자면
1. 기본이미지에 인디케이터 넣기
2. 기본이미지에 가로 애니메이션 + 인디케이터 넣기
고민하다가 회색뷰가 깔끔한것 같아서
최종적으로 회색뷰 + 대각 애니메이션 + 인디케이터로 최종결정해서 만들었습니다!
저는 제일 나은 것 같은데 어떠신가요ㅎㅎ
그래서 이제는 진짜 1.1 업데이트 가자~!~!라고 신청했고,
드디어 드디어 최종적으로...!!
1.1 업데이트를 성공했습니다~!
몇번 까이다가..축하메일을 받으니 기쁨이 더 큰 것 같아요!!
앞으로도 열심히 도전해보겠습니다!
화이팅화이팅!!
