[Week3] 주영

[woodzverse]

📝 학습 내용 요약

• 반응형 카드 레이아웃을 기반으로 다양한 로딩 UI(Spinner, SVG, Skeleton)를 구현했습니다.
• CSS 애니메이션, SVG 기본 문법, 스켈레톤 shimmer 효과 등 로딩 단계에서 UI를 구성하는 다양한 방식을 실습했습니다.
• 추가로 8장 대시보드 레이아웃 일부도 진행하면서 Grid, 반응형 구조, 다크모드 스타일링 개념을 적용해봤습니다.

---

📁 실습 파일 설명

6-1 Spinner UI
-01_spinner_ui : 반응형 카드 레이아웃 + CSS 기반 spinner(DELAY * (idx + 1) 로 카드가 순서대로 로딩되는 구조 구현)

6-2 SVG 로딩 UI

• 02_svg_ui : <circle>, stroke-dasharray, <animate>를 활용한 SVG 로딩 애니메이션

6-3 Skeleton UI
-03_skeleton_ui : 카드 구조 기반의 Skeleton UI 구현
-linear-gradient로 shimmer 효과 구현

8장 Dashboard

• Grid 기반 레이아웃 + 섹션 내부 스크롤(overflow-y: auto) 처리
• 다크/라이트 테마 구조 정리

---

🌟 느낀 점 & 피드백

• 이번 주 실습들이 전부 로딩 UI라는 공통점이 있어서 한 흐름으로 정리하기 좋았어요.
• 특히 skeleton shimmer 효과는 실무에서도 많이 보여서 직접 구현해본 게 의미 있었습니다.
• 8장은 아직 마무리 전이지만, 레이아웃 구조를 다시 잡아보는 데 도움이 됐습니다.
• 전체적으로 인터스 실습이 실제 프로젝트랑 구조가 비슷해서 배운 걸 바로 써먹을 수 있을 것 같아요!
• (커밋할 때 오류가 있어서 저번에 실습한 파일까지 커밋이 같이 올라간 것 같아요ㅠㅠ)