2025 React Master Class - 15강: 스켈레톤 UI로 대략적인 레이아웃 구성하기
- 스켈레톤 UI를 사용하여 토픽 콘텐츠의 대략적인 레이아웃을 구성하고 UI의 전체적인 느낌을 미리 파악 뼈대를 잡음. 🏗️
- 핫토픽과 뉴토픽 섹션으로 나누어 UI를 구성하고, 각 섹션별 제목과 설명 추가. 📝
- CSS 그리드 속성을 활용하여 토픽 UI를 유연하게 배치하고, 반응형 디자인 적용. 📱
- 스켈레톤 UI 컴포넌트를 생성하여 로딩 시 보여줄 UI를 미리 정의하고, 사용자 경험 개선. ⏳
- 컴포넌트 재사용성을 높이기 위해 index.ts 파일을 활용하여 컴포넌트 관리. 🗂️
- GIF 이미지를 활용하여 UI에 생동감을 더하고, 사용자에게 시각적인 즐거움을 제공. 🖼️
- 스켈레톤 UI를 통해 초기 UI 개발 단계에서 전체적인 디자인 방향성을 설정하고, 개발 효율성 향상. 🧭
- 핫토픽 섹션에는 아바타, 닉네임, 속성 값 등이 들어가는 스켈레톤 UI를 구현하여 상세 정보 표시 영역 구성. 👤
- 뉴토픽 섹션에는 둥근 카드 형태의 스켈레톤 UI를 구현하여 새로운 토픽 강조. 📰
- 스켈레톤 UI를 활용하여 로딩 중에도 사용자에게 긍정적인 인상을 주고, 앱의 완성도를 높임. ✨