[스켈레톤 UI] - 화면 깜빡거림 해결 (3차 팀프로젝트 리팩토링 #첫 번째) ⚙️

간략한 팀프로젝트 소개

  • 카카오 지도 api를 이용한 등산 관련 커뮤니티 플랫폼
  • 특정 산에 같이 등산할 사람을 모집하고, 신청할 수 있다. (벙개)

💡 화면 깜빡거림

벙개 상세페이지에서 필요한 api 데이터는 다음과 같다. 

  1. 상세 페이지 데이터
  2. 상세 페이지 데이터에 등록된 산 데이터
  3. 상세 페이지 데이터에 등록된 신청자 목록

3번의 네트워크 요청을 필요로 한다. 신청자 목록(3번) 같은 경우 join 으로 불러오려 했으나 `json-server`를 사용했고 공식문서를 참조하여 join을 시도해봐도 빈 배열로만 데이터를 불러와지고 해결이 안되어 어쩔 수 없이 한 번 더 불러오는 과정을 거쳤다. 

 

🚨문제점

사용자가 상세페이지를 들어오면 네트워크 요청이 처리되고 리렌더링이 발생하면서 화면이 깜빡거리는 모습을 볼 수 있다.  별거 아닐 수도 있지만 보다보면 생각보다 많이 거슬린다.


💡 해결 방법

생각보다 매우 간단하게 해결했다. 상세페이지와 동일한 UI의 `스켈레톤UI`를 만들어 놓고 `pending` 상태 동안 `스켈레톤UI` 를 렌더링 시켜주었다. 동일한 UI를 뿌려주게 됨으로서 깜빡거리는 현상은 완전히 사라졌다.

 

📍 변경 목적

실제 서비스처럼 완벽한 웹서비스를 제공할 수는 없었지만 최소한의 디테일은 챙기고 싶었다. 아주 잠깐 깜빡거린다고 서비스에 문제가 생기지는 않지만 당장 개발자인 내 눈에도 거슬리는데 실제 사용자라면 많이 거슬릴 것 같아 해결해보았다.

 

 

`로딩 스피너`는 적용해본적이 있지만 `스켈레톤UI`를 적용하는건 처음이다. 하지만 아주 짧은 시간이라면 `로딩 스피너`보다 훨씬 효과가 좋은 것 같다. (스피너는 깜빡거림이 생김) 어떤 상황에 어떤 기법을 사용해야 하는지 바로 감이 와서 만족했던 작업이다.

댓글

Designed by JB FACTORY