[Feat] Image의 placeholder를 활용한 홈 화면 행성 이미지 렌더링 최적화

[yyypearl]

연관 이슈

close #155

개요

Image의 placeholder를 활용한 홈 화면 행성 이미지 렌더링 최적화

✅ 작업 내용

• Image의 placeholder를 활용한 홈 화면 행성 이미지 렌더링 최적화
• /planet 페이지 로딩 컴포넌트 상단 흰 여백 제거

🖥 구현 결과

• 기존 화면

default.mp4

• 수정 화면

placeholder.mp4

리뷰 요구사항

📝 기타 사항

• 일반 네트워크로 했을 때는 큰 차이가 없어보일 수 있는데, 네트워크 탭에서 고속 4G 혹은 저속 4G로 확인하면 행성 이미지가 보이기 전에 블러 처리되어 행성 없이 행성명만 둥둥 뜨지 않게 했습니다! 저번에 MS Clarity로 사용자 화면 분석해보니 메인 행성에서 이미지가 늦게 나오는 경우들이 있더라구요.. 짧은 순간이어도 좀 크리티컬 한 것 같아서 수정해보았습니다. 동적으로 blurDataUrl을 만들어오는 방법도 있는 것 같은데 왜인지 자꾸 안 되어서 (일반적인 url이 아닌, public 경로에 있는 로컬 데이터를 동적으로 받아오기 때문이 아닐지..) 각 이미지 경로별로 base64 데이터를 추출해서 constant로 관리하는 방법으로 구현했습니다. (따라서, src/constants/planetBlur.ts 데이터가 좀.. 아니 매우 길어요!!)
• 그리고 위에서 얘기한대로 planetBlur 데이터가 크기가 좀 있다보니 LCP가 오히려 조금 늦어지는 것 같기도 한데, 좀 더 좋은 방식이 있는지 보고 추후 유저 경험도 살펴보면서 어떤 걸 우선적으로 고려할지 결정해 그에 따라 바꿔도 좋을 거 같아요!

[github-actions]

🎉 Deploy Preview

https://lettering-3t71o3rcb-yyypearls-projects.vercel.app
여기에서 배포 결과 확인하기