[#110] 이미지 로딩 중 배경 색상 표시

[cskime]

📝 작업 내용

• 롤링 페이퍼 배경 이미지를 로딩 중에 색상을 미리 보여줍니다.
• 프로필 이미지를 로딩 중에 스켈레톤 로딩 animation을 보여줍니다.

📷 스크린샷 (선택)

👀 새로 알게 된 내용 (선택)

• Content 로딩이 끝나지 않았을 때, content가 나타날 위치와 형태를 미리 보여주는 방식으로 스켈레톤 애니메이션을 주로 사용합니다.
• 프로필 이미지와 배경 이미지로 사용하는 picsum 이미지는 로딩에 시간이 오래 걸리기 때문에 스켈레톤 애니메이션을 적용하기 좋은 케이스입니다.
• css 속성들을 이해하면서 Skeleton 만들기 블로그 글을 참고해서 구현했습니다.
• 스켈레톤 애니메이션을 구현하기 위해 필요한 주요 CSS 속성들은 아래와 같습니다.
  • background : linear-gradient를 설정해서 스켈레톤 애니메이션으로 보여줄 배경을 설정합니다.
  • background-size : gradient 배경의 가로 너비를 크게 늘립니다. 늘어날 배경을 움직여서 애니메이션을 구현합니다.
  • background-repeat : no-repeat으로 설정해서 background가 하나만 표시되도록 합니다.
  • background-position : gradient 배경을 animation으로 이동시킵니다.

💬 리뷰어에게 남길 말 (선택)

• @nidor022 님이 만드셨던 spinner 로딩 애니메이션이 작은 프로필 이미지에 사용하기 어려울 것 같다고 생각돼서 스켈레톤 애니메이션을 따로 구현해 보았습니다.
• 혹시 이미지를 로딩하는 부분에 spinner가 어울리지 않는다면 이 애니메이션을 적용해 보아도 좋겠습니다.

[cskime]

남은 작업을 빠르게 완료하기 위해 리뷰 없이 병합합니다.