Live Design: Let's design Advent of Astro
- 발표자는 12월 동안 Astro 학습을 돕기 위한 'Advent of Astro' 프로젝트를 설계 중입니다. 🧑💻
- 이 프로젝트는 Astro를 배우는 사람들에게 구조화되고 재미있는 학습 경험을 제공하는 것을 목표로 합니다. 🚀
- 로그인 절차 없이 무료로 제공하여 접근성을 높이고 판매를 위한 것으로 보이지 않도록 합니다. 🎁
- 챌린지 기반 학습 방식을 채택하여 사용자들이 직접 참여하고 실습할 수 있도록 유도합니다. 🎯
- Neo brutalism.dev 라이브러리를 활용하여 디자인을 구상하고 있으며, Shadian UI를 기반으로 합니다. 🎨
- 모바일 우선 디자인을 고려하여 사이드바와 메인 콘텐츠 영역을 구성하고, 데일리 이메일 구독 기능을 제공할 예정입니다. 📱
- 기존 랜딩 페이지를 개선하고, 자주 묻는 질문(FAQ) 섹션을 추가하여 사용자 편의성을 높입니다. ❓
- Figma를 사용하여 디자인 작업을 진행하며, 컴포넌트들을 배치하고 시각적인 요소를 조정합니다. ✏️
- 진행 상황을 표시하는 프로그레스 바와 완료 상태를 나타내는 UI 요소를 추가하여 사용자가 학습 과정을 추적할 수 있도록 합니다. 📊
- 디자인에 너무 많은 시간을 투자하기보다는 코딩을 통해 실제 작동하는 모습을 확인하는 것을 선호합니다. ⌨️
- Tailwind CSS와 PCEL을 사용하여 프로젝트를 설정하고, Astro에 필요한 React, Sitemap 등의 기능을 추가합니다. ⚙️
- Zed 에디터를 사용하여 코딩 작업을 진행하며, 컴포넌트 라이브러리를 설치하고 필요한 UI 요소들을 가져옵니다. 💡
- 전역 스타일을 설정하고, 레이아웃 컴포넌트를 만들어 사이트의 기본 구조를 구성합니다. 🌐
- 사이트 제목과 설명을 전역 데이터 파일에서 가져와 동적으로 표시합니다. 📝
- 탐색 메뉴(Nav) 컴포넌트를 생성하여 사이트 내 이동을 용이하게 하고, 필요한 UI 컴포넌트들을 추가로 설치합니다. 🧭