css - 스켈레톤 UI css 만으로 구성하기 with react

css

:스켈레톤 UI css 만으로 구성하기

| Why ?

특정 페이지를 개발할때, 로딩 스켈레톤을 구현해야 하는 상황이 있었습니다. 이 ui를 구현하기 위해 여러 라이브러리를 사용할 순 있겠지만, 이런 라이브러리들로 인해 프로젝트의 크기가 늘어나고, 불필요한 리소스 낭비가 될 수 있다는 생각도 들었습니다. 따라서, css만으로도 충분히 스켈레톤 ui를 구성 할수 있다 생각되어 css로 스켈레톤 ui, 그리고 그에대한 애니메이션을 구현해 보았었습니다. 

아래는 구현한 여러 스켈레톤 ui중 특정 페이지의 모바일 리스트 뷰에 해당하는 디자인 시안에 맞춰 본인이 구성한 UI입니다. UI를 구성하는 방식은 background-image 와 background-size css 속성을 활용해 임의의 스켈레톤 ui를 구성하여 수정해 사용하면 됩니다. 

• background-image 로 각각 요소들의 크기를 정해줌
• background size로는 그 요소들의 위치를 정해줌

| How ?

1. 아래와 같이 구성할 뼈대를 만듭니다.

2. 반복되는 부분이 있다면 반복해 줍니다.

3. 뭔가 아쉬우니 효과를 넣어 봅시다.

위와 같이 html과  css 만으로 스켈레톤 ui를 구현하면, 리액트 프로젝트의 번들사이즈 역시 다른 라이브러리를 사용해서 스켈레톤을 구현할때와 비교해 줄어들었고, 처음에는 레이아웃을 구성하는데 학습 비용이 있긴 하겠지만 익숙해지면 어떠한 스켈레톤 ui라도 유연하게 구현할 수 있겠다는 생각이 들었습니다. 

위 예시로는 모바일 특정 화면에서만 구현한 스켈레톤 ui를 예시로 보여주었는데요, 같은 화면에 대한 여러 반응형 뷰에대한 스켈레톤 UI 역시 css 단에서 미디어 쿼리로 반응형 대응만 한다면 한 화면의 해상도에 따른 여러 스켈레톤 ui도 html파일 하나와 css 파일 하나로도 충분히 대응이 가능하였었습니다.

또한 , 다른 여러 페이지에서도 같은 방식으로 스켈레톤 ui를 쉽게 구현할 수 있었습니다. :)