프로젝트를 진행한지 이제 1달하고 반이 지났다.
프로젝트를 진행하면서 우선순위로 두었던 것은 기능 구현이었다.
시작할 때 어려워 보였던 인게임 기능이나, 사진 편집하는 기능들도 구현하였다.
(최적화를 해야한다..)
이제는 서비스를 하기 전에 목표로 리팩토링하여 디테일들을 잡아주는 작업들을 할 것이고, 깃헙 이슈를 통해 내용들을 정리하였다.
오늘은 이중에서 완료한 스켈레톤 UI로 화면 개선하기에 대해 정리하겠다.
문제점
현재에는 초기 로딩 시 로딩중입니다.. 라는 문구가 뜨고 그 이후에
이상형 월드컵 목록이 업데이트 된다.
(윈터랑 카리나가 이상하다..)
평소라면 1~2초 잠깐 보여주는 로딩화면이지만,
데이터가 늦게 들어올 때는 유저에게 로딩화면이 별로였다.
로딩화면만 잘 꾸며도 유저의 답답함을 해소시켜줄 수 있고,
기다리는데 거부감이 줄어든다고 한다.
그래서 내가 선택한 방법은
스켈레톤 UI이다.
1월 프로젝트에서 같은 팀원분이 사용하셨는데,
그때는 라이브러리를 사용하였다.
하지만 나는 라이브러리보다 직접 구현해보고 싶었고,
검색을 통해 찾아볼 수 있었다.
TranslateX를 이용한 Skeleton UI
위처럼 TranslateX를 이용하면 X축으로 넘어가는 애니메이션을 구현할 수 있다.
아래 코드를 추가하면 구현이 된다.
.element {
overflow: hidden;
position: relative;
}
하지만.. 마음에 들지 않았다.
그래서 좀더 찾아보기로 하였다.
Opacity를 이용한 Skeleton UI
더 찾아보니
Opacity를 이용하여 구현한 방법이 있었다.
아래의 코드 샌드박스를 참고하였고,
https://codesandbox.io/s/github/amitkhonde/skeleton-loading-demo/tree/main/?file=/src/styles.css
이를 통해 적용하였다.
이 디자인이 마음에 들어서 사용하였다.
끝으로
스켈레톤 UI를 찾아보니 로딩 시간 유저에게 어떤 경험을 주어야하는지 중요성에 대해 다시금 알게 되었다.
로딩 시간을 어떻게 하냐에 따라 유저 경험이 정해질 정도로 중요한 부분이고,
계획한대로 나와서 기분이 좋았다.
1월만해도 스켈레톤 UI가 어려운 기술처럼 느껴졌는데,
자신감이 뿜뿜해서 머든 만들 수 있을 것 같다.
하지만 더 작은 디테일과 퀄리티를 높이는 것이 필요하다
고생하셨습니다 !